November 29, 2011
Blis – A blitting isometric system for AS3
My latest Flash game, Atomic Armies, has a lot of performance problems. It renders objects via the Flash display list and every object has an individual MouseEvent listener to handle mouse interaction. After doing some performance profiling and Googling, it looked like these were killing performance when there were many game objects on screen.
To solve this problem, I built a system called Blis (short for Blitting Isometric), which provides the following new features:
I wanted a simple way for the rendering engine to ignore any objects that were off-screen. This way a player could theoretically have thousands of objects in his base, but the rendering engine would only spend CPU cycles on the visible ones.
By rendering every visible game object to a single bitmap, I was able to avoid the Flash display list altogether. However, without a display list, how do we handle mouse interaction?
To allow the user to interact with an object, my system color codes every game object with a unique color and threshold-renders it to an invisible bitmap using this color. Now we can easily identify which game object the mouse is over, by using getPixel() to get a color from the underlying invisible bitmap, and correlating this color with a game object. And this is done without the game objects dispatching or handling any events at all! I'll go into this more at the end of the post.
In addition to the above new features, Blis maintains the existing features I already have in Atomic Armies, such as spritesheet animation, camera control, and isometric game space.
Feel free to download, reuse, modify, etc. the source. I've written two examples of implementation. One uses just the Blis base classes, and the other integrates Blis with PushButton Engine v2. Many thanks and lots of credit goes to Raymond Cook and Justin Opitz for inspiration and guidance!
Now to wrap up with a breakdown on handling mouse interaction, as promised. Here's an image of a scene rendered in Blis, followed by the color-coded version of the scene:
Even though some of the colors in the second image look similar, each one is actually a unique hex value. There are over 16.7 millions supported colors, meaning we can use this system to ID over 16.7 million game objects before we run into collision problems. If we place our mouse over one of the pixels in this color-coded image, we will have placed it over a color which corresponds to one and only one game object in the scene. Thus, by checking which color the mouse is over on a mouse click or other mouse event, we can retrieve the correct game object with which the user is interacting.
I just put this project on Github, so anyone can contribute to it: https://github.com/cjcenizal/Blis.