Retro Gadgets

Retro Gadgets

Not enough ratings
A Retro Gadgets Guide for Beginners
By thecapitankaty
This is a Retro Gadgets Guide for Beginners. i will teach you the basics of Retro Gadgets and coding in lua. today you create a Gadget to turn on an LED, change its color with a slider and we'll create a very simple Cookie Clicker clone, all aimed for beginners. so get your um... coding hat on and lets get started.
   
Award
Favorite
Favorited
Unfavorite
Layout
Let's start with just the VERY basics of this game.

first we have the main screen called the multi tool, its locates on the left of your screen

you can click the little handle to close and open it

and that goes for any of the little drawers and things.

lets go over some of those drawers
first the multitool we went over that but its where all your code sprites sounds etc are and some options to go to lets say your gadget directory the steam workshop creating a gadget and tutorial. those 'tutorials' are just projects made to teach you some basic concepts. we'll use those later but lets move on to

archive:

this is located at the top of your screen

this is where well it kinda is self explainatry but its where you archive all of your gadgets so you can work on them later or just leave them be for now. again you can use the little handle to pull out the drawer and put any of your gadgets there, you may already have a few example gadgets there but if you don't thats fine, were not gonna get into that right now so lets move on to

boards:

this is located to the right of archive

this is all the boards you can use for the base of your gadget aka the 'body' of the gadget. for this there are a few options transparent and opaque transparent is well... transparent and opaque is solid color. next we have

input:

this is to the right of boards

this is where all the input components are. input components are components that you can interact with to give input and output something with

output:

this is located beneath input

output is well.. what is outputted like a screen a LED or speaker etc then we have

misc:

misc is well... miscellaneous stuff like CPU's, ROM's, Audio Chips and more, i'll explain what those are later. next we have

spray paint:

this is beneath misc

this is what you'll use to color your gadgets
Example Projects
now that we know the basic layout of retro gadgets lets take a look at some example projects

first lets find some on the tutorial panel in the multi tool
so open the multi tool and click 'tutorial'

the first one is 'Tutorial Octopus' that just teaches you the basics i already did that so click the next one 'Light-a-led'

then click print to the right and down

close the multi tool and click the power button on the gadget

then click the button and see the LED light up

you can also try some other gadgets from the tutorial page but lets move on and create our own light a led
Light-a-led(pt. 1 Layout)
so lets delete this project and create our own you can archive this but i don't want to keep it so i'll delete it by going to the multi tool and click the hamburger icon in the top-left

and click edit gadget

and in the bottom-right there's a delete button click that

then click confirm

now click create gadget

it'll open the boards panel click and drag one of the boards onto the desk

now lets color, click the spray paint

and choose a color

and paint, you can also use the scroll wheel up and down to increase and decrease the size
now its colored, obviously you can add multiple colors but i'm boring so i'll just choose one

now lets add a button
so go to the input panel

and scroll till you see this button

now place it onto your gadget

now go to output and scroll all the way down and drag this one onto your gadget aswell

by the way you can also color the buttons and components aswell, though you can't color the LED's but you can change the color later in code


now lets add the CPU this is basically the 'brain' of the gadget so lets pop the top off the gadget with this button

and theres really no space here for the CPU so lets flip over the circuit board with this button

go to the misc drawer and scroll til you see CPU and add the smallest one

you can pop the cover back one by clicking this at the top of the screen


thats all for the layout of this gadget.
Light-a-led(pt. 2 Basic Coding)
now lets get to the fun part... CODING!
so lets open the multi tool, click edit gadget if you're not already there, now click 'asset'

when you go there you'll see a 'CPU0.lua' this is where you'll write the code so click it and tap edit

you can delete this

these are just comments you don't have to get rid of them it just makes this cleaner

now let me explain what 'function update' is this is a function that runs every single tick.
so what are we trying to accomplish with code here. first we want to set the led's state to whatever state the buttons in. so if the buttons on the led with be on if the buttons off the led will be off. so to accomplish this we'll write
gdt.Led0.State = gdt.LedButton0.ButtonState
in the update function, what is 'gdt' this refers to the gadget, gdt is gadget but shortened. so think of gdt as the main folder and by typing period it is accessing another folder called Led0 which is the led then another period accessing the state of the led with '.State' and its setting the state of the led to the state of the button, with ButtonState.
here's what my code looks like right now

now when we run the gadget and click the button it will turn the led on but when we're not clicking the gadget it will turn off, because remember we're setting the led's state to the buttons state, so when we turn it on it will turn on, when we turn it off it will turn off.
Light-a-led(pt. 3 Change Color)
now lets get to color changing

go ahead and put this in the update function
gdt.Led0.Color = ColorHSV(0,255,255)
this is getting the led's color and using HSV (hue,saturation,value) and change the hue to 0 which is red and the saturation and value to the max which is 255.
so now you'll see nothing changed because the hue is 0 which is red and before it was red so change the hue to whatever you want from 0 to 255.

now we need a slider to change the value so go to input and you might need to rearrange the setup to fit it, lets also replace the button with a switch just so its easier to see the color change later on.

also in the code lets replace the button0 with
gdt.Switch0.State
now we can just use the switch to turn it on and off, so we dont have to hold the button.

now lets make a variable outside of the update function
local hue = gdt.Slider0.Value
a variable is like a container it can contain many values some variables are numbers strings which is just a fancy word for text, and much more. so this variable is containing the sliders value with
gdt.Slider0.Value
and the variables name is hue. but theres one issue when we run the game nothing changes thats because things outside the update function such as variables in this case are declared or defined once at the start of the gadget starting.so to update the variables value every tick we'll put it inside the update function.

like this


instead of this

but theres still one more issue we're declaring the variable but not assigning it to something so lets assign it here replacing the 0 with 'hue'
gdt.Led0.Color = ColorHSV(hue,255,255)

now it should work but its really weird thats because the slider only goes up to 100 not 255 like the colors do so we'll need to multiply whatever the sliders value is by 2.55 so it would be
local hue = gdt.Slider0.Value * 2.55


now it actually works as intended, alright so thats all for light-a-led thats very basic but it teaches many principles for coding you'll need later when making more complex gadgets.
Text on a screen (Separate Guide)
i already created a guide on displaying text to a screen and changing the value with a knob, so follow that guide first then come back to the next section of this guide.
https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=3246274999
Basic Cookie Clicker (pt. 1 Gadget Layout)
Now its time to create the VERY basics of cookie clicker with all your new found knowledge.

to create the 'body' of our gadget we'll stack 2 of the biggest square boards on top of each other

to join these 2 boards together we'll use the soldering iron to the left so click it

and click in between the 2 boards to join them together

and pop the cover back on
now we have 2 boards joined together to make one board
now we'll add the largest screen from the output drawer onto our gadget

we'll also add a button as well

let's make this gadget more flashy so we'll add some color with the spray paint tool
to zoom in you can press shift and you'll be able to add details easier

next we'll add a CPU to code, a ROM to add assets and text to the screen, a Video Chip so we can use the display screen and lastly we'll add an Audio Chip to play some sound

then pop the cover on

now remember we need to connect the screen to the video chip so do that
Basic Cookie Clicker (pt. 2 Coding and Creating Sprites)
now lets make this cookie clicker work by adding some code

first we'll need to define some variables so add this outside the update function
local vid = gdt.VideoChip0
next we need a font so add this as well
local font = gdt.ROM.System.SpriteSheets["StandardFont"]
and lets also add a variable for the display text so we can update it every time we click the button
local num = 0

now lets add this is the update function to clear the screen every frame and add a background color
vid.Clear(vid,color.black)

now we need to display text so put this below the vid.Clear but still in the update function
vid.DrawText(vid, vec2(2,2),font,"Hello, World!",color.white,color.clear)
now lets replace "Hello, World!" with
tostring(num)
this uses whatever the num value is and converts it to a string
now its time to add the functionality to click the button and increment the num value by 1, so to do this we'll need to see if we click the button then we'll add one to num, but if we dont click it we'll do nothing, so lets write
if gdt.LedButton0.ButtonDown == true then num += 1 elseif gdt.LedButton0.ButtonDown == false then -- DO NOTHING end
this checks if the button is down then it will add 1 to the num value otherwise it will do nothing, why we use buttondown instead of button state is because if we use button state it will continuously add 1 to the num value

here's my code:


now lets display a cookie to the screen
lets go to the asset screen and click this button

and give it a name, lets call it 'cookie', then click confirm
now lets click edit

now we can left click to paint
right click on this button to make it your secondary color

now on the main painting area you can left click to paint and right click to erase, you can also choose many colors to the right

lets use the circle tool here to create a perfect circle to fill in later

lets just click and drag to create a circle

lets click the paint bucket tool

and choose a dough color and click in the center of the circle to fill it in

now lets choose a brown and add some chocolate chips with the pencil tool

now lets add some shading with darker colors

now lets add some highlights with lighter colors


now lets add this sprite to the screen
lets create a variable to store the sprite
local cookie = gdt.ROM.User.SpriteSheets["cookie"]
now lets display this to the screen with
vid:DrawCustomSprite(vec2(23, 23),cookie,vec2(0,0),vec2(16,16),color.white,color.clear)

here's the code so far:


now lets add some sound for when we click the button
so go to the main screen on the multi tool and click gadget directory

and open the 'import' folder in file explorer

and drag any sound in there
go to your assets list in the multi tool and click this import button

and find the sound you want to use click it and tap confirm
then name it

then click confirm, now you have imported a sound, lets add some code to play it

add this to the top of the code but outside the update function
local cookieclick = gdt.ROM.User.AudioSamples["cookieclick.mp3"]
replace 'cookieclick' with whatever you named the sound, and replace '.mp3' with whatever the file extension is

add this inside the if statement
gdt.AudioChip0:Play(cookieclick,1)

replaec 'cookieclick' with whatever you named the variable, the '1' is what channel the sound is playing in, you only need to change this is you are playing multiple sounds but we are not see lets leave it as it is

now play your gadget and when you click the button it will play the sound
Conclusion
that's all for this guide i hope it helped you with learning this wonderful game. see you later. happy coding!
Resources for Learning LUA
by the way if you want to see what each function does and stuff here's the unofficial documentation[github.com] for the game

for the official documentation click this button on the main page for the multi tool


for learning lua i have some code challenges i am working currently, here's the first one
https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=3249475395
2 Comments
thecapitankaty  [author] 29 Dec, 2024 @ 2:53pm 
no problem!
Glitched_Assassin 29 Dec, 2024 @ 2:42pm 
Thank you so much for helping