GODOT GUIDE – PART 1 – INTERFACE BASICS

By Alex K.

 

 

1.     Create a new Godot project.

2.     Start by exploring the different views at the very top (2D, 3D, Scripts & AssetLibrary).

3.     On the left, click on 2D Scene.  Your screen should look like this:

 

https://lh7-rt.googleusercontent.com/docsz/AD_4nXda4gAwQwD0OzspnXqT2eewHgxDXC3ufjR8AViXA9Ik3bFUV2BxpI19S79ZOPgQqi56-nGxjdDymcDJZIC0C8TezFWYf9OPivRRhjRI94wFlvLtwoDZMkWDoJDTadsAKkBv6NpbyQ?key=A319pMMFgwhCL9UM9V1AOWMl

4.     Other than the central area of the screen, there are three sections that you need to pay attention to:

 

·        Scene Tree (on the left)

·        File Loader (at the bottom left)

·        Inspector (on the right)

 

5.     The Scene Tree (see below) is where you see the nodes in the scene.  Right now, there is only one node that is called the root node.

What is a node?


https://lh7-rt.googleusercontent.com/docsz/AD_4nXeRhuPElAUOU720N1aZuQax7HQZnXkDzCFDbLA99rSA1KJbf1mG-YNuA9co6A97RQh0iQ2uQRVWazgR8_80ryrAC9dAWgpI7gGh78E9xlACDNCtIKwg54js6Fth5At20ZbxIerv?key=A319pMMFgwhCL9UM9V1AOWMl

 

6.     The File Loader (see below) stores any images, code and other files that will be used in your project.

Notice that by default, the image named icon.svg is there.  It is an image of Godot’s logo.


https://lh7-rt.googleusercontent.com/docsz/AD_4nXciQSJ1FVoaz4WPxOjtB_OvtXLzz6vMSKekAR710hT6PNphva5YCtfvUHIxjbHDc7slpa0ZHtMnaqUyHTttOW8vrk4wfiJeHEXYkiABoM6QHfpaYM4VEE14CPJ9s1XxqwhxaNzKNA?key=A319pMMFgwhCL9UM9V1AOWMl

7.     Let’s use the image icon.svg in this demo.  Drag it into the center of the screen.

Your screen should look like the image below.

https://lh7-rt.googleusercontent.com/docsz/AD_4nXdAc7St2rP5iHeKVGbb1SgGPI1fzlYqLxzm6O6YKOqAMPWptKMWEf0FYPv7ZkXWHibWm4_uhwef-P5cvHXPLWGgf6HmRcN3vzjlyk9AzQd15OssXTPQielGb4XUduuUSkg1IX8SZA?key=A319pMMFgwhCL9UM9V1AOWMl

 

8.     Find the Inspector on the right of the screen.  Notice that it gives information about the item that you currently have selected.

When your image is selected, notice that the Inspector shows that it is a Sprite2D object.

 

https://lh7-rt.googleusercontent.com/docsz/AD_4nXe8Vc-4H1tmzBQ-6Peb6lqo3LlQKGslsiQHENIg7wZmEUeHXThGOg5Z9VV0GOcPELzDbe3BHwo6mdQeKGV8_sLypMdzyYebxSkgNkDjywkMGxx83w1mucsf0zId86QqpxUqZn6C?key=A319pMMFgwhCL9UM9V1AOWMl

 

9.     Still in the Inspector, and with your image selected, open up the Transform section (see below).

https://lh7-rt.googleusercontent.com/docsz/AD_4nXdo1mZA1JyJ6y0a8NHNtj8jR48vZXQrC0DimFqxTrmyTNyamZT9UhEGVr0arQ96W68IjdMHo-14ugLRupwVBnVAklffn2h8Bsk5WOm-RGyKgafy8wW_-24p2CnzOlqlgnqsDJFi?key=A319pMMFgwhCL9UM9V1AOWMl

 

10.  Try playing around with the values a bit. Here are a few questions for you to solve:

·        If I increase x, which way will the image move?

·        If I decrease x, which way will the image move?

·        If I increase/decrease y, which way will the image move?

·        If I set skew to 45 degrees, how would the object change?

·        How would I double the size of the image?  How would I halve it?

·        What does the little chain icon beside Scale do?  Can you see a reason to turn it off?

11.  Now that you are done solving the questions, press the Recycle image beside all the values.  Notice what happens.

 

12.  You’re almost ready to press play. But we need a camera first.

In the Scene Tree on the left, right-click on Node2D (the root node) and press add child.

This menu opens up:

 

https://lh7-rt.googleusercontent.com/docsz/AD_4nXdcZ9xmXXq6mY0VsLUbTe7t49wKPRCRN_-P9TXItq5lDPgLqdqL-eNyB8vwlLHC8vWumUy6SdRkLi921xLuPceAmkbzB5G5wnMEvb9Nl5Q40NL2_iIESgJPhyuo8YSlV-AzrX0rFw?key=A319pMMFgwhCL9UM9V1AOWMl


Extra info - There are many items in this pop-up, more than we need to know about now.  However, if you are interested, here is a brief explanation of the different coloured icons:

 

White - special nodes like audio, multiplayer, or other shenanigans.


Blue – 2D objects.  This is what we are working with.

 

Red – 3D objects.

 

Green – Control nodes for GUI and HUDS development.  More on them later.

 

 

13.  Select Node2D > Camera2D (see image) and click on Create.

 

 

14.  Notice how you have a Camera that appears on the Scene Tree.

 

 

15.  You can now run your game by pressing Play (triangle above the inspector).

16.  A pop-up will ask about a missing scene.  Simply click on Select Current and name in Main.

 



17.  Your game is running and should look like this the image below.  Isn’t it glorious?


https://lh7-rt.googleusercontent.com/docsz/AD_4nXfgXxAE5WYTAvEF8BpC1pU0KNY-Y4oQiWt-7zwjZONt3CWv2gwL1a7yZNPhHZsspVD26XKwez7RirZyaqTEHccuzYP9DCSAtF3o53ET-HwpSX2avQsfChfN4GvNZYc9RnEEV1JH?key=A319pMMFgwhCL9UM9V1AOWMl

 

18.  Try closing your game and running it again just to make sure your are comfortable.

19.  With your Camera2D selected in the Scene Tree, carefully select the camera and move it to the right of the image.  Now run your game and notice how the image moved.

20.  Try moving the camera a few times and running the game to understand how movement impacts the game.

 

That’s it for now.  Good work!