Week 5 – Midterm Progress

Inspiration & Concept

During high school, I made a small “app” on Code.org using JavaScript (in blocks), where it shows off facts about elements within groups of elements (Gases, Metals, and Nonmetals). When pressing one of the buttons, it gives facts about that specific group, with drawings of my characters that are associated with each group, along with facts about that element (like how Carbon was associated within the Non-Metals group of the periodic table, and next to the drawing of him is facts about him)

Because of this, I decided that for the upcoming midterm project, to create an interactive visual novel game. The game takes place in a school of “The Periodic Table” where chemical elements are personified as classmates and teachers. Throughout the game, the user plays as a personified version of Carbon meets other elements like Hydrogen, Oxygen, Nitrogen learning about their properties, and behaviors, where it involves dialogue and branching choices that influence Carbon journey.

 

Design

For this project, I decided to keep the design minimal and simple where the color scheme would be muted, along with the characters be hand-drawn, while the background can be made using images and Adobe Photoshop. Backgrounds depict different areas of the hall, where the main character gets to pick either to meet with the other side characters, inspired by the older designs created:

 

 

 

 

 

 

 

 

 

The game will include a dialogue box at the bottom for text and choices, with animated character portraits appearing as they speak.

I decided to draw a sketch of the background on my phone to gain insight into what to include for the characters and how will the game proceed (Since I am planning on adding small characters within that same background to allow the main character to choose who to interact with).

 

Frightening/Challenging aspects

1. Since visual novels rely on smooth transitions between scenes, it can be tricky to structure code so that dialogue, backgrounds, and choices update properly without breaking the game. If scene changes aren’t handled correctly, the game might get stuck on one scene, display the wrong text, or fail to update choices.
2. Since p5.js runs in a continuous draw() loop, managing character dialogue, choices, and images dynamically can get messy if not structured well. If too many global variables or functions handle game logic, it may become hard to debug, leading to unexpected behavior (e.g., text not changing, buttons not working).
3. The game must reset everything without refreshing the browser. If variables aren’t properly reset, restarting might carry over data from the previous playthrough. If objects are recreated incorrectly, images or dialogue might not load properly.
4. I fear that sounds (like background music) may overlap, resulting in distorting my game

Prevention

1. In order to ensure smooth transitions, I will use an OOP structure (Scene and Game classes) to manage transitions cleanly. I will also test each scene’s logic separately before adding more in case of any errors. I will also use classes based on the key aspects of the game:
   1. Character class to store element info
   2. Scene class to handle dialogues, backgrounds, and choices
   3. Game class to control transitions
2. In order to make sure sound is used properly, I will Use sounds inside events like when the mouse is clicked or a key is pressed, along with stopping looping sounds before playing new ones to avoid overlap.