43 TiledMap - JcerelusDev/CanvasGameJs GitHub Wiki

TiledMap

What is tiledMap

tiledMap is a class that allows us to parse json tiled map and rendering the map on the stage.

Good to know

When you are creating your tileset in tiled you need to check the embedded checkbox.

You can use multiple tilesets images,but a tileset by layer

In your json file go to the tilesets[] and remove all of the slashes in image path

How to use tiledMap method ?

1. the tiledMap class has two parameters :

| the path = your map.json url

|| the tiledwidth : 16, 32, 64 and so on you can see that in your json file.

2. You need to use that method :

      let map = new tiledMap(mapPath, 16) // you can make map global if you have multiple scenes

3. load the map

4. renderlayers according to your needs

5. Use if(loader){

}

before you render the map :

loader is a boolean it will set to true once the map has finished the loading process.

Example with code :

const game = new Stage()
      game.add(game.stage)
      game.setSize(320,180)
      game.setAnimation(60);
     -----------------------
     -----------------------
     -----------------------
  




         var level1 = new tiledMap("goodMap.json",32)
level1.load()

game.update = function(){

    }

//example with multiple scenes

    let baseUrl = "maps"
game.render = () => {
    if (loader) {
        let world = game.worldThroughCamera()
       game.renderBatch(platformBg, "background")
        game.setCam(player, world)
        if (mapPath == `${baseUrl}/scene1.json`) {
            map.renderLayer(data.layers[0], `${baseUrl}/another-world-tileset.png`)
            map.renderLayer(data.layers[1], `${baseUrl}/another-world-tileset.png`)
            game.renderBatch(player, 'sheet')
            map.renderLayer(data.layers[2], `${baseUrl}/another-world-tileset.png`)
            game.renderBatch(game.keys, 'sheet')

        }

        if (mapPath == `${baseUrl}/scene2.json`) {
            map.renderLayer(data.layers[0], `${baseUrl}/gothic-castle-background.png`)
            map.renderLayer(data.layers[1], `${baseUrl}/tileset.png`)
            map.renderLayer(data.layers[2], `${baseUrl}/gothic-castle-background.png`)
            game.renderBatch(player, 'sheet')
            game.renderBatch(game.burgers, 'sheet')
        }

        if (mapPath == `${baseUrl}/scene3.json`) {
            map.renderLayer(data.layers[0], `${baseUrl}/gothic-castle-tileset.png`)
            map.renderLayer(data.layers[1], `${baseUrl}/Tiles.png`)
            map.renderLayer(data.layers[2], `${baseUrl}/another-world-tileset.png`)
            game.renderBatch(player, 'sheet')
            game.renderBatch(game.croissants, 'sheet')
        }

    }

}

/*in render method do the following
 imagine we have three layers and we want the
player to be placed behind trees
*/


game.render = function(){
if(loader){
   level1.renderLayer(data.layers[0],"pathtoyourimage.png")
   drawplayer()
   level1.renderLayer(data.layers[1],"pathtoyourimage.png")
   level1.renderLayer(data.layers[2],"pathtoyourimage.png")

}

}

How to handle collision detection between player and a specific object

You have to use :

tiledCollider() method to detect collision between the player and a tiled object layer .

For platformer style game collision between the player and non removable objects look for

Platformer's sides collision

For topdown style game collision between the player and non removable objects look for

VrpgCollider

and

HrpgCollider

Example with code

/*In your game.update function or in a outside function and call it in game.update as follow :

function checkCollision(){
for(var obj of data.layers[3].objects){
if(tiledCollider(player,obj)){
 //your code here
}

}

}

game.update = function(){
  
   checkCollision();

}

Good to know :

data.layers is provided by the tiledMap class.

How to draw tiled object Layers ?

There are 2 ways to accomplish that.

1 .- RenderObjectLayer(layer,tilesetImage,gid) // see that in your json file

2 .- RenderObjectLayer() without passing gid

Good to know :

If you want to render object without passing their gid value.

In tiled editor when you place object image you can see on the left its properties, the class is empty modify it with a clasd of "auto".

To render the object(s) , you need to call RenderObjectLayer even once.

You can decide to place the player behind object layers or in front of them depending on your drawing order.

2.- Inside of (if loader condition) you can draw them by their (gid value) that tiled editor give you in the json file . That give you full control, so you can decide when you want to draw a certain object , depending on your needs by using their gid value.

Example : what if you want a key or an exit box to appear only after a boss die.

map.RenderObjectsLayer(layer,tilesetImage,gid)

That specific image will be drawn

objectAnimation

that method is used to animate (objectlayer tile) with type of objectgroup

How to use it

First you need to use tiled editor animation editor Then in your javascript code do the following in the game.render function

objectAnimation(gidValue,tile objectName,tilesetImage)

game.render = function(){
if(loader){

game.objectAnimation(61,"decor","pathtoyourinage png");
}
}