Chapter 7. Box2D and Canvas

For the final project in this book we are going to make a game. Yes a real gosh darn pixel-powered game with cute characters and physics. The key here is HTML Canvas. Canvas is a 2D graphics API built into HTML 5. Virtually every modern browser has support for it, even the newest Internet Explorer, and pretty much every mobile device does as well. The devil is in the details, however. Canvas can be slow on mobile and not every device renders the same way. GWT hides some of this for us thanks to its Canvas wrapper but we will still need to carefully watch performance and platform bugs. But enough about canvas for the moment: let’s design a game!

For this book I wanted to build a game that would really feel at home on a tablet. My favorite games as a kid were platformers. These are the games where a character jumps around to avoid obstacles and explore the world, sometimes collecting coins, powerups, and defeating bad guys. Super Mario Bros is the definitive example of this kind of game.

Another advantage of choosing an older game style like a platformer is that they are a good match for the CPU constraints of a mobile device, and we can improve performance with graphics tricks that have been known for years. However nothing will fix one big glaring issue: platformers are meant to be played with buttons; either a D-pad on a Nintendo style controller or keys on a keyboard. Since most mobile devices either have neither a physical keyboard or D-pad, we will ...

Get Building Mobile Applications with Java now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.