Tutorial: Sprites and Arrays

September 9, 2020 garrison tutorial, game development, ims213 4 minutes, 26 seconds

Exercise/demo using arrays and sprites.

Bonus: Sprite color swap function demonstrated. You can use this feature by calling

pal(old_color, new_color)

just before you draw the sprite you want to repaint. It can be a GREAT way to save time, etc., later. So

pal(11, 7)

will replace all of the acid green pixels of a sprite (color 11) with the color white.


So let's create an array of sprites and an array of sprite color substitutions for display. When we use an array to store all this random data, we don't have to avoid drawing to the screen like we used to: We've safely stored our data in arrays this time.

Braces and Brackets


Remember that brackets [] are used with variables to indicate which element of the array to fetch. So ghost[1] refers to the first element of the ghost array. "1" here is sometimes called the index or the pointer: It means "number 1 from your list". The whole thing, though, ghost[1] refers to element one of the ghost array. boat[15] means "boat element 15," which is probably (!) the fifteenth value stored in that array.


Braces (basically just extra-fancy parentheses) are commonly used when we assign a set of values to a new array. e.g.,

myx = {1,3,21,0}

creates an array called myx and then sets myx[1] to 1, myx[2] to 3, myx[3] to 21, and myx[4] to 0. Because we haven't asked the computer to create myx[5], myx[5] currently equals [nil].

Rule of Thumb

It is EASY to confuse braces and brackets -- everyone does this frequently. As a guideline, remember that brackets are usually beside the name of your array.

player[2] = "Samuel"
print( "Welcome ", player[2], "!" )

Braces, on the other hand, are usually found on the opposite side of the assignment operator (the equals sign). So:

player = {"Ray", "Sam", "Alfonse"}
print( player[2] )


function _init()

 --mysprites will contain
 --a list of randomized sprites.
 --i can "declare" the
 --variable first, inside
 --the _init(), so that
 --pico8 understands that
 --it is global and that it
 --will store more than
 --one value inside.
 --same deal with mycolors.


 --now i'll use a loop to
 --fill them.  8 pixels each
 --means 16 sprites across.
 --I've got 9 sprites to
 --choose from. 

 for a = 1,16 do
  local temp=flr(rnd(1)*9)+1
  mysprites[a] = temp

 --This is repetitive, but
 --i've split the process
 --for clarity.  i'm going
 --to use mycolors to store
 --the random colors assigned
 --to each sprite. we'll
 --improve this later.

 for a = 1,16 do
  local colour=flr(rnd(1)*15)+1
  mycolors[a] = colour


function _update()

-- nothing to put here right now

function _draw()
 cls(0) -- black screen

 --now we just lay out
 --our sprites, asking pico8
 --to substitute our random
 --colors for the acid green
 --color (11) currently used.
 --I'll use the variable
 --`card` as the "index" of
 --my array.

 local acid=11

 for card = 1,16 do

  -- remember how arrays
  -- start at 1, but the
  -- screen starts at 0?
  -- sigh...
  local xpos= (card-1) * 8

  local c=mycolors[card]

  local s=mysprites[card]

  --swap out acid green for
  --our random color for this
  --icon only...
  pal(acid, c)

  --draw sprite
  spr(s, xpos, 64)