Investigating neighbouring tiles

[oldmanvegas]

I'm currently working with tiles to create levels - so far so good - I've managed to make a demo car game with a maze, collisions with walls and mines all working as expected.

 

I'd like to extend the functionality with a new tileLayer with one tile on it - let's say its a tile indicating fire - and on a timer I'm firing a function which looks at the neighbouring tiles around it, and if they're empty (hasTile()?) then fill them with a fire tile - this means the fire layer will expand over time but only into neighbouring tiles.

 

I'm currently using forEach to cycle through the tiles and only consider the ones with the correct tile index.

 

I've tried using the function map.getTileAbove as a proof of concept but so far I can't work out why the response I'm getting is error (undefined) .

 

Has anyone tried anything like this? And if so any advice would be appreciated. What's the best and most optimal way to check through the tiles to see if they're empty and then replace the tile texture?

 

Cheers

 

 

[chongdashu]

From what you've described, it doesn't sound like a problem. But saying that map.getTileAbove is breaking might be a result of something else not set up correctly. Do you have like a jsFiddle that you can share or a Phaser sandbox set up that can replicate this problem?

[oldmanvegas]

I've managed to get it working bar one issue - the forEach creates a new tile at 0,0 after the first iteration and then the new tiles spawn from there as expected, but the initial "seed tile" the one which should be the start point is ignored.

 

For a dummy run I've made a simple 10x10 grid - the seed tile is at position 8,8. However the loop creates a tile at 9,8 as I'd expected - then randomly adds one at 0,0 and then grows out from there instead.

 

fired by a timer: 

 

map.forEach(this.checkSpread, this, 0, 0, 10, 10, blocks)

 

then function is as follows (I know it could be optimised but I'm just seeing what happens for now)

 

checkSpread: function(block){

 

        if(block.index === 107){

            map.setLayer(blocks);

            var xPos = block.x;

            var yPos = block.y;

            console.log(xPos + "|" + yPos)

 

            //select direction at random?

            var randomValue = this.game.rnd.integerInRange(1, 4);

 

            switch(randomValue){

                case 1:

                    if(yPos > 0){

                        var topTile  = map.hasTile(xPos, yPos - 1,blocks);

                        if(!topTile && yPos > 0){

                            console.log("NO block above - fill it")

                            map.fill(107, xPos, yPos-1, 1, 1, blocks)

                        }

                    } 

                break;

 

                case 2:

                    if(yPos < 9){

                        var underTile  = map.hasTile(xPos, yPos + 1,blocks);

                        if(!underTile){

                            console.log("NO block below - fill it")

                            map.fill(107, xPos, yPos+1, 1, 1, blocks)

                        }

                    }

 

                break;

 

                case 3:

                    if(xPos > 0){

 

                        var leftTile  = map.hasTile(xPos -1, yPos,blocks);

                        if(!leftTile && xPos > 0){

                            console.log("NO block left - fill it")

                            map.fill(107, xPos-1, yPos, 1, 1, blocks)

                        }

                    }

 

                break;

 

                case 4:

                    if(xPos < 9){

                        var rightTile  = map.hasTile(xPos +1, yPos,blocks);

                        if(!rightTile){

                            console.log("NO block right - fill it")

                            map.fill(107, xPos+1, yPos, 1, 1, blocks)

                        }

                    }

 

                break;

            }

            // if(xPos > 1 && yPos > 1)

            //   map.fill(107, xPos, yPos, 2, 2, blocks)

        }

 

    },

[oldmanvegas]

I figured it out. 

 

I used map.searchTileIndex(TileIndexNum,false,randomTile, layerName);

 

I generated the randomTile variable by counting up the number of new tiles added and grabbed a random number from that range - so the function looked for a single tile each time and checked around it and spread the "fire" as it grew. Works pretty well.

[jmp909]

oldmanvegas if you use the <> on the editor to paste code, it's easier to read

 

checkSpread: function(block){        if(block.index === 107){            map.setLayer(blocks);            var xPos = block.x;            var yPos = block.y;            console.log(xPos + "|" + yPos)            //select direction at random?            var randomValue = this.game.rnd.integerInRange(1, 4);            switch(randomValue){                case 1:                    if(yPos > 0){                        var topTile  = map.hasTile(xPos, yPos - 1,blocks);                        if(!topTile && yPos > 0){                            console.log("NO block above - fill it")                            map.fill(107, xPos, yPos-1, 1, 1, blocks)                        }                    }                 break;                case 2:                    if(yPos < 9){                        var underTile  = map.hasTile(xPos, yPos + 1,blocks);                        if(!underTile){                            console.log("NO block below - fill it")                            map.fill(107, xPos, yPos+1, 1, 1, blocks)                        }                    }                break;                case 3:                    if(xPos > 0){                        var leftTile  = map.hasTile(xPos -1, yPos,blocks);                        if(!leftTile && xPos > 0){                            console.log("NO block left - fill it")                            map.fill(107, xPos-1, yPos, 1, 1, blocks)                        }                    }                break;                case 4:                    if(xPos < 9){                        var rightTile  = map.hasTile(xPos +1, yPos,blocks);                        if(!rightTile){                            console.log("NO block right - fill it")                            map.fill(107, xPos+1, yPos, 1, 1, blocks)                        }                    }                break;            }            // if(xPos > 1 && yPos > 1)            //   map.fill(107, xPos, yPos, 2, 2, blocks)        }    },