Sign in to follow this  
krazyjakee

Tilemap Working example

Recommended Posts

I've been browsing and googling for a number of hours but I simply cannot get a tilemap to appear on my screen in 1.1.6.

 

I see different peoples examples using variations and I have tried them all but to no avail.

 

Here is my code:

var create, cursors, game, layer, map, player, preload, tileset, update;game = map = tileset = layer = player = cursors = false;preload = function() {  game.load.tilemap('map', 'resources/map/island2.json', null, Phaser.Tilemap.TILED_JSON);  game.load.image('tiles', 'resources/img/free_tileset_version_10.png', 32, 32);  return game.load.spritesheet('character', 'resources/img/6Actor_5.png', 32, 32);};create = function() {  game.stage.backgroundColor = '#000000';  map = game.add.tilemap('map');  map.addTilesetImage('tiles');  layer = map.createLayer('layer1');  player = game.add.sprite(2 * 32, 6 * 32, 'character');  game.camera.follow(player);  return cursors = game.input.keyboard.createCursorKeys();};update = function() {};game = new Phaser.Game(240, 128, Phaser.AUTO, 'phaser-game', {  preload: preload,  create: create,  update: update});

It simply shows a black screen with "Tilemap.createLayer: Invalid layer ID given: null" in the console.

Share this post


Link to post
Share on other sites

Hi,

  I'm not sure what the problem is with your code without seeing it posted up on a web server.  Make sure you have a div called phaser-game?

 

at http://examples.phaser.io you can see a bunch of tilemap examples.  I took one and put it up on my own server and made sure it works with phaser 1.1.6 and it works fine - here's the example, hope it helps

 

http://www.flashysubstance.com/tileExample/

Share this post


Link to post
Share on other sites

Make sure that you have the same name as your layer in tiled. So if you are using layer1 in your code, then your layer name in tiled is also layer1. You could also open your json file and change the name in there. 

Share this post


Link to post
Share on other sites

Try doing this:

 

replace (in init.js,create)

map.addTilesetImage('tiles');

with

map.addTilesetImage('free_tileset_version_10','tiles');

adding the name of the tileset as set in the json file

That once solved my problem with something like this. (this was actually today)

Share this post


Link to post
Share on other sites

Here is your actual code. You are resizing the layer but you never made a layer to resize. Had you debugged you would have caught the error.

create = function() {  game.stage.backgroundColor = '#000000';  map = game.add.tilemap('map');  map.addTilesetImage('tiles');  map.setCollisionBetween(1, 12);  layer.resizeWorld();  player = game.add.sprite(2 * 32, 6 * 32, 'character');  game.camera.follow(player);  return cursors = game.input.keyboard.createCursorKeys();};

You should have this in there too (as you do in your code posted on here)

  layer = map.createLayer('layer1');

Here is my test bed with working tilemap

http://www.kobaltic.com/webGames/COR/public_html/index.html

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.