Yu's Animation blog

In Week 10, I started the final integration and presentation preparation for Behind the Page. In Week 9, I had already completed the basic prototype testing in Godot, including scene import, character placement, clickable areas, dialogue UI, and 2D/3D button testing. Therefore, the focus of this week was not to add many new functions, but to organise the existing content and present the project clearly as a demo.

This week, I first checked the overall scene and interaction flow in Godot. I needed to make sure that the bedroom background, character position, clickable objects, dialogue UI, and button feedback could all work correctly. Because Behind the Page is an interactive narrative project, the purpose of the final demo is not to show a complex game system. Instead, it is to help the audience understand the core experience of the project: the player can click on objects, read text, and switch perspectives to discover hidden information.

[Final Godot Scene Screenshot]

I also reorganised the presentation order of the demo. The player first enters the bedroom scene and sees the room and the character. After that, the player can click on objects such as the computer, homework book, poster, game console, and bed. The dialogue box then shows different text information. Although these lines are short, they are connected to the character’s childhood memory, study pressure, desire for entertainment, and hidden emotions. Through this process, I hope the audience can understand that the room is not only a normal background, but also a space that carries memory.

[Final Interaction Test Screenshot]

After the player clicks on different objects, the dialogue box shows the related text information. This allows the objects to take on a narrative function.

Because this is an interactive project, I needed to use video to help others understand the experience during the final presentation. This week, I recorded the interaction process in Godot and then imported the footage into editing software. During the editing process, I needed to control the rhythm, so the audience could clearly see what the player clicked, how the UI appeared, how the text was displayed, and how the 2D/3D button worked in the interface.

During editing, I removed some repeated or unnecessary actions and kept the parts that best showed the core experience of the project. I also added a title page and simple transitions to make the video structure clearer. Because Behind the Page is still a prototype at this stage, the purpose of the video is not to present a complete game, but to explain the project concept, visual direction, and main interaction logic.

[Demo Video Editing Process]

This week, I also started to add basic sound design. Sound can make the interaction feel more responsive and can also help build the atmosphere of the memory space. I planned to use light and soft sounds, such as mouse click sounds, button feedback sounds, page-turning sounds, dialogue box pop-up sounds, and quiet room ambience.

I added click sounds, page-turning sounds, and ambient sound effects to make the interaction feel more responsive and to make the memory space feel more complete.

Through the integration work in Week 10, I became clearer about the development process of Behind the Page, from concept to prototype. At the beginning, I was mainly interested in pop-up books, 2D/3D transitions, and interactive storytelling. Later, this idea gradually developed into an interactive game prototype about memory, hidden information, and perspective change. Although the final demo is not yet a complete game, it can already show my core idea: memory is not only what is seen on the surface, and the player needs to click, read, and change perspective to reinterpret the space.

During the production process, I also found some areas that could be improved. For example, the real 3D perspective switching could be developed more fully, the hidden information could become deeper, and the text content could have more layers. If I continue developing this project in the future, I hope to add more chapters, so that each page of the memory book can become a different scene. The player could then turn pages, collect fragments, and change perspectives to gradually piece together a more complex story.

[Final Demo Presentation]

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.

In Week 8, I continued to develop the design of Behind the Page. In Week 7, I mainly worked on the visual planning of the bedroom scene. This week, I started to further develop the character design, UI system, and the narrative structure of the first chapter. Because this project is not only a visual scene, but also an interactive narrative game where the player needs to click, read, and switch perspectives, I needed to design what the player would see, what they would click, and how this information could help them understand the story.

This week, I started to organise the main character design for the project. The core characters in the first chapter are the little girl and the mother. The little girl is the central character of the memory. She represents a childhood perspective, curiosity, and the desire to escape from reality. The mother represents external rules, study pressure, and a sense of control within the family. The relationship between them will influence how the player understands the bedroom memory scene.

For the visual style, I wanted the characters to be simple and clear, rather than too detailed. Because the project will later move towards a pixel art style, the character design needs to be easy to simplify into pixel characters. The characters do not need to have realistic proportions. Instead, they can be closer to small game characters, so they can stay consistent with the bedroom scene, UI, and interaction style.

The little girl and the mother are the main characters in Behind the Page. Their relationship affects how the player understands the bedroom memory scene.

Besides character design, I also started to develop the visual direction of the UI system this week. Because the core concept of Behind the Page is a memory book, I wanted the UI to feel connected to pages, paper, bookmarks, and sticky notes, instead of looking like a normal game interface. The dialogue box, buttons, and menu all need to match the overall visual style of the project.

The dialogue box is an important tool for the player to understand the story. After the player clicks on an object, they can read object information, character thoughts, or hidden clues through the dialogue box. Therefore, the dialogue box should not take too much attention away from the scene, but it still needs to be clear enough for the player to understand that they are receiving a piece of memory information. The 2D / 3D switching button is also one of the most important UI elements, because it directly connects to the gameplay theme of “changing perspective to discover hidden information”.

The dialogue box, buttons, and 2D/3D switching interface use paper, bookmark, and pixel-style visual elements, so they can stay connected to the memory book theme.

This week, I also started to design the specific content of the first chapter. The first chapter mainly takes place in the bedroom, and the story is set after school. On the surface, the player sees an ordinary child’s bedroom, with a desk, computer, homework book, poster, game console, bed, and door. However, these objects are not only decorations. They are all connected to the character’s memory, emotion, or hidden information.

The main conflict of the first chapter is the choice between homework and games. The homework book represents study pressure. The computer and game console represent entertainment and escape. The door is connected to the appearance of the mother. The player needs to click on these objects to slowly understand the pressure and desire inside the room. This chapter does not directly tell the complete story. Instead, it allows the player to gradually piece together emotional clues through short sentences, objects, and hidden information.

Object	Surface Meaning	Hidden Meaning
Computer	Playing games	Temptation / escape
Homework	Homework	Study pressure
Door	Door	Mother’s control / being caught
Poster	Decoration	Hidden clue
Game Console	Toy	Childhood desire
Bed	Rest	Safety / escape

[Flow Design]

This flow shows how the player starts from the bedroom scene and moves the story forward through clicking objects and switching perspectives.

Another focus of Week 8 was thinking about how to tell the story through hidden information. I wanted every object in the room to have two layers of meaning: one is the surface function that the player first sees, and the other is the emotional meaning inside the memory. For example, the computer is used for playing games on the surface, but it also represents temptation and escape. The homework book looks like a normal school task, but it also represents pressure. The door is only an entrance to the room on the surface, but it may also represent the mother’s control, the tension of being caught, or a boundary within the family relationship.

Through this design, I hope the player will not passively receive the story. Instead, they can actively understand the story by clicking, reading, and switching perspectives. Hidden information can turn an ordinary room into a memory space, and it can also make the player realise that memory is not only what is shown on the surface.

Through the design work in Week 8, I gained a clearer understanding of the narrative structure of Behind the Page. The characters, UI, and objects should not be separate parts. Instead, they should all work together to support the player experience. For the next step, I need to bring these designs into Godot for testing, create clickable areas, dialogue boxes, and basic buttons, and turn the first chapter from a design plan into a playable prototype.

In Week 7, I started to move Behind the Page from an interaction concept into a more specific visual design stage. In Week 6, I had already organised the core interaction mechanics of the project, including 2D/3D perspective switching, clicking hidden objects, text transformation, and memory fragment collection. Therefore, this week I needed to think about what kind of space these interactions should happen in, and how the scene itself could support the narrative.

Scene Drawing

I decided to set the first main scene in a bedroom. This room is not only a background, but also a memory space. It contains many objects related to childhood, study, family relationships, and personal emotions, such as a desk, computer, homework book, door, bed, poster, and game console. The player can click on these objects to discover text, sounds, or hidden information, and gradually understand the story behind this memory scene.

[Layout / My Room Reference]

[Room Reference]

[Initial Room Scene Sketch]

This sketch helped me think about the basic structure of the bedroom and the position of different objects in the scene.

For the visual style, I wanted the room to look like an opened pop-up book. In the 2D view, the scene would look like a flat illustration. However, when the player switches to the 3D view, the room becomes a paper-like space with depth. The player can then see information hidden behind objects or walls. This design connects the 2D/3D transition with the theme of the project: memory may look simple on the surface, but there may be more hidden behind it.

Visual Style

[Game Reference: Eastward]

[Visual Style Reference]

I wanted the project to combine the form of a pop-up book, paper texture, and a childhood bedroom memory space. I hope to create a visual effect that sits between illustration and 3D space.

For the final visual result, my plan is to first draw the normal 2D scene, and then convert it into a pixel art style. This allows me to keep the structure and composition clear first, before developing the final game-like visual language.

Interactive Objects

This week, I also started to organise the functions of the interactive objects. The computer can represent entertainment and temptation. The homework book can represent study pressure. The door can suggest the appearance of the mother and a sense of family control. The poster can hide clues. The game console can represent childhood desire, while the bed may relate to safety or escape. Through these objects, I want the room itself to become part of the storytelling, instead of only being a decorative background.

[Interactive Object Planning]

This image organises the main interactive objects in the room. Each object is not only decoration, but is connected to the character’s childhood memory, emotion, or hidden information.

In the scene composition, I need to consider both the 2D and 3D viewing modes. The front view needs to be clear enough, so the player can quickly understand which objects can be clicked. At the same time, the 3D view needs to keep a sense of spatial depth, so the player can discover new information after changing the angle. Therefore, when designing the room, I paid attention to the positions of the walls, floor, door, desk, and bed. They need to form a complete image, but also support perspective switching and interaction design later.

Final Room Scene Design

[Final Room Scene Design]

This image shows the main scene direction I developed in Week 7, including the bedroom layout, interactive objects, and the pop-up book-like spatial structure.

Through the visual design in Week 7, I became clearer about the spatial structure of Behind the Page. This room is not only a game scene, but also a container for memory. It needs to visually show the familiar feeling of a childhood bedroom, while also using hidden information and perspective changes to express the incompleteness of memory. For the next step, I will use this visual design to start creating a testable game prototype, and bring the objects and interaction functions into the actual engine scene.

In Week 6, I started to further organise the direction of my project and officially named it Behind the Page. This title fits my project concept because I want to express the idea that what the player first sees is only the front side of the page, while the important memories, emotions, and truth may be hidden behind it. The title also suggests the main relationship in my project: the surface of memory is not always complete, and only by changing the viewing angle can hidden information be discovered.

This week, my main focus was to turn my previous rough ideas into a more systematic interaction structure. In the past few weeks, I had already confirmed my interest in pop-up books, 2D/3D visual transitions, and interactive storytelling. However, the gameplay structure was still not very clear. Therefore, this week I started to think about how the player could take part in this memory book: what they could do, and how these interactions could help them understand the story.

[Early interaction ideas for the project]

This image shows my early thinking about the project’s interaction methods, including perspective switching, hidden object interaction, text transformation, page turning, and memory fragment collection.

The core of my project is still based on memory and hidden information. At the beginning, the player will see a 2D front-facing scene, like a page in a book. This scene may look flat, simple, and complete. However, when the player switches to a 3D view or clicks on certain hidden objects, they will discover more information behind the scene. In this way, the player’s understanding of the scene will gradually change through interaction, and memory will no longer feel like a fixed or single result.

When organising these ideas, I divided the project into several main interaction directions. The first one is perspective switching. The player can switch between a 2D page view and a 3D pop-up book space, moving from the surface memory into a hidden memory layer. This mechanic is not only used to show a 2D/3D transition effect, but also connects to the narrative theme of the project: the same memory can be understood differently from different viewing angles.

The second interaction direction is hidden object interaction. The player can click on objects in the room, such as a toy box, window, door, or the space under the bed, to find sounds, images, notes, or text fragments. These pieces of information may not explain the whole story immediately, but they can slowly guide the player to notice details that were ignored in the memory.

The third direction is text transformation. I imagined that the player could click or drag keywords to change the meaning of a sentence, for example, safe → silent, everyone → someone, and remember → forget. This mechanic made me think that language can not only record memory, but also change the way memory is understood. A small change in one word may allow the player to reinterpret the same scene.

In addition, I also considered the functions of page turning and memory fragment collection. After completing one memory scene, the player can move to the next page, as if entering another layer of memory. The photos, sounds, notes, or word fragments collected by the player may not always form a complete truth. This can show the fragmented, uncertain, and subjective nature of memory.

[Interaction planning diagram]

To make the player experience clearer, I also organised the project into a more structured player journey / prototype flow. In this flow, the player first opens the memory book and sees a 2D room scene. Then they click on objects, switch to a 3D view, discover hidden information, collect memory fragments, and finally turn to the next page. Through this process, I started to move the project from an abstract concept into a demo structure that can be made and tested.

[Player journey and prototype structure diagram]

This image shows the basic flow of the player’s experience, from opening the memory book, exploring the room, switching perspective, discovering hidden information, collecting fragments, and turning to the next page of memory.

During this week’s concept development, I also looked at several games with similar mechanics. First, The Plucky Squire was an important reference for my project because it uses a storybook as its main visual structure and allows the character to move between a 2D page world and a 3D space. This transition from page to space is very close to the pop-up book memory space I want to explore.

Secondly, Monument Valley helped me think about how perspective can affect the player’s understanding of space. The game uses visual illusion and impossible spaces to create puzzles, which shows that “changing the way of seeing” can become part of the gameplay mechanic. Finally, Gorogoa also inspired me. It uses the arrangement and combination of image panels to develop its narrative, which helped me realise that nonlinear storytelling does not always need a large amount of text. It can also be created through images, fragments, and player actions.

Through this week’s development, I became clearer about the interaction logic of Behind the Page. This project is not only about letting the player watch a linear animation. Instead, I want the player to take part in reconstructing memory through clicking, exploring, switching perspective, and collecting information. The 2D and 3D transition is also not just a visual effect, but is directly connected to the narrative: different ways of seeing can create different understandings, and memory itself may not always be completely reconstructed.

For the next step, I need to choose the most suitable mechanics for a short demo. Because the project time is limited, I cannot complete all the functions at once. Therefore, I need to focus on the most important core experiences, such as 2D/3D perspective switching, object clicking, and discovering hidden information. After that, I will start to design the first specific room scene and turn these interaction mechanics into a playable game prototype.

References

The Plucky Squire
https://store.steampowered.com/app/1627570/The_Plucky_Squire/
Reference reason: storybook structure and 2D/3D world switching.

Monument Valley
https://www.monumentvalleygame.com/
Reference reason: perspective change, spatial understanding, visual illusion, and puzzle mechanics.

Gorogoa
https://www.annapurna.com/interactive/gorogoa
Reference reason: image panels, fragments, and nonlinear storytelling through player interaction.