Don’t get me wrong: I love Box2D, Box2DFlash, and Box2dWeb. I wouldn’t use them if I didn’t. These are issues that naturally arise in semi-automated cross-language ports. Since I wanted to use Box2dWeb but with sugar, I made boxbox.
boxbox is a library that you use along with Box2dWeb. It wraps Box2dWeb and provides a simpler API and some handy new features. It is great for learning, prototyping, and simple games.
In this article, I am going to step through the process of creating a simple boxbox game. If you want to follow along, start out with the boilerplate here:
This project already includes boxbox and Box2dWeb as well as a simple stylesheet. If you
index.html in a browser you’ll see a blank slate.
game.js. The first thing we’re going to do is create a “world”, which is a stand-alone
physics simulation. It takes a canvas element as a parameter, since boxbox provides canvas
The world is pretty boring without anything in it, so lets create our first entity. All entity options have defaults in boxbox, so if you create an entity without any options, you’ll get the most basic entity possible: a gray square in the middle of the screen.
The world has gravity by default, so when you run the game, the square will just fall off the screen.
Let’s create an entity for the ground. This time we’ll provide some options to get the sort of entity we want.
This is still quite basic. We’re telling boxbox’s rendering layer to show this entity in green. We’re giving it a starting position and a width and height. Setting the type to static makes this entity immobile, so it will not be affected by gravity or collisions.
Now when you run the game, the box falls and lands on the ground.
Let’s add keyboard input. To keep it simple, we’ll make it so that any key moves the player.
If you’re used to making websites, this should look familiar.
this is set to the boxbox
entity that the event was attached to.
applyImpulse is a method that applies an instantaneous force on an entity. boxbox also supports continuous force with
applyForce, but for now we’ll apply a swift kick to the entity each time a key is pressed. The first parameter to
applyImpulse is the magnitude of the force (higher is stronger) and the second parameter is the direction of the force (in degrees). 45 degrees is to the upper right.
That works, but what fun is a physics engine without collisions? Let’s make a stack of targets to knock over. Here I demonstrate a boxbox feature that lets you share configuration among similar entities.
Now you can see the beginnings of what this physics engine can do. You can also imagine what sort of game you can make from it ;)
Want to take it to the next level? Try adding images instead of solid colors (boxbox takes care of rotating / scaling images), more keyboard control over the player, or tweak the density and friction of each entity to get different dynamics. If you want to report any bugs or make any changes, boxbox is MIT licensed and on Github. Happy coding!