TiledLayer
TiledLayer class is used to render background and other visual components. Which which consists from more small images. The images are distributed to the regular grid like tiles on the wall. The size of layer can be specified by columns ans rows properties, which specifies the number of columns or rows. The size of one tile is specified by tileWidth and tileHeight properties. By default, the object is filled by first tile. Other tiles may be added by fillCells().
Image: sample tiled layers
External tools
To create wide worlds only manually can spend too much time. Fortunatelly, they are available some external tools to create the tiled layer. In this sample is used Tiled map editor availbale for Windows and Mac OS on its web site (http://www.mapeditor.org/). This applicatoin exports json file with all needed informations.
Image: map editor user interface
Loading json layer file
To create the layer from this file is used function _loadLayer. This function uses moscrif parseData function, which creates multidimensional array from whole json file. Then it is created new instance of TiledLayer. The last step is to set all cells using function setCellDirect, which sets one cell separately.
Example: _loadLayer function parse layer's json
function _loadLayer()
{
// get access to the source file for reading
var file = Stream.openFile("app://exported.json", "r");
// load file's data
var data = parseData(file);
// close file
file.close(); // create tiled layer
var tiled = new TiledLayer({
columns : data["width"],
rows : data["height"],
image : "app://tmw_desert_spacing.png",
tileWidth : data["tilewidth"],
tileHeight : data["tileheight"],
margin : data["tilesets"][0]["margin"]
}); // fill cells
var cells = data["layers"][0]["data"];
for (var i = 0; i < cells.length; i++) {
tiled.setCellDirect(i, cells[i] - 1);
} // return created layer
return tiled;
}
Moving the layer
When user tabs on the screen he can move the layer. The layer has properties viewX and viewY, which specifies the left and top coordinate of visible area in the layer. When user tap on the screen the application saves the coordinate of the tap.
Example: pointerPressed function calls when user tap on the screen
function pointerPressed(x, y)
{
// call parents pointer pressed function
super.pointerPressed(x, y);
// save tap coordinates
this._startX = x;
this._startY = x;
this._down = #start;
}
When user move his finger on the screen, the size of movememnt is calculated and the movement is applied to the layer.
function pointerDragged(x, y)
{
// call parents pointer dragged function
super.pointerDragged(x, y);
if (this._down == #drag) {
// move layer
this._tiled.viewX += (this._startX - x);
this._tiled.viewY += (this._startY - y);
// check bounds
if (this._tiled.viewX < 0)
this._tiled.viewX = 0;
if (this._tiled.viewY < 0)
this._tiled.viewY = 0;
var leftSide = this._tiled.width - System.width;
if (this._tiled.viewX > leftSide)
this._tiled.viewX = leftSide;
var rightSide = this._tiled.height - System.height;
if (this._tiled.viewY > rightSide)
this._tiled.viewY = rightSide;
}
// update coordinates
this._startX = x;
this._startY = y;
if (this._down == #start)
this._down = #drag;
}
Tiled layer is mostly used to create game background and it can by combined with other objects like Sprite to create amazing games.
|