Phaser isometric basic tiling

[PhasedEvolution]

Greetings.

I am using phaser isometric plugin. I generated a tilemap.

I used this for loop for that ( similar to one the examples on the plugin examples):

 for (var xx = 0; xx < 500; xx += 38) {
            for (var yy = 0; yy < 500; yy += 38) {
               

                tile = game.add.isoSprite(xx, yy, 0, 'tile', 0, tiles_group);
                tile.anchor.set(0.5, 0);
            }
        }

I would like to know how can I generate differente types of tiles having that tilemap as base:

+ something like this for the floor ( maybe even spawning randomly and replacing some the basic tiles);

+ to add walls and make buildings (basically tiles on top of over tiles);

 

For adding different types of tiles  that replace the grass ones and to add tiles on top of others, do I have to use the for loop method as the one above? If so how is that?
Aren't there easier ways? Thank you

 

 

[Jackolantern]

I haven't used the isometric plugin before, so there could be a better way of handling this, but from a logical point of view this is how I would do it:

I would create a 2D array that will represent the overall stage or level. Inside each element of this array that will be filled with anything in your stage, add a JS object. Inside this object you can store basic stage info (whether it is a grass, trail, exposed dirt tile, etc., as well as info on warp tiles, door open/closed, or whatever else you need), but also have an array on the object that holds additional things to add to that tile, such as rock, coin, flower, wall, etc. You may also have to store additional info on how to properly render these things, such as their height. So you may have to make each one of those be their own special JS object.

This is often how 2D or isometric levels are stored: as multidimensional arrays. This way you can just change your loop to loop over the 2D array, read each element and render each tile, then see if there is that array of additional objects on the tile so you can render those as well. 

I can't be of much more help on the details since I don't know what all the isometric plugin does for you and what you have to do yourself, but I think this general idea should get you started. Hope this helps! 

[Milton]

Are these actual Tiles, or just sprites you're calling Tiles?

[PhasedEvolution]

@Milton which ones? the painted blue stuff or the grass?

 

 

[PhasedEvolution]

On 27/08/2016 at 7:18 PM, Jackolantern said:

I haven't used the isometric plugin before, so there could be a better way of handling this, but from a logical point of view this is how I would do it:

I would create a 2D array that will represent the overall stage or level. Inside each element of this array that will be filled with anything in your stage, add a JS object. Inside this object you can store basic stage info (whether it is a grass, trail, exposed dirt tile, etc., as well as info on warp tiles, door open/closed, or whatever else you need), but also have an array on the object that holds additional things to add to that tile, such as rock, coin, flower, wall, etc. You may also have to store additional info on how to properly render these things, such as their height. So you may have to make each one of those be their own special JS object.

This is often how 2D or isometric levels are stored: as multidimensional arrays. This way you can just change your loop to loop over the 2D array, read each element and render each tile, then see if there is that array of additional objects on the tile so you can render those as well. 

I can't be of much more help on the details since I don't know what all the isometric plugin does for you and what you have to do yourself, but I think this general idea should get you started. Hope this helps! 

Yep I guess that is a way to do it. However I don't want to be limited by a specific sized map. I would like later to generate kinda of a infinite map ( probably will need another plugin). Well, actually there is probably a way to generate multiple times the same "small map" you generate no?

[Milton]

44 minutes ago, PhasedEvolution said:

@Milton which ones? the painted blue stuff or the grass?

Anything. Are you creating an actual isometric Tilemap? That would be interesting.

[PhasedEvolution]

1 minute ago, Milton said:

Anything. Are you creating an actual isometric Tilemap? That would be interesting.

And how did my ignorance showed this time? Why is that?

[Milton]

2 minutes ago, PhasedEvolution said:

And how did my ignorance showed this time? Why is that?

You lost me here
I'm just interested if you got an Isometric Tilemap. That would be something new.

[PhasedEvolution]

23 minutes ago, Milton said:

You lost me here
I'm just interested if you got an Isometric Tilemap. That would be something new.

Ah ok :^) I have sepearated tile sprites... looped into a map

[Milton]

5 minutes ago, PhasedEvolution said:

Ah ok :^) I have sepearated tile sprites... looped into a map

So no Tilemap? That figures. Phaser doesn't support it, and it would be a major thing.
The best you can do is probably some sort of BitmapData. So create your Isometric Bitmap, and work with that...

[Jackolantern]

On 8/29/2016 at 6:10 AM, PhasedEvolution said:

Yep I guess that is a way to do it. However I don't want to be limited by a specific sized map. I would like later to generate kinda of a infinite map ( probably will need another plugin). Well, actually there is probably a way to generate multiple times the same "small map" you generate no?

Remember that JS arrays are completely dynamic, so you aren't limited to a specific size. But there is no such thing as an infinite map. Every map is a finite size and in memory. If you want to make a faux-infinite procedurally generated map, you would do it one chunk at a time with finite-sized maps and seamlessly switch between them. The way I mentioned would work for that as well.