TiledMap Issues with Typescript Project

[MrGandyy]

Hello everyone! I am new to HTML5 game development and I'm determined to get my first game completed. I've been very impressed with Phaser and all the hard work being put into it. I chose to develop with this game engine because I feel the community is very active and supportive. At this time, I'd really appreciate some help.

 

I was able to get my Typescript project up and running by following Rich's two new tutorials and I'm using his game template to guide me through my project. When it comes to loading a sprite, I have no issues.

 

 

However, I wanted a level larger than just the canvas size, so I felt I needed to create a tiled map and add platforms through a tilesheet. I haven't had too much experience with Tiled but I followed a simple tutorial to help me position the platforms and level. I created a map size of 75 x 19 tiles with their tile sizes being 32px x 32px. I have 3 layers consisting of an image layer with the background, tile layer for my platforms, and object layer for collisions (not sure if its needed).

 

Here is a link to my set up on Tiled:

http://s11.postimg.org/48n8ag91v/tiled.png

 

Tilesheet link:

http://s21.postimg.org/9yicpanpf/tilesheet_platforms.png

 

Background link:

http://s28.postimg.org/3xcz956ql/background.png

 

I exported the tiled map into a JSON file and loaded it into my preloader state. I've noticed that many people load their tilesets with a load tileset function, but I noticed the Typescript definitions file doesn't support it (I obtained mine from the dev branch). So I've explored other ways through the examples and forums, and I'm having trouble loading my tiledmap. My game and player loads normally, but my background results in a black screen.  I've spent hours trying to get it working. I'll share my code below and you'll notice the different ways I tried to go about it. Based on my set up, can someone suggest the best way to approach this problem?

export class Preloader extends Phaser.State {        preloadBar: Phaser.Sprite;        background: Phaser.Sprite;        ready: boolean;        preload() {                        this.background = this.add.sprite(0, 0, 'preloaderBackground');            //  Set-up our preloader sprite            this.preloadBar = this.add.sprite(150, 370, 'preloadBar');            this.load.setPreloadSprite(this.preloadBar);            //  Load our level1 assets            //character and enemy spritesheets            this.load.spritesheet('dog', 'images/dog.png', 48, 32, 28);            this.load.spritesheet('loca', 'images/locaspritesheet.png', 48, 48, 3);                        //  First we load our map data (a json file exported from the map editor Tiled)            this.load.tilemap('example', 'images/tilesheet_platforms.png', 'maps/level1.json', Phaser.Tilemap.JSON, null);            //this.load.text('level1data', 'images/level1.json');            //this.load.tileset() isn't in the phaser.d.ts file             //  Then we load the actual tile sheet image            this.load.image('levelspritesheet', 'images/tilesheet_platforms.png');            //background for level1            this.load.image('background', 'images/background.png');                                    //mostly menu and music            this.load.image('jalepenos', 'images/jalepenos.png');            this.load.image('titlepage', 'assets/titlepage.jpg');            this.load.image('logo', 'images/logo.png');            this.load.audio('music', ['audio/level1music.mp3'], true);            this.load.spritesheet('simon', 'assets/simon.png', 58, 96, 5);            this.load.image('titleScreen', 'images/titlescreen.png');            this.load.spritesheet('play', 'images/play.png', 150, 100, 3);            this.load.audio('titleMusic', ['audio/salsa.wav'], true);            this.load.bitmapFont('desyrel', 'fonts/desyrel.png', 'fonts/desyrel.xml');        }

export class Level1 extends Phaser.State {        background: Phaser.TileSprite;        bg: Phaser.Tilemap;        examplebg: Phaser.Sprite;        layer: Phaser.TilemapLayer;        music: Phaser.Sound;        player: ChihuahuaWars.Player;        state: Phaser.StateManager;                create() {            //this.bg = this.add.tilemap(0, 0, 'level1', true, 32, 32);            // this.background = this.add.tileSprite(0, 0, 2400, 608, 'background');                       //this.layer = this.add.tileLayer(not sure if I'm heading in the right direction);            this.examplebg = this.add.sprite(0, 0, 'background');            this.world.bounds.setTo(0, 0, 2400, 608);            this.music = this.add.audio('music', 1, false);            this.music.play('', 0, 1, true);            this.player = new Player(this.game, 130, 465);            this.camera.follow(this.player);        }        update() {        }    }

export class Game extends Phaser.Game {        constructor() {            super(800, 608, Phaser.AUTO, 'content', null);            this.state.add('Boot', Boot, false);            this.state.add('Preloader', Preloader, false);            this.state.add('MainMenu', MainMenu, false);            this.state.add('Level1', Level1, false);            //this.state.add('Level2', Level2, false);            //this.state.add('Congrats', Congrats, false);           // this.state.add('GameOver', GameOver, false);            this.state.start('Boot');        }    }

[@99golems]

I believe the tileset/tilemap loading from Tiled json is still being worked on in the dev branch and isn't complete yet.