Creating a Platformer With BYOND

BYOND gives you a default movement system. If you open Dream Maker, create a new project, make icons, declare turfs, build a map, and run the game you can walk around. You don't have to program how the movement works, the behavior is built in. My <a href="http://www.byond.com/developer/Forum_account/Sidescroller">Sidescroller library does the same thing except it provides you with a movement system for sidescrolling action/platform games.

This article explains how the library works and how you can use it to create a game. If you're familiar with Dream Maker and can make a simple game then you can use this library to make a platformer.

Contents

1. Object Sizes
2. Ladders
3. Icon States
4. Bounding Boxes and Centered Icons
5. Jumping
6. Ramps

Using the Library

The library is very easy to set up. Here are step-by-step instructions for setting up the library. If you're familiar with the Dream Maker program you can have a working sidescroller in just a few minutes. This tutorial assumes you've completed those steps to set up the library and create a basic game. If you want to follow along with this tutorial and try code snippets out you should complete those steps now.

We'll now look at how you can utilize more features of the library and add some new features of your own.

Object Sizes

In the world you've created all objects are 32x32 boxes. In a real game your mob's icon will probably be a picture of a person. The mob's icon is 32x32 but the mob only occupies part of that box. To handle this we can modify the mob's pwidth and pheight vars.

Open up mob.dmi and change the icon state. Instead of being a 32x32 blue box make it a 24x24 blue box, like this:

Then add this to the code:

mob
    pwidth = 24
    pheight = 24

Now run the game. The mob now occupies a smaller space than before.

Ladders

The library has support for ladders. A ladder is a non-dense tile that a mob can climb. To create a ladder you need to draw an icon state for it, then add this code:

turf
    ladder
        is_ladder = 1
        icon_state = "ladder"

The is_ladder variable tells the library that the turf can be climbed. Place some ladders on the map and run the game:

Use the up and down arrow keys to climb ladders.

Icon States

With BYOND's default movement system it's often sufficient for a mob to have a single, 4-directional icon state. When the player moves the direction is updated so the proper image is shown. In an action/platform game you can perform different kinds of actions, like running or jumping, so you need different icon states. The library handles this for you.

You set the mob's icon var and the library will automatically update the mob's icon_state based on what the mob is doing. If you're standing still your icon_state will be set to "standing". If you're moving (on the ground) it'll be set to "moving". If you're hanging on a ladder it'll be set to "climbing". And if you're in the air (but not on a ladder) it'll be set to "jumping".

Let's create these icon states (or you can download this icon, you might need to right click the link and pick "Save As..."):

Note: These states are all 4-directional. The library automatically sets your direction to EAST or WEST so you need to make sure those states have images. For reference, here's what the standing state looks like:

You don't need to add any code. When you run the demo your mob will use these new icon states.

Bounding Boxes and Centered Icons

A mob's bounding box is the space that the mob occupies. The size of the box is determined by the pwidth and pheight variables. The position of the box is assumed to be in the lower-left corner of the mob's icon. However, this isn't always the case. Consider this poorly drawn person:

The mob is roughly 16 pixels wide. If we set the mob's pwidth var to 16, here's what happens:

The mob appears to be partially inside the wall. This is because the mob's bounding box is assumed to be in the lower left corner of the icon but we drew the mob in the center of the icon. To compensate for this we need to shift the mob's icon to the left 8 pixels when the game is running so that the part of the icon that represents the mob is inside the bounding box. We can do this with the mob's pixel_x var:

mob
    pwidth = 16
    pheight = 19
    pixel_x = -8

Now here's what you'll see when you run the game:

The icon is shifted to the left so the mob cannot appear to be inside walls anymore.

Jumping

The library keeps track of the mob's motion as a velocity. A velocity is like a speed but it also has a direction assigned to it. Saying that the mob is moving four pixels per second is a speed, but saying that it's moving upwards at four pixels per second is a velocity. The library uses the vel_x and vel_y vars to keep track of the mob's velocity in the x (horizontal) and y (vertical) directions.

This sounds complicated but it actually makes things easy. When you jump, all that happens is your upwards velocity (vel_y) is increased. To handle jumping the library calls the mob's jump proc, here's the default behavior:

jump()
    vel_y = 10

This means that when you jump your mob will move upwards at a rate of 10 pixels per second. Due to gravity it'll slow down and begin to fall. If we wanted to make the mob jump higher we can override the jump proc to create a different behavior. We can add this to our code:

mob
    jump()
        vel_y = 12

An upwards velocity of 12 is enough to jump two tiles high. Don't get too carried away - the height of the jump increases a lot with each increase to the velocity. Setting vel_y = 14 is enough to jump three tiles high and 16 is enough to jump four tiles high.

Ramps

You can also create ramps. Open turfs.dmi and make an icon that looks like this:

Call it "ramp". Then add this code:

turf
    ramp
        pleft = 0
        pright = 32
        density = 1
        icon_state = "ramp"

The pleft and pright vars are used to define ramps. The pleft var tells the library the height of the turf at its left side. The pright var tells the library the height of the turf at its right side. We drew the ramp as being low on the left side and high on the right side so we set its pleft and pright to match. The height at its right side is 32 because the tiles are 32 pixels tall.

Place the ramp on the map and run the game.