Gravity
Making Games
This time we’re going to work on our code structure, and add gravity to our game. We’ve already done most of the work for gravity.
What we’re going to cover
You can find the example code at https://github.com/assertchris/making-games/tree/gravity
Cleaning up our existing code
We need to clean up a few things! First, let’s swap out x, y, width, and height (both in Box and Player) with PIXI.Rectangle. They have these properties, but they also interact with the rest of PIXI in interesting ways.
Notice how much code we can delete? The comparisons get a little verbose, but nothing a local variable or two can’t fix. I also realised that we can move the initial x and y set operations to animate.
Next, I want to encapsulate the event, renderer and stage logic into a Game class:
Notice the ES6 class getters and setters. They’re useful for filling optional dependencies as needed. We can override renderer and stage if we need to, but they have sensible defaults too.
This is mostly just moving the code that was in main.js to game.js. The only notable difference is that we no longer require sprites to be added to the stage separately to adding objects to the state.
I’m in two minds about this. On the one hand, it’s much clearer what’s going on if we add them to the stage by hand. On the other, will we be adding sprites (joined to objects) without adding the objects? I don’t think so.
Perhaps we’ll come back and change that. For now, it makes things a little cleaner. So what does main.js look like now?
That looks much better! We have enough control to set starting points for each game object. But after the first frame, the animate methods take over. Things like gravity and collisions will start to control how the game progresses. It was always going to be like that, so this file now feels like it too.
We could confine the events and renderer to a smaller set of elements. We could add any number of objects to the game from here. Everything else game-related is inside the game class. Everything else player or box related is inside those classes. It’s neat!
Adding gravity to the world
One of the things that make platform games fun is a moderate amount of physics are at play. Let’s add walls and a floor:
Instead of two red squares, we have three thin rectangles. They collide in the same way. Now, let’s see about adding that gravity…
We begin by creating a set of properties to match the ones we made to track horizontal movement. We don’t need vertical friction, since that level of detail is often omitted from platform games.
We also have to track vertical and horizontal collisions. When the collision is with the player and a platform/floor then we stop the downward velocity. When it’s against a ceiling, we replace upwards velocity with the force of gravity.
Allowing players to jump
Jumping is simply reversing gravity for a short time:
With this, we’ve mapped the space key to jump. We add the keyboard check after the collision check because we only want our player to jump if they are standing on a platform or floor.
Now it’s possible to create levels, out of boxes. To give some of them visible textures, and to jump around them. Spend some time making a level and jumping around in it!
If you liked this post, please share it. You can ask questions, or give feedback to me on Twitter.
