Ladders
Making Games
It would be pretty limiting if players could only move upwards by jumping through gaps, or on boxes. Those aren’t the only options though. We still have to learn about elevators, stairs, and ladders. So let’s build a ladder!
What we’re going to cover
- creating our first ladder
- allowing players to climb ladders
- allowing players to stand and jump on ladders
You can find the example code at https://github.com/assertchris/making-games/tree/ladders
Creating our first ladder
Let’s begin our ladder by copying the Box class:
You’ll need to make a ladder.png image. I chose to use a simple 64px by 192px sprite. Be sure to add this to the game before adding the player, or the ladder sprite will be in front of the player sprite.
You’ll notice that the player bumps into the ladder, as if it was a box. We’ll need to add a few getters to our boxes and ladders to that the collision detection can decide whether they still collide with each other…
We give Box and Ladder a collides property so that Player.animate and ignore collisions with objects that players shouldn’t collide with. If we were going to allow multiple players in the same game/level then we would also add a collides property to Player. That is unless we wanted multiple players to collide with each other.
Allowing players to climb ladders
For players to climb ladders, we have to be able to tell if they’re trying to climb one. We also then have to suspend gravity and side motion so they down fall off or slide off:
We begin by adding a new property, called climbing. This will be true when the player is busy climbing the ladder. We also create a local onLadder variable, so we can tell if they’re standing still on a ladder.
During the usual collision detection, we note whether the object the player is colliding with is a ladder or not. If so, and they are pressing the up arrow, we start them climbing. this.climbing is only set if they are pressing the up arrow, which is why we need that local variable.
We reset player velocity, and the properties related to jumping. We also directly alter the player rectangle. If the up arrow is being pressed, we move the player up. If down is pressed then we only move the player down until the player’s bottom is lower than the ladder’s bottom. This prevents floor-level ladders from allowing the player to ignore the floor collision.
Allowing players to stand on ladders
There’s still a problem with our ladders. The moment we reach the top, we fall down again. We’ve disabled collisions for ladders, so we need a way of standing at the top of them so we can jump/move to the next platform. Let’s move the collision logic into boxes and ladders:
The Box class now calculates whether it is colliding with the player. Once we detect a collision, between a player and box, we can run them through collidesInDirection. We’ll get a neat UTF-8 arrow pointing in the direction the player was moving before the collision happened.
While making this change, it occurred to me that the Ladder class isn’t doing anything different to the box class. The climbing logic happens in the Player class, so the Ladder class may as well extend the Box class:
The Player class is looking a lot cleaner, after moving the collision logic out:
The ladder logic is mostly unchanged, except that the player will never move above the highest ladder pixel. That’s how we stop the player from falling once they reach the top. This means you’ll need to make your ladders start one pixel above platforms you expect players to move onto. It also means players can’t jump off of ladders.
The box collision logic is much cleaner and simpler now! And the result? Working ladders.
If you liked this post, please share it. You can ask questions, or give feedback to me on Twitter.
