Game Development Reference
In-Depth Information
Chapter 5
3D CSS Tutorial
Harness the power of 3D CSS transformations to make a
lightning-fast iPad game with creative JavaScript
Introduction
HTML5 canvas is, of course, brilliant. But it has to be said, its performance on iPads (and most other
devices) leaves much to be desired. The GPU-accelerated canvas in iOS 5 is a definite improvement, but
it's possible to create even smoother animated graphics with CSS manipulated in JavaScript, which runs
lightning-fast—even on a first-generation iPad.
Using transformations, you can move HTML elements in 3D space (currently supported by most modern
browsers, check
caniuse.com
for up-to-date browser support information). And when you transform HTML
elements in 3D, they are automatically rendered by the GPU, which massively improves performance.
This works well on iOS, so read on to find out how to make a game that runs at a super-smooth 60 frames
per second!
Overview of the elements
So here's our game. We have puffer fish rising up from the bottom of the sea—and when you touch them,
they explode. It's a strange narrative, but
Angry Birds
is pretty strange, too, and it seems to be doing OK.
