Have you ever played Wario Ware or any other really cool videogame? Have you ever thought of making your own version of the game? This tutorial will cover the basics of everything you need to know for making your first WarioWare videogame!

If you already are familiar with Godot, feel free to jump through the tutorial. Have any questions while going through the tutorial? Feel free to dm us through slack at @nonchalant ava (draws also) and/or @SuperCoolCodingGirlFNAF2014

Now lets get started, shall we? C:

What is Godot?

Godot is an open-source game engine where anyone can make 2D and 3D games in. In other words, it is a free place where we are going to make our game. For this tutorial, we’re working with Godot 4. Try downloading the latest version.

Downloading Godot

To download Godot, you need to consider the type of operating system your computer/laptop is using. Click the links below for the type you are using:

• Download for macOS
• Download for Windows
• Download for Linux
• Download for Android

If the links above cannot be accessed or don’t fit your operating system, navigate to https://godotengine.org/ and click “Download Latest”

Click the blue button in the middle of the screen that reads “Godot Engine”. Open the download and open the application. When you open Godot, it should look like this:

Setting up a GitHub Repository

What is GitHub?

GitHub is a place in which we are going to share our files from Godot so our project can be submitted and reviewed for the Stardance Challenge.

Downloading GitHub

Go to github.com. Click the “Enter your email” in the middle to sign up for GitHub and to create an account.

Once you create your account or enter into your existing one, click the plus sign on the top right and click “New repository” to create a new repository.

Name it whatever you like. For me, I am going to name it “WarioWareGame.” Make sure to make the repo public so the reviewers can see your work. Finish creating the repo by clicking “create repository”

Now we have to get our repository on our own computer!

If you struggle to download GitHub Desktop on your device, I recommend checking out this resource for alternatives!

We need to download GitHub Desktop so we can actively save our work from our own computer. Go to https://desktop.github.com/download/. Click the download button that fits for your operating system.

As you work on this project, you will want to make hourly commits and pushes as you work so your work is constantly saving to your repo. So, keep this application open. What do I mean by commiting and pushing? I will explain that in a later section. C:

P.S. If at any time you need help navigating through this part or get stuck, shoot us a dm through Slack @SuperCoolCodingFNAF2014 or in the #stardance channel! <3

Now lets get started with clicking the “Set up in Desktop” button in the “Quick Setup” section in GitHub. This will prompt us to get the repository locally on our device. This will allow us to share our files onto GitHub.

Now you don’t want to touch anything. Click “clone”

If you get taken to the GitHub Desktop, that is exactly where we want to be.

You will now want to click the “show in Finder” button or “show in FileManager” button. This will show you where your repository is. Keep track of this location. If you are on macOS, you can click option + command + c at the same time to copy the file address. If on Windows, you can hold shift and right click the file to then select “Copy as path.” All these options save the file address, so we can later paste it into Godot.

Now navigate to Godot and create your first project! (YAY) Type your game’s name into “Project Name:” and paste the address we had before into the project’s path. You can paste by clicking control + v on Windows, or command + v on macOS. Then click “create”.

Now we can roll into the real fun stuff!

What is a Start Menu?

A start menu is pretty much the place where the player will go to once they open the game. It will consist of a:

• Title
• Start Game Button
• Settings
• and a Quit Button

Creating the Title

Create a new “2D Scene.” Name that new node “TitleScreen” so we can easily navigate through our nodes. What are nodes? Nodes are the building blocks of Godot when you build the game.

Click the + button near the top left corner of the screen. We want to add a new node that will act as the background image of our game. Search up “TextureRect” in the search when you click the “+”. Name it “Background”

Now we want to change the texture of the TextureRect to the image we want the background to be. Click the “Background” node and go to the right of the screen. Click the file button next to “Texture.” Upload any image you want.

What is the difference between select, move, rotate, and scale?

The Select Tool allows you to select nodes but does not actually change their properties.

The Move Tool allows one to change the position of their node as shown below.

The Scale Tool allows you change the width and height of the node. This is different from the select tool, because it is actual changing the width and height properties.

The Rotate Tool allows you to tilt the node.

To fit the image to the screen size, drag the image to the edge of the blue lines with the scale tool. The blue lines represent the size of the game screen.

Now we want to display the title for our game. Create a new node by clicking the + again to make a new node and searching for the “RichTextLabel.” Name it “Title.” Drag the node on the background to position it where you want it on the screen. For me, I’m putting it in the almost top-center. Click the node, and on the right side of the screen, click the text box to type in the game’s name.

Tip: To undo, press Ctrl + Z

Scroll down to the “Control” section and click “Theme Overrides” and then “Font Sizes.” Check off “Normal” and change it to 108px. Can’t see your text box? Try dragging out the textbox to change its size. Move the textbox to where you want it to be.

Now click “Constants” and click “Outline Size.” Change it to 40. This adds a nice black outline to our text.

Notice how the text seems cut off on the left? To fix that, go to “Layout” under “Control” and turn off “Clip Content.” Now it should look like this:

Creating a Button

Now we have to add our “Start Game,” “Settings,” and “Quit” buttons.

Add a new node with the plus button. Search for “Button” and name it “Start.” Click that node and go to the textbox on the right of the screen. Change what it says on the button to “Start Game.” Drag the button to the desired size and move it to under the title, as shown below:

Now we want to change the font size. Go to “Control” on the right then to “Theme Overrides” and then to “Font Sizes.” Change the font size to 26px. Go to “Constants” and change the outline size to 14.

Now we need to vertically align our three buttons. Click the + button on the top left to add a new node and search for “VBoxContainer.” This container will help us align our buttons neatly in a vertical alignment. Drag the “Start” button into the container. It should look like this:

Move the VBoxContainer to the middle. Drag out its height so more buttons can fit in the container.

Click on the button node and click control + d to duplicate the buttons. Do this two times to have three buttons. Name the nodes “Start”, “Settings”, and “Quit.” Go to each node’s text box and change what they say to also either “Start”, “Settings”, and “Quit”. Should look like this:

Saving the Project

There will be times where Godot crashes and all the progress for your project will be unsaved. Don’t panic! I gotchu. To save a project, press control + s. A window will pop up asking you what to save the scene as. Create a new folder to save the scene in. Name the folder “Scenes.” Save the scene in that folder and then click “Save.”

Make sure to do this often as you make your game. I don’t want to see you crying over your game.

Programming the Buttons

Now lets put some code into these buttons! The programming language that Godot uses is GDScript. It is specific towards Godot, but is relatively simple to learn. In my opinion, it is similar to Python.

We need to create a script for each node we want to add code to. A script is a set of written instructions for our nodes written in a programming language, specifically GDScript.

Click the + next to the Title scene to create a new scene. Name it “level_scene.”

Go to the “TitleScreen” node and add a script by clicking the paper scroll button. Save that new script.

Click the “Start” button node on the left. Go to the right of the screen and click “Signals” and double click “pressed()”

What are signals? Signals track when changes are created so we can create code to make our game respond to it. In this case, we’re making the game react to the player pressing the button.

Connect the Script to the “TitleScreen” node, not the button. To make sure its connected, make sure TitleScreen is highlighted.

It should have navigated you to the “TitleScreen” node’s script.

Under the “func _on_button_pressed() -> void:” we want to add “get_tree().change_scene_to_file(”???”)” where ??? is the location of the next scene we created in your local computer. It should look like this:

func _on_button_pressed() -> void:
	get_tree().change_scene_to_file("res://level_scene.tscn")

OPTIONAL: It is your choice if you want to add a scene for the Settings button to navigate to. It would be preferred.

For the quit button, under the “func _on_button_pressed() -> void:” we want to add “get_tree().quit()” to quit our game.

func _on_button_pressed() -> void:
	get_tree().quit()

Playtesting your Game

While you make your game, you want to test your game throughout. We do this to catch any errors. How do you do that? Simple. Click the play button on the top of the screen.

Remember when I said that you have to constantly push and commit your game every hour? But what does that mean? To commit means to save your work on your computer. To push means to actually bring those saved changes to GitHub. I know, it can sound confusing at first. Just remember there is just two buttons to click.

First, you want to navigate to your GitHub Desktop. You will see that some changes have been made. These changes are the changes you made to your Godot files. Every time you made a change to the game, GitHub Desktop will point it out. Now go to the bottom and click commit. Remember this saves your changes. A summary may be required before hitting commit. In that case, just type what you did, like “Created a Menu Screen.”

Now hit push origin or publish branch. This will put those saved changes from your project onto GitHub. And you’re all good!

Just remember to hit two buttons every hour you work on your project: commit and push. Try saying it 20 times fast!

Global scripts (autoloads) are scripts that can be accessed from any scene in your project. They’re useful for things like keeping track of money, player stats, settings, or anything else that needs to exist across multiple scenes.

extends Node

var money = 0

Global.money += 10
print(Global.money)

Global.garlic_amount += 1

extends Node

var minigames_done = 0 #track how many minigames done
var lives = 5 #track how many lives left, also effecting garlic appearing

In the Level Scene, it will be the screen displayed between each minigame level. It will display what level you are on. The Screen will display:

• 5 pieces of Garlic representing the player’s lives
• the Level Number
• and a Timer

Creating a New Scene

Go to the “level_scene” scene.

Click “2D Scene.” Click the + and add in a “TextureRect” node and change the texture in the right side of the screen to the desired background. For me, I am going to keep it the same image.

Resize the image to be the size of the screen. In order words, match it up to the blue lines again.

Adding in the Garlic/Lives

In this game, the pieces of garlic will represent the lives of the player. Think of Minecraft and how the hearts in the game represented a player’s health. The garlic are similar to that concept.

We want the garlic to be displayed in a horizontal alignment. So, click the 2D Scene node and click the + to search for a new node called “HBoxContainer.”

Click the HBoxContainer and the + button and search for a TextureRect node. This TextureRect will hold a picture of each garlic/life. For now, change the texture to the icon.svg, which is the Godot logo. Rename the node to “Garlic.” Rename the HBoxContainer to “GarlicContainer” to make it easier to navigate.

Now click “Garlic” and press control + d to make 4 more pieces of garlic in the GarlicContainer. In total there should be 5. Can’t see them? Try dragging out the length of the container. Rename each piece of garlic to “Garlic#” where # is the number of garlic it is. For example, the second garlic is “Garlic2”

Drag and move the GarlicContainer to where you want it to be on the screen. For me, I am going to keep it near the top-center.

Adding in the Level Count & Timer

For the game, we need a piece of text saying what level number the player is on. We also need another piece of text stating how much time they have left between minigames. The timer is going to act as quick break between minigames.

Click the + button and add in two “RichTextLabel” nodes. Name one “Level” and the other “Timer.”

Click the “Level” node and go to the right of the screen. Change its text to “Level #” Do the same to the “Timer” node and change it to “0.0”. You can move these nodes to wherever you want them on the screen. Also, go to Theme Overrides and then Colors to change the default color to black.

Now lets change the font size. Click “Timer” and go to Control then to Theme Overrides and then to Font Sizes. Change the normal font size to 42px. Do the same to “Level.”

Drag out the size of the nodes’ boxes on the screen to make sure the whole text is showing. Move them to where you seem fit.

Adding in the Garlic images

Change the texture for each piece of garlic to be a picture of garlic. If you don’t want it to be garlic, that’s okay. You can change it to a picture of a heart or anything else you would prefer. You change the picture by clicking each node and changing their texture on the right side of the screen.

After adding the new textures, you might have to rescale the nodes by dragging the corner of the box. You might have to also reposition the pieces of garlic.

Now we have 5 pieces of garlic. Yum!

When you’re making a timer in Godot, it’s very simple. You just need to make a new scene, add a RichLabelText, make a script out of the main function:

extends Node2D
@onready var timer: RichTextLabel = $timer #literally just the richlabeltext

var time : float

# Called when the node enters the scene tree for the first time.
func _ready() -> void:
	pass

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta: float) -> void:
	timer.text = str(snapped(time, 0.10)) # this makes names easier

func Timer(start_time: float): # making a new function for timer countdown!
	# we want the timer to go down, and when it reaches 0 it transitions 
	# to the next scene!
	
	time = start_time
	
	while time > 0.0: # run if timer hasnt reached 0
		await wait(0.10)
		time = time - 0.10
	
	#when timer reaches 0
	return
	
func wait(seconds: float) -> void: # write this simple function out for wait!
	await get_tree().create_timer(seconds).timeout # makes u wait

Then save the scene. You can now drag this scene from the FileSystem to wherever and use it’s timer abilities. This will be shown later.

Now lets get started on the nerdy stuff. The timer, level count, and lives are not functional yet because they need code. So, lets get started on that.

Programming the Timer

We need to create a script for each node we want to add code to. Remember, a script is a set of written instructions written in GDScript.

To add a script, click the 2D Scene and the paper scroll button above all your nodes. This adds a script attached to that 2D Scene.

Name it “timer_screen”.

The resulting code should be exactly this for the “timer_screen” script:

extends Node2D
@onready var garlic_container: HBoxContainer = $GarlicContainer
@onready var garlic: TextureRect = $GarlicContainer/Garlic
@onready var garlic_2: TextureRect = $GarlicContainer/Garlic2
@onready var garlic_3: TextureRect = $GarlicContainer/Garlic3
@onready var garlic_4: TextureRect = $GarlicContainer/Garlic4
@onready var garlic_5: TextureRect = $GarlicContainer/Garlic5
@onready var level: RichTextLabel = $Level
@onready var timer: RichTextLabel = $Timer

var time

func _ready() -> void:
    await Timer(5.0) # using the function created
    
    if Global.minigames_done < 3: # if you havent completed 3 minigames yet 
        Global.minigames_done = Global.minigames_done +1
        get_tree().change_scene_to_file("res://scenes/minigame_" + str(Global.minigames_done) + ".tscn") # changes your scene by arranging this frankenstein path. 
# Above, your script is being told to go to the next minigame. If the 
# current minigame is Level 1, then you would be on minigame 1. If you 
# complete that level, you have the minigames_done add one, and then you 
# look for the scene titled `minigame_` and then whatever minigame number 
# should be next. Make sure you name your minigame saves appropriately.

    else:
        get_tree().change_scene_to_file("res://scenes/title_screen.tscn") # changes your scene
    

func _process(delta: float) -> void: # runs EVERY FRAME
    match Global.lives: # asks or checks if lives is equal to one of 
#these values, cool hack. by the way this is a horrid way to illustrate the 
#lives visually so later you can always find alternative code. Now, dw abt it.

        4:
            garlic.hide()
        3:
            garlic.hide()
            garlic_2.hide()
        2:
            garlic.hide()
            garlic_2.hide()
            garlic_3.hide()
        1:
            garlic.hide()
            garlic_2.hide()
            garlic_3.hide()
            garlic_4.hide()
        0:
            garlic_container.hide() # just hides everything
    
    timer.text = str(time) # make ths text reflect the value of the time variable. this makes names easier. the str() converts the int to a String
    level.text = "Level " + str(Global.minigames_done) # this tells you want minigame you're on using concatenation (google the word yo)

func Timer(start_time: float): # making a new function for timer countdown!
    # we want the timer to go down, and when it reaches 0 it transitions 
    # to the next scene!
    
    time = start_time # make the timer, which is reflected through the timer text, start at your desired number
    
    while time > 0.0: # run if timer hasnt reached 0
        await wait(0.1) # asks script to wait on this function. the 'wait' name for the function does nothing here, as await is just telling the scrpit to wait for the function to complete before progressing
        time -= 0.1 # remove 0.1
        # progressively get the value smaller and smaller
    
    #when timer reaches 0
    return

func wait(seconds: float) -> void: # write this simple function out for wait!
    await get_tree().create_timer(seconds).timeout # makes u wait, dw abt this being complex

You are going to be making a minigame where you will have to collect a total of 3 garlics around a map on a platformer. We will need:

• A Moving Player
• A Platform
• Garlic Object(s)
• and barriers

So, lets get right on it!

Creating the Player

Make a new scene called “Player.” Change its type to “CharacterBody2D” by right clicking the “Player” node.

Add a node called “Sprite2D” and another called “CollisionShape2D”

Change the CollisionShape2D’s shape to CircleShape.

Change Sprite2D’s texture to the image of the character you want. For me, I am doing a pixelated version of Wario I got from online.

Resize the CollisionShape2D to cover the whole player by dragging the red dot on the circle with your mouse.

Create a script for the “Player” node. Make sure its template is “CharacterBody2D: Basic Movement”

Creating the Platform

Make a new 2D scene. Name it “minigame_1.” Add a StaticBody2D node. To that node, add a ColorRect node and a CollisionShape2D node. Should look like the image below.

Change the color of the ColorRect node to the color you want it to be. The ColorRect will represent the barrier. Go to the CollisionShape2D and change its shape to rectangle.

Stretch the CollisionShape2D to cover the whole ColorRect. Just like we did to the player previously.

Move and drag the CollisionShape2D to be on the bottom of the screen. Think of it as the ground of the game in which the player will stand on. Make the ColorRect match up to it as well, so they are in the same position and in the same shape.

Add a TextureRect to the 2D Scene. This will act as the background. Change its texture to its desired background and resize it to fit the screen. Drag the TextureRect node to be behind the StaticBody2D node so the background does not cover those nodes. It should look like this:

Name the TextureRect “Background” so we can navigate through our nodes easily. Add a “Parallex2D” node to our 2D scene. Add our “Background” node to it. The “Parallex2D” node is responsible for animating the background into having a scrolling effect, so rename it to “ScrollingBackground.” This is optional.

For the Parallex2D node, go to the right of the screen and click the “Repeat” menu. Change the Repeat Size x to 1000.0. As you can notice it stretches the background image to the right. Now, Change its AutoScroll x setting to 100.0.

How come my screen can’t be full screen? Let’s fix that!

Go to the Project menu on the top of your screen and go to your Project’s settings.

Then go to Display and then Window. Change the mode to “viewport.”

Now test your game and change the screen to be able to “Stretch to Fit” at the top of your screen.

Tada!!

Adding Our Player Into The Game

Now drag the player file from the bottom left corner into your game just like so.

Test the game out. Can you move the player with the arrow keys? Can you jump with the space button?

Now go into the player.gd script and change the const JUMP_VELOCITY to equal 500.0. It should look like this:

const JUMP_VELOCITY = 500.0

Making the Platforms

Name the StaticBody2D to be “Platform1” since the ground will technically be your first platform. Copy and paste that node and rename it to “Platform2” to make your second platform. Drag and resize it to where you want it to be.

Place as many as you want, where you want them. Make sure to test your game to see if your character can actually jump on each platform!

Adding in Garlics

Add in a TextureRect node. Rename it to “Garlic.” Set its texture to a piece of garlic, or any image of your choice. Resize it and drag it to where you want your first piece of garlic to be.

Add an AnimationPlayer node. Rename it to be “animation.” Add a Node2D node and add the animation and Garlic node to it. It should look like this:

Now lets animate our garlic and give it some movement! Click the animation node and make a new animation at the bottom of your screen. Name it “floating,” since we’re making a floating effect.

Click on the Garlic. Go to the right side of the screen and click the key next to the Garlic’s position.

Drag the animation track to 1 second.

Move the garlic a little bit up and click the key button again. Now your animation track should have two dots just as shown below.

Set the animation to “Cubic” as shown below.

Double click the loop button in the animation track to make the animation loop!

Now your simple animation is done! Now lets get started to adding in the garlic’s hitbox. Add a Area2D node to the Garlic node. Add a CollisionShape2D node to the Area2D node. It should look like the image below:

Move the Area2D to cover the garlic image. Resize it to completely cover it.

Now, you can duplicate your Garlic all over your scene. Be sure to keep them in some kind of disorder to deter your player enough to create a challenge. You can do this after adding your script though if you want to save time.

Tip: You can hit Command+D on your keyboard to duplicate nodes quickly.

For each garlic placed (just attach the same script to each by creating a script and dragging it from the menu under Filter Scripts to the chosen node in the Scene Tree):

# the onreadys below run immediately at the start of the game, preventing 
# errors related to variable that haven't been defined yet in later scripts 

extends Node2D
@onready var player: CharacterBody2D = $"../Player" # grabs the parent node
@onready var self_area = $Area2D
@onready var player_area = $"../Player/Area2D"

# make a signal
signal garlic_collected

func _process(delta: float) -> void: # this runs EVERY FRAME! 
	
	if player_area.overlaps_area(self_area): # checks if overlapping
		if self.visible:
			emit_signal("garlic_collected") #signal broadcast
			self.hide() #removed from player sight; collected
		

# Because you're emitting a signal here, you need to connect that signal to 
# something to actually make it do a function. To do that, go to the
# `Signals` menu next to the inspector tab and double click it. 
# You would then need to connect it to the parent script or scene script
# and also name it something. You can name it ` garlic_collect` as seen 
# below, in the next script.

This is for the entire minigame, under the script for the entire scene:

extends Node2D
@onready var themed_timer: Node2D = $ThemedTimer 
# ^^^ You dragged this in the scene by the way 



var garlic_collected = 0 # just keeping track of garlic collected
var timer_end = false # boolean (true or false) stating whether the timer ended

func _ready() -> void:

        #Below you can see that I have a function that I named. I grab a 
        #function from it that was created in it's script and use `await` to 
        # tell the script to wait for a signal, or for when a function finshes


	await themed_timer.Timer(10.0) #accessing a function from this node
	#after this is compeleted...
	timer_end = true # now we're saying "oh ye you ran out of time"

func _process(delta: float) -> void: # running every frame brochacho
	
	if garlic_collected == 3: # the double equals is just an argument asking if it's the same, with "=" it'll give an error
		if Global.minigames_done > 3: # we access a global script and see how many minigames have been compeleted
			get_tree().change_scene_to_file("res://scenes/done_screen.tscn") # change current play scene into another, but you make your own finish screen in a later challenge, dont worry abt this rn
		else:
			get_tree().change_scene_to_file("res://scenes/timer_screen.tscn") # go back to the intermission scene
	
	if timer_end: # if the timer does end...
		Global.minigames_done -=1 #go back a minigame
		Global.lives -= 1 # lose ur lives
		get_tree().change_scene_to_file("res://scenes/timer_screen.tscn") # back to intermission
		

func garlic_collect() -> void: # cool function that you connect to those garlics
	garlic_collected = garlic_collected +1
	return

To create the Clicker Game (the second minigame), starting is simple.

First, create a new scene by pressing the + at the top of the viewport. Create a new 2D Scene and name it Minigame_2.

Note: Name the scene exactly Minigame_2. Previously, in the timer screen code, we told Godot to load the next minigame by referencing a specific scene name. If the file is saved under a different name, the game won’t be able to find it and everybody dies.

Next, return to the first minigame and copy the background. Paste it into your new minigame scene to save time.

Now, we need our buttons. We want the player to tap all the buttons within a certain timeframe, and have a life removed if all 4 weren’t pressed. To create a button, we can press the + in our Scene Tab, and look for a TextureButton.

Tip: You can hit Command+A on your keyboard to automatically add to the scene.

You are going to add a garlic texture by traveling to the Inspector and dropping down the Textures tab. You should also rename your button Button_1, for cleanliness’ sake.

Next, add a script to your Button. You don’t have to do anything more, as we’ll cover the programming in the next module. However, do know that the purpose of this script is to, first, detect a click and then hide the sprite so the player can focus on what’s left.

Ignore the multiple Garlics here, we’ll add them in our next module.

Now we need to focus on our timer. We want the buttons to all be pressed within 5-7 seconds, so we need a timer that detects if the time has ended or not.

Go to the FileSystem and select themed_timer.tscn. You want to drag it into the scene, wherever is most convenient.

Now you’re done setting your scene up. Time to program!!!!

For this minigame, you need to remember we want the player to tap all the buttons within a certain timeframe, and have a life removed if all 4 weren’t pressed.

The purpose of your button scripts is to, first, detect a click and then hide the sprite so the player can focus on what’s left.

To do that, enter this code into your button script:

extends TextureButton
@onready var parent = $".."

func _on_pressed() -> void: #YOU NEED TO CONNECT THIS SIGNAL FROM THE TAB NEXT TO INSPECTOR!!
	hide()
	parent.buttons_pressed += 1

And add this in your main scene’s script, which you’ll probably have to create:

extends Node2D
@onready var themed_timer: Node2D = $ThemedTimer

var buttons_pressed := 0
var timer_end = false

func _ready() -> void:
	await themed_timer.Timer(7.0)
	#after this is completed...
	timer_end = true 


func _process(delta: float) -> void:
	if buttons_pressed == 4:
		if Global.minigames_done > 3:
			get_tree().change_scene_to_file("res://scenes/done_screen.tscn")
		else:
			get_tree().change_scene_to_file("res://scenes/timer_screen.tscn")
	
	if timer_end:
		Global.lives -= 1
		Global.minigames_done -=1
		get_tree().change_scene_to_file("res://scenes/timer_screen.tscn")

Now, you can duplicate your Buttons all over your scene. Be sure to keep them in some kind of disorder to deter your player enough to create a challenge. Ignore the fact there’s no script connected in the image, there should be scripts.

Tip: You can hit Command+D on your keyboard to duplicate nodes quickly.

CHALLENGE: This is your responsibility to make, and use what you’ve learned already to create a unique and personal one for your game. This will be judged by reviewers for originality.

You’re finally done with your project! Now, how do we get this project to be accessible online so you can share it to all your friends, family, or to other hackers? I gotchu.

First things first, go to the top of the screen and click “Project” and then “Export..”

Add a preset called “Web.” You may have to download it. After it’s done, click “Export Project..”

Create a folder called “exports” so we can keep track of all these files in one place. Name the file “index.html”

Click Save. Then find the exports folder in your file manager.

Go inside and zip/compress all the files together. You can do this by holding shift and selecting all the files, and then right clicking to find a “zip” or “compress” option.

Putting it on itch.io

Go to itch.io. Make an account. Go to the arrow on the left and click “Upload new project.”

Make sure to:

1. Give the game a creative title
2. Make sure the Kind of Project is HTML
3. Upload the Archive.zip or the compressed file.
4. Make the game a Draft, and then make the game public after saving.

Test your game on itch.io. Does it work? If something appears broken, go back through this section and see if you missed something.

Congrats on finishing your game! You’re now like a Godot pro.