Monday, 28 January 2013

#3.3 Tutorial (LibGDX & MTX) Test_02_AppSettings

Test_01 is for all tests menu screen, so there is not much talk about main menu at the moment. Here lets look at Test_02:


Now, previously we talked about App Settings, before we set any screen in the main game/live wallpaper start we have to setup app settings (AppSettings.setUP() )

Here in out MainStarter (extends LibGDX game)

AppSettings.setUp(); Set up WORLD_TARGET_WIDTH / HEIGHT, SCREEN_W / H, WORLD_WIDTH / HEIGHT for our games or live wallpapers
Assets.loadAll(); Load all assets (Textures, fonts, animations, sounds, etc...)
setScreen(new Test_01_AllTestsScreen(this, "All Tests Screen")); Set all test screen as our first screen


You saw the heart shape in this test (top picture), this heart perfectly sized for all resolutions, normally, it should have been stretched abit for some devices such as devices with 4:3 ratio. Thanks the our anti-stretcher formula, it will look same in every device on this planet!

Lets talk about this

I designed the heart 250x250 in my graphic editor for 960x540 (Virtual World Dimensions), In my constructor of Light Abstract Actor last parameter (DIPActive) is "true".

In background code if DIPActive is true, heart will be scaled:

heart.getWidth() * AppSettings.getWorldSizeRatio();
heart.getHeight() * AppSettings.getWorldSizeRatio();


Positioning is not easy like auto-sizing, so DIPActive does not calculate the positions. Position will be different for different devices. However, I created a position-ratio calculator for different device resolution. It will be calculating estimated position for each device). But this have to be done manually if you want auto positioning

See the text example (Bottom descriptive text in our test screen, see the top picture "ORIGINAL HEART SIZE....")

I wanted to set position (15,95) for first text in a world 960x540

text.setY(95 * AppSettings.getWorldPositionYRatio());

X position is 15 without any auto positioning, and the X position wont change for each device (For example, if a device width 960 it will be at 15, if a device width 480, it will be still at 15). Text will appear on very left on first device, for second device it will also appear on left but it will be close to center. (In both devices you will feel a difference, NOT GOOD!)

Y-axis, By using AppSettings.getWorldPositionYRatio(); we will auto position for Y-axis, so if my device height 540 if will appear on 95, if my device height 270 it will appear on around 47,5....

I hope again you understand the challenges of auto sizing and positioning for 10s of different device resolutions.


Auto sizing (DIPActive) and manual positioning techniques are optional, you do not have to use these, but they work great, for example for my live wallpapers, I got many great comments for Samsung Galaxy NOTE II, GS II, GSIII, G Ace... it means people use them and they work great. I use these techniques on my many projects.

No comments:

Post a comment