Jumpstart Your Coding Journey: An Introduction to Programming with Lua, TIC-80, and Animations
Hi, my Potato Imaginator and I’m a youtuber who’s an expert in animating using TIC-80. This blog is for anyone who wants to make animations , games and you don’t need to have to prior coding knowledge. By the end of this blog post , you will have made a simple ball animation that bounces off edges of screen.
For making this Animation , we will use a Scripting Language called “Lua”. Lua is a language used for mostly making games, but i use it for making animations 🙃 You can learn about Lua from here: https://www.lua.org/manual/5.4/
The Program that we will use to make Ball Animation is TIC-80 ver 1.0.2164 or higher. TIC-80 is an open-source fantasy console used for making games , animations , tools and music. You can learn more about TIC-80 at it’s official website here: https://tic80.com/learn and it’s Github Documentation: https://github.com/nesbox/TIC-80/wiki
To use TIC-80 , you can use the Web browser version here: https://tic80.com/create or download it for Windows , Linux , Mac , Android , Raspberry Pi , etc from here : https://tic80.com/create
When you first run TIC-80 , you get Console for TIC-80:
When press ‘Esc’ or ‘F1’ , you get Code Editor:
This is where you write the code for making Games , Animations , etc.
Before we start coding , we must know a few things about TIC-80 . TIC-80 has a screen size of 240x136 pixels, meaning there’s 240 pixels horizontally (x direction) and 136 pixels vertically (y direction). Also , TIC-80 runs as 60 FPS meaning it runs at 60 Frames per second .i.e., in order to play your game / animation , the program runs “60 times every second”. This also means in order to run your game / animation , it’s drawing entire screen (240x136 pixels = 32640 pixels) 60 times every second. Isn’t that something 🙂
TIC-80 also has 16 color palette numbered from 0–15
Now we learn the co-ordinate system of TIC-80. It draws every frame from Left to Right , Top to Bottom line by line. The screen has (x,y) co-ordinates. The Top Left is (0,0) , Top Right is (239,0) , Bottom Left is (0,135) , Bottom Right is (239,135). It looks something like this:
Now let’s begin coding , delete everything inside Code Editor and type BOOT() function and TIC() function . It should look something like this:
Everything inside BOOT() function is called only once at beginning of running the program ( initialization ) and everything inside TIC() function is called 60 Times every second.
Now lets type cls(10) inside TIC() function. It should look something like this:
cls() is a built-in function that takes a color 0–15 and clears the screen with the color. Above cls(10) clears the screen with color ‘10’ ( Blue ) 60 times every second since it’s written in TIC() function.
Now lets run the code . To run it , press Ctrl + R or hit the play button (triangle) in top bar . It should look something like this:
To go back to Code Editor , first press ‘Esc’ and choose ‘Close Game’ , you are then returned back to Console. Press ‘Esc’ / ‘F1’ to go to Code Editor
Now , lets draw a ball. To draw a ball , we need an (x,y) position and ball radius ‘r’ . In BOOT() function type x=120 , y=68 , r=8 , each one in new line without commas. It should look something like this:
In the above image , x , y and r are called variables and they’re like empty boxes that can hold values (numbers , characters, strings , bools, etc).
Now let’s draw the ball. Type circ( x, y, r, 2) in TIC() function after cls(10). It should look something like this:
circ() is a built-in function of TIC-80 that draws a circle . It has parameters circ ( x position, y position, circle radius , circle color). In the above , when you type circ( x, y, r, 2) , it substitutes x = 120 , y = 68 and r = 8 values in circ() which becomes circ( 120, 68, 8, 2) , which is drawing circle at position (120,68) with radius 8 and color 2 (Red) .
and when you run it using Ctrl+R , you get a circle at center of screen like this:
Note that ( 120, 68 ) is center of the screen. Also note that the drawing order is important. The circ() function should be after cls() function , otherwise you won’t see the circle / ball.
Now , to make an animation , let’s move the ball. To move the ball, we have to update it’s (x,y) position every frame.
Let’s first move the ball horizontally . For that , we have to update ‘x’ position of the ball every frame. To do that , type x=x+1 after circ() function in TIC() function. It should look like this:
and when you run it , you see that ball is moving right horizontally . In the above image , x=x+1 means ‘x’ value is added with ‘1’ and assigned to ‘x’ itself again . Similarly , to move it Left, use x=x-1 and for Up , use y=y-1 and for Down use y=y+1 instead. Notice that the ball moves off screen but we’ll fix that later.
Instead of increasing by ‘1’ , you can use different values too like x=x+2 or x=x+1/3 .
Now , to move it diagonally , write y=y+1 after x=x+1 , which means both x and y are increased by value ‘1’ every frame. It should look something like this:
When you run it , you see that the ball moves diagonally. ( Both don’t have to increase with same speed , it can also be x=x+2 and y=y+3 ).
Now , let’s write code such that the Ball doesn’t move off screen and reflects off when it hits the Screen borders. To do that , we need two more new variables ‘dx’ and ‘dy’ .i.e., x speed and y speed.
Now type dx=1 and dy=1 in separate lines in BOOT() function and let’s replace x=x+1 and y=y+1 with x=x+dx and y=y+dy . It should look something like this:
Now to prevent Ball moving off from the screen and make it reflect when it reaches the borders , we make use of something call ‘if else’ statement. We make use of ‘if else’ statement like this:
if (condition is true) then execute 1st code else execute 2nd code end
An example of ‘if else’ in TIC-80 is:
Now , back to our code , to make ball reflect off from screen , first check if x>239 (ball went off screen at right border) then assign x=239 (make it stay in screen) and change x speed ‘dx’ to -1 (moving left)
The code for this is:
if x>239 then
x=239
dx=-1
endWrite this code after y=y+dy in TIC() function. It should look like this:
In the above code , we’re checking if Ball x position is greater than 239 and if it’s true then we’re setting x position to 239 and changing x-speed , dx to -1 (moves it left every frame)
Similarly for the left border , the code is:
if x<0 then
x=0
dx=1
endIt should look something like this:
Similarly , In the above code , we’re checking if Ball x position is less than 0 and if it’s true then we’re setting x position to 0 and changing x-speed , dx to 1 (moves it right every frame).
Now , the code for Top and Bottom Borders reflection is:
if y<0 then
y=0
dy=1
end
if y>135 then
y=135
dy=-1
endAdding the above code in TIC() function, it looks like :
When you run this code , you notice that the ball is reflecting but it doesn’t take into account the Ball radius ‘r’ . To make the Ball reflect properly , we’ll have to modify the above code for Top , Bottom , Left , Right Borders to:
if x<r then
x=r
dx=1
end
if x>239-r then
x=239-r
dx=-1
end
if y<r then
y=r
dy=1
end
if y>135-r then
y=135-r
dy=1
end
When you replace your code with the above code , you observe that the ball reflects properly , even when you change the radius value ‘r’ in BOOT() function.
Congratulations 🎉🎊 , you’ve made your first animation using programming in Lua in TIC-80 !
Now , you can experiment with the program , change radius value ‘r’ in BOOT() function , instead of setting dx =1, dx = -1, dy =1, dy = -1 , you can use new variable ‘spd’ with any value in BOOT() like spd=2 and set dx = spd , dx = -spd, dy = spd, dy = -spd
You can change the values for background and ball colors too :)
Even though this Tutorial was lengthy , i hope it was worth your time ! I’ll be making more TIC-80 Tutorials here soon and you can find my TIC-80 Beginner Playlist here: https://www.youtube.com/playlist?list=PL5VlvsnKT2RptXohkDdgXvmCfdchRZ4hl
and you can find other softwares like Blender Animations , p5.js Animations , GPT-4 , etc videos on my channel here: https://www.youtube.com/channel/UCWv8HI0x4ZlPYl-uMbdcUhQ
I was beginner at TIC-80 in 2019 and now i’ve mastered it and so can you too 🙃
These are few of 500+ Animations i’ve made using TIC-80 and these aren’t even my best ones : https://tic80.com/play?cart=2077 , https://tic80.com/play?cart=2375 , https://tic80.com/play?cart=2523 , https://tic80.com/play?cart=1636 , https://tic80.com/play?cart=3033
