Process Behind the Game
Brainstorm the Idea:
One of the first steps in making games - especially games that heavily revolve around storytelling - is coming up with the idea! There is no set way on how I come up with an idea, but I usually have a journal of random thoughts or ideas and I work off of those first.
For The Funny Thing About Trust, I already came in knowing my scope and my limitations for the project (hard-coding everything in HTML and CSS, solo-project, only one semester to complete it), and so working with that, I decided to create a visual novel. The summer before college started, I was working on a comedy murder mystery, and because we were still in the height of the pandemic, Among Us was a popular game that tested the player's trust in their fellow crew members. As a result, I wanted to play around with that idea of trust and add that into another fun murder mystery, and the idea started to take shape!
One of the first steps in making games - especially games that heavily revolve around storytelling - is coming up with the idea! There is no set way on how I come up with an idea, but I usually have a journal of random thoughts or ideas and I work off of those first.
For The Funny Thing About Trust, I already came in knowing my scope and my limitations for the project (hard-coding everything in HTML and CSS, solo-project, only one semester to complete it), and so working with that, I decided to create a visual novel. The summer before college started, I was working on a comedy murder mystery, and because we were still in the height of the pandemic, Among Us was a popular game that tested the player's trust in their fellow crew members. As a result, I wanted to play around with that idea of trust and add that into another fun murder mystery, and the idea started to take shape!
Create the Mock-Up:
The next step was to create the mock-up to not only get a general idea of how the visual novel was gonna look, but also get a sense of what I would need to draw, write, and code to bring this game to life.
I used a website called Figma to create the home screen, example dialogue screen, and about me screen. Though I did most of the art at a later stage, during the brainstorming stage I played around with drawing the home screen and one of the main characters, both of which appear in the mock-up.
I also presented my mock-up to other peers to get helpful feedback on my design and plan for my visual novel. Some helpful feedback I received was the rescaling and rearranging of some elements on the page, as well as the font used in the mock-up.
The next step was to create the mock-up to not only get a general idea of how the visual novel was gonna look, but also get a sense of what I would need to draw, write, and code to bring this game to life.
I used a website called Figma to create the home screen, example dialogue screen, and about me screen. Though I did most of the art at a later stage, during the brainstorming stage I played around with drawing the home screen and one of the main characters, both of which appear in the mock-up.
I also presented my mock-up to other peers to get helpful feedback on my design and plan for my visual novel. Some helpful feedback I received was the rescaling and rearranging of some elements on the page, as well as the font used in the mock-up.
Write the Script:
After receiving feedback on my mock-up, I moved on to writing the script. What I generally like to do before writing the script is putting the scenes, important lines, and characters on sticky notes and placing them on the wall. That way, I can move them around and create the flow of the story before I even start writing it. It's a messy process but it's extremely useful!
Once I have a general outline of sticky notes, I start writing. I usually try to go with the flow with my writing, even when I'm stumped on whether a line sound good or not, because I can always go back and edit it later. It also helps reading the lines out loud as the character to test whether the flow of the conversation is natural for that particular character. If you want to check out a sample of the script, check out stories!
After receiving feedback on my mock-up, I moved on to writing the script. What I generally like to do before writing the script is putting the scenes, important lines, and characters on sticky notes and placing them on the wall. That way, I can move them around and create the flow of the story before I even start writing it. It's a messy process but it's extremely useful!
Once I have a general outline of sticky notes, I start writing. I usually try to go with the flow with my writing, even when I'm stumped on whether a line sound good or not, because I can always go back and edit it later. It also helps reading the lines out loud as the character to test whether the flow of the conversation is natural for that particular character. If you want to check out a sample of the script, check out stories!
Create the Art:
I focused on creating simple art for this visual novel: Characters (Only top-half), UI elements (buttons), and two of the backgrounds. All of the art was done in Adobe Illustrator and Adobe Photoshop. The other backgrounds are copyright-free photos that are free online, so that saved me time from drawing all of the backgrounds.
I wanted to focus on a more cartoon-like style in a very realistic environment to create a stark contrast. In addition, I wanted each detail to be meaningful, especially in the characters. Therefore, with the help of references, I made stylistic choices that really added more to the character. For example, Josh has the typical detective cloak and hat for the irony that (spoiler alert) he is the killer but fools everyone else by playing as the main character's assistant. The heterochromatic eyes play an important role too because it not only makes him stand out, but it has a major role in the story too.
Here are some examples of the art I did for the Visual Novel:
I focused on creating simple art for this visual novel: Characters (Only top-half), UI elements (buttons), and two of the backgrounds. All of the art was done in Adobe Illustrator and Adobe Photoshop. The other backgrounds are copyright-free photos that are free online, so that saved me time from drawing all of the backgrounds.
I wanted to focus on a more cartoon-like style in a very realistic environment to create a stark contrast. In addition, I wanted each detail to be meaningful, especially in the characters. Therefore, with the help of references, I made stylistic choices that really added more to the character. For example, Josh has the typical detective cloak and hat for the irony that (spoiler alert) he is the killer but fools everyone else by playing as the main character's assistant. The heterochromatic eyes play an important role too because it not only makes him stand out, but it has a major role in the story too.
Here are some examples of the art I did for the Visual Novel:
Coding the Visual Novel:
With the dialogue and art done, I moved on to code the visual novel. The coding languages I used were HTML and CSS (and a little bit of JavaScript for the text typing animation). Before coding, it's really helps me to plan what elements need to be on the page and if there is something interactive, what would it do. For example, I know that the start button should take the player to the first dialogue scene and that the tab "About Me" should take players to the About Me page. That's why the mock-up was in the beginning of this process because the mock-up helped me map out where things should be when I code it for this stage.
Rather than coding everything all at once, I start off small. For example, before coding all of the scenes in the visual novel, I first code the main screen and make sure that players can navigate to all of the right pages. And when I eventually move on to code scenes, I will code one scene at a time and then playtest it to make sure it works.
With the dialogue and art done, I moved on to code the visual novel. The coding languages I used were HTML and CSS (and a little bit of JavaScript for the text typing animation). Before coding, it's really helps me to plan what elements need to be on the page and if there is something interactive, what would it do. For example, I know that the start button should take the player to the first dialogue scene and that the tab "About Me" should take players to the About Me page. That's why the mock-up was in the beginning of this process because the mock-up helped me map out where things should be when I code it for this stage.
Rather than coding everything all at once, I start off small. For example, before coding all of the scenes in the visual novel, I first code the main screen and make sure that players can navigate to all of the right pages. And when I eventually move on to code scenes, I will code one scene at a time and then playtest it to make sure it works.
Playtesting the Game:
The arrows represent that I go back and forth between the coding stage and the playtesting stage quite frequently. As mentioned previously, I code in parts. That way, I can playtest that particular part and make sure that is working before moving on to the next part in the code. For example, after coding chapter 1 of the visual novel, I will playtest it first before going back and coding chapter 2. With this method, it's easier to find bugs that need to be fixed rather than waiting until all the code is finished and then playtesting the whole thing. After playtesting it part by part, I would then playtest the entire game to make sure everything works!
The arrows represent that I go back and forth between the coding stage and the playtesting stage quite frequently. As mentioned previously, I code in parts. That way, I can playtest that particular part and make sure that is working before moving on to the next part in the code. For example, after coding chapter 1 of the visual novel, I will playtest it first before going back and coding chapter 2. With this method, it's easier to find bugs that need to be fixed rather than waiting until all the code is finished and then playtesting the whole thing. After playtesting it part by part, I would then playtest the entire game to make sure everything works!