Create the first room

Now that we have two characters, it's time to create a location for them to interact with.

In Popochiu, game locations are referred to as rooms. More broadly, a room can serve as any game screen, including splash screens, menus, or close-ups. Not all rooms need to feature characters, and the main character may be rendered invisible in specific rooms.

To create our first room, just click the Create room button in Popochiu's main dock (13).

A popup will appear, very similar to the one to create a new character. This time, an additional checkbox is available. This allows us to set the newly created room as the main scene of the Godot project. Check it out so we don't have to do it later. This scene will also be the only room in this game stub.

Name the new room whatever you want. If you want to follow along, let's name this room "House" and make it the main scene.
Popochiu will create the new room, open the room scene in the editor, and open the corresponding Room tab in the plugin interface.

Much like a character, a room needs a sprite to represent the background of the location. We are going to use this background from the example game.

But hey! The room has nothing like a sprite in it! Quite the opposite, the scene tree seems to be pretty empty:

Unlike other objects in Popochiu, rooms are containers for other more specialized objects, the most important of which are Props. Props are every visible part of a location, used to make the environment believable. They can go from a small collectable item, all the way to location backgrounds.

Armed with this knowledge, it's now clear we must create a prop to hold our background. That's easy. If you followed the steps above, Popochiu dock should be showing the Home room tab.

Click the Create prop button and as usual, a new window will pop up:

Name the new prop "Background" and leave the "Will have interaction?" option unchecked. You don't want all of your screen to react to clicks when you move around.

Click OK and your prop will be created. You should see it in the scene tree, under the Props grouping node. The inspector should look something like this:

Now you can see the Prop has a Texture parameter. By this time you should be able to figure out what to do. Save the downloaded background sprite in the game/rooms/house/props/background/ folder, then drag it from Godot Editor file manager to the field in the inspector.
Your scene should now show the background image.

At this point you have a main character and a main scene defined. These are the minimum steps needed to run a Popochiu game. Treat yourself after all this effort, by hitting the Run button at the top right of the editor and seeing your game in action.

If you did everything right, you should see your main character standing in the center of the room. Clicking on the screen will flip the character so that it faces the cursor coordinates.

Add a Walkable Area

Our character is standing there in the middle of the room, doing nothing. If we click on the screen we would expect it to walk to the clicked location, but that's not happening.

The reason is that we defined no areas in which the character is allowed to move. Popochiu refers to those elements as Walkable Areas. They are objects that can live only inside rooms, and each room can have more than one (see the box below for an explanation).

For now, let's create a single walkable area representing the room floor.

In the Room tab of Popochiu dock, click the Create walkable area button (16).

In the popup window, just name your new walkable area "Floor" (or whatever you find descriptive enough). Click OK and a new element will be added to the scene.

Click the Edit Polygon button in the toolbar (17) to highlight a squared polygon in the center of the scene. Now you have to adjust the vertices of that polygon (18) to whatever makes sense.

When you have adjusted your walkable area, it should look something like this:

Click the Edit Polygon button again (19)to stop editing the perimeter of the floor.

Save the project and run your game. Your character should now be able to move around the room, without leaving the area you defined.

Add a hotspot

Our character can now move around the room, but there is little it can do. It is time to add some interaction.

A hotspot is the most basic form of interaction you can have in a room. It is just an area of the screen, delimited by a polygon drawn at a specific position, that has a name and a script attached to it. It has no sprite of its own, it just sits there on top of other elements, waiting to react to the cursor.

By means of its script, it can react to events like mouse clicks. That's exactly what we're going to do.

Creating a hotspot is much like creating a walkable area. In the Room tab of Popochiu dock, click the Create hotspot button (20).

In the popup window, just name your new hotspot "Window" (or whatever you find descriptive enough). Click OK and a new element will be added to the scene.

When you select the new hotspot in the scene tree (21), a bunch of gizmos are shown in the scene preview (22). We are going to interactively edit two important properties of the hotspot (the baseline and the walk-to point) by moving the gizmos on the screen. In addition, the dedicated button in the toolbar (23) will allow us to edit the hotspot's interaction polygon.

First of all, click the Interaction Polygon button to show the handles of the standard square polygon for the hotspot. Basically, that's the same as the walkable area polygon but instead of limiting the character movements, this polygon will just react when the cursor hovers over it.
Let's draw a shape around the window on the wall:

No need to be too precise or polished, rough edges won't be perceivable while playing your game. You just need to avoid, if possible, overlapping with other hotspots (see "Baseline" below, to understand how polygon overlapping works).

Another important property of the hotspot is the "Walk to point", which is the coordinates that the character will reach when you click over the hotspot.
You can set these coordinates interactively by clicking and dragging the Walk To point gizmo wherever you want in the room. You will see that the property with the same name in the inspector will update to reflect the coordinates.

For our example room, we'll set the following coordinates for the Window hotspot:

• x: -30
• y: -10

so that our main character will walk beside the window.

The last property that you want to set is the Baseline. The baseline is simply a coordinate on the Y axis, that represents a point in the imaginary space of the room. If the main character walks above the baseline (above means the character's origin has a Y coordinate that's lower than the baseline value), it is considered behind the object (in this case the hotspot). If the character origin is below the baseline, it is considered in front of the object.

Our window is in the back of the room and the main character has no way to be placed behind it, so just click the Baseline gizmo handler (the square in the middle of the line) and drag it at the very top so that the baseline is "as high as the scene" (or more). The character has no way to walk so high.

With the hotspot properly configured, we can now run a quick test. Start your game, move the cursor over the window and you should see the name of the hotspot in the action bar (24).

Clicking on the hotspot, the character will move to the point we defined and face the window.

Script your first interaction

If you ran the game, you may have seen that, while the character moves towards the window, a message is printed on top of the scene: Can't INTERACT with it.
That's because we didn't define what should happen when we interact with the window. Remember, in the GUI we selected, clicking on an object will trigger an interaction while right-clicking on an object will trigger an examination.

We are now going to script our first interaction, using Godot GDScript language and the very convenient engine API that Popochiu provides to make our life easier.

In the room tab of the Popochiu dock, locate the "Open Script" icon for the Window hotspot (25):

This will open the GDScript connected to this hotspot in the Godot scripting editor (26):

We will now add some interaction to the script. So far it will be simple stuff: we'll make our main character say something meaningful when we examine the window, and - in the absence of other elements in the room - act a bit weird when we try to interact with the window.

Locate the _on_click() function in the script. It should read something like this:

# When the node is clicked
func _on_click() -> void:
    # Replace the call to E.command_fallback() with your code.
    E.command_fallback()
    # For example, you can make the player character walk to this hotspot, gaze at it, and then say
    # something:
#   await C.player.walk_to_clicked()
#   await C.player.face_clicked()
#   await C.player.say("What a nice view")

Popochiu automatically executes this function when you click over the Window hotspot. We just need to put something meaningful into it. Let's try something. Change the function so it looks like this:

# When the node is clicked
func _on_click() -> void:
    await C.player.walk_to_clicked()
    await C.player.face_clicked()
    await E.wait(0.5)
    for n in 3:
        await C.player.face_left()
        await E.wait(0.3)
        await C.player.face_right()
        await E.wait(0.3)
    await C.player.face_clicked()
    await C.player.say("I wanted to open the window but I can't find the handle")

Save the script (ctrl/cmd + s) and run your game.
Now when you click the window, the character will walk to it, turn around three times like it is looking around for something, then face the window and say a phrase.

Yay! You reached an important milestone! Now your game feels more alive, isn't it?

Let's see what happened, breaking the function down to pieces. Ignore for a moment the await keyword.

    await C.player.walk_to_clicked()
    await C.player.face_clicked()

These two lines use the C Popochiu object. It holds a reference to every character in the game. Our character is called Goddiu, so C.Goddiu allows us to give commands to that character. But since Goddiu is also the character that the player controls, we can use the shortcut C.player.

This comes in very handy for those games that have more player-controlled characters, like Maniac Mansion, or Day of the Tentacle. You can change the active character as the game progresses but your scripts will point to the current active character, sparing you the effort to duplicate the code for each and every playable character.

    await E.wait(0.5)
    for n in 3:
        await C.player.face_left()
        await E.wait(0.3)
        await C.player.face_right()
        await E.wait(0.3)

Here we are literally waiting for some time to pass. E is the object representing the game engine (Popochiu!) and we are asking it to wait for half a second. After that, we use the `for`` GDScript keyword to repeat the same code three times.

The executed code just flips the character left and right after a small pause, as it is looking around.

    await C.player.face_clicked()
    await C.player.say("I wanted to open the window but I can't find the handle")

These last two lines make sure the character finally looks towards the window and says its line.

Now let's provide an examine interaction. Edit the _on_right_click() function you can find further down the script so it looks like this:

# When the node is right clicked
func _on_right_click() -> void:
    await C.player.face_clicked()
    await C.player.say("The weather is so nice today")
    await C.player.say("I may as well open that window!")

By this time, you should be able to figure out what will happen by yourself. Run the game and see your masterpiece in action.

Add a prop

We already encountered props, when we added our background to the game's first room. It's now time for a bit more information.

Props are arguably the most important elements in a room. Like hotspots, they can be interactive; they have a baseline and a walk-to point; the shape of the interaction area is represented by a polygon. Unlike hotspots they have their own Sprite2D node and an internal AnimationPlayer. Simply put, props can represent visible (an animated, if necessary) items on the scene. Since they have a baseline, characters can walk behind them, creating a deep, interesting gaming world.

But the real boon is that their visibility and "clickability" can be turned on and off by code, allowing you to articulate their presence or their function as the game progresses.

Enough talk, let's see them in action.

Since we already created a "Background" for our scene, you should know at this point how to create a new prop. Click on the Create Prop button in the tab room of the Popochiu dock, name it "ToyCar" and this time, check out the Will have interaction option (27).

Your new prop will be added to the scene tree as a child of the Props node (28). You should also notice a squared area in the center of the scene (29). That's the new prop's interaction polygon, set to the default squared shape.

Our prop is very much like a hotspot at the moment, since it has no texture. Let's add one.

If you don't have a sprite ready for your prop, you can download this one from the demo game.
Save it into your project, in the game/rooms/<your room name>/props/<your prop name>/toy_car.png folder, and rename it as you see fit.

Now we can set the Texture property in the prop inspector, by dragging the image from the FileSystem in place (30).

Make sure your prop is selected in the scene tree and drag it somewhere to the left part of the walkable area. Then select the Interaction Polygon button in the toolbar, like you did for the hotspot and change the shape of the polygon so that it matches the one of the sprite.
Your scene should look more or less like this:

Since the baseline is in the middle of the prop, it is already correctly positioned so the character can walk behind it. You can run the game and test that's the case.

Eventually, we want to enable our main character to pick up the toy car and add it to the inventory. For that though, we need some more elements, so we'll get back to that later.
For the moment, we'll just script a simple "examine" interaction, but we'll seize the opportunity to learn something new.

Click the Open in Script icon that you can find on the prop line in the Popochiu dock to edit the prop script. If you skim through it, you will notice it's very similar to the script for a hotspot. This makes sense since the interaction part is mostly the same.

Our GUI dictates that the character examines the surroundings by clicking the right mouse button, so let's make our _on_right_click() function like this:

func _on_right_click() -> void:
    await C.player.face_clicked()
    await C.player.say("Popsy leaves his toys everywhere!")
    await C.player.say("I have to pay attention or I will step on it.")

At this point, you should be familiar with those instructions. Run the game and see how the main character comments on the mess left by its younger friend.
This comment conveys some lore about the game world, telling the player something about Popsy's personality (we added Popsy as a second character earlier), but it's pretty long and we may want to put our accent on the second part: paying attention before stepping over it. This may be a signpost to suggest to the player that it's better to pick the toy car up.

To achieve our design goal, we'll add a bit of logic to our interaction, leveraging the power of GDScript.
We will create a boolean property for the toy car (boolean means the property can be either true or false, no other values are allowed), and will use it like a switch, to know if we already examined the prop at least one time. This way we'll make the main character say only the second line if the player examines the prop more than once.

It takes longer to say it than to do it. First of all, we'll add a property to the prop. Scroll up to the top of the script, and add the highlighted line to create a boolean variable, assigning it the true value.

@tool
extends PopochiuProp
# You can use E.queue([]) to trigger a sequence of events.
# Use await E.queue([]) if you want to pause the excecution of
# the function until the sequence of events finishes.

var first_time_seen := true   # <--- add this instruction

#region Virtual ####################################################################################

The assignment of the true value happens only when the prop is created, as soon as you start the game.

Now that we have a way to know if it's the first time we examined the prop, let's change the _on_right_click() like this:

# When the node is right clicked
func _on_right_click() -> void:
    await C.player.face_clicked()
    if first_time_seen:
        await C.player.say("Popsy leaves his toys everywhere!")
        first_time_seen = false
    await C.player.say("I have to pay attention or I will step on it.")

You can see we are now testing the value by using an if statement. It almost reads like plain English, right? If it's the first time that we examine the prop, we say the first phrase, then we change the value of the first_time_seen variable.
As long as we run the game, the value won't change back so the next time you examine the prop, the if statement is skipped and the execution will jump to the last line.

Run the game and test it.
Done, we have a prop in the scene! It's now time to learn how to use the character's inventory.