Json tilemap get object

[winspeednl]

Hello,

 

I have a tilemap made out of: rock,lava and a key

How do i get the location of the key? (Or if player collides)

 

what is have now:

/# game.js */window.onload = function() {		 	var game = new Phaser.Game(window.innerWidth, window.innerHeight);	var player;	var map;	var levelLayer;	var playerSpeed = 100;	var tileSize = 32;	var tilePoint = null;	var jumping = false;	var playGame = function(game){}		 playGame.prototype = {		  // preloading assets		preload: function(){			game.load.tilemap("map", "map.json", null, Phaser.Tilemap.TILED_JSON);			game.load.image("rock", "asset/rock.png");			game.load.image("crate", "asset/crate.png");			game.load.image("key", "asset/key.png");			game.load.image("lava", "asset/lava.png");			game.load.spritesheet("player", "asset/player.png", 24, 24);		},		 create: function(){			game.physics.startSystem(Phaser.Physics.ARCADE);			 			map = game.add.tilemap("map");			 			map.addTilesetImage("rock");			map.addTilesetImage("crate");			map.addTilesetImage("key");			map.addTilesetImage("lava");			 			map.setCollisionBetween(1,2);			map.setCollisionBetween(3,4);			 			levelLayer = map.createLayer("myLevel");			//levelLayer.resizeWorld();			//levelLayer.wrap = true;			player = game.add.sprite(32, game.world.height - 150, 'player');			player.anchor.setTo(0.5);			 			game.physics.enable(player, Phaser.Physics.ARCADE);						//lavas = game.add.group();			//lavas.enableBody = true;			//lava = lavas.create(64,250,"lava");						  			player.body.gravity.y = 400;			game.input.onDown.add(addBlock, this);						player.body.bounce.y = 0.2;			player.body.collideWorldBounds = true;						player.animations.add('left', [0, 1, 2, 3], 10, true);			player.animations.add('right', [4, 5, 6, 7], 10, true);						player.animations.play('right');			 console.log(map);		},		update:function(){			player.body.velocity.x = 0;			game.physics.arcade.collide(player, levelLayer, movePlayer);			//game.physics.arcade.overlap(player, lava, die, null, player);			//console.log(player.body.blocked.left);			//console.log(player.body.blocked.right);		}	}		function die() {		player.x = 45;		player.y = 250;   	}	 	function movePlayer(){		if(player.body.blocked.down){			player.body.velocity.x = playerSpeed;			playerJumping = false;		}		if(player.body.blocked.right && playerSpeed>0){			if((!map.getTileWorldXY(player.x+tileSize,player.y-tileSize,tileSize,tileSize,levelLayer)&&!map.getTileWorldXY(player.x,player.y-tileSize,tileSize,tileSize,levelLayer)) || playerJumping){					// jump				jump();			}			else{				player.animations.play('left');					// invert player speed				playerSpeed*=-1;			}		}		if(player.body.blocked.left && playerSpeed<0){			if((!map.getTileWorldXY(player.x-tileSize,player.y-tileSize,tileSize,tileSize,levelLayer)&&!map.getTileWorldXY(player.x,player.y-tileSize,tileSize,tileSize,levelLayer)) || playerJumping){				jump();			}			else{				player.animations.play('right');				playerSpeed*=-1;			}		}	}		function addBlock(e){		if(!map.getTileWorldXY(e.x,e.y,tileSize,tileSize,levelLayer)){			if(tilePoint){				map.removeTileWorldXY(tilePoint.x, tilePoint.y, tileSize, tileSize, levelLayer);				}			map.putTileWorldXY(2, e.x, e.y, tileSize, tileSize, levelLayer);			tilePoint = new Phaser.Point(e.x,e.y); 			game.physics.enable(tilePoint, Phaser.Physics.ARCADE);		}	}		function jump(){		player.body.velocity.y = -100;		player.body.velocity.x = playerSpeed/4;		playerJumping = true;	}		game.state.add("PlayGame",playGame);	game.state.start("PlayGame")}

map.json

{ "height":10, "layers":[        {         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],         "height":10,         "name":"myLevel",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":15,         "x":0,         "y":0        }], "orientation":"orthogonal", "properties":    {    }, "tileheight":32, "tilesets":[        {         "firstgid":1,         "image":"asset\/rock.png",         "imageheight":32,         "imagewidth":32,         "margin":0,         "name":"rock",         "properties":            {            },         "spacing":0,         "tileheight":32,         "tilewidth":32        },         {         "firstgid":2,         "image":"asset\/crate.png",         "imageheight":32,         "imagewidth":32,         "margin":0,         "name":"crate",         "properties":            {            },         "spacing":0,         "tileheight":32,         "tilewidth":32        },         {         "firstgid":3,         "image":"asset\/key.png",         "imageheight":32,         "imagewidth":32,         "margin":0,         "name":"key",         "properties":            {            },         "spacing":0,         "tileheight":32,         "tilewidth":32        },         {         "firstgid":4,         "image":"asset\/lava.png",         "imageheight":32,         "imagewidth":32,         "margin":0,         "name":"lava",         "properties":            {            },         "spacing":0,         "tileheight":32,         "tilewidth":32        }], "tilewidth":32, "version":1, "width":15}

Thanks

[winspeednl]

I also tried:

for (var lx = 0; lx < window.innerWidth; lx+32) {    for (var ly = 0; ly < window.innerHeight; ly++) {        if(map.getTileWorldXY(lx,ly,tileSize,tileSize,levelLayer) == "lava"){ // :/            lavaLoc = new Phaser.Point(lx,ly);         }         //console.log(map.getTileWorldXY(lx,256,tileSize,tileSize,levelLayer));    }}

But that will lag on mobile and it did not work

Is there something like map.getTileId(ID)

[wayfinder]

I think that may be a job for Tilemap.createFromTiles

[winspeednl]

I think that may be a job for Tilemap.createFromTiles

Do you have a example on that or how I use it?

[wayfinder]

var theKey = map.createFromTiles(3 /* your key's tileID */, null /* to be replaced by air after the sprite is created */, "key" /* the texture you loaded earlier */); 

theKey is now a sprite with the usual .position, .x, and .y properties to identify where it is. You can set it up to collide with the player like any other sprite.

 

If you need more than one key, you can create a Group beforehand and put all the key sprites in there like this:

var keyGroup = new Phaser.Group();map.createFromTiles(3, null, "key", map.currentLayer, keyGroup); 

You'd access these directly via keyGroup.children[index] or with the usual Group's methods. You can also specify additional sprite properties at creation as necessary, check the manual!

 

[winspeednl]

Thanks for your replay but when i do 

theKey.position // returns Undefined

So i looked in the docs (http://phaser.io/docs/2.3.0/Phaser.Tilemap.html#createFromTiles) and saw that it returns an Integer.

Looking a bit more i found (http://phaser.io/docs/2.3.0/Phaser.Tilemap.html#searchTileIndex)

var theKey = map.searchTileIndex(4 /* TileID */, 0 /* Amount of tiles to skip */, false /* Reverse */, levelLayer /* Layer */); // Returns Phaser.Tile

Now i can use

theKey.xtheKey.y