Web Platform Team Blog

Adobe

decor

Making the web awesome

An Afternoon of Hacking

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

Splitting the project into many small JavaScript files helped a large team hack on it effectively without stepping on each other’s toes. By the end, we had the following “class” structure, thanks to JavaScript prototypal inheritance:

  • DisplayObject.js
    • Sprite.js
      • Asteroid.js
      • Dyno.js
      • Background.js
      • ButtonSprite.js
      • TextSprite.js
  • Container.js
    • AsteroidContainer.js
    • GameControls.js
    • HUD.js
    • Menu.js
      • Splash.js
      • GameOver.js
    • Scene.js
  • RunLoop.js
  • Game.js
  • GameLogic.js
  • Collision.js
  • Utils.js

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.

Responsive Background?!

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

Even at its very early stage, Brackets provided a pleasant JavaScript editing experience. It has good editor fundamentals, like a tasteful syntax color palette and parenthesis pair matching. It pleasantly surprised me with its Go to Definition feature (Cmd-T) for JavaScript functions within the currently open file. I’m staying tuned for the plethora of features yet to be implemented. Remember, Brackets is totally open source and written in harmless JavaScript, so anybody (I’m looking at you!) can turn those planned features into pull requests.

PhoneGap

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.

We noticed that PhoneGap Build automatically adds the platform-dependent cordova.js file to your app. For those new to PhoneGap, cordova.js defines the JavaScript APIs that give you access to various platform features on the target device. In addition, PhoneGap Build injects the code to include cordova.js in your index.html.

Now It’s Your Turn

Feel free to leave a comment if you’re feeling inspired. Happy Hacking!

Comments are closed.