Intro to Making Games (with Pico-8)

Lee Tusman, Associate Professor of New Media and Computer Science

Today

Programming 101
- development environment
- commands and syntax
- coordinates
- functions
Creating a player
- Creating image sprites
- Input - button presses
- Moving a player around
- variables

Our code editor and game engine

=> Pico-8 Education Edition (free online version)

Note: the full version that works as a desktop application is currently $15 and makes it easier to save your files, export them for the web, and to play the thousands of free video games made by other programmers

Today we will use the programming language Lua, created in Brazil in the 90s, within the beginner-friendly retro-style game engine Pico-8.

What is Pico-8?

PICO-8 is a tool for making, sharing and playing tiny games and other computer programs. When you turn it on, the machine greets you with a programming shell for typing in commands and provides simple built-in tools for creating your own cartridges.

It is created by Lexaloffle games, and is intended to act like a fantasy (fake, classic, retro) home games console. Pico-8 has productive constraints that help to keep the scope of your video game small and personal. It has a limited palette, length of programs, size of the screen, font, and a complete development environment, with code editor, sound editor, sprite editor, map editor and music sequencer - all built into a single program.

There is also a built-in way to share and find games that other people with Pico-8 make. Pico-8 was initially created in 2015 and has been continually developed since.

One nice feature of Pico-8 is that games can also be distributed and shared to play online, even by people who do not own Pico-8.

Interactive coding

What’s a REPL?

Programming doesn’t take much effort beyond loading up a REPL and just typing. What is a REPL? It’s an interactive window you can type code into and it spits out the results on screen when you hit enter. It stands for Read-Evaluate-Print-Loop. These are the 4 things the REPL does: 1. Read the code that was just typed 2. Evaluate, or process the code down into a result 3. Print, or spit out the result 4. Loop… do everything again and again until the programmer is done

It’s actually simpler than it sounds. Let’s go to the Pico-8 education website and try it out: https://www.pico-8-edu.com/

It starts up with a REPL.

Let’s try typing some code for the REPL to Read.

Type:

print(2)

Then hit ENTER and immediately the REPL will Print out: 2

We are issuing the command “print”, which takes the following input inside the parenthesis. It processes that input, gets the result, then prints it out.

print(2+2)
=> 4

After hitting ENTER, the REPL, Read the line 2 + 2, it Evaluated the value of that statement to be 4, it Printed 4 on the screen for you, then Looped back to a new line to await your next command.

Try out some more arithmetic.

Multiplication:

print(2 * 3)

Subtraction:

print(2 + 2 - 4)

Division:

print(6 / 2)

You can use parenthesis to tell it which order to do the operations:

print((2 + 2) * (3 + 1))

Which gives different results than:

print(2 + 2 * 3 + 1)

Drawing graphics on Screen

Pico-8 can draw “primitive” shapes, colors, lines, points. It can also draw sprites, which are individual graphical objects that can move around the screen.

To see all of the built-in graphics commands you can use, type help gfx in the REPL.

Examples:

help cls

This will explain that CLS clears the screen and resets the rectangle, and the default color (which they say col) is black.

background

cls()

There are 16 colors in the default palette. You can specify one of them by entering a number.

cls(8)

What happens when your number is higher than 16? Why?

Some other basic shapes:

line
rect
rectfill
oval
ovalfill
circ
circfill

Try reading about these with the help command (e.g. help rectfill to learn how to use them. Then try them out!

Coordinates

The Pico-8 game screen is 128 pixels wide by 128 pixels high. Moving from left to right is the x-axis. Moving up and down is the y-axis.

The top left corner of the screen is 0,0.

Remember, Pico-8’s screen is 128 pixels wide and 128 pixels high.

(0,0)                 (128,0)
  +-----------------------+
  |                       |
  |                       |
  |                       |
  |                       |
  |                       |
  |                       |
  |                       |
  |                       |
  |                       |
  +-----------------------+
(0,128)               (128,128)

rectfill(0,0,64,30,2)

This would draw a rectangle from 0,0 (top left) to 64,30 (which means it is 64 pixels wide and 30 pixels high), in the color magenta (2). If you don’t specify the optional color at the end, it will use whatever previous color you assigned.

Comments

Sometimes we want to make notes to ourselves inside our code, to help us understand what we’re working on when we come back to our code later. Or we may be leaving notes for other people studying our code. These are called code comments. In Pico-8 (and the Lua language), we use two hyphens, and that tells Pico-8 to ignore the rest of the line of code.

rect(0,0,100,100) --draws a rectangle from 0,0 to 100,100

Make a sprite

Pico-8’s sprite editor is the place to draw graphics that will appear in the game. A sprite is an object like a character that will be individually drawn to the screen, once or multiple times. It may be a player, an apple, an item you pick up, a logo, or something else.

The sprite editor allows you to alter the size of your sprite. Notice the number next to the sprite. You need to know the number, as well as the width and height of your sprite, to draw it on the screen.

spr(1,20,20)

This will draw the sprite #1 at 20,20.

Using the reference

Press escape to get back to the REPL.

Type help spr to read about sprites.

It explains how to use the spr() and shows optional parameters inside square brackets. When adding these optional commands, you do NOT write the square brackets. This is just to indicate to you that they are optional things you can add.

So for example, we could optionally add a width and height, and even whether to flip the sprite along the horizontal or vertical x-axis.

Let’s specify the width of our sprite, and its height.

spr(1,20,20,8,8)

If your sprite was twice as big, we’d make the width and height larger.

spr(1,20,20,16,16)

Functions

A function is a way to take a few commands and put them together in a chunk. For example, you could have a function with all the commands for displaying a robot. Or you could have a function with the code to help a Roomba glide around the room randomly.

Pico-8 has three built-in commands that are very useful: _init, _update and _draw. _init happens once. Anything that needs to happen when your game starts running goes here. _update runs continuously. Anything that needs to happen over and over again, like checking for whether the player has collided with an enemy, or checking if the player has hit the jump button. Those kinds of things go in update. Finally, there is _draw, where you put the commands for drawing all of your characters on screen.

function _init()

end

function _update()

end

function _draw()

end

Variables

Variables are values that can change over time.

For example, we could have a variable x for the x position of the player. If we press the RIGHT ARROW button, we want the player to move to the right. To move the player to the right, we need its x to increase.

Responding to buttons, moving the player

IF a player presses a button, THEN there should be a result.

if btn(R) then --if we press the RIGHT ARROW
  x=x+1        --we add 1 to x (move to the right)
end

We need to do similar for the other three direction arrow keys.

The complete code, along with a game startup sound:

function _init()
  --starting position for player
  x=64 
  y=64
  sfx(0) --play our sound effect 0
end

function _update()
  --buttons
  if btnp(R) then
    x=x+1
  end
  if btnp(L) then
   x=x-1
  end
  if btnp(U) then
   y=y-1
  end
  if btnp(D) then
   y=y+1
  end
end

function _draw()
  cls(0) --reset screen black
  spr(1,x,y) --draw player to screen at x,y
end

Saving your work

It is always important to save your work!

In Desktop Pico-8 or Pico-8-EDUCATION online press escape to get to the REPL.
Type save <your-filename> to save it under a certain name. It will open a dialog box so you can save it to your computer.

In the future, if you go back to the Online Education version of Pico-8 you can drag back in your saved game file to open and continue working on it. Make sure you save it each time you add new work to it.