Basic work- and data flow
(1) In the editor "Tiled" a new "Tilemap" is created and stored in the format ".json" in the own project folder "Shared Files" (7).
(2) In the "Layers" window there is already a "Tile Layer 1" on which our map is drawn. In the saved json file this layer is saved with its properties.
(3) After
downloading a tileset graphic file into the folder "Shared files" (7), you create a "New tileset" with the help of "Browse..." and select the tileset graphic file there. In the json file only the name and some properties of the graphic file are stored. In the code later X2 uses some of them.
(4) You draw your playing surface with stamps selected on the tileset. The resulting bitmap is stored in a special format within the json file.
(5) In the Layers window you create an "Object Layer 1" to place objects on it.
(6) You can place as many objects as you like. However, these are only data points that are filled with life later in the code by the X2 framework.
(7) As already mentioned, the graphic files and the json files are in the "Shared files" folder. When compiling, the files are automatically copied into the "Files" folder of B4J, B4A and B4i.
(8) The drawn map is imported into the code by reading the created json file through the X2 framework.
The most common layers are the
Tile Layer and the
Object Layer. There is also an
Image Layer for including simple foreground or background graphics.
Tile Layers
They provide an efficient way of storing a large area filled with tile data.
The data is a simple array of tile references. The information needed to render each tile layer is stored with the map.
Object Layers
They can store many kinds of information that would not fit in a tile layer.
Objects can be Rectangle, Ellipse, Point, Polygon, Polyline, Tile, Text.
They can be freely positioned, resized and rotated.
They can also have individual custom properties (see "objecttypes.json").
Objects are identified by id.
Objects can be named (multiple objects can have the same name!).
Objects can be given a type, to customize properties for this object type.
Object types
Note that in B4X there is a file named "objecttypes.json" in the Files tab. This is a new file that is required when using X2TileMap. It holds the objects custom properties defaults. You can import it to Tiled with "View - Objects Type Editor", "File - Import".
The edited Tilemap is to be exported as ".json" file into the "Shared Files" folder of our B4X project.
X2TileMap allows loading those map files (the "mario 1.json" file) and the additional informations attached to each layer into the B4X game.
Drawing is done automatically by calling DrawScreen or if you need more control you can call Draw and pass the required area.
X2TileMap only draws the currently visible tiles.
Code:
Public Sub Tick (GS As X2GameStep)
mMario.Tick(GS) 'run first as mario updates the world position
TileMap.DrawScreen(Array("Tile Layer 1", "Tile Layer 2"), GS.DrawingTasks)
End Sub
Public Sub DrawingComplete
TileMap.DrawingComplete
End Sub
X2TileMap is used to "communicate" between the game and the map we created with "Tiled":
Set Map Dimensions
Set Backgroundcolor
Handle Tile layer
Handle Object layer objects
It can even be used to create Bodies that were defined on an object layer.
These are graphic images referred to as
tiles laid out in a grid.
Tilesets are created by graphically more artistically gifted people and can be downloaded and used free of charge or at low cost from the internet (see Game assets below).
During the training in "Tiled" it is easy to learn the principle of spritesheets and tilesets.
There is a recommendation to use tilesets that contain more than 1 tile.
Tile flipping and rotation is supported. The tiles images must be the same size as the map tiles.
(To be contiued …)
