ethereality Posted October 17, 2017 Share Posted October 17, 2017 Hi everyone, I'm brand new to game dev, and despite many hours of searching on forums, I'm still stuck - would so appreciate any help or pointers. Here is what I have: <script type="text/javascript"> var game = new Phaser.Game(800, 800, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.tilemap('testmap', 'assets/testmap.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('Sky', 'assets/images/Sky.png'); game.load.image('Stars', 'assets/images/city_bg.png') game.load.image('Buildings Back', 'assets/images/city_bg.png') game.load.image('Buildings', 'assets/images/city_bg.png') game.load.image('Collision', 'assets/images/cityobjects.png') game.load.image('Collision2', 'assets/images/cityobjects.png') } var map; var layer; function create() { game.stage.backgroundColor = '#000000'; map = game.add.tilemap(); map.addTilesetImage('Sky', 'Sky'); map.addTilesetImage('city_bg', 'Stars', 20, 20); map.addTilesetImage('city_bg', 'Buildings Back', 20, 20); map.addTilesetImage('city_bg', 'Buildings', 20, 20); map.addTilesetImage('cityobjects', 'Collision', 20, 20); map.addTilesetImage('cityobjects', 'Collision2', 20, 20); layer1 = map.create('level1', 40, 40, 20, 20); layer1.resizeWorld(); } function update() { } </script> </body> </html> Sky, Buildings, Stars, Buildings Back, Collision, and Collision2 are layers in Tiled. The tiles are 20x20 and I made sure the .png files were divisible evenly by 20 (that was a previous error message). Now, I no longer have any error messages, but nothing but a black box shows. I know I must be missing something obvious. Thanks for your help! Link to comment Share on other sites More sharing options...
ethereality Posted October 17, 2017 Author Share Posted October 17, 2017 I tried to do some more debugging, and it seems like the problem is towards the end: I'm trying this - layer1 = map.createLayer('Stars', 40, 40, 20, 20); layer1.resizeWorld(); And I get these errors: Tilemap.createLayer: Invalid layer ID given: null createLayer @ phaser.min.js:25 create @ (index):54 loadComplete @ phaser.min.js:10 finishedLoading @ phaser.min.js:20 processLoadQueue @ phaser.min.js:20 asyncComplete @ phaser.min.js:20 fileComplete @ phaser.min.js:20 a.data.onload @ phaser.min.js:20 18:55:05.737 (index):55 Uncaught TypeError: Cannot read property 'resizeWorld' of undefined at Object.create ((index):55) at c.StateManager.loadComplete (phaser.min.js:10) at c.Loader.finishedLoading (phaser.min.js:20) at c.Loader.processLoadQueue (phaser.min.js:20) at c.Loader.asyncComplete (phaser.min.js:20) at c.Loader.fileComplete (phaser.min.js:20) at Image.a.data.onload (phaser.min.js:20) Any ideas? Thanks! Link to comment Share on other sites More sharing options...
samme Posted October 17, 2017 Share Posted October 17, 2017 3 hours ago, ethereality said: Tilemap.createLayer: Invalid layer ID given: null That means there's no layer named Stars (or whatever identifier was passed to createLayer). Open up the map file (JSON or XML) and see if you can find the layer names there. Link to comment Share on other sites More sharing options...
ethereality Posted October 17, 2017 Author Share Posted October 17, 2017 Thanks @samme - I looked at the JSON file, and here's what I found - seems like the names are correct. "height":40, "name":"Sky", "opacity":1, "properties": { "type":0 }, "propertytypes": { "type":"int" }, "type":"tilelayer", "visible":true, "width":40, "x":0, "y":0 }, And...here "tilesets":[ { "columns":36, "firstgid":1, "image":"images\/Sky.png", "imageheight":800, "imagewidth":800, "margin":0, "name":"Sky", "spacing":2, "tilecount":1296, "tileheight":20, "tilewidth":20 }, Link to comment Share on other sites More sharing options...
samme Posted October 17, 2017 Share Posted October 17, 2017 Oh, you're getting an empty map. You need map = game.add.tilemap('testmap'); Link to comment Share on other sites More sharing options...
ethereality Posted October 17, 2017 Author Share Posted October 17, 2017 Now I get a new error: Phaser.Tileset - Sky image tile area is not an even multiple of tile size Phaser.Tileset - spritesheet image tile area is not an even multiple of tile size My map is exported in .csv format with embedded tilesets. Sky.png is 800x800 and spritesheet.png is 700x700 pixels. Each tile is 20x20. Here's what I ran: function create() { map = game.add.tilemap('testmap'); game.stage.backgroundColor = '#000000'; map.addTilesetImage('Sky', 'Sky', 20, 20); map.addTilesetImage('city_bg', 'Stars', 20, 20); map.addTilesetImage('city_bg', 'Buildings Back', 20, 20); map.addTilesetImage('city_bg', 'Buildings', 20, 20); map.addTilesetImage('cityobjects', 'Collision', 20, 20); map.addTilesetImage('cityobjects', 'Collision2', 20, 20); layer1 = map.create('level1', 40, 40, 20, 20); layer1.resizeWorld(); } Link to comment Share on other sites More sharing options...
ethereality Posted October 17, 2017 Author Share Posted October 17, 2017 It just occurred to me that both of those files have a spacing of 2, whereas the other ones have a spacing of 0. Not sure if that has anything to do with it. Link to comment Share on other sites More sharing options...
samme Posted October 17, 2017 Share Posted October 17, 2017 See examples/v2/tilemaps/csv-map. You need map = game.add.tilemap('testmap', 20, 20); // … layer1 = map.createLayer(0); Remove map.create. Link to comment Share on other sites More sharing options...
ethereality Posted October 18, 2017 Author Share Posted October 18, 2017 Thank you so much! It works now - I know I have a lot more to learn! Link to comment Share on other sites More sharing options...
Recommended Posts