TinSleeves Posted July 17, 2014 Share Posted July 17, 2014 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 whatAny help would be awesome Thanks Link to comment Share on other sites More sharing options...
TinSleeves Posted July 19, 2014 Author Share Posted July 19, 2014 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 Link to comment Share on other sites More sharing options...
mon Posted July 19, 2014 Share Posted July 19, 2014 tou should try changing game... to this.game... Link to comment Share on other sites More sharing options...
lewster32 Posted July 19, 2014 Share Posted July 19, 2014 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 Link to comment Share on other sites More sharing options...
TinSleeves Posted July 19, 2014 Author Share Posted July 19, 2014 Thanks for the reply Lewster Do you have to use .JSON? I was hoping to use .CSVWhy is it that the first example worked with game.load.tileset but the second didn't? Link to comment Share on other sites More sharing options...
Dumtard Posted July 19, 2014 Share Posted July 19, 2014 Here are 2 csv examples:http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=csv+map+collide.js&t=csv%20map%20collidehttp://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. Link to comment Share on other sites More sharing options...
lewster32 Posted July 19, 2014 Share Posted July 19, 2014 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. Link to comment Share on other sites More sharing options...
TinSleeves Posted July 19, 2014 Author Share Posted July 19, 2014 Yes I'm using 2.0.7 Link to comment Share on other sites More sharing options...
Dumtard Posted July 19, 2014 Share Posted July 19, 2014 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. Link to comment Share on other sites More sharing options...
lewster32 Posted July 19, 2014 Share Posted July 19, 2014 2.0.7 definitely does not have a tileset method in Loader: https://github.com/photonstorm/phaser/blob/master/src/loader/Loader.js Link to comment Share on other sites More sharing options...
Dumtard Posted July 19, 2014 Share Posted July 19, 2014 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. Link to comment Share on other sites More sharing options...
TinSleeves Posted July 19, 2014 Author Share Posted July 19, 2014 Thanks for the replies guys lewster32Oh okay I guess that's why! Any idea how I load a csv, all the tutorials I see use load.tileset DumtardI'm not sure but it definitely does :S Link to comment Share on other sites More sharing options...
lewster32 Posted July 19, 2014 Share Posted July 19, 2014 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. Link to comment Share on other sites More sharing options...
Dumtard Posted July 19, 2014 Share Posted July 19, 2014 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);} Link to comment Share on other sites More sharing options...
TinSleeves Posted July 19, 2014 Author Share Posted July 19, 2014 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 statesAnyway thanks a lot for the help, it really helped me out Link to comment Share on other sites More sharing options...
Recommended Posts