Looking to create semi-isometric look of old PC RPGs

[Jackolantern]

I am pretty sure Phaser can do this out-of-the-box. I am wanting to create a graphical style similar to Ultima VI. For those unfamiliar, here are some screenshots (unfortunately a lot of the screenshots are of the cutscenes, but there are several of the game map in there as well). It isn't truly isometric in the way we typically think about it, such as the style made by the amazing-looking Phaser isometric plugin. I believe that would be overkill for this type of style. The ground tiles all seem to be pretty standard overhead perspective, with only things protruding above the ground with somewhat of an isometric slant.

 

My plan is to simply break walls up into standard-sized tiles and just add them carefully to the scene, overlapping with the floor tiles as needed (which I believe the original DOS Ultimas did, as I think I can see in screenshot 19 of 19 on the page I linked), and then I believe everything after that is simply a matter of making sure to add them in the correct order. For collision boxes, on characters for example, the box seems like it would only need to be at their feet, so that their head could overlap with things behind them. I suppose there would also be the matter of making sure walls overlap players as they move around, but that could probably be done with some creative collision code.

 

Does this make sense? Do I seem to be on the right path here? Do you see any pitfalls in this, or implementing this in Phaser? Thank you! 

[jpdev]

You are correct, there seems to be nothing actually isometric about it. Just artist skills in making the tiles.

 

I would put everything that can move into one group and order it by first Y-Position and then X-Position (things with the same y get ordered by x-position).

This way the people correctly overlap with each other when drawn.

 

For the world I would put the ground on one tiled layer including walls - everything that fills a tile completely.

And then another layer for decorations (stuff that needs ground beneath it).

 

But: If you have trees/walls that the player or other objects/npcs can stand in front of and also move behind, then they need to be in the same group as the player or you can't get the order right.

I am not exactly sure how to make that work with tiled.

 

Bit tiled is so nice for designing the world, that I would still try to use it and make this work somehow.

[Jackolantern]

Thank you!

 

It will likely just take some experimenting to get things like trees working that players can be both in front of or behind. 

[ForgeableSum]

hmm, the camera angle in those screenshots is not what you'd normally see in an isometric game. Usually when game devs talk about "isometric," they really mean dimetric which is when two angles of the 3d object are the same but the third is different. Like in my game built in phaser:

 

 

 

I'd recommend not putting walls into tiles. Instead, make them images (in a group) that can be placed on top of the tiles. Tiles should really only be repeatable textures. Believe me, this will save you a lot of heartache in the future. 

 

And you don't need/want to use collision detection for characters moving around the walls. Instead, you want to use a pathfinding system. This is the one I use. There's also a phaser pathfinding plugin. Collision detection is for doing something when one object hits another. You wouldn't want your game characters to need to bang into a wall to figure out the next tile to move to! 

[Jackolantern]

Thank you for the tips! And yes, what I am going for isn't true isometric. It is like a faux-isometric, or "Ultima slant" as I have also heard it called. And I will keep that in mind as far as the walls as images and collisions. Thanks again!

 

Edit: By the way, that game looks awesome! Did you do the isometric coding custom, or did you use a library (as for the sorting and such; I do see the link to the pathfinding library, which looks great!)

[jpdev]

If you go for the ultima look or 2d zelda look (zelda also does fake some perspective into the tiles) those games definitely all use tiles for walls and buildings.

 

And they (Zelda, Ultima) also use collision not pathing (since you control the character directly). If you have a strategy game like feudalwars posted, then of course you will need pathfinding, since you only set the targets where the units should move to.

 

Not saying that feudalwars tip is wrong, just saying that it depends on the game.

 

Btw feudalwars screenshot/game is not isometric (except for the building rendering) - check out his blog and the level editor video, when placing the trees it's clear that there is no isometric map involved.

[ForgeableSum]

All the artwork - buildings, trees, textures, etc - is in the isometric (dimetric) perspective but I'm not using a isometric transformation matrix in realtime if that's what you mean. All of my realtime code works in cartesian coordinates (including pathfinding). So depth sorting is a simple matter of determining if the object is higher/lower on the y axis (the same sorting a zelda game would use). Working in cartesian also eliminates a host of other complications I won't go into right now.

 

But I was unaware Ultima was a game where you control the character directly - thought it was a point and click, sorry. In that case, it does make sense to use a collision detection system.

 

I suppose there would also be the matter of making sure walls overlap players as they move around, but that could probably be done with some creative collision code.

 

You've got two problems to solve basically:

1. the character can't move where there's a wall

2. the character needs to appear in front of the wall image if the character is in front of it and behind the wall image if the character is behind it

 

The first problem can be solved with collision detection and the second with one line of code in update():

group.sort('y', Phaser.Group.SORT_ASCENDING);

 

See this example:

http://phaser.io/examples/v2/groups/depth-sort

 

Hope that helps!

[Jackolantern]

Oh very nice! I had not seen that example. That will help me out! 

 

As for collision vs. pathfinding, I would say you are both right, since it does matter what the input scheme of my game would be (and which I didn't mention). I am not sure what I was thinking when I said "creative collision code" could solve the wall/player overlap problem, since I am planning to have click-to-move with strict tile-based movement, so there would be no collisions. The more I looked at that pathfinding library, the more I think that will work great for me. I was planning on rolling my own following this tutorial, but why do that if this fits my needs perfectly?

 

Thank you both for all of the help! I also think just digging in to Tiled and the Phaser sorting methods will help me to work out a lot of this. I am still quite a ways from that point, though (still working on the design doc). It was more that I was wanting to get the graphical style nailed down while in the planning phase before investing resources into having them made, only to find out I would need to use a Phaser plugin or something like that, which could have had further implications on the assets. 

 

Thanks again!