Jump to content

Loading a tilemap created with Tiled


Go to solution Solved by clark,

Recommended Posts

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. :P)

 

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. :(

Link to post
Share on other sites
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. :D

Link to post
Share on other sites

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?

Link to post
Share on other sites

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. :D

Link to post
Share on other sites

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.
 

Link to post
Share on other sites

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. 
 

Link to post
Share on other sites

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:

HTTfQHN.png


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. 

 

Link to post
Share on other sites

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}
Link to post
Share on other sites
  • Solution

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>
Link to post
Share on other sites
  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...