Sign in to follow this  
PhasedEvolution

Phaser isometric basic tiling

Recommended Posts

Greetings.

I am using phaser isometric plugin. I generated a tilemapmap.png.

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);random_tiles.PNG

+ 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

 

 

Share this post


Link to post
Share on other sites

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! 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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.  

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.