AS3 Basic Tile Mapping ala Final Fantasy

Well it seems that one of the most popular posts I have is about Final Fantasy IV Online. Unfortunately that project is not alive at this time. So I thought I'd throw some AS3 goodness out into the void for people to play with and download.

This is a tile-based map display engine with fairly snappy scrolling. It currently allows for two layers - a set of base tiles, and a set of overlay items. The overlay items have pure magenta in their graphic which gets set to transparent thanks to the super handy threshold method. This current example is able to run smoothly and quickly on my machine at 34x30 tiles ( 544 x 480 resolution ). It was edited down to fit nicely in this layout from 640 x 480 which still ran just as smoothly. For those of you who are counting, that is 1,020 tiles on each layer - a total of 2040 tiles being animated at this resolution.

The core idea is very simple, and one that is not uncommon in tile-based engines. Obviously rendering so many tiles at once every frame could get a bit slower. So here we only render the full map when needed, which is just on the original load for this example. After that as you use the arrow keys to scroll around the map to explore, it only renders the strips that are needed that were not currently showing and tacks those on as it scrolls the rest of the current bitmap data over the appropriate amount.

This is a quick port of a quick proof-of-concept on a tile-based map rendering engine, so please don't judge the code too harshly. I did however try to break it out fairly logically for ease of discovery.

You can move around on the map using the arrow keys. To cycle through some maps, just click the map area. As always, download, play, enjoy. If you have feedback or do anything with this, I'd love to hear about it.

This text is replaced by the Flash movie.
Download the Code!

Others Have Said

That is so cool! What happened to the FFIV project? Legal reasons or what? Zooming around the map makes me want to go boot up my version! =Ryan rstewart@adobe.com

Ryan - No legal reasons prevented it from moving forward to my knowledge - it was more an issue with the amount of time to commit to the project ( I for one have 4 children, and I know Dustin had just moved here to MN and was getting settled in a new job ). Then the domain information seemed to lapse. Though it sure does bring back the memories ( FFIV was always one of my personal favorites from the series ). I still think an MMO version of FFIV would completely rule, so maybe if I start throwing more stuff like this out then more people would be motivated to get involved! heh

the lag seem very hardly.... but the engine are really very cool ! :cool:

Code looks good but one thing I noticed that you do is enter the name of the comment block on the left and the right... as in ////////////////////////////////////////// // TEST TEST ////////////////////////////////////////// I think I'm going to do this for now on - so you can scan it much easier! Thanks man...

Okay, code is great. I see that the mapdata is done in a very crude XML. Does anyone know what editor was used to do this, the overlay etc.

Loading really fast.. As I mentioned in a different post i'm playing with a php version and omg its so slow at generating the maps.. I take it you have manually created them?

Crafts - I had created a flash application that I used for creating the maps. That then passed the generated xml for the map to a php script which saved it to disk. This then just loads that xml file. Since this was a proof of concept, I didn't even put in anything for compression of the maps or binary format or anything - just plain uncompressed xml. =)

but the engine are really very cool !

Very very good! Thanks for info

Great looking theater, cool concept and good work ! Thanks for alls

Nice work XML! I thought it was more complicated than that!

I still think an MMO version of FFIV would completely rule, so maybe if I start throwing more stuff like this out then more people would be motivated to get involved!

Where are you hiding?

Really a cool rendering engine. Nice coded and better made. The use of XML for data also help me too. Thanks for source mate.

Cool, it remains me warcraft :)

It is a cool game with a nice graphik engine. Its a little bit like warcraft as Anonymouse already said.

Very Nice, its a liddle Bit Like warcraft. Greetings

There's a nice open source map editor called "tiled": http://mapeditor.org/, but it doesn't yet have support for the XML file format. I'm working on writing a plug-in for tiled to output in a format this demo can use for an incremental development strategy. Eventually, I'll be writing a JSON map format for the demo client to work with maps generated by "tiled". Tiled already has support for a compressed JSON map format, but I'm still in the learning stage of getting XML figured out. Does anyone know of a good tutorial for JSON in AS3 without the requirements of Flex or AIR?

The XML map file format for "tiled" was fairly easy to manage. A teaspoon of configuration and a sprinkle of Java is all it takes. =p

Thanks for great stuff.

Have Something to Say?