How to Incorporate tilemap (from tiled) into phaser

Question

I'm basically trying to create a platform game using Phaser. I created a JSON file in Tiled, and am now trying to add it to the world. I've actually been trying to add it for the past three hours, but have not been successful. I looked at many posts and tutorials, but nothing has worked. Hopefully someone can help?

This is my html:

<!DOCTYPE html><html>

<head>
    <title>Platformer</title>
    <script type="text/javascript" src="phaser.js"></script>
    <script type="text/javascript" src="Game.js"></script>
</head>

<body>
    <div id="gameDiv"></div>
</body>

And my Game.js:

var game = new Phaser.Game(800,600,Phaser.AUTO,"gameDiv",{ preload: preload, create: create, update: update });

function preload() {
        game.load.tilemap("map","assets/LvlOneMap.json",null,Phaser.Tilemap.TILED_JSON);
        game.load.image("tiles","assets/spritesheet_2.png");
    }

var map;
var layer;

function create(){
    map = game.add.tilemap("map");
    map.addTilesetImage("Tiles","tiles");
    layer =  map.createLayer("GroundLayer");
    layer.resizeWorld();
}

function update() {
    //Gameloop
}

Here is my "LvlOneMap.json" file:

{ "height":10,
 "layers":[
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 123, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 153, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 138, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 153, 0, 0, 0, 0, 123, 123, 123, 123, 123, 123, 123, 123, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 153, 0, 0, 0, 0, 153, 153, 155, 155, 155, 155, 155, 155, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 153, 122, 122, 0, 0, 153, 153, 155, 155, 155, 155, 155, 155, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 153, 153, 155, 155, 155, 155, 155, 155, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 153, 153, 155, 155, 155, 155, 155, 155, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 123, 123, 123, 123, 123, 123, 123, 153, 153, 155, 155, 155, 155, 155, 155, 0, 0, 0, 0, 0, 0, 123, 123, 123, 123, 123, 123, 153, 153, 153, 153, 153, 153, 153, 153, 155, 155, 155, 155, 155, 155, 155, 123, 123, 123, 123, 123, 123, 153, 153, 153, 153, 153, 153, 153, 153, 153, 153, 153, 153, 153, 153, 153, 153, 155, 155, 155, 155, 155],
         "height":10,
         "name":"BackgroundLayer",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":27,
         "x":0,
         "y":0
        }, 
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         "height":10,
         "name":"GroundLayer",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":27,
         "x":0,
         "y":0
        }],
 "nextobjectid":1,
 "orientation":"orthogonal",
 "properties":
    {

    },
 "renderorder":"right-down",
 "tileheight":21,
 "tilesets":[
        {
         "firstgid":1,
         "image":"spritesheet_2.png",
         "imageheight":372,
         "imagewidth":694,
         "margin":3,
         "name":"Tiles",
         "properties":
            {

            },
         "spacing":2,
         "tilecount":480,
         "tileheight":21,
         "tilewidth":21,
         "transparentcolor":"#4a698c"
        }],
 "tilewidth":21,
 "version":1,
 "width":27
}

I should also note that the layer's name does match that of the one in Tiled, and the Tile Layer Format is set to CSV.

score 2 · Answer 1 · answered Jan 01 '16 at 16:32

2

If I'm reading the JSON correctly, GroundLayer doesn't have any objects in it (all 0s for the data object).

Your code otherwise matches a working example I compared it with, so I'd recommend verifying that you saved the layer data.

Try switching layer = map.createLayer("GroundLayer"); to layer = map.createLayer("BackgroundLayer"); to see if the layer displays, as it appears that layer has actual data within it.

answered Jan 01 '16 at 16:32

James Skemp

8,018
9
64
107

I must have accidently mixed them up, thank you so much! @James Skemp – Leonard Parisi Jan 02 '16 at 21:56
That was it? Awesome; glad it was simple! – James Skemp Jan 04 '16 at 00:45

How to Incorporate tilemap (from tiled) into phaser

1 Answers1