TIC-80 Maps and Music

Sagie on Flickr

Add multimedia & more to your fantasy computer game to make it cooler than ever.

This issue, we’re back to working on TIC-80, the fantasy computer for making retro games!

As a refresher, last time we started the basics of a platformer. We talked about how to make a character react to gravity and make the ground solid. We also played with the sound wave generator in order to make custom sound effects. This time we’ll be talking about:

  • How to use the full map system in order to have more than one screen for our game
  • How to refactor the code we wrote last time so we can more easily add features
  • How to use the music tracker to create a little background tune in our game

As a refresher, our code from last time looked like:

function TIC()
   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
   y = y + vy

We used a number of global variables – x, y, vy — to represent the state of the player: their x and y coordinates and their velocity in the y direction. We then wrote a main game loop, the TIC function, that handled keyboard inputs for movement. We drew the one screen we painted with a call to map(0,0). Our code used the mget function extensively to ask TIC what kind of tile was in a location: we used this to figure out if we were standing on the ground.

This time around we’ll be moving between screens. As a reminder, in TIC-80 you have a map editor that shows you the full map of the game, split visually into a bunch screen-sized chunks:

What we want is for the player to move across this big map as they move left and right or up and down.

There are multiple ways to do this. I’m showing a way that I personally think is pretty simple, but linked below is another tutorial by Bruno Oliveira that takes a very different approach to handling levels and multiple screens in TIC. Check his platformer out and see which way you like better!

In our version, we’ll be treating the screen-sized segments you can see in the map editor as individual screens in our game and we’ll switch between them as the player moves. If their y-coordinate is less than 0, we’ll move to the screen above. If their y-coordinate is greater than 136, we’ll move to the screen below. Similarly if the x-coordinate is less than 0, we’ll move to the screen to the left and if it’s greater than 240 we’ll move to the screen to the right. In terms of retro games, this means we’re treating screens more like Megaman than Mario!

First, we’ll add two more global variables at the top of our code. This time we’ll call them mapIndexX and mapIndexY. We’ll use them to keep track of which screen we’re on. Initialize them both to 0 like in the following:

mapIndexX = 0
mapIndexY = 0

These variables are like macro x and y coordinates. The mapIndexX and mapIndexY variables are both 0 at the upper-left corner of the map, increasing to 7 and 7 for the bottom-right corner of the map.

Next, we write a helper function to figure out what kind of tile is currently drawn to a part of the screen, calculated from x and y coordinates and the values of the mapIndex variables.

function currTile(x,y)
		local realX = x + 240*mapIndexX
		local realY = y + 136*mapIndexY
		return mget(realX//8,realY//8)

We can use this currTile function to refactor out our constant tests for whether our player is touching the ground.

function isGround(x,y)
 local t = currTile(x,y)
	return t == 1 or 
	       t == 2 or 
	       t == 11 or 
	       t == 12

If you’re following along, change the numbers in this function to be the indices of all the ground sprites you’re using in your game!

Now we can finally mess around with the main game loop to finish our refactoring and make the game switch screens as the player moves.

function TIC()
  if btn(2) 
   then x=x-1
	if isGround(x,y) 
	then x = x + 1 end
  if btn(3) 
   then x=x+1
	if isGround(x,y)
	then x = x - 1 end
  if isGround(x,y+6) 
  then vy = 0 
  else vy = vy +1 end
  if btn(0) and isGround(x,y+6)
  y = y + vy
  if x > 240 
   mapIndexX = mapIndexX + 1
   x = 0 
  if x < 0
   mapIndexX = mapIndexX - 1
  if y < 0 
   mapIndexY = mapIndexY - 1
   y = 136 
  if y > 136
    mapIndexY = mapIndexY + 1

Experiment to try: We’ve coded our game so that screens are discrete units—if you leave one screen you are wholly on another. There’s nothing about TIC that requires us to treat screens that way! Instead, try making the screen move incrementally when you cross the edge.

Now let’s add a little background music. Last time we made simple sound waves in the sound editor. What’s new this time is that once you’ve made those custom sounds, you can use them as your instruments in the music editor!

This music editor is an example of a tracker. Trackers are used a lot in making retro chiptune music, particularly the kind where you’re literally reprogramming an old game boy or other hardware to make the song with their built-in soundchips. You can read the tracker from top to bottom: the start of the song is at the top and the end of the song is the bottom. The different columns are all the notes that can play at the same time. So, for example, the middle C major chord of C-4, E-4, G-4 would look like:

Try typing in this little snippet! Can you figure out what it’s the start of? Hint: it’s a song for tiny babies.

Exercise: How close can you come to replicating the sound of those Otamatone meme song covers using custom sound waves and the tracker?

One thing that might not be obvious about a tracker is that the last note played continues until you add a rest or a different note!

To go deeper into making a platformer check out my full game – with comments – here. In this version of the game, we’ll also have code to add in a few enemy types, a big boss fight, and a projectile attack.

Learn More

Bruno’s platformer tutorial


A neat, free, tracker for making chiptunes


Tutorial to make a simple platformer on the TIC-80



  • Clarissa Littler

    Clarissa has worked in mathematics, physics, and computer science research but spends much of her time now trying to make computer science education accessible to a broader audience.

Also In The February 2019 Issue

The craft world and the tech world collide in this fun, hands-on activity.

For twenty three years, since 1996, cars have used computers to control different parts of the car.

Synchronizing games with players from all around the world is no easy task.

A simple thought experiment sheds light on the dangers of AI. Can we stop the earth being buried in paperclips?

‘Files’ may be easy concepts for humans, but not for computers. What’s going on inside your operating system?

Two ways to play Minecraft with an overarching storyline. Experience the game like never before!

Helping kids fall in love with coding through Minecraft mods and Raspberry Pis.

A better, smoother way to direct your theatrical masterpiece.

How hackers can steal the messages you send over the internet, and how to tell if your communications are secure.

It’s not as simple as it seems. Can you solve this classic programming problem?

Ever wondered what happens when you connect to a website? Time to dive into the secrets of networking!

Links from the bottom of all the February 2019 articles, collected in one place for you to print, share, or bookmark.

Interesting stories about science and technology for February 2019.

Interested but not ready to subscribe? Sign-up for our free monthly email newsletter with curated site content and a new issue email announcement that we send every two months.

No, thanks!