David Geary: Introducing a knowledge series on developing HTML5 2D games
using the Canvas API
GEARY: Hi, my name is David Geary, and I'm writing the HTML5 2D game
development series for IBM developerWorks. They asked me to put this
short video together to give you an idea of what the series is about
and what I'm going to cover.
What the series is about is pretty straightforward; it's about
implementing HTML5 games. More specifically, it's about implementing
video games in two dimensions with the HTML5 Canvas API primarily.
When I say "video games," I mean games such as Donkey Kong or Mario
Brothers or Sonic the Hedgehog or, more recently, Braid. These are
all video games that have real-time animation and you interact with
characters and make them do things in real time.
This is opposed to games that are static puzzle games -- for example,
something like Minesweeper would be a puzzle game.
Puzzle games are fairly easy to implement; video games require a
little bit more programming and a little bit more horsepower to make
them run.
So we're going to look at video games and see how to implement a
video game.
Those games that I just mentioned -- Donkey Kong, Mario Brothers,
Sonic the Hedgehog and Braid -- are all what's known as platform
games. They're so named because they have platforms that typically
scroll by in one direction or the other. And the protagonist of the
game somehow has to navigate those platforms, typically by running
and jumping from one platform to another. So what I'm going to show
you how to do in this series is I'm going to show you how to
implement a platform side scroller game from scratch, primarily with
the HTML5 Canvas API.
In the first article in the series I'm going to show you the finished
game and I'm going to show you some of the features of that game. And
then I'm going to show you how to start implementing the game from
scratch. The first thing we'll do is just draw the background and the
runner in the game and the platforms.
In the second article, we'll move to animation and I'll show you how
to put things in motion. I'll show you how to scroll the background.
I'll show you how to implement parallax [scrolling] so things in
front appear to move faster than things in back, which gives the
appearance of three dimensions.