How to make your first PICO-8 game

pico8-tic-tac-toe-fi

PICO-8 is an excellent tool to use if you are looking to learn game development. You can create old-fashioned 8-bit games and distribute them online for anyone to play.

PICO-8 offers its own code editor and music composer to build complete indie games. To get a feel of how PICO-8 works, it’s best to start simply.

Operation of the PICO-8 Controller

PICO-8 is a virtual console and game development tool. You can use it to build and distribute simple, old-fashioned games.

Get started by getting the PICO-8 app up and running:

  1. Buy and download the program from their site Itch Homepage. You can download PICO-8 for Windows, macOS, or Linux.
  2. Run the app and you will see a startup screen like this:

    This is the PICO-8 command line that you can use to load and run cartridges, along with many other actions, documented at pico-8 wiki.

Basic use of the code editor

You can get an idea of ​​how PICO-8 programming works by using a code editor to create a simple program and then run it.


  1. On the boot screen, tap Exit To enter the code editor. You should basically see a blank screen:

  2. The code editor is basic but easy to use. For now, start with the simplest program:
    PRINT("HELLO, WORLD")
  3. When you have entered the above code, press Exit to return to the boot screen.
  4. You can now write Being to run your program. The text should output “HELLO, WORLD”.

Simple game writing

Once you’re comfortable typing and running your PICO-8 code, it’s time to try a simple game. Tic-tac-toe is an excellent choice for a beginner’s game for the following reasons:

  • It’s role-based, so you don’t have to worry about timing anything.
  • It involves very little logic, and basically consists of only two rules.
  • It has very simple graphical requirements.

The full code for this simple game is available in a file GitHub repository. You can download this file, save it to your local cartridge folder, and open it with PICO-8.

To open the local cartridge folder in your computer’s file browser, type Folder In the PICO-8 command line.

Introducing Game Loop

No matter what language you use, game development usually revolves around the “game loop”. It consists of the following process:

  1. Get user input
  2. Update game status
  3. Draw the game

PICO-8 has excellent built-in game loop support via its functions _in it()And the _Modernization()And the _Withdrawal(). These functions are private because PICO-8 calls them automatically, when necessary.

You can see how these work by creating the skeleton for the game. This first revision will display an on-screen cursor that moves as you move the mouse.

Start by preparing any required actions in _in it(). This function is not part of the game loop because it only works once when starting. For a game that requires mouse input, you will need to make a special call to enable it:


function _init()
poke(0x5f2d, 1)
end

The _Modernization The functionality deals with user input and updates to the state of your game. To support mouse input, this is the place to keep track of the cursor position.

function _update()
mousex = stat(32)
mousey = stat(33)
end

Note that variables in PICO-8 are public by default, so any function in your program will have access to them mousx And the mousey. Includes PICO-8 stat as a built-in function. It presents various details about the current environment, including mouse, keyboard, and date/time.

Finally, select a file _Withdrawal Function to display an indicator on the screen. For the crosshair style indicator, you can draw a vertical line and a horizontal line at the current mouse position:

function _draw()
cls()
line(mousex, mousey - 4, mousex, mousey + 4)
line(mousex - 4, mousey, mousex + 4, mousey)
end

The Line() Another function built into PICO-8. It takes four arguments to draw a line between two points: the x and y coordinates of point a and the x and y coordinates of point b.

The cls() Screen scanning function. Try removing this line to see what happens when you don’t clear the screen.

Draw the remaining game elements

Tic-tac-toe occurs on a grid of nine squares. You can recreate this with four lines: two horizontal and two vertical. Since a PICO-8 screen is 128 x 128 pixels, each square can be 42 pixels, leaving 1 pixel for gridlines:

function draw_grid()
line(42, 0, 42, 127)
line(85, 0, 85, 127)

line(0, 42, 127, 42)
line(0, 85, 127, 85)
end

The next task is to draw a symbol – nothing or an intersection – in a given square. You can use this to display both the current “Panel” and the “Preview” icon as the user hover their mouse over an empty square.

Drawing “Nothing” is simply a case of PICO-8 recall walk () Function:

function draw_nought(x, y)
circ(x, y, 10)
end

Drawing a “cross” is a bit more complicated. You will need to draw two intersecting diagonal lines:

function draw_cross(x, y)
line(x - 10, y - 10, x + 10, y + 10)
line(x + 10, y - 10, x - 10, y + 10)
end

The remaining drawing function is drag_square. Draws a symbol (a cross or nothing) on ​​a given grid square, if there is one. To complete this function, you will need to access Game State.

Game status tracking

To play a meaningful game, you’ll need a way to keep track of which symbol, if any, is on any square. While PICO-8 supports multidimensional arrays, it’s easy to use one-dimensional array for simple use cases like this. You just need to track nine different sites in the network:

p = {"", "", "", "", "", "", "", "", ""}

You can access the elements of this array using a syntax familiar from other languages. For example:


p[1] = "0"


if (p[9] == "x") then

PICO-8 arrays start at index 1, not index 0 as is usual in many languages.

You can translate from a row and column reference to an index in that array, and back again. Using the fact that the screen is 128 x 128, and the grid is 3 x 3, you can convert the x and y coordinates to grid references like this:

mousecol=flr(mousex/42.666)
mouserow=flr((mousey/42.666) % 3)

Processing user input

You can track mouse button presses in a similar way to mouse position. in _Modernizationuse a global variable to keep track of status and invitation Stat (34) To check if the left mouse button is disabled:

if (down and stat(34) == 0) then
down = false
end

if ((not down) and stat(34) == 1) then
down = true
end

tracking lowest It allows you to specify when the button is first clicked, because stat() only tells you if the button is disabled when it is launched.

Disclosure of winning status

The tic-tac-toe game ends when:

  • There are three instances of the same symbol in the same row, column, or diameter.
  • All boxes are full.

The check_for_win The function determines whether the current game state meets either condition. There are several ways you can handle this, but for a simple game like tic-tac-toe, brute force is often the easiest:

for a = 1,3 do
if p[a] != "" and p[a] == p[a + 3] and p[a] == p[a + 6] then
finished = true
winner = p[a]
end
end

This code snippet shows the column validation. Finds non-null match values ​​at the appropriate positions in the main grid array. If it detects a winning line, this code sets two global variables that then return the winning message _Show().

Packaging for your toy

There is no point in creating a game unless others can play it. Fortunately, PICO-8 has you covered. You can create an executable by running the following on the PICO-8 command line:

  1. Writes Being to start your program.
  2. While running, press F2 to take a screenshot. This PICO-8 will be used as a thumbnail for your game.
  3. Writes Export TICTACTOE.HTML. HTML is the fastest and most portable format to be created.

PICO-8 also supports native binary executables for Windows, macOS, and Linux. Uses EXPORT TICTACTOE.BIN to create it. Whichever format you choose, PICO-8 will export your files in the cartridge folder.

PICO-8 may be just the beginning

This simple game has a lot of potential to follow the action. You can make improvements to the graphics or add some logic to the CPU moves. You can also make a two-player version and let the player choose their icon.

Most PICO-8 game developers make their creations available for free. In the world of professional game development, tools like Unreal Engine, GameMaker, and Unity are more popular.

Related posts

Leave a Comment