CSV Tilemap not displaying

[TinSleeves]

I've searched the forums for this question but didn't find anything, so apologies if its been answered before

 

Basically I'm trying to load a tile map from a CSV, using this code it all works fine:

 

 

var game = new Phaser.Game(640,320,Phaser.AUTO,"",{preload:onPreload, create:onCreate, update:onUpdate});

 

var map;

var tileset;

var layer;

 

function onPreload() {

 

                    game.load.tilemap('level', 'level.csv', null, Phaser.Tilemap.CSV);

                    game.load.tileset("tiles", "tiles.png", 16, 16);

}

 

function onCreate() {

                    

                    map = game.add.tilemap("level");

                    tileset = game.add.tileset("tiles");

                    tileset.setCollisionRange(0, tileset.total-1, true, true, true, true);

                    layer = game.add.tilemapLayer(0, 0, 640, 480, tileset, map, 0);

}

 

function onUpdate() {

}

 

However I'm splitting my code up into states and the same code doesn't seem to work. So I've got my index.html and a main.js where I'm doing this:

 

 

var game = new Phaser.Game(640, 320, Phaser.AUTO, 'game_div');

 

var map;

var tileset;

var layer;

 

 

var main_state = {

 

    preload: function() { 

        

              game.load.tilemap('level', 'level.csv', null, Phaser.Tilemap.CSV);

              game.load.tileset("tiles", "tiles.png", 16, 16);

    },

 

    create: function() { 

 

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

              this.tileset = game.add.tileset("tiles");

              this.tileset.setCollisionRange(0, tileset.total-1, true, true, true, true);

              this.layer = game.add.tilemapLayer(0, 0, 640, 480, tileset, map, 0);

 

    },

    

    update: function() {

 

    },

};

 

game.state.add('main', main_state);  

game.state.start('main'); 

 

This just leaves me with a blank screen, I guess I'm just missing something simple but I can for the life of me figure out what

Any help would be awesome

 

Thanks

[TinSleeves]

I'm still stuck with this, 

I've read some other posts that say 'game.load.tileset' was removed, is this true? It worked in my first example

[mon]

tou should try changing game... to this.game...

[lewster32]

I think the problem is that game.load.tileset isn't a valid method. You generally load the tiles as an image, then use addTilesetImage on the TileMap you create. This example shows the basic steps for setting up a TileMap:

 

http://examples.phaser.io/_site/view_full.html?d=loader&f=load+tilemap+json.js&t=load%20tilemap%20json

[TinSleeves]

Thanks for the reply Lewster

 

Do you have to use .JSON? I was hoping to use .CSV

Why is it that the first example worked with game.load.tileset but the second didn't?

[Dumtard]

Here are 2 csv examples:
http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=csv+map+collide.js&t=csv%20map%20collide
http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=csv+map.js&t=csv%20map
 

Should browse through this large list http://examples.phaser.io/index.html of examles for stuff you need.

[lewster32]

No you can use CSV; that's the default in fact: http://docs.phaser.io/Phaser.Loader.html#tilemap

 

It may be that load.tileset is deprecated - which version of Phaser are you using? The latest is 2.0.7.

[TinSleeves]

Yes I'm using 2.0.7

[Dumtard]

Try setting up your state like this.
 

var game = new Phaser.Game(640, 320, Phaser.AUTO, 'game_div');function MainState(game) {  this.game = game;  this.map = null;  this.tileset = null;  this.layer = null;}MainState.prototype = {  preload: function() {        this.game.load.tilemap('level', 'level.csv', null, Phaser.Tilemap.CSV);    this.game.load.tileset("tiles", "tiles.png", 16, 16);  },   create: function() {     this.map = this.game.add.tilemap("level");    this.tileset = this.game.add.tileset("tiles");    this.tileset.setCollisionRange(0, tileset.total-1, true, true, true, true);    this.layer = this.game.add.tilemapLayer(0, 0, 640, 480, tileset, map, 0);  },      update: function() {  }}; game.state.add('main', MainState);  game.state.start('main'); 

Also as lewster32 said I believe you are attempting to use functions that do not exist. I do not see a Loader.tileset GameObjectFactory.tileset or GameObjectFactory.tilemapLayer. Try following along with this for creating csv tilemaps.

[lewster32]

2.0.7 definitely does not have a tileset method in Loader: https://github.com/photonstorm/phaser/blob/master/src/loader/Loader.js

[Dumtard]

2.0.7 definitely does not have a tileset method in Loader: https://github.com/photonstorm/phaser/blob/master/src/loader/Loader.js

 

GameObjectFactory also does not have tileset or tilemapLayer. https://github.com/photonstorm/phaser/blob/master/src/gameobjects/GameObjectFactory.js

 

game.add.tileset("tiles");

game.add.tilemapLayer(0, 0, 640, 480, tileset, map, 0);

 

I am curious how his first code works.

[TinSleeves]

Thanks for the replies guys

 

lewster32

Oh okay I guess that's why! Any idea how I load a csv, all the tutorials I see use load.tileset

 

Dumtard

I'm not sure but it definitely does :S

[lewster32]

Oh okay I guess that's why! Any idea how I load a csv, all the tutorials I see use load.tileset

 

Just as Dumtard pointed out:

this.game.load.tilemap('level', 'level.csv', null, Phaser.Tilemap.CSV);

And load the tile image just as an image.

[Dumtard]

Since you dont want to click the links I posted, here it is.

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });function preload() {    game.load.tilemap('map', 'assets/tilemaps/csv/catastrophi_level2.csv', null, Phaser.Tilemap.CSV);    game.load.image('tiles', 'assets/tilemaps/tiles/catastrophi_tiles_16.png');    game.load.spritesheet('player', 'assets/sprites/spaceman.png', 16, 16);}var map;var layer;var cursors;var player;function create() {    //  Because we're loading CSV map data we have to specify the tile size here or we can't render it    map = game.add.tilemap('map', 16, 16);    //  Now add in the tileset    map.addTilesetImage('tiles');        //  Create our layer    layer = map.createLayer(0);    //  Resize the world    layer.resizeWorld();    //  This isn't totally accurate, but it'll do for now    map.setCollisionBetween(54, 83);    //  Un-comment this on to see the collision tiles    // layer.debug = true;    //  Player    player = game.add.sprite(48, 48, 'player', 1);    player.animations.add('left', [8,9], 10, true);    player.animations.add('right', [1,2], 10, true);    player.animations.add('up', [11,12,13], 10, true);    player.animations.add('down', [4,5,6], 10, true);    game.physics.enable(player, Phaser.Physics.ARCADE);    player.body.setSize(10, 14, 2, 1);    game.camera.follow(player);    //  Allow cursors to scroll around the map    cursors = game.input.keyboard.createCursorKeys();    var help = game.add.text(16, 16, 'Arrows to move', { font: '14px Arial', fill: '#ffffff' });    help.fixedToCamera = true;}function update() {    game.physics.arcade.collide(player, layer);    player.body.velocity.set(0);    if (cursors.left.isDown)    {        player.body.velocity.x = -100;        player.play('left');    }    else if (cursors.right.isDown)    {        player.body.velocity.x = 100;        player.play('right');    }    else if (cursors.up.isDown)    {        player.body.velocity.y = -100;        player.play('up');    }    else if (cursors.down.isDown)    {        player.body.velocity.y = 100;        player.play('down');    }    else    {        player.animations.stop();    }}function render() {    // game.debug.body(player);}

[TinSleeves]

Sorry Dumtard I did click the link and was in process of following the example, still learning phaser so it took me a little time to get it to work using states

Anyway thanks a lot for the help, it really helped me out