Retro Game Development Using Tic80

Image courtesy of pexels.com

Introduction

It seems things have come full circle. I got my first computer in the early 90’s. Up until then I would hang out with friends and at school trying to get time to improve my skills and learn what I could with limited resources. When my family finally got our own computer, an Apple 2e, I quickly started trying to work out how things worked and how I could make my own games. Coding with good ol’ BASIC, I remember having a lot of fun, although I don’t think my skills were anything to advertise, as I would simply be copying in other peoples games I had gotten out of books from school.

Getting to the end of high school I dropped the computer work as I saw no real job prospects in my city and opted for other more menial work. Although, it was more of a fact that I didn’t know anyone working in IT, but the industry was exploding in Melbourne back in the mid 90’s. Almost 10 years later I retrained at night school and got my first job as a Linux Support guy, even though I wanted to get back into development, I was frustrated with the fact I needed to learn coding all over again as BASIC was not really useful for anything. Games also became larger with increasing production values and I soon too up other hobbies as creating Games seemed to have moved from a process that took days to something that took months and years.

It’s not 2020 and I got my hands on a Pocket CHIP hand held computer, which had Pico-8 installed on it. A retro gaming engine where you can create your own small games that you can share with others. It was like things had finally come full circle and I could start to spend a few hours each week punching out some code to make some cool little games, like I did back in the early 90’s. This time there were less resources around and the tutorials I found had an assumption that you already had a background in coding or game development. That's why I decided to start posting about what I’m currently learning and hopefully in a more “beginner’s how to” mentality.

Why Tic-80

I mentioned Pico-8 in the introduction and it was my goal to start learning to create games on this platform. Instead I opted for Tic 80, which is very similar but has the functionality where I can simply have a small coding editor screen on my laptop and ready my notes or a document from that...If you use both, you’ll understand what I am talking about. Pico-8 sends you into the editor, which is great, but it covers you entire screen and I found no way to simply run it in a smaller window. Tic 80 also has a lot of cool features that are similar to Pico-8. Even though it seems the community is not as large as Pico-8, there still are a lot of games available for download and support if you need it.

Downloading and Installing Tic-80

You can download the latest version for Windows, Mac, Linux, Android and IOS from the following link:
https://tic.computer/create

You can also purchase the Pro version from itch.io, which is what I decided to do. It has some extra features and only costs $5 to purchase from the following link:
https://nesbox.itch.io/tic/purchase

Follow the prompts at install, and if all goes well, you should be presented with the console window.

Working With The Tic-80 Console

After you’ve install Tic 80, and run it for the first time, you should see something similar to the image below:

This is the console and from here you can do some of the work you will need to organise your files and data. You’re basically running a tiny computer on your computer, one that will create and develop your retro games.

From here the first thing you might want to do is type help, to give you all of the commands available to you when you are using the console. The list is similar to working with a DOS or Linux console as you can see below:

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

• help - Show available commands
• ram - Show 80K RAM layout
• exit - Exit the application
• edit - Show editors
• new [lua | moon | js | wren | fennel] - Create new Hello World cartridge
• load cart [sprites | map | cover | code | sfx | music | palette] - Load cartridge from the local - filesystem (you can type cart name without .tic extension), also you can load only data section (sprites, map...) from other cart
• save cart - Save cartridge to the local filesystem, use .lua / .js / .moon cart extension to save it in text format [PRO version]
• run - Run current project
• resume - Resume last loaded project
• dir - Show list of local files
• cd - Change directory
• mkdir - Make directory
• folder - Open working directory in OS (Windows, Linux, MacOSX)
• add - Show file open dialog to add file to TIC
• del file - Delete from the filesystem
• get file - Show file save dialog to download file
• export [html | native | sprites | cover | map] - Export cart to HTML or as a native build, or export sprites or cover as .gif images
• import [sprites | cover | map] - Import sprites or cover from .gif
• cls - Clear screen
• demo - Install demo carts
• version - Show the current version (0.60.3)
• config [save | default] - Show config.tic file editor, use save param to save current configuration, use default to edit default cart template
• keymap - Configure keyboard button mapping (removed in later versions)
• surf - Open carts browser

Let’s start by getting used to the console, from here it will hopefully get you comfortable with using it and starting to work on your projects.

1. If you haven’t already done so, install Tic-80 and open the application to the console.

2. Start with a basic command like help to make sure you can at least return to these commands when you need to:
   help

3. Type ls or dir to get a listing of all the files in your working directory. If this is the first time you are running your console, you should only see the “[tic.computer/play]” output to screen:
   ls
[tic.computer/play]

4. Type version to see the version of Tic 80 you are using. I have purchased the Pro edition, so this might be different to your version:
   version
0.70.6 Pro

5. Create a new directory in you working directory with the mkdir command...lets call it testing:
   mkdir testing

6. You won’t see any output from the above command, but if you now type ls again, you should see the new directory available:
   ls
[tic.computer/play]
[testing]

7. We can now delete the testing directory using the del command. You’ll be presented with a warning as we have below, making sure its something you want to do. Click Yes to delete the directory we created:
   

8. If you have a few commands across your screen, you can always clear things up using the cls command. Your command prompt will return the top of the screen:
   cls

9. The console comes with its very own Hello World script to get you started, you can see it from the console, by typing the run command in the command prompt. This will run any game or program you are working on or currently have loaded into the console:
   run
   

10. Hit the ESC key to close the HelloWorld program. We can see what the code looks like, by either hitting the escape key again or typing edit in the console:
    edit

11. You should not be in the code editor for Tic-80. It looks a little basic but has a lot of powerful features. The code for our HelloWorld program is listed below and don’t worry about not understanding this for now, we’ll go through all the code in a moment.
    
    Notice at the top of the screen, there’s a number of options you can select.

• Code editor: This is the first from the left and we are currently in. This allows you to develop your code and programs.
• Sprite Editor: Next along, looking like a Pac Man ghost. The sprite editor lets you create images and characters for your program.
• Map Editor: The four grip square is where you can create the world your sprite will move around.
• Sound Effect Editor: Yep, just like all your favourite retro console games had some great sound effects, you also have a place to create and edit them here.
• Music Editor: Lastly the music editor, looking like a musical note, is where you can create a kick arse retro soundtrack for your retro game.

We’ve covered a lot of information so far, and to not let this article go on for too long, we are just going to quickly run over the code used to create the Hello World program we have above.

• We should still be in edit mode, but if you are back in the console, type edit, or press the ESC key to get back into the editing console. The first four lines of the program, are comments. The script is written using Lua as the coding language, which is a pretty basic and low level language. If you haven’t used it before, I don’t think you will have too much trouble getting used to it. Comments in Lua are performed with two dashes at the start of the line as we can see below. Make sure you include these lines in all of your Tic 80 programs as they provide metadata to the console and let it know what language the program is written in:

-- title:  game title
-- author: game developer
-- desc:   short description
-- script: lua

• After our comments we have three further lines, all of which are specifying variables the program then uses. We are setting the value of t to 0, and specifying x and y coordinates for our sprite to be displayed later in the program.

t=0
x=96
y=24

• Next we have a nice function. You’ll notice it’s called TIC(). This is the main function in our Tic 80 program and it is called 60 times per second. Anything you want to happen in your program, you add it to the TIC function. There is a bit of code inside the function, so we will break things up a little in the next steps, but the entire function for now should look like the following:

function TIC()

    if btn(0) then y=y-1 end
    if btn(1) then y=y+1 end
    if btn(2) then x=x-1 end
    if btn(3) then x=x+1 end

    cls(13)
    spr(1+t%60//30*2,x,y,14,3,0,0,2,2)
    print("HELLO WORLD!",84,84)
    t=t+1
end

• The first part are button commands, that allow you to move the sprite around the screen. Each controls the arrow key and when you program, the sprite will move around the screen when you press the desired arrow key. You'll also notice each line is in an if statement, stating that when button 0 is pressed then y = y - 1, etc:

    if btn(0) then y=y-1 end
    if btn(1) then y=y+1 end
    if btn(2) then x=x-1 end
    if btn(3) then x=x+1 end

• I don’t want to go too far into the code below now as it is a little complex and will be covered a lot further in the next article, but basically, the cls command will clear the screen and colour it with the number 13 value in the colour palette, which is a light blue. The spr() function will control how the sprite is shown on your screen. Then the print() function prints the words “HELLO WORLD” to the screen at the coordinates 84, 84.

    cls(13)
    spr(1+t%60//30*2,x,y,14,3,0,0,2,2)
    print("HELLO WORLD!",84,84)
    t=t+1

We’ve flown through this information here. We've quickly talked about Tic-80, how to install it and how the console and editors are set up. We have also done a brief run down of how the basic Hello World program provided by the console works. In the next article I post, I’ll show you how we can create our own version of the Hello World Program similar to the one below where the Hive Blog sprite will move around the screen.