TiledLayer Class
TiledLayer is used to render background and other visual components. It divides scene into regular grid, which is fill by small images. It allows simple and fast creation of scene, because exists many external tools to create and edit such scenes. This type of background is often used in mobile RPG games.
Example:
// create tiled layer
var tiled = new TiledLayer({
columns : columns,
rows : rows,
image : "app://tmw_desert_spacing.png",
tileWidth : tileWidth,
tileHeight : tileHeight,
});
// fill cells
var cells = data["layers"][0]["data"];
for (var i = 0; i < cells.length; i++) {
tiled.setCellDirect(i, cells[i] - 1);
}
Item Index
Methods
Events
Methods
_precalc
() private
Pre calculate
afterInit
() protected
After init method fills layer by tiles.
createAnimatedTile
staticTileIndex
Mark tile as a animated tile.
Parameters:
-
staticTileIndex
Integertile index
Returns:
draw
canvas
Draw method draws all tiles on theirs right positions.
Parameters:
-
canvas
CanvasCanvas used to draw graphics
fillCells
col
row
numCols
numRows
index
Fill cells with a tile image.
Parameters:
Example:
// fill 100 tiles with second tile image
tiled.fillCells(0, 0, 10, 10, 1);
getAnimatedTile
animatedTileIndex
Get animated tike
Parameters:
-
animatedTileIndex
Integertile index
Returns:
init
() protected
Init funtion of object instance. This method should be used as a class constructor.
Example:
class MyLayer : TiledLayer
{
function init()
{
super.init();
...
}
}
process
() protected
Process executes on process handler.
setAnimatedTile
animatedTileIndex
staticTileIndex
Set animated tile
setCell
col
row
index
Fill one cell with image.
setCellDirect
cell
index
Fill one cell with image.
Example:
for (var i = 0; i < cells.length; i++) {
tiled.setCellDirect(i, cells[i] - 1);
}
Properties
height
Integer
Height of the layer. The height is calculated automatically as (number of rows) * (tile height)
tileHeight
Integer
Height of one tile in pixels. The tile dimensions are same on the screen and in source image file.
Example:
// create tiled layer
var tiled = new TiledLayer({
tileWidth : 45,
tileHeight : 45,
});
tileWidth
Integer
Width of one tile in pixels. The tile dimensions are same on the screen and in source image file.
Example:
// create tiled layer
var tiled = new TiledLayer({
tileWidth : 45,
tileHeight : 45,
});
viewH
Integer
Tile layer is usally larger then device screen. The viewH property specifies the height of the displayed part of the layer. By default it is height of the device's screen.
viewW
Integer
Tile layer is usally larger then device screen. The viewW property specifies the width of the displayed part of the layer. By default it is width of the device's screen.
viewX
Integer
Tile layer is usally larger then device screen. The viewX property specifies horizontal position of the displayed part of the layer.
Example:
// set tiled view
self._tiled.viewX = x - System.width/2;
self._tiled.viewY = y - System.height/2;
viewY
Integer
Tile layer is usally larger then device screen. The viewY property specifies the vertical position of the displayed part of the layer.
Example:
// set tiled view
self._tiled.viewX = x - System.width/2;
self._tiled.viewY = y - System.height/2;
width
Integer
Width of the layer. The width is calculated automatically as (number of columns) * (tile width)
Events
onProcess
Event on process handler. It defines what suppose to be done on game process.