Home > Dev, Random Picks > Isometric Game Development with Flash

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.

[ad#gog_arcanum_box]Another thing to think about are animated tiles or objects. A tile map without any animated things in it would look boring, wouldn’t it?! There could be a situation where you want to have animated water or fire on a map. This could be solved by using sprites for these objects but what if you need to have many animated tiles on a map like for example a large pond of water whose surface gives the impression of moving waves? If using sprites for this you will end up with the problem of having many MovieClips on the map who could take the performance down.
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 640x480px, 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.

  1. August 20th, 2006 at 12:48 | #1

    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

  2. August 20th, 2006 at 13:12 | #2

    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 2880x2880px 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?

  3. Sven
    August 20th, 2006 at 18:43 | #3

    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.

  4. August 20th, 2006 at 21:06 | #4

    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?

  5. August 20th, 2006 at 21:11 | #5

    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.

  6. August 21st, 2006 at 00:15 | #6

    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.

  7. August 21st, 2006 at 05:51 | #7

    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

  8. August 21st, 2006 at 11:19 | #8

    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.

  9. August 21st, 2006 at 14:40 | #9

    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…

  10. August 24th, 2006 at 19:13 | #10

    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.

  11. September 30th, 2006 at 16:03 | #11

    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 :)

  12. October 1st, 2006 at 12:25 | #12

    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.

  13. December 19th, 2006 at 04:04 | #13

    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!!

  14. January 25th, 2007 at 03:41 | #14

    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

  15. January 25th, 2007 at 11:15 | #15

    @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.

  16. January 26th, 2007 at 03:58 | #16

    @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

  17. January 26th, 2007 at 12:30 | #17

    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.

  18. January 27th, 2007 at 02:33 | #18

    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)

  19. kiro
    February 1st, 2007 at 03:10 | #19

    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

  20. February 20th, 2007 at 09:54 | #20

    Hey guys, this may be of interest to you. Its a kind of isometric tile based mmorpg engine.

    http://www.tbadventure.com

  21. Roger
    May 3rd, 2007 at 07:30 | #21

    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/ ?

  22. May 20th, 2007 at 23:04 | #22

    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.

  23. May 21st, 2007 at 01:47 | #23

    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.

  24. Stagg
    May 24th, 2007 at 10:58 | #24

    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

  25. cyberoptics
    May 14th, 2008 at 07:18 | #25

    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!

  26. June 16th, 2008 at 00:11 | #26

    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

  27. December 10th, 2008 at 09:59 | #27

    the best space game is sandal
    http://www.softropic.com/sandal

  28. February 16th, 2009 at 04:31 | #28

    Hey Stagg.

    Any chance I could email you some questions on your finding about Dofus? I would really like to peek inside what they do regarding variable elevations/terrains, etc.

    The forum link is all but impossible to get to. I registered for it but still requires something that I am missing.

    I realize your post was over a year ago, but not much has changed regarding how isometric content is done in Flash so I figure what the heck.

  29. September 12th, 2009 at 04:35 | #29

    Thanks for sharing this tips and information. I could do with more tutorials, I’d really wanted to learn more on creating games.

  1. No trackbacks yet.
You must be logged in to post a comment.