Week 9 ： Godot Prototype Programming and Interaction Implementation

In Week 9, I started to bring the visual design, UI design, and interaction planning from the previous weeks into Godot for testing. In Week 7 and Week 8, I mainly worked on the scene visual design, character/UI direction, and chapter design. This week, the main focus was to turn these design ideas into a playable game prototype. Because Behind the Page is not only an animation short film, but also an interactive work where the player needs to click, read, and switch perspectives, programming became the most important part of this week.

Although the early part of this course was related to Unreal Engine, I finally decided to use Godot to create the prototype for this project. The main reason is that my project is closer to a short 2D / 2.5D interactive narrative game. I needed to quickly test object clicking, UI dialogue boxes, button feedback, and perspective switching. Compared with building everything directly in a complex 3D scene, Godot is more suitable for me to quickly create a playable prototype.

Godot Engine : https://godotengine.org/

Godot’s node system is clear and useful for separating the scene, character, UI, and interactive objects. For example, I can first import the bedroom image as the background, and then use Area2D and CollisionShape2D to add clickable areas to the computer, homework book, poster, game console, and bed. In this way, I can first test whether the core interaction works, before developing more complex 2D/3D perspective switching.

To learn Godot, I watched some beginner tutorials. Brackeys’ Godot beginner tutorial was helpful for me because it introduces the Godot interface, nodes, scenes, and scripts from the beginning. It is useful for beginners to understand the basic logic of game prototype development.

I first imported the bedroom scene into Godot as the background and added the character Sprite into the scene. This allowed me to test the overall image scale, character position, and whether the room composition worked well for the game view. This stage also made me realise that when a visual design is imported into the engine, it does not always work exactly like the original image. It still needs to be adjusted according to the player’s view, UI position, and interactive areas.

[Screenshot of scene setup in Godot]

[Character animation programming in Godot]

This image shows how I imported the bedroom scene into Godot and added the character Sprite for the first prototype test.

Next, I started to create the clickable object system. I used Area2D and CollisionShape2D to set up clickable areas for the main objects in the room, including the computer, homework book, poster, game console, and bed. When the player clicks on different areas, different text content can be triggered. This method fits my project because the gameplay is closer to point-and-click exploration, rather than traditional action game control.

Object	Text after clicking	Function
Computer	Hurry up and beat the game!!!	Entertainment / temptation
Homework	Today’s math homework	Study pressure
Poster	A special poster…	Hidden clue
Game Console	Let’s play later	Childhood desire
Bed	Relax later	Safety / rest

At this stage, the text content is still quite simple, but it helped me build the basic interaction logic: when the player clicks on different objects, they receive different information feedback. Later, I can continue to develop these lines so they are not only object descriptions, but also hints about the character’s emotions and hidden memories.

[Clickable area screenshot]

This image shows how I added Area2D clickable areas to different objects in Godot, so the player can click them to trigger related text information.

For the UI, I continued to test the dialogue box system. After the player clicks on an object, a dialogue box appears at the bottom of the screen and shows the related text. This system is important for my project because text is one of the main ways for the player to understand memory fragments and hidden information. I hope the text does not only explain the object, but can also gradually suggest the character’s emotions.

Typewriter Text Effect in Godot — Godot 4 Tutorial

For example, the line on the computer, “Hurry up and beat the game!!!”, suggests the attraction and temptation of games. The homework book line, “Today’s math homework”, suggests study pressure. The game console line, “Let’s play later”, shows the childhood desire for entertainment and escape. Through these short lines, the objects in the room start to carry narrative meaning, instead of only being decorations in the scene.

After the player clicks on an interactive object, the dialogue box shows the related text. This system allows the objects in the room to become part of the storytelling.

This week, I also started to test the 2D / 3D perspective switching buttons. At this stage, I have not fully completed the final 3D switching effect, but I first created the button UI and basic click feedback. This button is one of the most important mechanics in the project because it connects directly to the theme of “changing perspective to discover hidden information”.

Easy UI Animation in the Godot Engine

At this stage, I mainly wanted the player to understand that 2D and 3D are not two completely separate images, but two different ways of viewing the same memory space. Later, I will connect the button to the actual scene change, so the player can move from the 2D page view into the 3D memory space.

[Button test]

This button is used to show that the player can switch between the 2D page view and the 3D space view. It prepares for the main gameplay mechanic later.

During the production process, I also met some problems. The first problem was the UI position. At the beginning, the dialogue box did not appear in the ideal position. Sometimes it affected the scene composition or made the text less comfortable to read. Therefore, I needed to adjust the UI node position and layer order.

The second problem was the clicking logic. At first, the UI could appear after clicking an object, but the logic for closing it after another click was not very natural. Because of this, I needed to continue adjusting the show and hide state.

I also had problems with node paths and button animation. Some nodes had path errors when I connected them in the script, so I needed to check the node structure and script references in Godot. For the button animation, the first click feedback was too exaggerated, and the start and end positions were not the same. This made the button look like it was jumping, instead of giving a small feedback. Later, I plan to make the button animation smaller and more natural, so it only works as a simple UI feedback.

These problems made me realise that an interaction system is not only about making the function work. It also needs to consider the actual player experience. Whether the UI is stable, whether the button feedback is natural, and whether the clicking logic is clear will all affect whether the player can understand the game smoothly.

Stage Result

By the end of Week 9, I had completed the first playable prototype foundation of Behind the Page: scene import, character placement, clickable areas, basic dialogue box, the idea of a mouse hover cursor, and the first test of the 2D/3D buttons. Although the real 3D switching function is not fully completed yet, this week helped me confirm that the technical direction of the project is possible.

Through this week’s Godot production, I realised that the interaction system is not only a technical part, but also affects how the player understands the story. Whether an object can be clicked, what text appears after clicking, where the UI appears, and whether the button feedback feels natural will all influence the player’s feeling of the memory space. For the next step, I need to continue improving these interactions and connect them with more specific hidden storytelling, so the player can gradually understand the hidden memory inside Behind the Page through their own actions.