2011年9月2日 星期五

Designing the "engine"

After knowing how to invoke the application, it's time to have a detailed plan to get things done. The Canvas of the MXML should contain a UIComponent to hold the IsoView of the as3isolib. The view serves as a viewport which is movable around the scenes inside. To make it simple, there's always only one IsoScene inside the view. Inside the scene, there'll be a background, grid (for dragging) and buildings loaded from database.

All graphics are saved in separate SWF files. I prepared a class called "DynamicLoader" which looks up a class from different SWF files. For example, when I say I need the movie clip of a building called "building.WoodHouse", the instance will find and load the movie clip from "building.swf" and invoke a callback with the loaded MovieClip object. "DynamicLoader" is a singleton which contains a mapping indicating which prefix a SWF file represents.

To display buildings inside the scene, I created a class, IsoBuilding, a subclass of IsoBox. Its constructor requires a parameter which contains the attributes a building. When IsoBuilding is instantiated, it uses DynamicLoader to load the MovieClip and provides a callback to DynamicLoader. Once the loading is completed, the callback is invoked, the MovieClip will be added to an IsoSprite as an attribute of IsoBuilding object.

Getting started with as3isolib

This is not only about as3isolib but also the whole game built on ActionScript 3.0.

It's been 3 months since kickstarting with as3isolib. It's cool that it's free, it's open source and many people use it. My aim is to build an isometric social game. It's always the most difficult to start from scratch. I didn't know anything about Flash/ActionScript 3.0 before then. What I knew was Java EE, JDBC, Javascript and HTML. When you want to do something and you really do something to achieve it, one day you will make it. So let's start to see how it works.

Tools

If you want to do something well, you must have good tools. Luckily I developed my previous projects on Eclipse IDE and I found that there's a plugin called Flash Builder. I just googled it, downloaded it and get it installed. Then the problem comes when I was confused with "Flex project", "Flash professional project" and etc. And very soon I found that "Flex project" is a better choice that it supports RPC while no "Flash Professional" is needed.

As my aim is to build a social game, it would be better to have data interchange pipeline with a back-end to store user data. There are several ways getting it done, say "HTTP", "AMF" and etc. In the earlier stage I tried out HTTP but very soon I found the configuration costs a lot of time for every new class I create. Then I switched to "AMF", which is Adobe Message Format. There are several data service I can choose to integrate with my JavaEE back-end, say "BlazeDS", "GraniteDS" etc. I gave myself 1 day to look into each and successfully setup "BlazeDS" on my Tomcat 5.5. It just works.

Entry point

Immediately after creating the Flex project, I got my main MXML file named as "Main.mxml". It consists of a Canvas. I tried to run it, it shows me a blank screen. That means it works. By adding a createComplete event handler to the MXML, I implemented my first ActionScript function which contanis a "trace()". When I ran it, nowhere shows a message. And it takes me several hours to find out that I need 2 tools: Firefox and Flash Player Debugger. Before that I used Chrome as my default browser and found that the Flash Builder just couldn't connect to the Flash Player Debugger. Anyways, get these tools ready and I see my first "trace()"