tic80tutorials

[tic80tutorials]

Lesson 1: Introducing Tic-80, Javascript and “Hello World”

Approximate length: 1-2 hours.

 NOTE: These tutorials assume a basic level of computing knowledge such as being able to unzip an archive file, familiarity with a word processor or text editor and knowing your way around a standard keyboard layout. Beyond that no previous programming, game design or artistic experience is necessary.

 There are Tic-80 versions for Android and iOS but these tutorials will assume you are learning on a desktop computer or laptop.

 What is Tic-80?:

Tic-80 is a “fantasy computer”. It’s an app that lets you pretend your powerful modern computer is an old, primitive computer for making and playing simple games. Tic-80 contains a code editor for programming and tools for making graphics, sound effects, music, maps and levels.

Tic-80 supports three different programming languages JavaScript, LUA and MoonScript but these tutorials will exclusively use JavaScript.

What is JavaScript:

JavaScript is a programming language originally developed to allow interactive content to be included in web pages and has since become the default language for web based software making it one of the most widely used programming languages in the world.

JavaScript is frequently cited as a good starting language for people wanting to learn the basics of programming. Although we’ll be using it here to make games the skills you’ll learn in these tutorials will transfer to web development and will give you a good footing for learning other languages in the future.

 Some things to bear in mind:

It can sometimes be difficult to picture how these early tutorials will translate into making games. It is important to remember that all computer programs are just a series of instructions. In that respect there is no difference between the simple programs you are about to create, a complicated piece of commercial utility software like Photoshop or Word and a modern AAA videogame. Learning a computer language is analogous to learning a spoken language – you start by learning to say “Hello”, not by writing a novel.

If this is your first experience programming, it’s important to remember that you don’t have to understand everything immediately. Programming concepts and terminology will be revisited and recapped throughout the series and you don’t need to understand everything in a lesson before moving on to the next. A big part of coding is experimentation and observation, these tutorials will frequently ask you to make non-specific changes to your code and draw your own conclusions.

 Getting Started:

Tic-80 is available to download here:

https://tic.computer/create

There are versions for Windows, Mac and Linux. Once you’ve downloaded and unzipped Tic-80, double click on the Tic-80 program icon. After a brief start up sequence you’ll be presented with this screen:

This is the Console. Here you can save and load projects and carry out system level commands, you can think of it as Tic-80s operating system (like Windows, Mac OS or Linux on your computer), but we can’t do any programming on this screen.

If you press Escape you’ll get to the Code Editor:

This is where we’ll be writing our games. There is some default code in the editor already, but we can ignore that for now. Looking at the toolbar at the top of the screen we can see five icons on the left that take you to different editors. Here you can edit graphics, make maps and sound effects and compose music. Take some time to click around, explore and play about with the different editors. When you’ve finished exploring click on the left most icon or press F1 to return to the code editor.

 “Hello World”:

A “Hello World” program is a very simple computer program that displays the message “Hello World” on the screen. It’s traditionally the first thing you make when learning a new programming language. The default code we found in the Code Editor is a Hello World program. Click the Run icon on the toolbar (it looks like a Play icon) or press Ctrl-R, the shortcut for Run. Run in this context means to start the program.

Notice how there’s a bit more going on than just the “Hello World” message. There’s an animated character on the screen too and we can move it around with the arrow keys. Press Escape once to quit out of the program back to the Console and press Escape again to return to the Code Editor.

We want to write our own version of Hello World, this default one is written in a language called LUA and we’ll be learning JavaScript (and using this one would be cheating!). First, we need to delete the existing code. The Code Editor works just like a word processor or text editor. You can select blocks of text by holding the left mouse button and dragging or scrolling with the mouse wheel. To delete selected text press backspace or delete.

Once we’ve deleted all the existing text type in the following lines of code. Don’t worry about what they all mean yet, we’ll look at each line and what it does afterwards. Don’t copy and paste, you’ll get a better feel for JavaScript by typing out these examples.

// Hello World Program // script: js   function TIC() {

 cls(0);  print("HELLO WORLD!",0,0);

}

Once you’ve typed all that in press Run and, fingers crossed, there’s your Hello World message. Congratulations! You’ve written your first program with Tic80.

If something has gone wrong you’ll wind up with a screen like this:

Don’t worry, you’ll be seeing a lot of this screen so you might as well get used to it now! Error messages are just Tic-80s cryptic way of helping you out. Go back and check your code to make sure there are no mistakes. Tic-80 will point you in the right direction by telling you which line of your program is the problem. Some things to watch out for are missing semi colons at the end of lines, missing closing brackets “)” and braces “}” and spelling errors.

Now let’s look at each line individually:

// Hello World Program

This line is a comment. Comments are used to leave notes and descriptions in your code. A single line comment begins with “//”. This tells the computer to ignore the line when it’s running our program. Try changing the text after “//” or adding in other comment lines in the code. The program should still run identically to before (make sure you’ve used the “/” symbol and not “\” by mistake!). Commenting on and documenting your code and how it works is an essential programming skill which we’ll discuss in greater depth later in this tutorial series.

// script: js

This is a special comment that tells Tic-80 that our program is written in JavaScript. This might seem contradictory when we just learnt that the computer ignores comments when it runs the program. What is happening is that the Tic-80 Code Editor looks for this comment BEFORE we run the program so it knows what language we’re using and can correctly follow our instructions. Think of it as a message we’ve left for the computer, not an instruction it has to carry out. When our program is running the computer ignores this line like any other comment.

function TIC(){

This line “defines a function” called TIC. A function is a block of code that performs a specific task. All the code that follows the brace “{“ is part of the function, up to the closing brace “}”. All Tic80 programs contain a TIC function, it marks the starting point of the program where the computer starts to follow our instructions. Tic80 follows all the instructions we put in the TIC function and when it has finished it starts again with the first instruction in the function. This is called a program loop. Tic80 will continue to follow these instructions until we tell it to stop, either by pressing Escape or with an instruction within the program.

cls(0);

This line is a “statement”. A statement is a single instruction to the computer and ends with a semi colon “;”. Cls(0) is an instruction that clears the screen. Try commenting this line out by adding “//” so the computer ignores it and run the program again. What happens? Delete the “//” again and try changing the number in the brackets.

print(“Hello World!”,0,0);

This statement is an instruction to print the words “Hello World!” on the screen. Change the line to read: Print(“Hello World!”,90,60); and run the program. What happens? Try adding a second line that prints another message somewhere else on the screen?

We’ve got a perfectly good Hello World program but it’s a bit dull compared to the default one which we deleted. Lets add some graphics. First go to the Sprite Editor by either clicking the toolbar icon or pressing F2. Tic80 programs can use two sets of 256 tiles, one for foreground graphics or “sprites” (basically anything that we move around) and one for background graphics (used for things like level scenery, title screens, still images, etc.). Each tile is 8 pixels wide by 8 pixels tall. Make sure you’re editing the background graphics tiles by clicking the BG icon in the top right of the screen:

Now select a tile to edit by clicking anywhere in the large box on the right hand side of the screen and by drawing graphics in the smaller box on the left hand side using the mouse. Draw anything, dots, patterns, characters, objects, pieces of scenery – whatever first springs to mind. When you’ve drawn your first tile click in another blank spot on the right hand side of the screen to select another tile to edit. Once you’ve drawn a few tiles press go to the Map Editor, again by using the toolbar icon or by pressing F3.

Let’s make our background graphic by placing some tiles on to the map display. You can bring up the tile palette by holding down shift or clicking the Show Tiles icon in the top right corner of the toolbar:

Click on one of the tiles you drew in the Sprite Editor and then “draw” the tiles on the grid using the left mouse button. Before you get stuck in lets double check we’re drawing in the right place, if you we’re exploring the map editor earlier you might have moved the drawing window. Click on the World Map button (the little eye icon in the toolbar) or press TAB. You’ll get this screen:

We want to be drawing in the top left corner of the map. If the red box is not in the top left corner, drag it to line up with the grid in the top left corner with the mouse. Hit TAB again to go back to the main map editor screen.

You can spend as much or as little time as you want to make your background graphic, switching between the sprite editor and map editor if you need to draw extra tiles. Once you’ve finished go back to the Code Editor (F1) and add the following line between the line beginning “cls” and the line beginning “print”:

map(0,0,30,17,0,0);

Now run your program. You should see your background graphic drawn behind your Hello World message. If there is no graphic double check that you drew it in the top left corner of the world map and that you typed the new line of code correctly.

To save your work press Escape to return to the console and type “save helloworld”. You can load this program again from the console by typing “load helloworld”.

Summary:

In this lesson we’ve looked at the Tic80 software and some of the tools and editors it contains. We’ve written our first program, learnt how to add comments to our code (a fundamental programming skill) and how to create our own graphics and draw them on screen in our program.

We’ve covered a lot of ground. If there’s anything you’re unsure of try going back to re-read and experiment with your code or the Tic80 software. Remember, it’s not necessary to understand everything before moving on to the next lesson.