Jump to content

Tiled Map Not Loading - Beginner Question


ethereality
 Share

Recommended Posts

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

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

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

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

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

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...