Taking a short break from its usual work, the Web Platform Team at Adobe took an afternoon to explore new APIs and authoring tools. As a byproduct, we created a little 2D game called “Dynasteroids”. The objective of the game is to move a dinosaur left or right in order to dodge falling asteroids. The dinosaur takes after the Test the Web Forward mascot, Tezzy.
So, what did we learn?
Files Are Your Friend
The primary base classes are Container, DisplayObject, and Sprite. As you might have guessed, Container can contain many DisplayObjects. DisplayObject manages the transform and hit testing for objects on the screen. Sprite extends DisplayObject by adding image loading and image rendering functionality.
During the hacking, one team maintained and extended the core classes. Another team worked on asteroids, another on the dinosaur and its controls, another on menus, another on sound, and so on.
Cross-Platform Games Have Screen Scaling Challenges, Too
Should we maintain the aspect ratio? Should we expand to fit the screen? Should we scale the images? Should we use media queries? We had lots of questions. In the end, we took this approach:
- Create responsive background scenery using percentages and tileable images.
- Scale the asteroids’ sizes and velocities based on screen size. This keeps the game’s difficulty in check.
- Fix the size of the dinosaur. On a bigger screen, it just looks like you have a bigger landscape.
Yes, you heard me right. Check out the CSS parallax effect and try it yourself.
Being a Good Citizen: requestAnimationFrame
window.requestAnimationFrame is a great API for managing continuous screen updates. When your page is in a background tab, requestAnimationFrame will allow the browser to throttle back screen updates. On the other hand, a timer using window.setTimeout will continue to tick at full speed and chew up mobile users’ batteries. Note that some prevalent platforms like iOS5 don’t have requestAnimationFrame, so we used a shim to give us a timer fallback.
Canvas Compositing Modes
We wanted to draw our moving objects on a canvas overlaid on top of our HTML/CSS background. Canvas compositing modes to the rescue!
Every frame, we perform the following steps:
- Set the canvas’s composite operation to “copy”.
- Paint over the entire canvas with transparent black. Since the composite operation is “copy”, this clears all pixels we drew last frame, replacing them with transparent black. Conveniently, the transparent black lets our HTML/CSS background show through.
- Set the canvas’s composite operation to “source-over”.
- Draw all of our moving objects on the canvas in their new position.
The Editor of the People: Brackets
Going from web app to iOS app was simple using an installation of Xcode and this PhoneGap guide. Late in the afternoon, we wanted to go Android, but we didn’t have the time to install Eclipse, download the Android SDK, and all that fun stuff. Instead, we used PhoneGap Build to pop out an APK.
Now It’s Your Turn
Feel free to leave a comment if you’re feeling inspired. Happy Hacking!