Over the last few days I have been experimenting with creating a very simple arcade game in both HTML5 and AS3. The HTML5 version I packaged up with PhoneGap and tested on my iPod Touch. The AS3 version I wrote twice. The first version uses built in Sprites and the second version uses a single blit Canvas.
All three versions share the same basic code base. The AS3 versions rely on the EFG framework optimized package classes from our book, while the HTML5 relies on the optimized Canvas functions from our forthcoming Canvas book. All three versions employ the use of tile sheets and object pooling.
The game is very simple. It is just a space ship at the bottom of the screen that can shoot bullets up the screen. Nothing more. I added some “buttons” to the iPod screen to act a little like a “Game Boy” interface.
Here is a picture of the app in the Xcode Simulator (for the PhoneGap version):
As you can see, it is a very simple app. The fours black squares on the left are for movement and the three black squares on the right are “action” buttons. This is just a sample layout that Steve and I are testing.
Movement and Button Events
Both the AS3 versions and the Canvas version had problems with button events. The events certainly fired off, but storing a true or false into an array of button presses for the down and up events worked spotty at best. While both versions worked fine in a desktop browser, the Flash versions seems to cache up events and the ship would get stuck on the sides of the screen. The Canvas version was even worse. On a physical device or on the simulator the array used to store true and false for the button events seemed to not work at all (very strange). Now I would have spent more time trying to figure out these control issues if the performance had been good, but…
None of the three versions performed very well at all. The first version I tried was the As3 version using Sprites (with the GPU option turned on). When more than 1 missile was in the air, the FPS dropped to under 20, and got to as low as 7 with 4 missiles in the air. I turned the GPU option off and was able to keep the FPS between 20 and 25 with 4 missiles in the air. For comparison, the desktop browser version can have 1000+ missiles in the air and stay pinged at 30 FPS.
The Final version I tried used a single blit canvas with the GPU turned off. It was the worst of the bunch, only achieving under 15 FPS and below.
This certainly is not an exhaustive, scientific test, but it proves to me that even simple arcade games will be very difficult to create on the current set of IOS devices using these technologies. Now, my iPod touch is 1 year old and I didn’t try these on a iPad, but my hardware is probably closer to what most users will have. Games made using the Canvas or As3 will probably need to be of the simple puzzle variety for the immediate future.
Have you had the same, worse or better success? Share your experiences below.
(8bitjeff is Jeff D. Fulton)