Jump to content

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


owen
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

 

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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