Isometric Game Development with Flash
I’m currently developing a role-playing game in AS3.0 (non-fantasy themed!!) in my spare time. This has been and still is in the design phase since a while and I’m pondering whether to use isometric graphics or an orthogonal view (that has a slight tilt but still is fully orthogonal. If you remember Jagged Alliance you get the idea). Though orthogonal view would make things easier I feel that isometric view gives more visual freedom so I will probably end up with that.
Either way the map engine needs to be using BitmapData and bitmap tiles rather than MovieClip tiles to get the maximum performance. This however opens a bunch of new issues. First, isometric view introduces depth! Several tiles are behind the player sprite (or NPC sprites) while others are in front of them. This could be solved by using two layers, one for the tiles behind the player/NPC sprites and another one for the ones in front ot them. In this case the depth manager needs to switch the necessary tiles from one layer to the other.
Therefore I’m thinking about some sort of animated tile manager that would redraw tiles on the map at a given interval. It picks the single frames of an animated tile from a bitmap and updates the belonging tiles on the BitmapData Object every couple of milliseconds (or frames). How this will look in practice I still need to find out.
There are several other aspects to take into account like pathfinding and Flash’s Bitmap size limitation of 2880×2880 pixel. The size limitation is interesting in that point that it should be prevented to create a BitmapData as large as 2880×2880 pixel since this takes up a lot of memory. A good practice is to make the map’s BitmapData size as large as four screens of your Viewport size and then swap to a new BitmapData instance everytime the player reaches the borders of the current one. E.g. if your Viewport (the visible area of your map) is 640×480px, the BitmapData should not be larger than 1280×960.
I’m digging all the information I can get about this topic so here is a small list of links that could be helpful for designing isometric games …
Designing Isometric Adventure Games (Nokia)
Creating Isometric Game Graphics with Poser (DAZ)
Discussuion about Isometric Sprites (GameDev.net)
Using Carrara for Isometric Game Design (Renderosity Forums)
The Complete Guide to Isometric Pixel Art
zenbullets Isometric Game Engine
Inet2Inet Isometric Game Programming Tutorials
… I’ll add more links by the time I discover them.
26 Responses to “Isometric Game Development with Flash”
By JesterXL
on Aug 20, 2006 | Reply
The animating is easy. Just use a MovieClip where needed, and then use a double-buffering approach. That way, all you are doing is using copyPixels which is wicked fast. Or, just copyPixels once, set the scrollRect on the showing bitmap, and then move that bitmap via it’s internal move methods. Tons faster than Sprites.
While the new DisplayList is great for form based applications that Flex typically creates, you still can’t lose with the Bitmap features 8 added now with AS3 speed.
For sizes, though, be careful. Even 1024×768 bitmaps will use booku amounts of RAM. So, if you see a lot of RAM being used, don’t be surprised. Better RAM vs. CPU, though, right?
To see a few of these techniques, check out my beta 1 implementation. I think she compiled in Beta 2, but there were some final API changes in 3 I haven’t updated yet.
Diesel
By sascha
on Aug 20, 2006 | Reply
Hey Jester, thanks for the hints! About the max. BitmapData size I have to make a correction … it only needs to be 2x The Viewport size, not 4 times! A BitmapData of 2880×2880px easily takes up to 30-40MB in RAM.
I had a look on your Diesel engine before. Do you plan on updating it so it works with the final AS3?
By Sven
on Aug 20, 2006 | Reply
Hi,
Concerning pathfinding i have used A*. It is quite fast because of its heuristic and at the same time supports weighting of the edges. By that, you can make you characters automatically walk around the hill instead of over it, or around water or whatever.
By the way, isometry of course is also orthognal, both have no vanishing point.
By sascha
on Aug 20, 2006 | Reply
Sven, yes A* is probably the most popular pathfinding algorithm. I will use it without any doubt!
Isometric is orthogonal too but then what would you call a generic top down view map to differentiate it from an isometric one?
By sascha
on Aug 20, 2006 | Reply
On a side note there was somebody who introduced a promising Flash isometric tile demo which I think was at Flash v7.0 beginning times and which also featured nicely done pathfinding but unfortunately I can’t find any information about it anymore.
By JesterXL
on Aug 21, 2006 | Reply
Grant skinner had one written in AS1. It took me about 2 hours to convert it to AS2, but he got all weird about sharing my updates, I think because someone wanted to buy it. Anyway, it was on his older blog, and the algorithm is sound, so if you search, I bet it’s still on Google.
Regarding mine, nope, no time. Didn’t think it’d take more than an hour, but finding an hour is challenging.
By Franto
on Aug 21, 2006 | Reply
just example of isometric game i’ve developed in my free time. Now is stopped, no free time :)))
http://www.franto.com/work/strategy/strategy.html
By sascha
on Aug 21, 2006 | Reply
Franto, that demo looks very nice! Are the graphics from Baldur’s Gate?
Btw your message slipped into my spam filter at first, not sure why. Usually a link shouldn’t be a problem for it.
By Franto
on Aug 21, 2006 | Reply
No graphics is original, made by my friend
all is done in 3D Max 
I can rebuild it to AS3, this version was done in Flash 7…
By sascha
on Aug 24, 2006 | Reply
The graphics look great, reminds me quite a lot of BG
… makes me thinking if 3D Max has a dedicated isometric camera or if you need to use one of the othoginal view ports. The only 3D package that I know of that has it’s own isometric camera is Carrara.
By Stagg
on Sep 30, 2006 | Reply
Hey guys,
Im currently also thinking about a Isometric game engine, hopefully launch an indie game house out of it. Im hopefully going to first develope the engine off http://www.dofus.com (Very impressive MMORPG)… hopefully you get get some inspiration… bookmarked this site
By sascha
on Oct 1, 2006 | Reply
Stagg you’re welcome! Dofus looks quite good, after all it’s an MMORPG made in Flash! Makes me wisch even more for native 3D rendering for Flash, we could do whole MMORPG’s in 3D. Hopefully it’s the future. Isometric is useful for RPG’s (think of Baldur’s Gate). But it get’s difficult to display ‘exotic’ terrain types, like high mountains or high rised buildings.
By gamerz paradise
on Dec 19, 2006 | Reply
Personally, I never use more than one life on this if I understand this correclty. I just wonder why so many do not understand how this is. I guess that is the beauty of it all. Good post though!!
By ShockFan
on Jan 25, 2007 | Reply
don’t waste your time with as3 and all those silly flashy things.
check out this real isometric view (in a real 3d world):
http://necromanthus.com/Games/ShockWave/warcraft.html
By sascha
on Jan 25, 2007 | Reply
@ShockFan and why do you think AS3 and Flash would not be able to do what is shown in your link?? Besides Shockwave is not really as popuplar as Flash, rather like … faaar from it.
By ShockFan
on Jan 26, 2007 | Reply
@sascha:
Flash (with AVM2 or not) is a vectorial 2D environment and nothing more.
It’s suitable for Pacman and other similar games.
But talking about Web 3D, Shockwave is the king.
Talking about browser plugins,is on the 3rd place (after Flash and Java).
And is growing day by day!
So is not at all that “faaar”.
In fact Flash is FAAAR form Web 3D.
sayonara
By sascha
on Jan 26, 2007 | Reply
ShockFan I don’t want to get into a Flash vs. Director discussion but what does 3D have to do with isometric tile games? Isometric games existed long before the 3D revolution happened. I don’t know how well you’re familiar with AS3 but if you’re familiar enough with it then you know that it can handle such things pretty well.
You’re right, Director still has the 3D domain. That will be as long as Flash doesn’t get native 3D support which I think is not too utopian now that Flash has WPF as competetion.
By ShockFan
on Jan 27, 2007 | Reply
Sascha,
In fact 3D has nothing to do with the “isometric view”.
The isometric view is a technique used in 2D engines.
Lucky for you, flash is close to one of them.
So good luck!
But don’t expect to create something able to compete (image quality, animations, global performances) with the above shockwave demo.
hasta la vista (baby)
By kiro
on Feb 1, 2007 | Reply
Maybe this link will have some handy information. Many examples, worth the reading… The section about isometric view also deals with overlapping tiles.
“Tile Based Games”
http://www.tonypa.pri.ee/tbw/start.html
GL
By Attilio Infante
on Feb 20, 2007 | Reply
Hey guys, this may be of interest to you. Its a kind of isometric tile based mmorpg engine.
http://www.tbadventure.com
By Roger
on May 3, 2007 | Reply
I’ve always found that the extra processing involved in working round the difficulties of blitting pretty much matches the loss in movie clip management (depending how rich your graphics are). But with AS3 this should probably be academic now.
Have you seen this: http://zenbullets.com/isometric/ ?
By Che
on May 20, 2007 | Reply
Have you come any closer to figuring out how to solve the isometric problem? I am also trying to develop an isometric, tile-based, scrolling viewport rpg, and have been searching (in vain) to find any sort of blitting example of how to make this happen. I did find one interesting demo that mapped a bitmapData object ONTO isometric tiles which were separate movieClips, but I couldn’t access any source code, nor am I well-versed enough in that particular actionscript to recreate it.
I’m basically at the “I need to learn more, but what should I learn?” point of it all. I’m a writer and an artist, so I don’t want to become an actionscript guru, but I used to rock Lingo pretty hard back in the day, so I’m not totally out of my league.
By sascha
on May 21, 2007 | Reply
Che the problem for me is not how to figure out how to write an iso engine, the problem for me is o find time to write one. Sooner or later I will write one (currently writing on a regular tile engine if time allows). I recommend to learn the techniques to create an iso engine e.g. by books that describe it well enough. There’s one especially for isometric game development on premier press but it’s all written in C . It might be worth a look though.
By Stagg
on May 24, 2007 | Reply
9 months on and i have actually made some head ground on this, I had a uni assignment that i had to produce an interactive for. It was a total bludge (arts unit)… my last assignment i had to make a man smile and frown with a slider… i asked the lecturer if i could run away with the assignment and pull apart an iso engine and re build it.
I took the source from here, http://www.lingoworkshop.com/Articles/Isometric_Game_1.php
and the game assets pulled from http://www.marsnomercy.org/~enetheru/example001.png
I know that i basically hacked 2 pieces together, but i learnt a fair bit, in doing it which was the point.
Ive also been playing dofus quite a bit, and i decompiled the game app to have a look at the game assets, which is extremely interesting, assets arn’t confined to just tiles, but can overlap several tiles.
Anyway this is what i ended up with: http://www.hisclay.net/iso-builder.exe
Also found this good website: http://www.inet2inet.com/inetforums/index.php?showtopic=468
By cyberoptics
on May 14, 2008 | Reply
ive developed a iso scrolling engine, right now its at phase one. i have custom tile graphics, building the map editor. its oop based, reads xml and png files and puts all the images on tiles. I use a 2880 bitmap because you can resize the browser which dynamicaly modifies how many tiles are shown. im working on depth sorting.
http://www.franto.com/work/strategy/strategy.html
wish i could get in contact with the author!
By Markavian
on Jun 16, 2008 | Reply
Hi Sascha, thanks for the links on isometric games, making an isometric tile based map viewer in flash, and the resources you found have been a real help.
http://mkv25.net/dfma/ for the non-isometric version of my map viewer.
Regards,
- Markavian