Making a little game (part I)

TODO: Put a GIF (or a couple of GIFs) showcasing the result of this implementation.

We're going to create a little game where the player character (PC) can:

move from one room to another,
make interaction with props and hotspots,
put an item in the inventory and then use it on a prop,
talk to another character.

Create your first Room

In the Popochiu dock, click on the + Create room button. If you don't see the button, click on the icon_room Rooms category (that is the light-blue-rectangle-shape-header).

03-making_little_game-01-create_room

A popup will appear. Because this is our first room, we will mark the checkbox that asks us if we want to make this the main scene of our project (that is the scene that Godot will open when running the project (F5 keyboard shortcut in Windows)).

03-making_little_game-02-create_room_popup

Popochiu will create 3 files:

The Room101.tscn file is the one that will contain all the Nodes for the room and that will be rendered on screen.

The Room101.gd file is the script we will use to define behavior for the room (not its individual elements).

The Room101.tres file is a Godot Resource Popochiu uses to know that the room exists. 🍑 Those are stored in the rooms export variable of Popochiu.gd. 🍑

Click the OK button. Popochiu will automatically open the .tscn we will use to put elements in our room. In the Scene panel you should see something like this.

03-making_little_game-03-room_101_scene_tree

The basic elements every Popochiu room has are:

Props: will be the visual elements of our room (some will have interaction).
Hotspots: areas players can interact with.
Regions: areas that will trigger an action once the PC enters or leaves them.
Points: Position2D nodes one can use to make the PC move to.
WalkableAreas: the Navigation2D that defines the area Godot will use to make our character move through the room.

In the FileSystem panel you should see something like this:

03-making_little_game-04-room_101_filesystem

Adding visual elements

Now lets add some Props to our room. When you open a Popochiu Room in the Editor the Room tab is autoselected in the dock. Because the room we just created was automatically opened, the Room tab should now be selected. Click on the icon_prop Props category, and then click the + Create prop button.

03-making_little_game-05-create_prop

The popup to create a Prop appears. This will be the background image of our 101 room, so it won't has interaction. Give a name to the Prop (in this case Bg, a short version of Background), and then click OK.

03-making_little_game-06-create_prop_popup

Now the scene tree in the Scene panel should show our Bg prop.

03-making_little_game-07-room_101_scene_tree

We have to assign a texture (image) to our background. To do so, open the Props folder (Popochiu created this for us to place some of the assets related to the 101 room props) by right clicking it in the FileSystem panel and then selecting Open in File Manager.

03-making_little_game-08-open_room_101_props_folder

If you don't see the Props folder, just minimize and restore the Godot window.

Copy the image you want to use for your background and paste it there. In this tutorial we'll use the following one:

Go back to Godot. You should see the image in the FileSystem panel.

03-making_little_game-09-room_101_bg_in_filesystem

To assign the image as the texture for our background, select the icon_prop Bg node in the Scene panel, or click the Bg row in the Popochiu's Room tab. You should see this in the Inspector panel.

03-making_little_game-10-room_101_bg_inspector