2D Game Space in PlayBasic Tutorial

2D Games take place in 2D game space. This tutorial is an introduction to both 2D game space and how to move around in it.

2D Game Space in PlayBasic Tutorial

2D games take place in 2D game space. 2D game space only has two directions, horizontal and vertical. Vertical is up and down on the screen, horizontal is left and right on the screen. The center of 2D game space is pixel zero, which is located at the top left corner of the PlayBasic screen.

Everything in your game will be placed according to it's relation to pixel zero. For example, if you wanted to place a dot 100 pixels left and 100 pixels down from pixel zero, you could use this code :

Do
    Cls 0
    Dot 100, 100
    Sync
Loop

The horizontal position of an object is almost always represented by the variable x#. The vertical position of an object is almost always represented by the variable y#. By using float point variables (variables that can hold numbers with decimal points) instead of simple numbers for the x and y positions of an object, we can change it's position while the game is running.

Take this code for example :

x# = 100
y# = 100

Do
    ; check if the player has pressed the space key
    ; if so, change the x and y position
    If SpaceKey()
        x# = 200
        y# = 200
    EndIf 

    Cls 0
        ; show the x and y position
        Print "x# :" + str$(x#)
        Print "y# :" + str$(y#)
        ; draw the dot
        Dot x#, y#
    Sync
Loop

The first thing you'll notice is that the line with Dot has changed. Instead of it's position being dependent on simple numbers, two variables are used : x# and y#. The starting position of the dot is declared when these variables are created at the very beginning of the code.

x# = 100
y# = 100

Then, during the main game loop, if the player presses the SPACE key ( detected by SpaceKey()), the values of x# and y# are changed. This causes the location of the dot to jump (or teleport) to it's new location.

Moving around in 2D game space is equally as simple. All you have to do is change the variable a little bit each game loop.

x# = 100
y# = 100

Do
    ; check if the player has pressed an arrow key
    ; if so, change the x and y position accordingly
    If LeftKey() Then x# = x# - 1
    If RightKey() Then x# = x# + 1
    If UpKey() Then y# = y# - 1
    If DownKey () Then y# = y# + 1

    Cls 0
        ; show the x and y position
        Print "x# :" + str$(x#)
        Print "y# :" + str$(y#)
        ; draw the dot
        Dot x#, y#
    Sync
Loop

The key change to this code is this :

If LeftKey() Then x# = x# - 1
If RightKey() Then x# = x# + 1
If UpKey() Then y# = y# - 1
If DownKey () Then y# = y# + 1

LeftKey(), RightKey(), UpKey(), UpKey() all detect the state of one of the arrow keys. If the player presses one of these keys, either x# or y# is changed by 1.

When the player presses the LEFT arrow key, 1 is subtracted from x#, bringing the dot closer to pixel zero (or less technically, moving it to the left).

When the player presses the RIGHT arrow key, 1 is added to x#, pushing it farther from pixel zero ( and moving it right ).

Pressing the UP and DOWN arrow keys work the same way, but in a vertical fashion.

When you ran this code your probably noticed that if the dot ever when past pixel zero horizontally (left, off the screen) that x# became negative. Similarily, if the dot went past pixel zero vertically (up, off the screen) that y# became negative. The reason for this is that pixel zero is the center of 2D game space. Anything to the left of it is negative. Anything above it is negative.

Conclusion

You now know the very basics of 2D game space in PlayBasic. Every 2D game you make will use 2D game space. As you progress, you will build on this foundation to create more complicated forms of player control and object movement.

This page has been recommended for cleanup, integration, etc.