Interactive Narrative Design / Project 3

on
30.06.2025 - 21.07.2025 (Week 11 - Week 14 )
Ng Kar Yee / 0367743
Bachelor of Design (Honours) in Creative Media
Interactive Narrative Design / Project 3

INTRODUCTION

PROJECT 3⇒ DEVELOP INTERACTIVE NARRATIVE USING REN’PY

For our third project, Mr Kamal introduced Develop Interactive Narrative Using Ren'py to us where we are challenge to realize the interactive narrative as a playable experience using Ren’Py, a visual novel engine. We are needed to translate the branching script from Project 2 into an actual game prototype. This project focuses on the practical application of narrative logic, visual execution, and interactive storytelling.

For this project, we are required to develop an interactive narrative project using Ren’Py based on your approved branching script
Instructions:
  • A working, playable Ren’Py file that delivers a complete story experience.
  • Integration of dialogue, scenes, and choices that reflect player agency.
  • Functional coding of narrative paths using Ren’Py tools such as label, menu, jump, and if statements.
  • Visual and audio assets that support the storytelling (can be placeholders or original).

You are encouraged to include features such as:
  • Branching storylines with multiple pathways or endings.
  • Character interactions through dialogue choices.
  • Use of variables to track player decisions or unlock story elements.
  • Music and visual design to enhance mood and immersion.

Deliverables:

Submit a compressed (.zip or .rar) folder containing:

1. Ren’Py Game Folder

  • Complete game files with scripts, assets, and configurations.
2. README File
  • Brief description of the story concept, key interaction features, and how to play.
3. Short Gameplay Video
  • To showcase story highlights or interactive elements (for presentation or archival).

SOURCING AND EDITING

After finishing the proposal, scripts and flowcharts, I started sourcing my assets for the game. 

1. Background

For the background of the game, I source a lot of them online from a few website. I try to find Sci-Fi theme images of underground laboratories, abandoned hospital rooms and experiment rooms. Besides, I also use an AI generation website to generate some of the background which need specific requirements such as having a doctor standing on a specific place in the image as well as having a mirror or drawer in a bedroom.
  
Website use for sourcing background and images:

Website use for AI generation background and images:

2. Characters

For characters, I found a similar website that can build and customize characters to the one Mr Kamal recommended in Week 9 during lectures. I decided to use the current found one as its more 3D style and more suitable to the artstyle using in the gameplay. Besides, the current website using enable me to customize the body features, fashion, body posture and even facial expression of each character. 

Website use for building characters

i. RecodeSample099 old self
Figure 1.0 RecodeSample099 old self
ii. Alley
Figure 1.2 Alley
iii. Scientist
Figure 1.3 Scientist
iv. RecodeSample099
Figure 1.4 RecodeSample099
v. Child in the photo
Figure 1.5 Child In The Photo
vi. Nurse
Figure 1.6 Nurse
vii. Warden AI
Figure 1.7 Warden AI

After sourcing the background and building the characters, I imported everything into Adobe Photoshop to edit all the images. For the background images, I removed some of the unnecessary parts of the images and tone the colour of the images to unite them to one tone. Besides, for the characters images, I removed the background and tone the colours to the same tone to the background images. For some of the background images, I also added in a white vignette liked effect to indicate a memory fragment. Both of the background and the character images also was set to the same side as the game resolution which is 1280 x 720 points.

Figure 1.8 One Of The Photoshop Images

3. Audio

For the audio of the game, most of the audio effects and background music was source from Youtube. After converting them to MP3, I imported them into Adobe Premiere Pro to edit the soundtrack to match the game.

Figure 1.9 Sound Editing In Adobe Premiere Pro

BUILDING GAME IN REN'PY

After finish preparing the assets, I begin coding using Visual Studio Code. It was my first time using Python and some Ren'py language to code. I started to code following the storyline in the script I did for Project 2. 

Figure 2.0 Code Overview

After putting in all the contents, I add in the menu and label code to put in all the choices of the game.

Figure 2.1 Menu And Label code

For the character name to appear at the top left front before the dialogue, I define all the characters' name at the beginning at the code and code in before the dialogues.

Figure 2.2 Define Characters' Name

After completing the storyline, story choices and dialogues, I begin to slot in the images. I added all the background as well as character images in the image file of the game and define the image name at the beginning of the code. Then, I slot in the label of the images at specify dialogues.

Figure 2.3 Define Image

To make the game more interesting, I added animation to the game background. As what I research, the most easiest way to put in animation is the frame by frame animation way. Therefore, I edited some of the background images in Adobe Photoshop to give the images some before and after differences, for instances, the background light flashing in some of the scenes and save it in png frame by frame. Besides, I also used Adobe After Effect for some of the animations, for instance the starry memory fragment flashback scenes and the red alarming continuously zooming in room and as well save it in png frame by frame sequence. The smoother the animation the more frame it has, therefore resulting the long png sequence code in Visual Studio Code.

Figure 2.4 Frame By Frame Animation

Besides putting in animation, I also added in a zooming in effects into some of the scenes, especially scenes where RecodeSample099 review back his memory fragment as it give players have the differentiate between normal and memory fragment scenes.

Figure 2.5 Zooming In Effect

I also added in a scene shaking effect to one of the scene to make it more immersive.

Figure 2.6 Shaking Effect

After adding in all the effects, I slot in the audios for the sound effects and backgrounds.

Figure 2.7 Audios

FINAL DEVELOP INTERACTIVE NARRATIVE USING REN’PY

FINAL REN'PY GAME FOLDER

Mac Version:

Window Version:

FINAL README FILE



FINAL SHORT GAMEPLAY VIDEO

CODE PREVIEW

FEEDBACK

WEEK 11
  • The game looks interesting
  • Can feel the tension building
  • Suggested to put in animations in the background

REFLECTION

Working on Develop Interactive Narrative Using Ren'py has been a fun ride where I got to enhance my skills and knowledge in coding and animating. Besides, it was new experience as it was my first time coding a full game. Moreover, I have the opportunity to learn a new software, Ren'py and new coding language which is basic Python and Ren'py coding language. This project was challenging yet interesting for me as I need to combine creativity and technical skills however with the guidance I got from Mr Kamal and my friends, I managed to finish the tasks.

Comments

Post a Comment