Create a basic HTML5 platformer with Crafty and Box2D – Part 1
Halt, brave adventurer!
This article requires some knowledge of JavaScript.
Documentation: JavaScript, Crafty, Box2DWeb (Basic Usage).
Github repo: Crafty Platformer Tutorial
If you are reading this..
Well, if you’re reading this that means you are interested in creating a simple, solid physics platformer. And that’s exactly what I’m going to try to teach you.
I’ll be using a rather simple framework called Crafty. It has an Entity Component System.
You might want to read a bit about that here: http://cowboyprogramming.com/2007/01/05/evolve-your-heirachy/.
It’s the same framework that I’ve used to create my previous game Jetpack Awesomeness.
What’s in our quest log?
First let me tell you what we’ll be doing. (Subject to change)
- Setting up your environment.
- Create a level using Crafty’s TiledLevel Component.
- Create a character
- Move the character
- Polish the character’s jumping.
Setting up your environment.
First and most importantly, we have to set up our environment.
I’m using Netbeans (I’m also a Java programmer), but any IDE that supports JavaScript syntax will do. It doesn’t even have to be an IDE. If you prefer to code in Textmate, Coda, Sublime Text or Wordpad, go ahead!
NOTE: I would suggest setting up a web server such as Apache.
Although this is usually not necessary when you’re creating JavaScript games, but if you want to be able to load certain elements using AJAX, you’ll need the web server.
In our case, Crafty’s TiledLevel component will load the maps trough AJAX and it will not work without a web server.
One last thing. I’ll be using the Crafty Boilerplate so we can get started quite easily.
Download the Boilerplate from their GitHub repository and extract/copy it to your web server’s public folder. (Usually the htdocs or www folder)
That’s it for part 1!
Have a look around in the Boilerplate and read up on some of the documentation about Crafty and some of it’s components.
We’ll be using the following (Third-Party) components: TiledLevel, CraftyBox2d
Eager to continue this adventure? Go to part 2!
