Step 4 - Creating a Level#

In this step, we will be creating a small level for our player to run in.

We will build our level out of basic rectangle hitboxes. To get them to draw, we'll specify a fill color in their constructor.

First let's set a variable for the level size. This will be the width of the level; 120% the resolution of the screen in this case. Note that it needs to be an integer, because it represents the width of the level in pixels.

shared.py#

import rubato as rb
from player_controller import PlayerController

##### MISC #####

level1_size = int(rb.Display.res.x * 1.2)

Along with that lets add some nice colors to our shared.py file.

shared.py#

import rubato as rb
from player_controller import PlayerController

##### MISC #####

level1_size = int(rb.Display.res.x * 1.2)

##### COLORS #####

platform_color = rb.Color.from_hex("#b8e994")
background_color = rb.Color.from_hex("#82ccdd")
win_color = rb.Color.green.darker(75)

The darker() function allows us to darken a color by an amount. It simply subtracts that amount from each of the red, green, and blue color channels.

Next, we'll create a new file level1.py to house the elements unique to our level.

level1.py holds a scene with our level in it. All the scene work we did up until now should have really been put in level1.py. So lets make a scene in level1.py and move our scene code there (deleting it from main.py):

level1.py#

import shared
import rubato as rb

scene = rb.Scene("level1", background_color=shared.background_color)

# Add the player to the scene
scene.add(shared.player)

Since we just added a new file, we'll need to import it. Since main.py doesn't need shared.py anymore, simply replace the import shared line in main.py with import level1

Now onto the floor. We create the ground by initializing a GameObject and adding a Rectangle hitbox to it.

level1.py#

scene = rb.Scene("level1", background_color=shared.background_color)

ground = rb.GameObject().add(
    ground_rect := rb.Rectangle(
        width=1270,
        height=50,
        color=shared.platform_color,
        tag="ground",
    )
)
ground_rect.bottom_left = rb.Display.bottom_left

Notice how we used the Rectangle.bottom_left property to place the floor correctly. We also give a tag to our floor, to help us identify it later when the player collides with it.

Also update the scene.add line to add the floor to the scene.

level1.py#

scene.add(shared.player, ground)

You can also change the player gravity to rb.Vector(y=rb.Display.res.y * -1.5), which will make the game more realistic. It should look like this now:

The process for adding the remaining platforms is the same as what we've just done. Easy! This is a great place to unleash your creativity and make a better level than we did.

Below is a very basic example for the rest of the tutorial.

Now that you have a level built, you may notice that you are currently able to walk or jump out of the frame of the window. Let's fix this by adding an invisible hitbox on either side of the play area.

shared.py#

player.add(player_comp := PlayerController())

##### SIDE BOUDARIES #####
left = rb.GameObject(pos=rb.Display.center_left - rb.Vector(25, 0)).add(rb.Rectangle(width=50, height=rb.Display.res.y))
right = rb.GameObject().add(rb.Rectangle(width=50, height=rb.Display.res.y))

level1.py#

for pillar in pillars:
    r = pillar.get(rb.Rectangle)
    r.bottom = rb.Display.bottom + 50
    r.tag = "ground"
    r.color = shared.platform_color

# program the right boundary
shared.right.pos = rb.Display.center_left + (shared.level1_size + 25, 0)

scene.add(
    shared.player,
    ground,
    rb.wrap(platforms),
    *pillars,
    shared.left,
    shared.right,
)

Remember!

To not have the hitbox render, don't pass a color to the hitbox! All other functionality will remain untouched.

You'll now notice that the player is unable to fall off the world. This is because the hitbox is blocking its path.

There's one big issue, however. Jumps don't come back, even once you hit the ground. Not to worry. We will implement this in Step 5 - Finishing Touches.

Your code should currently look like this (with your own level of course!):

main.py#

import rubato as rb

# initialize a new game
rb.init(
    name="Platformer Demo",  # Set a name
    res=(1920, 1080),  # Set the window resolution (in pixels).
    fullscreen=True,  # Set the window to be fullscreen
)

import level1

# begin the game
rb.begin()

shared.py#

import rubato as rb
from player_controller import PlayerController

##### MISC #####

level1_size = int(rb.Display.res.x * 1.2)

##### COLORS #####

platform_color = rb.Color.from_hex("#b8e994")
background_color = rb.Color.from_hex("#82ccdd")
win_color = rb.Color.green.darker(75)

##### PLAYER PREFAB #####

# Create the player and set its starting position
player = rb.GameObject(
    pos=rb.Display.center_left + rb.Vector(50, 0),
    z_index=1,
)

# Create animation and initialize states
p_animation = rb.Spritesheet.from_folder(
    path="files/dino",
    sprite_size=rb.Vector(24, 24),
    default_state="idle",
)
p_animation.scale = rb.Vector(4, 4)
p_animation.fps = 10  # The frames will change 10 times a second
player.add(p_animation)  # Add the animation component to the player

# define the player rigidbody
player_body = rb.RigidBody(
    gravity=rb.Vector(y=rb.Display.res.y * -1.5),  # changed to be stronger
    pos_correction=1,
    friction=0.8,
)
player.add(player_body)

# add a hitbox to the player with the collider
player.add(rb.Rectangle(
    width=64,
    height=64,
    tag="player",
))
player.add(player_comp := PlayerController())

##### SIDE BOUDARIES #####
left = rb.GameObject(pos=rb.Display.center_left - rb.Vector(25, 0)).add(rb.Rectangle(width=50, height=rb.Display.res.y))
right = rb.GameObject().add(rb.Rectangle(width=50, height=rb.Display.res.y))

player_controller.py#

import rubato as rb

class PlayerController(rb.Component):

    def setup(self):
        # Called when added to Game Object.
        # Specifics can be found in the Custom Components tutorial.
        self.initial_pos = self.gameobj.pos.clone()

        self.animation: rb.Animation = self.gameobj.get(rb.Animation)
        self.rigid: rb.RigidBody = self.gameobj.get(rb.RigidBody)

        # Tracks the number of jumps the player has left
        self.jumps = 2

        rb.Radio.listen(rb.Events.KEYDOWN, self.handle_key_down)

    def update(self):
        # Runs once every frame.
        # Movement
        if rb.Input.key_pressed("a"):
            self.rigid.velocity.x = -300
            self.animation.flipx = True
        elif rb.Input.key_pressed("d"):
            self.rigid.velocity.x = 300
            self.animation.flipx = False

    def handle_key_down(self, event: rb.KeyResponse):
        if event.key == "w" and self.jumps > 0:
            if self.jumps == 2:
                self.rigid.velocity.y = 800
                self.animation.set_state("jump", freeze=2)
            elif self.jumps == 1:
                self.rigid.velocity.y = 800
                self.animation.set_state("somer", True)
            self.jumps -= 1

level1.py#

import shared
import rubato as rb

scene = rb.Scene("level1", background_color=shared.background_color)

ground = rb.GameObject().add(
    ground_rect := rb.Rectangle(
        width=1270,
        height=50,
        color=shared.platform_color,
        tag="ground",
    )
)
ground_rect.bottom_left = rb.Display.bottom_left

end_location = rb.Vector(rb.Display.left + shared.level1_size - 128, 450)

# create platforms
platforms = [
    rb.Rectangle(
        150,
        40,
        offset=rb.Vector(-650, -200),
    ),
    rb.Rectangle(
        150,
        40,
        offset=rb.Vector(500, 40),
    ),
    rb.Rectangle(
        150,
        40,
        offset=rb.Vector(800, 200),
    ),
    rb.Rectangle(256, 40, offset=end_location - (0, 64 + 20))
]

for p in platforms:
    p.tag = "ground"
    p.color = shared.platform_color

# create pillars, learn to do it with Game Objects too
pillars = [
    rb.GameObject(pos=rb.Vector(-260)).add(rb.Rectangle(
        width=100,
        height=650,
    )),
    rb.GameObject(pos=rb.Vector(260)).add(rb.Rectangle(
        width=100,
        height=400,
    )),
]

for pillar in pillars:
    r = pillar.get(rb.Rectangle)
    r.bottom = rb.Display.bottom + 50
    r.tag = "ground"
    r.color = shared.platform_color

# program the right boundary
shared.right.pos = rb.Display.center_left + (shared.level1_size + 25, 0)

scene.add(
    shared.player,
    ground,
    rb.wrap(platforms),
    *pillars,
    shared.left,
    shared.right,
)