Here’s a little blog about what I’ve learned while working on Cat Cafe. If you do a lot of game programming, then you’re probably familiar with a lot of this stuff. But if like me, you started off by making Flash animations, and are used to making games in the Flash Pro IDE, some of the following features may be new to you.
The advantages of hardware acceleration!
As most of you probably already now, Flash was designed for running small animations in web browsers. It’s traditionally never taken advantage of your GPU (graphic’s card), because you don’t really want to give random Flash apps that much power over your machine. Flash also likes to use vector art to save on filesize. As a result, Flash’s graphics performance is rather crap.
But new versions of Flash introduced the Stage3D API, which lets you take advantage of the GPU, hurray! Still, this feature has to be enabled on whatever website is showing the Flash content, so it won’t work everywhere. On mobile devices, you don’t generally use web apps, and instead you download them to your phone from trusted sources, and when you do that, you give them permission to do whatever they need to do. So getting permission to use the GPU isn’t an issue anymore.
So hardware acceleration means better performance, but you need more permissions, which web-apps don’t usually get.
What is Starling?
The Stage3D API is really hard to use. It’s really low level stuff. Starling is a framework that gives you a layer on top of Stage3D which is much easier to use, and works more like Flash’s normal sprites and display list.
The major difference between working with Starling and working in Flash Pro, is that you gotta do a lot more coding. You can’t just put a bunch of vector graphics down on the stage and then do some motion tweens on them. You have to save your graphics as bitmaps, and create and control them through code. This makes it a lot harder to put together a scene you’ve visualized, but it also gives you a lot more control over the objects in your game.
Advantages of scripted animation?
Well one huge advantage of scripting your tweens instead of doing them in Flash Pro means that they can be either frame-based or time-based. Frame-based tweens are synced with the framerate of your game, while time-based ones are synced to the actual time, meaning that they can have a variable amount of frames in them. This is pretty useful sometimes. In Cat Cafe, it means that the game doesn’t slow down if your phone can’t handle the full framerate of 60fps. It simply runs at the same speed, but at a lower framerate, and doesn’t play differently at all.
A lot of frequently used tweens like “bounce in” or “ease in and then out” can be created by setting one variable, which is a lot less work then setting easing over several keyframes in Flash Pro. You can even create your own preset tweens to reuse later! (I haven’t tried this, but it seems very useful. Would have been very useful in EBF, for death and heal animations, which always use the same color/alpha tweens.)
Another advantage is that it’s usually just plain easier to make changes. If you want to make an animation last longer, or you want to tween an extra property, or you want to run a function when the animation finishes, or whatever… you just have to add or change one variable. Meanwhile in Flash Pro, it can be quite frustrating trying to update many keyframes of animation if you want to change something.
One final advantage, which is quite handy, is that you can easily have tweens “blend” into each other. For example, if your character is doing an “attack” animation, and then he’s interrupted half way through and starts doing a “hurt” animation, the tweens will naturally move into the new animation. If you animate in Flash Pro, you can’t do this, instead you get an instant animation jump, which sometimes looks quite ugly.
What is DragonBones?
DragonBones is an add-on for Flash Pro, which lets you export animations you make there into a format that is usable by Starling and maybe other frameworks too. Basically, it takes your animation, and converts all of the vector art into a bitmapped spritesheet, and converts your tweens into XML data, which can be parsed by whatever engine or framework that supports it. It actually works well, and supports frame labels and events, and everything that I needed for Cat Cafe. I haven’t tried anything very complicated yet though.
This is cool because it means you don’t have to do frame-by-frame spritesheet animation to take advantage of hardware acceleration! The performance is a bit worse due to the extra processing of the tweens and all that, but it saves memory, and it’s better than having to pre-render every frame of a long animation! Also, it lets you swap out textures/skins, which I do a lot in my games.
The main inconveniences are that I have to export the whole animation every time I want to make a minor change, and that parsing the XML data seems to take some time. But no big deal.
Dragon bones!
How has all of this effected Cat Cafe?
Well first off, it’s totally spaghettified my code. Cat Cafe was already more than half finished before I even considered using Starling or DragonBones, so I had to redo quite a large portion of the game. It would have helped to do a bit more research before jumping into a project I guess.
So I had to reprogram a lot of the game, and move a lot of code and assets to different places. The result is the messiest code that I’ve worked on since Bullet Heaven (when I was just learning AS3).
But apart from that, the performance is a lot better! Cat Cafe now easily runs at 60fps and 720p on my Galaxy Note 2. Previously it was only getting around 30fps. There’s also more animation going on now; previously the cats didn’t move once they popped up, but now they breathe and stuff. The game also runs perfectly on my dad’s HTC Sensation. I’ve also been testing it on my old HTC Desire, and it doesn’t run amazing, but it’s perfectly playable, at around 33fps.
The newer phones seem to have gained a larger performance boost from the changes. Maybe that’s because they have much better GPUs or something. Having multiple CPU cores doesn’t help much, because Flash never uses more than one (as far as I know).
I think the performance bottleneck is now at the logic, rather than the graphics rendering. For example, parsing and initializing the Dragon Bones skeletons seems to take significant processing. It’s not very noticeable on my Note 2 (takes maybe a second or less), but on my Desire, it takes around 3 seconds. Luckily, I only need to do that once when the game is loaded.
Anyway, the game runs a lot better now than I ever expected was possible with Flash, and I’m sure the performance could be even better if I was more familiar with Starling and Dragon Bones.
I should also mention that I was too lazy to remake the menus in Starling, so they’re still just normal Flash content. They don’t have much animation, and performance isn’t vital there, so I don’t really think they’re worth the effort of updating. But in future I’ll do things properly from the start and all the way through.
I need more phones!
What’s next?
Well Cat Cafe is almost finished now. I just need add achievements, polish off a few things, maybe try to improve the performance a bit more, test on some more devices, and then publish it for beta testing.
I’ll release the phone version on the web for some testing and feedback first. This will literally be the phone version, but in your web browser. So it’s going to play a little strangely. I’ll mainly be looking to fix bugs and get suggestions with this release, and I’ll take it down after a few days.
After that I’ll release it on Android, and if things go smoothly, I’ll start looking at iOS shortly afterwards. Porting to iOS should be very easy, the only issue is that I’ll have to buy an iDevice or two, or try to find some people who have some.
And then once all of that is sorted, I’ll release the real web version to promote the mobile versions. Woop.
