Game Content Summary
The program is designed to implement a scene-based interactive story with branch narration. A user playing a detective participates in the development of the story by exploring the truth. Users can control the progress of the story by clicking mouse buttons and by selecting their character’s behaviour using keyboard buttons 1, 2 and 3. Different choices trigger different branches of storyline development, leading to different endings. After reaching an ending, users can choose to try again and explore different endings.
Story Inspiration
I'm a fan of mystery novels and really enjoy the process of solving a mystery based on clues. Therefore, for this game I decided to make an interactive story about the truth-seeking genre. The crime-solving genre has always had a strong audience, but sometimes tends to be clichéd in its design. For example, the Blizzard Hill formula, which has been referenced in countless classics: the characters are gathered in an isolated, enclosed space, the bodies appear, and the mystery plays out.
In most deduction games, there are a variety of endings, and the good and evil of each character is largely fixed, with few variables. It was a difficult task for me to write the game in a way that allowed the player to choose between different storylines.
There are eight endings to the story, and the player has to make the right choices based on the clues to adapt the game's plot to get closer to the truth. The game allows the player to repeat the game, thus experiencing different branches of the plot
Story Plot Design
Story Branches Tree
The Logic of Interactive Stories
Technical
Game System (Loop) Logical Design
First, the script of the story and the branches of the overall story development process are determined. Then, the scene of the story and the pictures of the characters are imported into Processing. Next, the mechanism that controls the development of the story, the mechanism through which the player makes choices, and the mechanism for jumping between plots must be determined.
Framework of Functional Modules
According to the planning of the functions involved in the program, it will be divided into the main interface module and the control module.
The Control Function of the Program
The program mainly interacts with the system through mouse clicks and the keyboard. The module enters the story by clicking the left mouse button. After starting the story, the mouse is moved over the button on each page and right-clicked to continue reading the story. When a selection page is entered, the character’s behaviour is selected using the numeric keys on the keyboard.
Core Algorithm Analysis
Import and load images of scenes and character dialogues
Define the PImage variables, typed according to the scene, and use the Image class to call the images and place them on the canvas. The custom function scenesChange () uses index variables and if conditional statements to control the rendering of different images.
Definition of functions and variables
The function definition is the definition of each basic function, and sets the information that needs to be used for calls later.
Alternate display of scene and dialogue images
This is the main part of the program, and to make it function, all pictures have their own index number. Using the if conditional statement, when index is equal to the index number of the picture, the corresponding pictures is rendered. The value of the index variable will increase as the player clicks the button in the bottom right corner of the interface.
Countdown to the selection pages
Add a 15-second countdown to the selection page. If the player does not make a choice within 15 seconds, the system defaults to option 1. First, judge whether a certain page is a selection page. If it is, increase the value of the time variable by one each second. When the value of time is greater than 400, call the keyboard event to press key button 1.
Class module design
In this program, there are a total of four classes: Image, Text, K and M. The class Image is used to play the scene images in the program, class Text is used to dynamically display text at each ending page of the story, class K is used to add keyboard sound effects and class M is used for background music. There is a realization relationship between these four classes and the interface, and there is a dependency relationship between the Image class and the Text class.
Keyboard event and mouse event
In this program, the mouse events involved are:
• Right-clicking the mouse on the start page jumps to the next page.
• When the mouse is over a button, clicking the left mouse button jumps to the next scene page.
The keyboard events are as follows:
• When on a selection page, pressing button 1, 2 or 3 will change the page to the respective feeder plot.
Mouse event
Interactive Story Running Result
The effect of button
The effect of button
Self-Evaluation and Future Development
Problem Exploration and Expansion Analysis
The problems encountered in the process of designing the program are as follows:
1) Variables to store the pictures were not defined efficiently. Due to the fact that program is an interactive story, involving a large number of scene images and character images, as well as dialogue and button images, the code is very long and does not look concise enough. In addition, the names of the images were not considered carefully, and their numbering is irregular, so that if I want to define an array to store the images, I have to change many parts of the code.
• Improvement: Before writing the code, sort out the order of the images and standardize the graphic format of the images (PNG or JPG). Then, number the background images and the rest of the images separately, starting with the number 0. Write down the number of the images involved in each scene in advance. For example, Scene 1: 0_bg.png + 0.png - 7.png. Scene 2: 1_bg.png + 8.png - 10.png. Then, I can directly use two arrays to store the background images and all the rest of the images. Use the for-loop statement to append the number of the images in the array. In later uses of the scenes, I will use switch and case functions to transform the scenes. This makes the code look cleaner and more readable.
2) The mouse-over effect on the buttons is delayed and not sensitive enough. When the mouse is over a button, it takes a short reaction time to load the effect, which will affect the user’s experience. The reason is likely that the method used is to add a button picture with an embossed effect when the mouse’s coordinates enter the button’s coordinate range, which takes a certain amount of time to load, causing a delay.
• Improvement: The above effect can be achieved by using the library in Processing, for example by using the mouse_over_shape method in the Mouse 2D Transformations library.
3) The number of images that need to be loaded in Data is so large that it takes more than ten seconds to load and display the initial interface after running the program.
4) There is no obvious boundary between each scene of each branch plot, which may cause players to be confused about the story content.
Future Development
1) It would be a good idea to add a transition between each branch plot, which can be accomplished with the insertion of AE (After Effects) videos or using the functions in Ani library. In this way, the plot of each scene will be divided, which will be helpful for players to understand the story.
2) A story progress bar or timeline could be added to the game interface. The story involves interruptions and flashbacks; adding a timeline will help players understand the timing of each conversation and make the game more interesting. The progress bar will change according to the player’s choices, and sometimes, when the player’s choice causes a plot branch, there may be two or more story plot progress prediction bars. This will increase the number of dynamic elements in the program.
3) Animations could be added at the beginning of the program, synchronously with the plot in the middle and to present the whole truth of the events according to the timeline at the end. Adding animation would make the interactive story structure completer and more compact and increase users’ interest in playing.
4) Keyboard events could be added to the character operated by the player, so that the character can move in the scene, select objects in the scene to get information or select characters to talk to them. Movement could be represented by using panoramic pictures as backgrounds and moving them in the opposite direction of the player’s movement, which could be controlled by the mouse.