Monday, 28 January 2013

#3.2 Tutorial (LibGDX & MTX) Anti-Strecth/Black Bars Formula


STRETCHING / BLACK BARS

What is the problem of all developers, definitely device resolutions. Is there a perfect fix for the problem, unfortunately NO, but we can %90-95 adopt a solution to fix this problem. Of course, there is already another solution with black bars, but we do not want that.

What are the regular resolutions, 320x240, 480x800, 960x540, 1280x720, 1920x1080 and other similar resolutions with minor changes.


If you already use the Mtx v1.0, you will see the stretch problem for the devices with different resolutions beside 800x480. But with Mtx v2.0, I created a basic idea to fix the problem.



































As you can notice Mtx v2.0 works just fine with almost perfect sizing for all devices, but Mtx v1.0 and many developers who develop games feels this stretching, it is especially noticeable with ovals, they become ellipses



APP SETTINGS 1

I will try to explain my method, do not confuse yourself, it will be more clear with next tutorials, I will explain the basic idea. I am more of live wallpaper developer than games (also developing games). This method suits me perfectly most of times for all type of devices.

Here is the idea:

You should have Target World Size to prepare your textures, I like 960x540 dimension, it is kind of bridge among all device dimensions, and you should prepare all your textures for this world dimensions.

How to do:

Simply in your graphic editor, open new file with dimensions (I chose 960x540 below), then prepare your textures, it is like creating a web page.

























APP SETTINGS 2

In my app settings class, I set the my target world (The dimension matches with my graphic editor)

WORLD_TARGET_WIDTH = 960;
WORLD_TARGET_HEIGHT = 540;

I set my real world size (I genereally use the size as device resolution, but if you want to a bigger world which is draggable around like Angry birds, you should give bigger values than SCREEN_W and SCREEN_H)

WORLD_WIDTH = Gdx.graphics.getWidth();
WORLD_HEIGHT = Gdx.graphics.getHeight();

Device screen resolutions (For example Samsung GSII SCREEN_W is 800, and Samsung G Ace SCREEN_W is 480), this is used for Scene2D stage creation in AbstractScene

SCREEN_W = Gdx.graphics.getWidth();
SCREEN_H = Gdx.graphics.getHeight();





























Basic formula

I will calculate ratio of the current device resolution with my target world size, and I will use this ratio to re-size my AbstractActors which has "DIPActive" parameter true in their constructor. (Only using width to get ratio, this is only solution at the moment)

EXAMPLE:
Htc DROID has 960x540, so my home button size will be 150x150 on that device (NO CHANGE)
Samsung Galaxy SII has 800x480, my home button will be 125x125



HOW TO IMPROVE & DRAWBACKS

Of course this is a style of resizing single textures for all devices. Some people can mention about performance problems or quality issues with device resolutions +1920x1080. So this are couple of drawbacks of using single texture for all devices.

The best idea to solve this, creating 2 textures (medium quality and high quality) for each object and rewrite app settings and assets loadings for different devices. You can even create 3 textures (meduim, high, extra high quality for tablets) for each in your graphic editor.

So it could like

WORLD_TARGET_WIDTH_LOW = 480;
WORLD_TARGET_HEIGHT_LOW = 320;
WORLD_TARGET_WIDTH_MED = 960;
WORLD_TARGET_HEIGHT_MED = 540;
WORLD_TARGET_WIDTH_HIGH = 1920;
WORLD_TARGET_HEIGHT_HIGH = 1080;

Then detect device resolution (low, high, medium), then overrite the world size calculator which scales all AbstractActors which has "DIPActive" parameter true in their constructor. Also  load right assets due to low, med and high resolutions.

AppSettings.getWorldSizeRatio();

I hope you get some understanding.

No comments:

Post a comment