Last time we gave a general introduction to TIC-80, the open-source fantasy computer perfect for making retro games. In this issue, we’ll be giving a more practical hands-on tutorial for starting a simple platformer in TIC-80.

As a refresher, you can get TIC-80 from their website.

If you’re downloading TIC-80 and loading it for the first time, you’ll see a command line like this:

To start writing a game, hit the ESC key and you’ll be taken into game creation mode:

You’re now looking at the code for the sample program. If you hit ESC again you can go back to the command line. If you type run and hit enter you’ll run the sample program. It’s a cute little demo of a sprite blinking and you can move the sprite around with the arrow keys.

If you tried running the sample program, hit ESC to go back to the command line and ESC again to get into game creation mode.

So the first thing to do is click on the sprite editor tab, which is the little tab in the top left that looks like a Pac-Man ghost.

Now we’re going to make a sprite for our character and sprites for the environment! A not-immediately-obvious thing about TIC-80 is that the way you make backgrounds and make sprites that move is on this screen.

Here’s another little tip: the maps by default use the very first sprite slot, sprite #000, for their background. That’s why it’s completely black right now and the sample program starts its sprites over to the right.

Drawing your sprites is pretty easy: you click on a square and start drawing in the rectangle on the left-hand side. You can pick your colors with the palette below the drawing space. You’ll need to make:

• Something to use as the ground
• I actually used a “top of the ground” and “underground” sprite type.
• You could also make a different one specifically for platforms.
• Sprites for your player character
• You could have just one or you could have a left facing one and a right facing one.
• You could also do what I did and create a little walking loop! Mine only has two frames, to start.

Once you’ve made your ground and your player sprite, now it’s time to make the map!

Another thing that’s unfortunately not obvious is how you select a sprite to paint down on the map. You actually need to hit the little triangle in the upper right-hand corner of the screen or hit the Shift key.

Go ahead and paint your terrain now!

One last thing I want to show before we move on to sound effects: the world map. If you press tab on the map screen you’ll see the world map:

This is where all the screens for your game are stored! You can actually switch between them in this view by using your mouse and then you can edit the other screens as well. There’s a lot more room for a game than in Scratch! Especially because you can even scroll between these screens smoothly rather than have them be backgrounds you flip between.

Now, let’s make a little jumping sound effect in our sound editor! There’s a speaker icon and a musical note icon next to each other. You want to click on the speaker icon. You’ll be looking at something like:

Try selecting any waveform that isn’t just the straight line and clicking on a key on the piano or hitting the spacebar. You should hear that sound effect. If you hit tab you can edit the waveform, which is the “shape” of the sound. There’s a really good video tutorial linked below that explains how the shape of the sounds relate to what you hear! Try editing the wave form to mess with it, then hit space to test out how it sounds.

You can also mess with a lot of other things about the sound including how the volume changes and how the relative pitch of the sounds change. I think this is the kind of thing that makes the most sense if you just play around with it and test out how the sounds work. When you’ve got something that sounds “jump” like, you’re ready to move onto the code!

We’re going to walk through a few concepts before the end of our tutorial. We’ll be modifying the code of the sample program just a little bit to add a notion of gravity, draw the map, give our sprite the ability to jump, and make sure our character doesn’t fall through the floor!
Here’s what your code should look like and then we’ll cover what the different parts mean.

t=0
x=96
y=0
vy=0
 
function TIC()
   cls(0)
   map(0,0)
   if btn(2) then x=x-1 end
   if btn(3) then x=x+1 end
 
   if mget(x//8,(y+6)//8) == 2 or
      (mget(x//8,(y+6)//8) == 1) 
   then vy = 0 
   else vy = vy +1 end
 
   if btn(0) and mget(x//8,(y+6)//8) == 2
   then 
      vy=-8
      sfx(0,"C#4",20) 
   end
   y = y + vy
   spr(3+t%60//30,x,y,0,1)
   t=t+1
end

So for the purposes of this code I’m assuming that your ground sprites are in slots 1 and 2 and your player character are in slots 3 and 4. In TIC-80, unlike Scratch, the y-variable gets bigger as you go down the screen and shrinks as you move up the screen.

So this Lua code first sets up the initial variables: the x and y position, the number of “ticks” that have passed to run the idle animation loop, and the y speed.

Next, it erases the screen with cls(0) so we’re ready to draw the next frame. Then, we draw our background to the screen by calling map(0).

We then check if we’re touching the ground using the mget function. mget gives us the ID number of the sprite that’s in the square. This is the main way in TIC-80 to test if you’re touching the ground or an enemy or a projectile: you ask TIC-80 what sprite is in that spot.

The only thing tricky is how we ask this question. We don’t ask it about particular pixels but rather about blocks of 8 pixels. We can turn our x and y position into blocks by doing “integer division” with the // operator and dividing by 8. Integer division is different than ordinary division because it throws away the part to the right of the decimal, leaving only a whole number.

The reason why we have the y+6 in our call mget(x//8,(y+6)//8) is that we want to measure whether the bottom of the sprite is on the ground and not the center of the sprite. Try changing it to just mget(x//8,y//8) and seeing what it looks like!

If we are touching the ground then we set our vy to 0 since we shouldn’t fall any further. If we aren’t touching the ground, we increase the rate at which we’re falling by 1.

Next, we check if the up arrow is pressed and if we’re standing on the ground and we then jump by making vy negative (negative because up the screen means smaller y!) and playing a sound effect. Playing a sound effect just involves calling the sfx function with the ID of the waveform we want, the note we want written as a string of “note#octave”, and how many “ticks” of the clock it should play. Ticks in TIC-80 are 1/60th of a second each.

Finally, we change the y-position by the value of vy and draw the sprite to the screen!
That’s going to be it for our walkthrough this time. In the future we can talk about adding enemies, projectiles, and moving between rooms.

Learn More

Waveforms

https://en.wikipedia.org/wiki/Waveform

Cute video tutorial on waveforms

https://www.youtube.com/watch?v=VRD9Uj2YTBk

TIC-80 documentation and tutorials

https://github.com/nesbox/TIC-80/wiki