Advanced Phaser and TypeScript Projects Help w/ JSON Tilemap

[JHardin1112]

I've followed along with the 'Castlevania' tutorial (copy and paste) and everything is working as expected.  Although, I now want to load a tiled sprite map I created in Tiled and exported to JSON.  I was able to follow the Mario example from all the examples off of GitHub and had no issues on a single html page and running it on my local webserver setup (XAMPP.)  I just can't get it to work in VS 2013. I'm sure I'm going about this the wrong way.

 

Basically, I did a copy and paste of the Castlevania tutorial (http://www.photonstorm.com/phaser/advanced-phaser-and-typescript-projects) and changed the name to Game1. Here is the code from my Level1.ts file.  You can see where I added some code 

module Game1 {    var map;    var layer;    var cursors;    export class Level1 extends Phaser.State {        background: Phaser.Sprite;        music: Phaser.Sound;        player: Game1.Player;        map: Phaser.Tilemap;        layer: Phaser.TilemapLayer;        create() {            this.game.stage.backgroundColor = '#787878';            this.game.load.tilemap('mario', 'assets/another.json', null, Phaser.Tilemap.JSON);            this.load.image('tiles', 'assets/tileset_3.png');            map = this.game.add.tilemap(0,0,'mario',true,32,32);            map.addTilesetImage('xy', 'tiles');            layer = map.createLayer('World1');                                    cursors = this.game.input.keyboard.createCursorKeys();            this.background = this.add.sprite(0, 0, 'level1');            this.music = this.add.audio('music', 1, true);            this.music.play('', 0, 1, true);            this.player = new Player(this.game, 130, 284);        }    }}  

The errors I'm receiving in my debug console on Chrome are as follows.  Any advice on how to load a JSON tilemap in this example? I updated my TS definitions today from the dev branch on GitHub.

 

Phaser.Cache.getTilemapData: Invalid key: "0" phaser.js:33351

Tilemap.createLayer: Invalid layer ID given: null

[jcs]

what version of Phaser are you using? the TS defs from the dev branch are presumably for the upcoming 1.1.4 release, in which the API for tile maps has changed quite a bit from 1.1.3 (and in which things are not fully functional yet)

 

(I would recommend sticking with 1.1.3 until 1.1.4 is released, unless your intent is helping to flush out issues in 1.1.4)

[JHardin1112]

what version of Phaser are you using? the TS defs from the dev branch are presumably for the upcoming 1.1.4 release, in which the API for tile maps has changed quite a bit from 1.1.3 (and in which things are not fully functional yet)

 

(I would recommend sticking with 1.1.3 until 1.1.4 is released, unless your intent is helping to flush out issues in 1.1.4)

 

JCS,

 

Thanks for reply.  So yeah, I'm using 1.1.4 and I updated the TS definitions from the dev branch as instructed to do in the Castlevania tutorial.  So do you think if I move back to 1.1.3 the code I posted originally should work?

[jcs]

I haven't used typescript, so I can't comment on that, but the functions you are using to create the tilemap, tileset etc look like those from 1.1.3 to me. (for instance, in 1.1.4 game.add.tilemap() only takes two parameters)

[Karma Octopus]

I just had this problem myself which drove me mad so I thought I'd share how to make tilemaps work in 1.1.4 with TS and in VS 2013 Express.

 

In the preloader:

this.load.tilemap( 'desert', 'assets/desert.json', null, Phaser.Tilemap.TILED_JSON );this.load.image( 'tiles', 'assets/tmw_desert_spacing.png' );

Notice that you should use TILED_JSON and not JSON, you might have to modify your TS definitions file.

In the game:

var map: Phaser.Tilemap = this.add.tilemap( 'desert' );map.addTilesetImage( 'Desert', 'tiles' );var layer: Phaser.TilemapLayer = map.createLayer( 'Ground', this.game.world.width, this.game.world.height );layer.resizeWorld();

You might need to modify the TS definitions of tilemap, addTilesetImage, createLayer and resizeWorld which should be something like:

tilemap( key: string, tilesets?: any): Phaser.Tilemap;addTilesetImage( tileset: string, key: string ): void;createLayer( layer: any, width: number, height: number, group?: Phaser.Group ): Phaser.TilemapLayer;resizeWorld(): void;

Lastly, the reason it probably won't work in VS is that the webserver doesn't want to load the json file, you get an 404 error.

You can fix this by editing your your web.config file in the Solution Explorer to something like this:

<configuration>  <system.web>    <compilation debug="true" targetFramework="4.5" />    <httpRuntime targetFramework="4.5" />  </system.web>  <system.webServer>    <staticContent>      <remove fileExtension=".json" />      <mimeMap fileExtension=".json" mimeType="application/json" />    </staticContent>  </system.webServer></configuration>

This worked for me anyway, now I just have to see if I can get it to work with csv files (I doubt that a bit).

[JHardin1112]

I don't have time to check this out just now, but I'm quite certain this is my answer.  Thank you KarmaOctopus! The Intellisense wasn't giving me the option for TILED_JSON, but as you said I should need to change my TS definitions for this.  The same goes for the other advice you gave me.

 

KO - why would I need to modify my TS definitions? I thought whatever I grabbed from github would have what I need? If you can't tell, I've never messed with TS before now and I'm still getting familiar with it all.  This leads me to my next question...is my implementation in Game incorrect and rather than changing the TS definitions, I need to change my code?

 

Lastly, you are spot on about adding it to web.config in order to serve up the JSON file.  Thank you!

[Karma Octopus]

I used this example to see if I could get tilemaps to work. The only thing I needed to do to make it work was to change my TS definitions file. We use our own file and updates that when we find something missing or something wrong.

 

Your bet bet would be to grab the newest one from the dev branch but in my experience even that file might still have some things that are not quite updated or have stuff missing so you will probably need to learn how to update the TS def file yourself, it's quite easy when you get the hang of it.

[synergies]

Ok, this too was driving me crazy. I found that I had the same issue  "Tilemap.createLayer: Invalid layer ID given: null".
 
I thought I would share what I learned and how to fix it. Kudos to Mr.Octopus for getting me this far, because the documentation is pretty terrible. Anyway, what I didn't realise and was the problem in the end is that the Phaser.TilemapLayer ID must relate to the layername you set in your tiled editor when you export into JSON. Same goes for when you execute addTilesetImage, you must use the same ID as the image name. If in doubt, put a breakpoint and look at the tilesets object.

 

TLDR, make sure your id corresponds to the image name when calling addTilesetImage('nameInJSONFile', 'foo') and when calling createLayer('layerNameInJSONFile').

 

The code:

///<reference path="js/phaser.d.ts" />module Harvest{	export class MainLevel extends Phaser.State	{		map: Phaser.Tilemap;		layer: Phaser.TilemapLayer;		//player: Harvest.Player;		create()		{			this.stage.backgroundColor = '#787878';			this.map = this.add.tilemap('map');			this.map.addTilesetImage('zgj0', 'tiles');			this.map.addTilesetImage('hlgz', 'tiles2');			this.map.addTilesetImage('shx4', 'tiles3');			this.layer = this.map.createLayer('Tile Layer 1');			this.layer = this.map.createLayer('Tile Layer 2');			this.layer.resizeWorld();			//this.player = new Player(this.game, 130, 284);		}	}}

"tilesets":[        {         "image":"..\/tilesets\/nature\/zgj0.png",... "layers":[        {         "name":"Tile Layer 1",