"Fake" 3D with Isometric Tiles - how is this done (Screenshot)

Started by
5 comments, last by way2lazy2care 12 years, 5 months ago
Hi,

please excuse my bad english.

Could someone please explain how in, for example Flash-Based, games objects, like the little black ball in the screenshot, are particulary hidden by objects who are in the foreground (the blue parcour)? The whole game is based on an isometric-view, so it seems to me that that game does not uses a 3D-Engine, but the tiles seem to be pre-rendered by a 3D-Modelling Software.

Is there some kind of Alpha-Mask for each tile or how might this be done?

I´m not a game-developer, i`m just asking just out of curiosity.

Thanks in advance for all replies,

Mathias
Advertisement
I would imagine that the tiles that obstruct game objects are drawn in 2 seperate passes. One for the back part, then the ball object, then the front part.
Sometimes games do use 3D engines and just render it isometrically. However, in the example given, I agree that it looks like real 2D.
I would handle it like this: Give certain objects a "draw behind" image and a "draw infront" image (based on the ball's position, so the ball can behind both, inbetween both, or infront of both, based off of x,y location). This wouldn't be too hard to handle, especially since the ball appears to be on a preset path (the slide) in the screenshot given.
Thank you both for your replies.

The ball in the current game can also collide outside of the inner path, as you can see in the attached screenshot.
I must admit, that im only a database-programmer, but those things rly interest me :)

Cheers,

Mathias


EDIT: 2 typos corrected.
If it is flash based then it is just seperate layers for the graphics. The ball is using a simple "scale.movieclip[scaleamount];" most likely to give the appearance of going backwards and forwards.
In flash you can make a predetermined path of how the ball should travel using GuideLayers.
I usually just give my 2 cents, but since most of the people I meet are stubborn I give a 1$ so my advice isn't lost via exchange rate.

Alpha compositing would probably be the simplest way to achieve this.

Each tile comes with visual image and a binary mask. This mask could be used for rendering of tiles as well to determine occlusion, but often it's simpler to just render tiles back to front since they don't have the Painter's algorithm issues.

Next, the scene is rendered again, but instead of tiles, the alpha masks are composited. Then, the composite mask is applied to the ball. Whatever remains visible of it is rendered.


Another way that avoids separate alpha mask is to have the images of tile cut out. So everything that is not blue-ish is transparent. A tunnel could also be composed out of two parts, the "left" and "right" part. These chunks would again be drawn back to front, but this time the ball would be rendered among them. This approach is slightly simpler, but may cause visual anomalies due to to Painter's algorithm overlap problem.


Of course, there might be considerably fancier techniques. One could use Z buffer. Since the tiles are isometric, one knows the relative depth of each pixel on the tile (but not absolute, since it may be further or closer. With such method there is no need to generate cut outs or masks, the renderer would just emit the depth field. Z buffering without hardware support (as done on GPU) may be memory and CPU consuming, which is why it wasn't traditionally the most used method, despite avoiding Painter's algorithm's shortcomings.


In the second screenshot there seems to be a slight artifact which In theory should not happen with z buffering, so my guess would be on some sort of masking. But my guess is as good as any.
Flash also does support 3D now. It's possible that it's just being rendered 3D. Your second picture leads me to believe that that is the way they are doing it.

This topic is closed to new replies.

Advertisement