Download the installation package for Godot from
https://godotengine.org/

When you download the latest version, you will find a zip file in your Downloads folder. Opening it, you will find two executables inside. These are not installers but the actual application executable.

Create a folder for the application somewhere convenient. This will work in user space too, so you can create it in your user folder. Copy the executables from the zip file to that folder. Then open the application and pin it to the taskbar (Windows) or start menu, or create a shortcut to it that you can find more easily.

Also recommended: download an offline version of the documentation from:
https://docs.godotengine.org/en/stable/index.html
Scroll down to the link to an HTML version of it and download it. Create a documentation folder inside the folder where you installed Godot and copy the files from the zip file into it. This way, you can access it even when you're not online.

Ex. 1. In this lab we'll create our first project in Godot and get used to the environment. We will assume for this semester that you have version 4.2.1 installed.

The application we are creating in this lab is a word game inspired from Scrabble and Words with Friends where you are given a set of letters and you have to find words that can be formed with these letters. We will start this project this week and finalize it the next week.

a. Create a Project

Open Godot. Close the dialog offering to open the library. Click on the New Project button (top right). Click Browse to select a folder for the project. Choose a folder where you usually store programming projects or class files. Then click to create a new folder inside of it, and call it anagram. Change the name of the project to anagram as well, then click Choose this Folder. Change the Renderer to Compatibility, and the Version Control Metadata at the bottom of the dialog from Git to None, and then click Create and Edit.

At the top of the window, click on the 2D button to switch the game to 2D mode.

b. Scene

An application needs at least one scene to run. In the node editor (Scene), below Create Root Node, click on Node2D to create a 2D root node for the scene. Rename it Root2D by editing its name in the Hierarchy. Click in the Scene Editor to add the node in the top left corner at the intersection of the red and green lines (point 0, 0).

From the Scene menu at the top, select Save Scene. The default name and folder should be fine. Remember to save the scene from time to time.

Let's edit some of the project properties, such as the background color. From the Project menu, choose Project Settings. Click on Rendering, then Environment. There is one entry here, Default Clear Color. Click on the gray box next to it and choose another color (whichever you want). Then under Display, click on Window and set the Viewport Width to 1000 (or however wide your screen is).

We can test the game already. Click on the Play button above the scene editor (small triangle). A dialog will warn you that no main scene has been set yet. Click Select Current. A separate window will appear in the size and background color you chose. You can close it for now.

a. Adding Objects

For our game, we will first need an object that shows the available letters. The Label type will work for this purpose. Click on the + in the Hierarchy, the type Label into the Search bar. Double-click on it when it shows up. This will put a Label node in your scene at position 0. Using the mouse, bring it somewhere to the center of the window. Change its name to ShowLetters. In the Inspector, edit the text to something like A B C D E F G.

Then in the Inspector, under CanvasItem, expand Visibility, then click on the white box next to Self Modulate and set its color to something that contrasts well with the background.

This text is a bit small. Let's make it bigger. In the Inspector, under Control, expand Theme. Click on the arrow next the <empty> and choose New Theme. Then next to Type Variation, choose HeaderMedium. The text should be bigger now.

We need a second object to input some text from the user. Let's create a LineEdit object. This allows the user to enter some text on a single line (editable). With the Root2D object selected, click on the + to add a new node. Type LineEdit in the search, then double-click to add the object. Place it below the label and resize it to make it a bit bigger. Rename it UserEntry. Run the program now. You will be able to type in the input field, but nothing will happen when you hit Enter.

Adding a Script

With the object ShowLetters selected, scroll down to the bottom in the Inspector, where you see the label Node and then below Script <empty>. Click on the small arrow next to Empty and add a new script. The default options should be fine, and click Create. This will create a script called ShowLetters.gd in the language GDScript and will open it for editing.

There are two functions added to the script by default. The function _ready is called when the node that the script is attached to is created and added to the scene. If the node was manually added to the scene and not created in the code during the execution of the program, then this function is called when the program is launched.

The second function is _process. This will be called to transition the node from one frame of the game to the next and will determine the behavior of the object (similar to the Update function in Unity).

Let's add the following code to the function ready:
for n in range(8):
    print(n)

Run the program to see where these numbers are being printed.

Add 3 more labels to the scene: a title at the top in a bigger font theme, one just below the title with a short explanation about the game, and another one to the right of the two existing boxes with the text "Accepted words:", with the name Accepted. The latter will display all the words the user guessed that are accepted by the game. The name is important as it will be used in the code to change its content dynamically.

We will continue this program the next week and implement its functionality.

Take a screenshot of your running program, showing the numbers displayed and the scene. Save it in png or jpg format and submit it to Canvas.