Games [XUI2D] Designer variable mixed up?

[Gunther]

Dear Erel,


well I saw in all your examples that left and right from the pricture the background is always visible? Is this intendet or just by design or wrong scaling?

May be a typo in the designer script:

When GameRatio replaced by ScreenRatio - this spaces are gone! (here modified setting)

'All variants script
GameRatio = 1.333 'width / height
ScreenRatio = 100%x / 100%y
If ScreenRatio < GameRatio Then
 ivForeground.SetLeftAndRight(0, 100%x)
 ivForeground.Height = ivForeground.Width / ScreenRatio
 ivForeground.VerticalCenter = 50%y
Else
 ivForeground.SetTopAndBottom(0, 100%y)
 ivForeground.Width = ivForeground.Height * ScreenRatio
 ivForeground.HorizontalCenter = 50%x
End If
ivBackground.SetLeftAndRight(ivForeground.Left, ivForeground.Right)
ivBackground.SetTopAndBottom(ivForeground.Top, ivForeground.Bottom)
lblStats.Left = ivForeground.Left

Here Mario with GameRatio (original setting):

and with ScreenRatio (modified setting):

What you think about that Ratio? Is it locally at my phone or as one can see in your exapmle videos with spaces intendet?

 

[sorex]

It depends on how you style the game or how you want that the game behaves.

the difference here is 18 vs 25 tiles in width... read visibility.

the lower screenshot might reveal too much and make the game easier as "surprises" appear faster on screen. (look at the 2nd pipe and cloud as proof)

To make this eaqual on all devices the only way is having the black borders or put some game related images on the sides.

the game ration Erel used is probably the ratio as what is seen on a real NES. (256x240?)
Edit: it seem like 320x240 which is 1.33 (arcade) ratio

 

[Gunther]

Dear sorex,

Yes, I saw that too, but you see the screen is filled completely and the sizeof the characters is a little bigger.
but if you apply that change to the 'Walking Charakter'-example you will have a fully filled background while top and bottom showing still the same areas.

Unfortunately the objects are not on the same locations.

Greetings

 

[sorex]

then it's probably pushing things outside of the visible area.

 

[Erel]

well I saw in all your examples that left and right from the pricture the background is always visible? Is this intendet or just by design or wrong scaling?

It is intended and the code is correct based on the scaling strategy that I chose.

The strategy that I chose is:
The game looks the same on all devices. It is linearly stretched based on the actual screen size.
Graphics are not distorted. A square remains a square.

The main advantage is that we don't need to worry about different screen sizes.
The "price" we pay is that there will be borders at the sides when the selected ratio is not exactly the same as the device screen ratio.
You can change the ratio. 1.333 is a common ratio.

If you want to make the game fill the complete screen then remove all the designer script code and set the anchors to fill the screen.

 

[Gunther]

Ah, ok. Than it is more understandable.

 

[ilan]

1.333 is a common ratio

at least for ios it is not the case:

https://developer.apple.com/library...iOSDeviceCompatibility/Displays/Displays.html

you can see that most ios devices has a ration of 1.78
if you are targeting ipads then the ratio 1.33 is indeed the right choice.

If you want to make the game fill the complete screen then remove all the designer script code and set the anchors to fill the screen.

i dont know how the physics will be if you choose that approach but i do have experience with spritekit that the physics changes if you choose the wrong scale mode.
it is very important to keep on all screensize the same physics experience otherwise you can be stuck in a game like you put 2m linear impulse to a body where in 1 screen it jumps above the obstacle and in another, it is not high enough and the player cannot get over that obstacle. so very important that the physics must be the same for all devices!!

 

[Gunther]

devices has a ration of 1.78

Yes and by comparing the ScreenAABB output on the filled screenshot you will have that also on an Android HTC with 1.77 ratio.

18.7/10.5 = 1.77
18.7/14 = 1.333

And as Erel wrote it is by design to have a square as a square.