Newbie question: how to remove a tile from a game?

[owen]

Hi sorry for another dumb question but.... What is the best/accepted way to remove a tile (not a sprite!) from a game?  For example collected treasure?

 

The example here uses "kill" but this does not work for me - presumably because I'm doing it to a tile not a sprite - it gives error "undefined is not a function"

http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game

 

I have been able to "fake it" by setting tile.alpha = 0, causing the tile to become invisible but still there... however I would like to actually remove the tile because that would be cleaner and would prevent unwanted hits after the first.

 

I have also tried tile.destroy() but this appears to have no effect at all.

 

Thanks

Owen

[lewster32]

Stuff like this should not really be a tile, it should be a Sprite. See this post for how to turn tiles into sprites which can then be manipulated in the normal way: http://www.html5gamedevs.com/topic/8454-change-the-body-size-of-a-tile/?p=50482

 

There's also an official Phaser example here: http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=create+from+objects.js&t=create%20from%20objects

[Dumtard]

I don't use tilemaps but http://docs.phaser.io/Phaser.Tilemap.html#removeTile seems to be what you want.

Probably still need to destory the tile, but that function returns it so just use it like this:

map.removeTile(x, y, layer).destroy();

[owen]

Thanks Lewster

 

I see why collectibles ought to be sprites not tiles.  (Learning huge amnounts as I go along here sorry!)

 

Now I have problems converting my tiles into sprites even after picking through the examples and doing exactly the same thing. To begin with I simply cannot get my sprite group populated.

// create our treasures sprite group    treasures = game.add.group();    treasures.enableBody = true;    console.log("(A) Created new treasures group");        for (var idx = 300; idx < 400; idx++) {        console.log("( Attempting to create sprite "+idx+" from tile object"); // this outputs as expected        map.createFromObjects('Object Layer 1', idx, 'treasure', 0, true, false, treasures);        console.log("(C) Created sprite "+idx+" ok" ); // this outputs as expected    }    // PROBLEM: These both return 0.  There shold be some in there!    console.log("(D) treasures.countDead = " + treasures.countDead());    console.log("(E) treasures.countLiving = " + treasures.countLiving());            // PROBLEM: This does nothing because there is nothing in the treasures group yet.    treasures.forEach(function (treasure) {        console.log("(F) Rescaled treasure");        treasure.scale.x = 3;        treasure.scale.y = 3;    });

It seems to populate them (console debug B and C are shown 100 times as expected).  Yet there is 0 coming back from the countLiving() and countDead() methods.  I am pretty sure the problem lies in my use of map.createFromObjects although I cannot see what exactly.

 

If it helps, the work in progress with these problems is at http://www.owensouthwood.com/mrgoggles

 

EDIT: Here is the JSON exported from Tiled which I am using.  Perhaps the Object Layer isn't correct (just an empty object layer).  Should I change something in the tile map?

{ "height":25, "layers":[        {         "data":[101, 0, 0, <snip! a lot of index numbers>],         "height":25,         "name":"Tile Layer 1",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":100,         "x":0,         "y":0        },         {         "height":25,         "name":"Object Layer 1",         "objects":[],         "opacity":1,         "type":"objectgroup",         "visible":true,         "width":100,         "x":0,         "y":0        }], "orientation":"orthogonal", "properties":    {    }, "tileheight":32, "tilesets":[        {         "firstgid":1,         "image":"ts-platforms.png",         "imageheight":320,         "imagewidth":320,         "margin":0,         "name":"ts-platforms",         "properties":            {            },         "spacing":0,         "tileheight":32,         "tilewidth":32,         "transparentcolor":"#ffffff"        },         {         "firstgid":101,         "image":"ts-blocks.png",         "imageheight":320,         "imagewidth":320,         "margin":0,         "name":"ts-blocks",         "properties":            {            },         "spacing":0,         "tileheight":32,         "tilewidth":32,         "transparentcolor":"#ffffff"        },         {         "firstgid":201,         "image":"ts-scenery.png",         "imageheight":320,         "imagewidth":320,         "margin":0,         "name":"ts-scenery",         "properties":            {            },         "spacing":0,         "tileheight":32,         "tilewidth":32,         "transparentcolor":"#ffffff"        },         {         "firstgid":301,         "image":"ts-treasure.png",         "imageheight":320,         "imagewidth":320,         "margin":0,         "name":"ts-treasure",         "properties":            {            },         "spacing":0,         "tileheight":32,         "tilewidth":32,         "transparentcolor":"#ffffff"        }], "tilewidth":32, "version":1, "width":100}

Cheers

Owen

[lewster32]

The problem is that you don't have an object layer in your tiled data. If you search down through the example JSON file, you'll see Object Layer 1 with all of its items specified as objects. This is what Phaser will turn into sprites, but you have to ensure you provide that layer in the correct format in Tiled. I can't really give much advice on this part of it as I've not used Tiled but I assume it's fairly straightforward to do?

[owen]

Uh, yes. Good point. Well I do have an Object Layer 1 already in my JSON file however it seems rather empty.  I figured that was something to do with it... Considering I am trying to create sprites from objects in that layer.  But thus far I've no idea how I'm supposed to populate it.  Off to the Tiled site I go...

[owen]

 

I don't use tilemaps but http://docs.phaser.io/Phaser.Tilemap.html#removeTile seems to be what you want.

Probably still need to destory the tile, but that function returns it so just use it like this:

map.removeTile(x, y, layer).destroy();

 

Thanks I am going to use that elsewhere in my game although not for collecting treasure.  For treasure I am going to try and use sprites (for animation).

I thought I could use removeTile for destroying blocks/walls etc. as part of the game.  Thanks.

[owen]

Thought I would mention that I am doing it this way.  Just setting the alpha to 0 (making it invisible) and then removing all the collisions on the tile.  Not neat or tidy but it's the only way I could get it working since destroy() does nothing.

tile.alpha = 0;tile.collideUp = false;tile.collideDown = false;tile.collideLeft = false;tile.collideRight = false;

As per:

http://www.html5gamedevs.com/topic/5212-breakable-tiles-in-phaser-2/