PDA

View Full Version : [AS2] Feedback Wanted: Isometric Game Interface


fenstalker
02-21-2009, 05:52 PM
Hi this is my first post to actionscript.org.

I'm developing an isometric interface similar to old games like Landstalker. This is not a point-and-click interface, but rather it uses keyboard directions, so you use the arrow keys to move, and spacebar to jump.

The current version can be seen here:
http://fenstalker.com/content/IsoWorld/

(You may have to click it to get the keyboard interactivity working.)

Your thoughts? The graphic are placeholder of course, and the depth sorting needs some tweaking, but this is close to the final algorithm of the isometric engine I've built. Your feedback on interactivity, perspective, running speed, and other factors is welcome.

Thanks!
-bh ;)

MinusNick
02-22-2009, 12:17 AM
Hehe, this is pretty awesome. I love how the shadow changes when you go under the bridge and how the elevator stops if you go under it. Very nice attention to the details. Just curious: how many lines of code is all this?

fenstalker
02-22-2009, 05:44 AM
Hehe, this is pretty awesome. I love how the shadow changes when you go under the bridge and how the elevator stops if you go under it. Very nice attention to the details. Just curious: how many lines of code is all this?

Thanks for the feedback. Did you find the arrow key navigation awkward? I know some are not fans of arrow keys in isometric view. The perspective is shifted a little to hopefully help with this (if you'll notice, the perspective is not exactly symmetrical).

I haven't counted the lines of code but like most projects it started small, then expanded into a large set of classes, and then as the system was refined it trimmed back down into a relatively compact set of related functions and objects. I would guess about 500 lines or so for the classes, and 100 for each instance of the algorithm to setup a level using those classes.

kkbbcute
02-22-2009, 06:05 AM
I love your attention to detail, is this going to be in some form of game or something in the near future or just a challenge for yourself?

Side Note: I feel a click to move system still works better for isometric games.

fenstalker
02-23-2009, 04:05 AM
I love your attention to detail, is this going to be in some form of game or something in the near future or just a challenge for yourself?

Side Note: I feel a click to move system still works better for isometric games.

The isometric technology is being developed as a marketable product--not exactly a game, but a series of interactive "scenes" for the web. It has been a fun challenge though. Isometric depth sorting is a real puzzle. :)

I know a lot of games use the point-click method to navigate in an isometric world but that's not feasible in this case, as the scenes must be explorable in all dimensions, whereas point-click worlds don't allow free movement in the Z direction. That's fine for weapons-based roll playing games but not so great if you want to call upon the user's sense of timing and spatial interaction. In short, this is to be more like the old Zelda/Landstalker games.

PS - the demo has been updated.
http://fenstalker.com/content/IsoWorld/

--

fenstalker
02-23-2009, 09:45 PM
Just curious: how many lines of code is all this?

PS - I checked... I guess it's closer to 2500 lines of code, but I go heavy on the comments/documentation and those are included, so probably more like 2000 of actual code.

bluemagica
02-24-2009, 02:57 AM
really good stuff....it would be great if you could opensource it!

The code seems blazing fast, but i felt a very slight quirk if i get to the bottom of elevator( to stop it) during motion! The arrow keys sometime do get a bit confusing, but i guess its better than mouse and its the best available option!

kkbbcute
02-25-2009, 05:06 AM
really good stuff....it would be great if you could opensource it!

Same here, then everyone can improve upon it!

fenstalker
02-25-2009, 04:39 PM
Same here, then everyone can improve upon it!

I'd like to, but this isometric engine + level editor is being developed for sale to a client for further use, so I can't give it away. Sorry!

kkbbcute
02-26-2009, 12:27 PM
Actually I found a lame graphical bug, the shadow of the lift doesn't move while the lift moves. Since the light source is at an angle based on your shading, the shadow should be moving away from the direction of the light source.

fenstalker
02-26-2009, 05:24 PM
Actually I found a lame graphical bug, the shadow of the lift doesn't move while the lift moves. Since the light source is at an angle based on your shading, the shadow should be moving away from the direction of the light source.

The light source is not at an angle, it is directly above. The shading of the blocks is not meant to indicate a lighting angle, just a sense of depth and graphically pleasing sprites (it wouldn't look good if the two sides were the same tone). I think you'll find that most games do not aim to be precisely realistic, nor would it be helpful in many cases. For example, if the shadows shifted horizontally via the "sun's" angle, then the value of having shadows at all would be lessened because the shadows serve to emphasize the depths of objects, providing a visual cue of spatial relations in the Z dimension while moving through an isometric world. I can remember the old Landstalker game, in which the character Nigel had a shadow to help you gauge where he was in the world, but floating blocks did not have shadows, so you couldn't always tell where it was without testing via collision. Shadows directly under the objects is a purposeful visual cue. Shifting them would reduce that cue's effect, despite being more realistic.

Check out this screenshot of Mortal Kombat 2:
http://www.freewebs.com/shogo_roms/Mortal%20Kombat%202.jpg

The lighting doesn't really make sense if you analyze it from the perspective of a Director of Photography, but when you consider that the shadows are just there to add depth to the background and help gauge position when jumping, it makes sense.

So I would say this is not a bug. Thanks for looking so closely though! The bug I am concerned about at the moment is that it seems to run slow on Windows Vista, and faster on Windows XP. WTH?

PS - I just added doorways to the interface and will be uploading a new demo soon. :D

kkbbcute
02-27-2009, 05:49 AM
I sort of don't have two Os-es at the moment so I cant test your XP/Vista bug, which actually isn't a bug at all but rether a performance inconsistentcy. But moving shadows do actually add depth, it gives you an impression that an object is further away from the ground, doesn't it?

fenstalker
02-27-2009, 04:39 PM
I sort of don't have two Os-es at the moment so I cant test your XP/Vista bug, which actually isn't a bug at all but rether a performance inconsistentcy. But moving shadows do actually add depth, it gives you an impression that an object is further away from the ground, doesn't it?

Yes but the parallax shadows are redundant when the object itself is moving through an isometric world. The object is moving relative to the objects under it. A single shadow below is all that is needed to triangulate their relative positions. That shadow is the connector point. Any shadow angling would confuse it, and at the cost of lots of additional processing: angled shadows would bring the shadowing algorithm from O(n) to O(n^2).

kkbbcute
03-01-2009, 11:07 AM
Yes but the parallax shadows are redundant when the object itself is moving through an isometric world. The object is moving relative to the objects under it. A single shadow below is all that is needed to triangulate their relative positions. That shadow is the connector point. Any shadow angling would confuse it, and at the cost of lots of additional processing: angled shadows would bring the shadowing algorithm from O(n) to O(n^2).

Another example of the performance limitations in Flash. Fine, actually there is no need for such an elaborate shadowing system anyway, the only reason why I was pointing it out was because based on your isometric engine in general, I thought that you loved/needed an insane level of detail.;)

fenstalker
03-02-2009, 06:51 PM
Another example of the performance limitations in Flash. Fine, actually there is no need for such an elaborate shadowing system anyway, the only reason why I was pointing it out was because based on your isometric engine in general, I thought that you loved/needed an insane level of detail.;)

Understood. I do appreciate the feedback. I considered and tried the angled shadows because I also thought it would be cool... but as stated it actually hurts the usability and decreases performance. (The downward shadows alone are the slowest part of the algorithm; without the shadows the entire engine runs 3x faster. It could benefit from some minor enhancements but it seems the reason for the primary performance problem stems from moving the shadow graphics around on the screen, and that's something with limited options for optimization.)

EightySeven
03-03-2009, 12:31 AM
One thing I noticed is that you move much faster on an angle then you do vertical or horizontal. faster with 2 keys pressed then with one

fenstalker
03-03-2009, 02:33 AM
One thing I noticed is that you move much faster on an angle then you do vertical or horizontal. faster with 2 keys pressed then with one

Yes, I have gone back and forth on that issue. My programmer instinct is to do some math and force the same speed on all directions. But then I look at some old games and see the same effect, and I kind of liked it on old games because if you have vast distances to cross you can run cross-wise and get there faster. What did you think? Was it annoying or just unexpected? Hard to use? Hard to control?

http://www.fenstalker.com/content/isoworld

kkbbcute
03-03-2009, 06:30 AM
Actually I sort of like it, its really quite fine if you ask me, and it doesnt feel all that unnatural. If it did someone would have pointed it out in the first few posts!

fenstalker
03-03-2009, 03:35 PM
Actually I sort of like it, its really quite fine if you ask me, and it doesnt feel all that unnatural. If it did someone would have pointed it out in the first few posts!

Thanks for your thoughts (again!). In an earlier version I simply disabled multiple key movement, only allowing 4 directions:

http://www.fenstalker.com/content/pixeljoint/

This works too, and halved the number of sprites needed for the character. There are many old games that work this way as well, though some say the inability to move diagonally is too limiting. If you press multiple keys it simply builds a queue with recent keys on top, then uses only the top keypress in the queue for movement. NOTE: This early version is also in true isometric perspective, making it more familiar, but also making the keyboard controls more frustrating due to the complete left/right balance. (This is why I shifted the perspective in the new version to bias the directions.)

PS - New updates added!
http://www.fenstalker.com/content/isoworld

kkbbcute
03-04-2009, 08:00 AM
Thanks for your thoughts (again!). In an earlier version I simply disabled multiple key movement, only allowing 4 directions:

http://www.fenstalker.com/content/pixeljoint/

This works too, and halved the number of sprites needed for the character. There are many old games that work this way as well, though some say the inability to move diagonally is too limiting. If you press multiple keys it simply builds a queue with recent keys on top, then uses only the top keypress in the queue for movement. NOTE: This early version is also in true isometric perspective, making it more familiar, but also making the keyboard controls more frustrating due to the complete left/right balance. (This is why I shifted the perspective in the new version to bias the directions.)

PS - New updates added!
http://www.fenstalker.com/content/isoworld

0_o, nice new area, by the way just wondering if you could roughly share how you did the shadows?

fenstalker
03-04-2009, 05:28 PM
0_o, nice new area, by the way just wondering if you could roughly share how you did the shadows?

No problem. Each block in the scene is roughly rectangular in shape. which means in isometric view, each block has 3 sides facing the viewer.

In the initialization of each level, we define which blocks are shadow receivers and/or shadow casters.

Each shadow receiver block is given a shadow graphic corresponding to each shadow caster. So actually in the scene every block has a graphic corresponding to the shadow of the player jumping around. That is to say, if you jump over the ground and see the player's shadow, then jump over a block and see the player's shadow, you're not looking at the same shadow graphic. You can only see the shadow graphics when the caster is above the receiver, otherwise they are hidden by a diamond-shaped mask on the receiver. This applies to all 3 sides.

The top shadows simply follow their casters around. The side shadows are a little different, appearing as elongated swaths, but the theory is the same.

It's more complicated but this is the general theory. Does it make sense?

davidrlorentz
03-05-2009, 01:13 AM
That's real nice, fenstalker. I like. :)

I agree with others that using arrow keys in isometric can be disorienting at first, but on the other hand it only takes a couple seconds to get accustomed to it. I'd say if the gameplay you have in mind is platformy, you definitely want to go for the arrow keys!

kkbbcute
03-05-2009, 08:42 AM
No problem. Each block in the scene is roughly rectangular in shape. which means in isometric view, each block has 3 sides facing the viewer.

In the initialization of each level, we define which blocks are shadow receivers and/or shadow casters.

Each shadow receiver block is given a shadow graphic corresponding to each shadow caster. So actually in the scene every block has a graphic corresponding to the shadow of the player jumping around. That is to say, if you jump over the ground and see the player's shadow, then jump over a block and see the player's shadow, you're not looking at the same shadow graphic. You can only see the shadow graphics when the caster is above the receiver, otherwise they are hidden by a diamond-shaped mask on the receiver. This applies to all 3 sides.

The top shadows simply follow their casters around. The side shadows are a little different, appearing as elongated swaths, but the theory is the same.

It's more complicated but this is the general theory. Does it make sense?
Cool, but doesn't this mean that everything will screw up with very complicated objects, like a human for example?

EightySeven
03-05-2009, 12:26 PM
I don't find the controls difficult at all. then again i'm use to this view

kkbbcute
03-05-2009, 12:29 PM
I don't find the controls difficult at all. then again i'm use to this view

Actually maybe the movement feels fine because of the current simplicity of in game graphics. For all you know, when more objects are added onto the screen, everything would seem messy and disorientating. Just saying, that sometimes too much details are not good as they can make everything seem confusing to the user, and I think partially why everyone loves it now is because of how simple yet detailed (shadows etc.) it looks, its a balance.

fenstalker
03-05-2009, 02:17 PM
Actually maybe the movement feels fine because of the current simplicity of in game graphics. For all you know, when more objects are added onto the screen, everything would seem messy and disorientating. Just saying, that sometimes too much details are not good as they can make everything seem confusing to the user, and I think partially why everyone loves it now is because of how simple yet detailed (shadows etc.) it looks, its a balance.

True. Simplicity is a feature. Brevity to wit. The "keep it simple" approach is also relevant for any game, including 3D polygon worlds.

The final environment will consist of lprimarily block-shaped landscapes, because the shadowing system works best with rectangular items. Characters, items, and other objects will be roughly block-shaped but with some variation. To answer your question kkbbcute, yes the shadowing system has some graphical errors when rendering on non-block objects, but there are ways around it, and those will be shown in future drafts of the engine. Note the fence in the current version... it suffers from some shadow-rendering inaccuracies when you stand on it, but it isn't hugely noticeable unless you look close. This was true for many games in production in the past.

If an object is spherical or too non-blocky it simply won't get a shadow, and the level-builder will simply be careful not to position the object in a location where its depth is ambiguous. For example if there's a large dragon enemy, it's not going to get shadows on its multiple heads and tail, but the user won't notice this (as in past production games).

:)

fenstalker
03-13-2009, 10:37 PM
If you're curious, kkbbcute, this updated version shows how the shadowing will work on characters and objects that aren't perfectly blocky:

http://www.fenstalker.com/content/isoworld

To see this in effect, move the character into a shaded area or stand on the fence; notice how the sprites are darkened based on their alpha channels.

kkbbcute
03-14-2009, 02:43 AM
Somehow or rather, the shadow still looks very much ike a block to me, but no matter, put more time onto your actual work and to meet your deadline, forum requests can wait! :p But thanks for giving an example anyway.

Good luck with your game engine!