Games [XUI2D] Hello World 2 based on Tile Map


Staff member
Licensed User
This is a minimal example of using XUI2D with tiled map.
Tiled map editor is a popular and free game editor:

There are several components that are used together in a XUI2D game:
- XUI2D (box2d) library - the physics engine. All classes start with B2.
- BitmapCreator library - responsible for the drawings.
- X2 framework - 6 B4X classes, all start with X2:
  • X2Utils - The main class with the game loop and other useful features.
  • X2BodyWrapper - Wraps a XUI2D B2Body object and provides features related to a specific body. If you need to customize the body behavior then you set the DelegateTo field with a class instance that implements the custom behavior.
  • X2SpriteGraphicCache - Manages the loaded graphics. Can rotate and flip the graphics as needed.
  • X2SoundPool - Cross platform low latency sounds player. Based on SoundPool in B4A, GameView in B4i and GameViewHelper in B4J.
  • X2DebugDraw - Manages the debug drawing. Enabled with X2.EnableDebugDraw. Visualizes the game world as understood by the physics engine.
  • X2TileMap - Loads and manages the tiled maps. Two features: efficient drawing of tile layers based on tile sets, creating bodies based on templates defined in object layers.
Ideally you will not need to modify the X2 framework. It is a good idea to go over the code and understand how the framework works.
I'm not treating the X2 framework as a library. This means that if needed there will be breaking changes in new versions.

- Game class - This is your main class. There are several subs that you must add and are called from X2Utils. A template for the game class is included in XUI2D library:

There is also a template for body delegate classes.
- Layout file - includes two ImageViews for the foreground (main) and background drawings and other controls as needed. The ImageView height / width ratio is set with the designer script.
- Tiled map files - define the tiled map and the objects templates.


External resources:
- box2d manual:
- Tiled manual:

About this example:


The tiled map defines the ground and two types of objects:


All that left to do is to randomly create new objects based on the templates:

Private Sub CreateBlock
   Dim template As X2TileObjectTemplate = TileMap.GetObjectTemplate(ObjectLayer, 3) '3 is the rectangle id
   'change the X position.
   template.BodyDef.Position.X = X2.RndFloat(X2.ScreenAABB.BottomLeft.X, X2.ScreenAABB.TopRight.X)
End Sub

Example projects included in the examples pack:
Last edited: