2.5D, is it possible?

[Hardtail]

Looking at using Phaser. Is it possible to create isometric worlds? I'm looking to build something similar to Diablo II's viewport.

 

Thanks.

[lewster32]

Yes: http://www.html5gamedevs.com/topic/8387-phaser-isometric-plugin

[Hardtail]

Yes: http://www.html5gamedevs.com/topic/8387-phaser-isometric-plugin

This is simply amazing. You are the best. Thank you so much! I can't wait to get started.

 

edit: How should I get started? Should I design my "world" or "zone" first and then try to create it by using your Pointer Interaction tutorial for the tiles?

[lewster32]

The plug-in is pretty low level so you'll have to figure out your own way of generating the world, but I'd suggest for a Diablo-like game that you maybe create the 'floor' of the world as a series of large interconnecting tiles or even a single repeating TileSprite (or a mixture of both) and then have the objects of the world in a separate group on top, and sort that group. You should be able to use simple sorting on that group for speed as typically in Diablo games things tend to stay on one z-plane. Then you should be able to pretty easily create a click and move routine and have the IsoArcade physics work its magic with your collision detection etc.

[Hardtail]

The plug-in is pretty low level so you'll have to figure out your own way of generating the world, but I'd suggest for a Diablo-like game that you maybe create the 'floor' of the world as a series of large interconnecting tiles or even a single repeating TileSprite (or a mixture of both) and then have the objects of the world in a separate group on top, and sort that group. You should be able to use simple sorting on that group for speed as typically in Diablo games things tend to stay on one z-plane. Then you should be able to pretty easily create a click and move routine and have the IsoArcade physics work its magic with your collision detection etc.

Hi lewster32. Thanks for the information. Should I go through all of the Phaser tutorials before doing this? I just learned JavaScript and want to start trying to build things. 

 

I guess the approach is different from the standard side viewport though. Do you recommend any one tutorial to start with to use your plugin? Hope this is not too much of a bother, just do not know where I should begin. Thanks.

[lewster32]

I'd maybe attempt a few tutorials first yeah. The plug-in is designed to be very easy to use for anyone familiar with Phaser and its built-in Arcade Physics, so you could do some standard 2D tutorials like platformers etc to get used to the API. There are interactive examples of the plug-in here if you'd like to go straight to that though: http://rotates.org/phaser/iso/examples/

[Hardtail]

I'd maybe attempt a few tutorials first yeah. The plug-in is designed to be very easy to use for anyone familiar with Phaser and its built-in Arcade Physics, so you could do some standard 2D tutorials like platformers etc to get used to the API. There are interactive examples of the plug-in here if you'd like to go straight to that though: http://rotates.org/phaser/iso/examples/

 

Hi Lewster. Just taking a look at your finished example. Let me know if I am following correctly. I am still going to start with basic Phaser tutorials later this evening, just trying to wrap my head around all of this.

var tileArray = [];        tileArray[0] = 'water';        tileArray[1] = 'sand';        tileArray[2] = 'grass';        tileArray[3] = 'stone';        tileArray[4] = 'wood';        tileArray[5] = 'watersand';        tileArray[6] = 'grasssand';        tileArray[7] = 'sandstone';        tileArray[8] = 'bush1';        tileArray[9] = 'bush2';        tileArray[10] = 'mushroom';        tileArray[11] = 'wall';        tileArray[12] = 'window';

So here you are creating your array of the sprites correct? Assigning values to the keys in the area which correspond the the correct sprite/image?

var tiles = [            9, 2, 1, 1, 4, 4, 1, 6, 2, 10, 2,            2, 6, 1, 0, 4, 4, 0, 0, 2, 2, 2,            6, 1, 0, 0, 4, 4, 0, 0, 8, 8, 2,            0, 0, 0, 0, 4, 4, 0, 0, 0, 9, 2,            0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0,            0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0,            0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0,            0, 0, 0, 0, 4, 4, 0, 0, 0, 0, 0,            11, 11, 12, 11, 3, 3, 11, 12, 11, 11, 11,            3, 7, 3, 3, 3, 3, 3, 3, 7, 3, 3,            7, 1, 7, 7, 3, 3, 7, 7, 1, 1, 7        ];

Now over here you are essentially "designing" your floor with the key values of the array? 

var size = 32;

This is the size of your floor?

var i = 0, tile;        for (var y = size; y <= game.physics.isoArcade.bounds.frontY - size; y += size) {            for (var x = size; x <= game.physics.isoArcade.bounds.frontX - size; x += size) {                // this bit would've been so much cleaner if I'd ordered the tileArray better, but I can't be bothered fixing it                 tile = game.add.isoSprite(x, y, tileArray[tiles[i]].match("water") ? 0 : game.rnd.pick([2, 3, 4]), 'tileset', tileArray[tiles[i]], isoGroup);                tile.anchor.set(0.5, 1);                tile.smoothed = false;                tile.body.moves = false;                if (tiles[i] === 4) {                    tile.isoZ += 6;                }                if (tiles[i] <= 10 && (tiles[i] < 5 || tiles[i] > 6)) {                    tile.scale.x = game.rnd.pick([-1, 1]);                }                if (tiles[i] === 0) {                    water.push(tile);                }                i++;            }        }    },

I don't have a lot of experience with writing any code, but let me see if I can translate this...

 

You are creating your initializer and setting it to 0. You create the variable tile as well with no assigned value.

 

Then your for loop starts. Y is set to the value of 'size' which was defined as 32 earlier. 32 being your floor correct?

 

x is less than or equal to game.physics.isoArcade.bounds.front.x (not sure what this is yet) MINUS size, (32); then add size to y?

 

I am a little stumped on the contents of the loop. It looks like you are adding the sprite and then selecting random sprites from the array?

[lewster32]

You've got it all pretty much spot on - the random bit is actually adding some variance to the z property (the 'height') to make the landscape a little more interesting, except if the tile is water, in which case we leave it at a z height of 0, and later on add the wave effect. The size property is the size of the individual tiles, and the bounds.frontX and frontY checks are there to say 'draw tiles until you reach the limit of the world', which in the plug-in is defined as a large invisible cube that fits reasonably into the viewport when initialised.

 

It's actually a pretty poor system that was written really on the fly and could be a lot neater, but you've gotten the drift of it pretty well regardless

[Hardtail]

Thanks Lewster! I was somewhat intimidated at first. But now I think I can give it a go! If I wanted to remove the water completely, what would be the best way to do that? Thanks!

[lewster32]

Just change all of the values in tileArray which are 0.

[Hardtail]

Lewster I got your main example working. I want to create a big world, or "act" as you may call it. Can I go ahead and just start building it or do I need to worry about size? 

 

 

Edit:

 

Lew I am testing this out to see how I can build a world. 

 

I set the resolution to 1800x1200 for a test. Trying to build a map so to speak.

  var tiles = [            9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 9, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 9, 9, 9, 9, 9, 9, 9,            9, 9, 9, 9, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,        ];

Trying to make a box in an area. If you copy and paste that into your script you will see what I am trying to do at 1800x1200. If I change the resolution it does not work.

 

Right now it is very difficult to design a level. Is there an optimal way to do this or must I create it 1 array key at a time via trial and error? Do I basically have to design the game in 1 resolution so nothing changes? I want to be able to play in fullscreen as well.

 

What I am basically trying to do is make a "town" and have different "zones".

[lewster32]

Unfortunately there's no easy way to do this - you'd probably have to create the editor yourself. For non-isometric worlds Phaser has TileMaps which allow you to use a program like Tiled to design your layouts easily, then import them, but this will not work for isometric worlds (despite Tiled supporting them) because to implement that would be rather a larger task than I'm willing to take on right now.

[Hardtail]

Hey Lewster, what do you mean create the editor myself?

[lewster32]

Actually code a level editor, ideally in Phaser, where you can select and place tiles and whatever else you need to do.

[Hardtail]

I would not know where to begin with something like that. Bummer!

[shmikucis]

You can contribute to MightyEditor and add isometric to it. This editor is 2D and based on Phaser. There are a lot of things already done so you wouldn't start from scratch. Check github.

I can help you with more details if you are interested

[Hardtail]

You can contribute to MightyEditor and add isometric to it. This editor is 2D and based on Phaser. There are a lot of things already done so you wouldn't start from scratch. Check github.

I can help you with more details if you are interested

Sounds very interesting. I was actually looking at your editor yesterday! Please send me a private message or something. I would definitely be interested. I am currently upgrading my skills from Treehouse so I will be learning how to use Git and more advanced programming.

 

Thanks!

[celtic.sadness]

Explaining (sorry for my bad English translation)

 

"Rendering" of sprites / tiles isometrically is a little more complicated than the process explained. The "explained" serves as a working basis and for scenarios where "no sprite" is above / below another (the sprites are just front or back at the same level). In this case the algorithm is clear: follow the drawing order +(Z-X).

 

But what happens when I have floating elements to a level/height Y?

 

a-) If the sprites are placed on top of other sprites exactly without overlapping/intersecting with any of them (on the Y axis), the order can be used paint +(Z-X)-Y.

 

b-) If the sprite "intersects/overlaps" more then 1 sprite simultaneously (in X, Y and/or Z) WE HAVE A PROBLEM: In what order will draw them?. Then we need a complex sorting algorithm to determine the order. Not to mention when we have "a lot of" floating sprites to be "integrated".

 

I, after a long analysis (and much suffering), was able to implement an algorithm. I would never have imagine complexity (honestly I thought it will be easier) of this "affair" and I went finding as I started developing my first game in cocos2d-x 2.5D. An algorithm of this type requires, in the first instance, a "comparison "everything with everything" but is possible to make a lot of optimizations for reducing calculation process so much.

 

An example (demo) of the algorithm result can be seen here:

 

I am finishing a tutorial here in a few days: 

http://isometric-rendering.weebly.com

 

That algorithm is 'tile dims independent'.

 

Basicly, algorithm checks/maps (before each scene visualization) all "front, back, top, below" tiles for each tile. Drawing only consists in follow "in a recursive mode' that 'mapping'.