Loading a tilemap created with Tiled

[Massemassimo]

hey guys, I have trouble getting a tilemap created with Tiled (http://www.mapeditor.org/) to load. Multiple tutorials seem to do the exact same thing I do and even suggest "Tiled" to create the map.

 

When I run my game, it stops on the following line (removing it makes it work again):

this.load.tilemap('tm_Level01', 'assets/levels/level01.json', null, Phaser.Tilemap.TILED_JSON);

The path to the json file is correct (checked and double checked), the json itself is - as mentioned - exported from "Tiled". The "null" and the dataType is just copied from the examples, seems logical, though. (No map data since I already supply a json containing that --> null; and the dataType.. well it's json describing a tilemap. )

 

so why could this break?

 

The "this" might be irritating (?), but I'm pretty certain that its correct, I load my player-spritesheet like this for example (and it works fine):

this.load.spritesheet('player', 'assets/images/player.png', 16, 16, 4);

I really have no clue what's going wrong here, and sadly I can't get proper debugging to work.

[Izuo]

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'mapPhaser', { preload: preload, create: create, update: update });function preload() {//Load the tilemap file    game.load.tilemap('myGame', 'assets/tmx1.json', null, Phaser.Tilemap.TILED_JSON);//Load the spritesheet for the tilemap    game.load.image('tiles', 'assets/main.png');//Load other assets, the playergame.load.spritesheet('player', 'assets/sprites/male_hero_1.png', 16, 16, 4);}var map;var layer;function create() {    map = game.add.tilemap('myGame');//'main' is the name of the spritesheet inside of Tiled Map Editor    map.addTilesetImage('main', 'tiles');//'Grass 1' is the name of a layer inside of Tiled Map Editor    layer = map.createLayer('Grass 1');    layer.resizeWorld();//Add playergame.add.sprite(300, 200, 'player');}function update() {} 

This is the bare minimum that you would need to load up a tilemap, a layer from the tilemap, and a player.

 

You'll have to change a few things to match your specific files, and it should work.

[Piggy]

What error do you get? Is the code available somewhere?

[Massemassimo]

Hey, I don't know how to share the code otherwise, so I'll just post it in here:

 

preloader.ts:

module Sidescroller01 {    export class Preloader extends Phaser.State {        preloadBar: Phaser.Sprite;        preload() {            //  Set-up our preloader sprite            this.preloadBar = this.add.sprite(200, 250, 'preloadBar');            this.load.setPreloadSprite(this.preloadBar);            //  Load our actual games assets            this.load.image('titlepage', 'assets/images/titlepage.jpg');            this.load.image('logo', 'assets/images/logo.png');            this.load.audio('music', 'assets/audio/title.mp3', true);            this.load.spritesheet('player', 'assets/images/player.png', 16, 16, 4);            this.load.image('bg_Level01', 'assets/images/level1.png');            this.load.tilemap('tm_Level01', 'assets/levels/level01.json', null, Phaser.Tilemap.TILED_JSON);            this.load.image('tiles-01', 'assets/images/tiles.png');        }        create() {            var tween = this.add.tween(this.preloadBar).to({ alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);            tween.onComplete.add(this.startMainMenu, this);        }        startMainMenu() {            this.game.state.start('state_Level01', true, false);        }    }}

level01.ts:

module Sidescroller01 {    export class Level01 extends Phaser.State {        background: Phaser.Sprite;        player: Sidescroller01.Player;        logo: Phaser.Sprite;        map: Phaser.Tilemap;        layer: Phaser.TilemapLayer;        create() {            this.game.physics.startSystem(Phaser.Physics.ARCADE);            this.game.physics.arcade.gravity.y = 250;            this.logo = this.add.sprite(this.world.centerX, 200, 'logo');            this.logo.anchor.setTo(0.5, 0.5);            this.background = this.add.sprite(0, 0, 'bg_Level01');            this.map = this.game.add.tilemap("tm-Level01", "tiles-01");            this.map.addTilesetImage('tiles-01');            this.map.setCollisionByExclusion([13, 14, 15, 16, 46, 47, 48, 49, 50, 51]);            this.layer = this.map.createLayer('Tile Layer 1');            this.layer.debug = true;            this.layer.resizeWorld();            this.player = new Player(this.game, 130, 284);            this.game.physics.enable(this.player, Phaser.Physics.ARCADE);            this.player.body.bounce.y = 0.2;            this.player.body.collideWorldBounds = true;            this.game.camera.follow(this.player);        }        update() {            this.game.physics.arcade.collide(this.player, this.layer);        }    }}

I'm really at a loss as to what's going wrong here. The loaded files exist. Can it be a problem with the json itself?

[clark]

Try to grab the latest version of phaser and its definitions, I recall that the tiles were quite dated until recently.

[Massemassimo]

Got the latest version (even though the one I used before was the dev branch version from about 3 days ago) and yeah, at least now it throws errors. Fixed a few stupid things but the problem remains.

 

Mysterious:

this.map = this.game.add.tilemap("tm_Level01");

throws "Supplied parameters do not match any signature of call target: Could not apply type 'number' to argument 2 which is of type 'string'. Looking through the docs, I cannot find a definition of what parameter(s) tilemap expects. Also weird: why "argument 2" in the error message? Intellisense can't help me either because it's not working, but that might be something for another thread.

[Massemassimo]

Jeeeez typescript, I have a feeling I'm gonna give up on you soon. Back to "spaghetti-js"

[clark]

That is a strange one as I started a tile game last night with Tiled and got my map loaded. 
 

this.map = this.add.tilemap(AssetList.LevelData.TestLevel);this.map.addTilesetImage(AssetList.TileSets.BRICK, AssetList.TileSets.BRICK);layer = this.map.createLayer(AssetList.Layers.BRICK);layer.resizeWorld();

The Def is:

tilemap(key: string, tileWidth?: number, tileHeight?: number, width?: number, height?: number): Phaser.Tilemap;


I am going to write a post on this in a sec to figure out what the TS status is. As TS1.0 is out but I can't use it so I do not know if its broken.
 

[Massemassimo]

For what it's worth, I installed TS 1.0

IDE is Visual Studio Express 2013 for Web

[clark]

Hey mate, 

If it is an option, before you give up on it, try uninstall 1.0 and install 0.9.5 and try it again. See if things improve. 

TS1 is a fairly new release, it came after my VS13 install for sure.... so my problems are just down to VS13 needing an update. That could be your problem too. 
 

[Massemassimo]

yeah that's an option. I'll try and let y'all know how it went.

 

Edit: Back to TS 0.9.5 and at least I got my intellisense back.

 

Tilemap problem still persists. While I don't get any errors anymore, the program simply stops when reaching this.load.tilemap.

 

How do you guys debug phaser games written in TS?

[clark]

I have a Game file in my project called JGolf which extends Phaser.Game and sets up my states

 

module JGolf {    export class Game extends Phaser.Game {        constructor() {            super(1074, 768, Phaser.AUTO, "content");            this.state.add(GameStates.PRELOADER, JGolf.Preloader, true);            this.state.add(GameStates.GAME, JGolf.Engine);        }    }    export class GameStates {        static BOOT: string = "boot";        static PRELOADER: string = "preloader";        static MAINMENU: string = "mainMenu";        static GAME: string = "game";    }    } 

In my Preloader.ts state I load the data I need for the JSON and TileMap

 

module JGolf {    export class Preloader extends Phaser.State {        constructor() {            super();        }        preload(): void {            console.log("Preloader::preload");            var res: string = "800x480";            this.load.image("BrickTileSet", "media/textures/" + res + "/BrickTileSet.png", true);            this.load.tilemap("TestLevel", "media/levels/test/" + res + "/TestLevel.json", undefined, Phaser.Tilemap.TILED_JSON);        }        create(): void {            this.game.state.start(GameStates.GAME, true, false);        }        destroy(): void {        }            }}

Then in my poorly named Engine class, I construct the map

 

module JGolf {    export class Engine extends Phaser.State {        private mapGroup: Phaser.Group;        private map: Phaser.Tilemap;        private gameArea: Phaser.Group;        constructor() {            super();        }        create(): void {            console.log("Engine::create");            var layer: Phaser.TilemapLayer;            this.map = this.add.tilemap("TestLevel");            this.map.addTilesetImage("BrickTileSet", "BrickTileSet"); //AssetList.CacheKeys.BRICK);            layer = this.map.createLayer("BrickLayer");            layer.resizeWorld();        }    }}  

And get this:

As for Debugging,  I use Chrome Canary, and the F12 dev tools..... But to be honest, I would love to know more.  Especially when I get "Error on Phaser line 10495" and there is no stack trace. 

 

[Massemassimo]

Any chance my json is causing the problem?

{ "height":16, "layers":[        {         "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, 14, 0, 0, 0, 0, 45, 84, 48, 47, 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, 17, 105, 106, 107, 108, 18, 0, 26, 50, 51, 64, 66, 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, 15, 28, 52, 53, 70, 72, 0, 16, 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, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 105, 42, 41, 41, 41, 41, 41, 41, 41, 108, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 41, 41, 44, 18, 0, 2, 41, 43, 43, 44, 18, 0, 14, 0, 0, 0, 0, 0, 0, 0, 5, 4, 4, 4, 4, 4, 4, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 11, 7, 0, 0, 0, 7, 7, 7, 7, 41, 42, 44, 18, 0, 0, 0, 0, 0, 0, 5, 4, 4, 4, 4, 4, 4, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 7, 0, 0, 0, 7, 7, 7, 7, 7, 5, 7, 0, 0, 0, 0, 16, 0, 0, 5, 6, 4, 4, 4, 4, 4, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 7, 0, 0, 0, 7, 7, 7, 7, 7, 5, 7, 0, 0, 0, 17, 105, 106, 41, 41, 44, 4, 4, 4, 4, 4, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 7, 0, 0, 0, 7, 7, 7, 7, 7, 5, 7, 16, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 13, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 11, 11, 7, 0, 0, 0, 7, 44, 44, 44, 44, 41, 44, 44, 44, 18, 0, 0, 0, 4, 4, 4, 4, 4, 4, 41, 41, 41, 41, 41, 41, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 60, 62, 61, 59, 59, 59, 62, 60, 60, 60, 60, 60, 60, 60, 60, 59, 59, 59, 59, 60, 63, 63, 63, 63, 63, 63, 63, 63, 60, 60, 60, 59, 59, 59, 59, 59, 59, 59, 59, 59, 59, 59, 59, 59, 59, 59, 59, 59, 79, 79, 80, 78, 78, 78, 81, 81, 79, 79, 79, 79, 79, 79, 79, 78, 78, 78, 78, 79, 82, 82, 82, 82, 82, 82, 82, 82, 79, 79, 79, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78, 78],         "height":16,         "name":"layer1",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":48,         "x":0,         "y":0        }], "orientation":"orthogonal", "properties":    {    }, "tileheight":16, "tilesets":[        {         "firstgid":1,         "image":"..\/images\/tiles.png",         "imageheight":96,         "imagewidth":304,         "margin":0,         "name":"Jungle01",         "properties":            {            },         "spacing":0,         "tileheight":16,         "tilewidth":16        }], "tilewidth":16, "version":1, "width":48}

[Massemassimo]

In the Chrome Canary Devtools under "Network" it tells me that the json has not been found ("404 not found"). I really don't get my head around this, it is THERE...

[clark]

Ahhh!!


This bloody thing:

Open your web.config file and paste this, JSON did not load for me without this and it wasted 2 days of my life.
 

<?xml version="1.0" encoding="utf-8"?><!--  For more information on how to configure your ASP.NET application, please visit  http://go.microsoft.com/fwlink/?LinkId=169433  --><configuration>  <system.web>    <compilation debug="true" targetFramework="4.5" />    <httpRuntime targetFramework="4.5" />  </system.web>  <system.webServer>    <staticContent>      <mimeMap fileExtension=".json" mimeType="application/json" />    </staticContent>  </system.webServer></configuration>

[Massemassimo]

Works! <3

[clark]

Great stuff

These obscurities to getting TS working turn a lot of people off, but once these little issues are worked out, it honestly does becoming a much smoother experience! 

 

[FlashbackJon]

Alternatively, if you've got access to your IIS, you can add JSON to the list of MIME types.  "*.json" and "application/json" respectively.  I had this exact same issue until I did that.

[MarkAndrade]

Thank you clark!  This too was driving me insane with Visual Studio Web 2013.

 

For what it's worth, adding the following line after the line containing .json will now let me load .fnt files in Visual Studio Web.

<mimeMap fileExtension=".fnt" mimeType="application/fnt" />

[auntsam]

Where exactly is the web.config file located? I can't seem to find it. Do I have to create it? If so, in which directory do I include it.