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:
Off-screen culling
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.
Blitting
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?
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 dont know how flash handles rgba but id it supports it - couldnt You get even more possible values with it? !
This is really awesome , This is what i did for my new game , but the place where i struggled was scaling because sometime you need to zoom in the camera :).
Maik, I believe you’re right. If two objects are overlapping though, the alpha values might merge, resulting in an incorrect color key. I’d have to look into it, but I think 16.7 mil is overkill as it is. :)
Rahul, thanks man! Zooming in and out is going to be my next task. For zooming out, it might be possible to just scale the main bitmap down. Not sure what to do for zooming in though.
Love the colour hit detection buffer. Great idea!
Just wondering , Why you didn’t use hitTest for mouse interaction
Thanks Cameron!
Hey Rahul, a hitTest would require me to iterate through the entire population of game objects, or possibly through a reduced population if I do some kind of spatial hashing. The former would become too expensive if I have a lot of objects, and the latter didn’t occur to me until recently. My theory is that it will not perform as well as the current solution (because of the overhead of reorganizing a lot of moving objects in the spatial hash every frame), though I need to test it.
great job, and I really like the second bitmap for mous tracking idea.
some asdoc in code and a github repo would be awesome to follow the project and maybe give a hand :)
Olivier, that’s a really good idea. I’ll look into that. As a general update to everyone, I just added zooming. You can check it out in the demo by using your mouse wheel to zoom in and out.
Zoom look awesome , quite clean , looking forward for the documentation , Great Job
Actually there is another way , Use getObjectsUnderPoint , Refer to Push Button Engine , it is much simpler :)
Thanks Rahul! Work has kept me busy recently but I hope to add documentation in a week or so. GetOjbectsUnderPoint() is a great suggestion, but it only works for the display list. This engine is an alternative to the display list, sacrificing some robustness in exchange for better performance.
I like the method of blitting you have described. Not bad. Back when I was programming on the Atari St, graphical programming was tough as nards… at first glimpse. True blitting.. you don’t need a colored object, you need virtual object vector, You won’t find it anywhere in google… because it doesn’t exist.. at least to my knowledge not anymore, unless you can dig up a book on source code for game programming for early pc or for the Atari St. Try researching the use of bytearrays to swap bitmap data. U can use those techniques for motion, matrix scaling, and mouse collision(mouse detection). Of course, be prepared, because you will be doing a lot of bitwise operations to push, pull and move bytedata. This is the fastest way, but it is the hardest until you get used to it.
contact me in about 2 weeks, I may have an example for ya.