Games [XUI2D] World and Screen Sizes


B4X founder
Staff member
Licensed User
Longtime User
There are several ways to adjust our game to different screen sizes.

The examples in the examples pack demonstrate two strategies:

Constant Ratio

Most examples are based on this strategy.

Clumsy Bird:


In this strategy the value of [World Width] / [World Height] is constant. You need to set it in two places:
1. In the designer script:
'All variants script
GameRatio = 1.5 'width / height - change as needed
2. In the game class:
'World width is set to 9 meters.
'World height will be 9 / 1.5 = 6 meters.
X2.ConfigureDimensions(world.CreateVec2(0, 3), 9)
In some of the examples the ratio is set to 1.33 and in some it is set to 1.5. 1.5 is better.

Advantages: The game will look the same on all devices (everything will be larger or smaller based on the screen size).

Disadvantages: If the device screen ratio is not the same as the game ratio then there will be empty bars, either on the top and bottom or on the sides.

This strategy should be the first choice in most cases.

Full Screen

You can see this strategy in Space Shooter and Angry Birds examples.
In this case there is no designer script. ivBackground and ivForeground are anchored to all sides and fill the screen.

The world dimensions are set based on ivForeground dimensions:
Dim ratio As Float = ivForeground.Width / ivForeground.Height
WorldHeight = 3
Dim WorldWidth As Float = WorldHeight * ratio
X2.ConfigureDimensions(X2.CreateVec2(WorldWidth / 2, WorldHeight / 2), WorldWidth)

As you can see from this code, WorldHeight in this case will always be 3 meters. On the other hand, WorldWidth value will change based on the device ratio.

Advantages: No empty bars.

Disadvantages: Game experience will be different on different devices. This also makes it more difficult to test.

And to a different topic:

How to set TileMap dimensions?

If you are not using tiles as your game background and only use it to create the objects then you should set it like this:
TileMap.Initialize(X2, File.DirAssets, "angry birds.json", Null) 'TargetView set to Null
TileMap.SetSingleTileDimensionsInMeters(TotalWidth / TileMap.TilesPerRow, WorldHeight / TileMap.TilesPerColumn)

Assuming that you do use tiles for the game background:

The tiles size is always measured in BCPixels (ints). This means that the exact size in meters might not be the same as the size you pass to SetSingleTileDimensionsInMeters.
If you want to make sure that the tiles remain square sized, which is important if the tiles can be rotated, then you should set the size with:
Dim TileSize As Int = Min(X2.MainBC.mWidth / TileMap.TilesPerRow, X2.MainBC.mHeight / TileMap.TilesPerColumn)
TileMap.SetSingleTileDimensionsInBCPixels(TileSize, TileSize)
The HelloWorldWithBackground is an important example. It demonstrates how to use a tiles map with a non-moving world.
Other examples that use tiles for the background are: Mario and Monster Truck.


Active Member
Licensed User
Longtime User
X2.ConfigureDimensions(X2.CreateVec2(WorldWidth / 2, WorldHeight / 2), WorldWidth)
I would like to mention that you can use the last "WorldWidth" as a zoom factor by multiply it as:
WorldWidth * 0.5 = zoom in by factor 2
WorldWidth * 2.0 = zoom out by factor 2