wattageTileEngineDocs

Example Loading a File from Tiled

Tiled is a popular tool for creating environments from tiles. This
example will show how data can be extracted from a Tiled JSON file and
loaded into the engine. This example will also illustrate the use of
the X and Y coefficients to achieve parallax scrolling.

Setup

This example builds on the Wattage Tile Engine Template which
can be found here.
The completed example, including a Tiled file and tileset can be found
here.
The version of Tiled used for this example is 0.15.1

Walkthrough

Starting with the template, the following changes need to be made.

In the main file, set the background color to a pleasant sky blue
color.

Since lighting will only be from ambient, all tiles can be considered
transparent. The isTransparent() callback is altered to reflect this.

localfunctionisTileTransparent(column,row)returntrueend

Add helper functions for loading a layer by name and for loading the
contents of those layers into the tile engine.

-- ------------------------------------------------------------------------------------- This function is a convenience function to retrieve a layer from a Tiled file.-- -----------------------------------------------------------------------------------localfunctiongetLayerByName(name,levelDefinition)fori=1,#levelDefinition.layersdolocalcurLayer=levelDefinition.layers[i]ifcurLayer.name==namethenreturncurLayerendendreturnnilend-- ------------------------------------------------------------------------------------- This function is a convenience function to load tiles into a layer.-- -----------------------------------------------------------------------------------localfunctionloadTilesIntoLayer(layer,layerData)forrow=1,rowCountdoforcol=1,columnCountdolocaltileType=layerData.data[(row-1)*columnCount+col]iftileType~=0thenlayer.updateTile(row,col,TileEngine.Tile.new({resourceKey=tileType}))endendendend

In the onFrame() function in the section that only runs on the first
frame, set the initial position of the camera.

-- This is the initial position of the cameracamera.setLocation(CAMERA_START_X,10)

In the onFrame() function in the section that runs after the first
frame, update the position of the camera to bounce left and right.

In the Tiled file, there are 5 layers: Clouds, Leaves, Trees, Platform1,
Platform2. Each layer is loaded into the tile engine.

-- Create a TileLayer for the clouds.localcloudLayer=TileEngine.TileLayer.new({rows=rowCount,columns=columnCount})localcloudData=getLayerByName("Clouds",levelDefinition)loadTilesIntoLayer(cloudLayer,cloudData)-- Create a TileLayer for the leaves.localleavesLayer=TileEngine.TileLayer.new({rows=rowCount,columns=columnCount})localleavesData=getLayerByName("Leaves",levelDefinition)loadTilesIntoLayer(leavesLayer,leavesData)-- Create a TileLayer for the trees.localtreeLayer=TileEngine.TileLayer.new({rows=rowCount,columns=columnCount})localtreeData=getLayerByName("Trees",levelDefinition)loadTilesIntoLayer(treeLayer,treeData)-- Create a TileLayer for the platform 1.localplatform1Layer=TileEngine.TileLayer.new({rows=rowCount,columns=columnCount})localplatform1Data=getLayerByName("Platform1",levelDefinition)loadTilesIntoLayer(platform1Layer,platform1Data)-- Create a TileLayer for the platform 2.localplatform2Layer=TileEngine.TileLayer.new({rows=rowCount,columns=columnCount})localplatform2Data=getLayerByName("Platform2",levelDefinition)loadTilesIntoLayer(platform2Layer,platform2Data)

Now that the layers have been initialized, reset the dirty tiles
on all of them.

-- It is necessary to reset dirty tile tracking after the layer has been-- fully initialized. Not doing so will result in unnecessary processing-- when the scene is first rendered which may result in an unnecessary-- delay (especially for larger scenes).cloudLayer.resetDirtyTileCollection()leavesLayer.resetDirtyTileCollection()treeLayer.resetDirtyTileCollection()platform1Layer.resetDirtyTileCollection()platform2Layer.resetDirtyTileCollection()

Insert the layers into the module. In this case, no scaling delta
is needed between layers, so that will be set to 0. An X coefficient
is needed to create the parallax scrolling. The Platform2 layer should
follow the camera precisely, so its X coefficient is set to 1. The
other layers need to move progressively slower than the camera so
they are set to values less than 1.

-- Add the layers to the module starting at index 1 (indexes start at 1, not 0).-- Set the scaling deltas to zero and stagger the X coefficients to create-- parallax.module.insertLayerAtIndex(cloudLayer,1,0,0.6)module.insertLayerAtIndex(leavesLayer,2,0,0.7)module.insertLayerAtIndex(treeLayer,3,0,0.8)module.insertLayerAtIndex(platform1Layer,4,0,0.9)module.insertLayerAtIndex(platform2Layer,5,0,1)

When run, the camera will automatically scroll right and left and
the layers will scroll at different rates.