Frameworks & Tools

Monogatari (Visual Novel Tool)

Right now, I was looking for a web-based Visual Novel engine that specifically uses the web, and the web alone. There were a few criteria I had in mind:

• Native web app

I wanted this to be a native web app that didn't need to be embedded in a web page—It should be able to be hosted on it's own website, and downloaded as a PWA if needed. The main reason is because I wanted to practice my HTML/CSS/JS knowledge, and expand it if needed.

• Fully open-source

This ruled out quite a few engines because I wanted to practice with open-source technologies.

• Has many required features out-of-the-box

This was the ultimate reason I ended up choosing Monogatari—It comes with most of the base Visual Novel features, ready to use. Although RenPy has more features built-in, Monogatari is native for the web which makes it a far better choice for this game, and a web project in general.

Deployment (Netlify)

While the game will be hosted on itch.io with a mobile ratio, I wanted to use an online deployment as well so that it can be responsive.

Ultimately, I chose Netlify. I'm used to Vercel because I usually work with React, but Netlify has more features and is better suited for a pure JS project, as it offers a free customizable domain and HTTPS.

I also wanted to try GitHub pages, but Netlify has more environment variable etc. features that will allow me to customize the game more in the future.

Version Control (Github)

The GitHub Game Off requires the project to be available for the public to view, and here is the repo. Feel free to check it out—It's pretty messy at the moment since it's still going through quite a few iterations.

Organization & Setup

So this is my main setup:

Components Folder

This folder contains all the additional components and screens that I will be using for the game.

Right now, this includes the Menu screen:

This screen extends the ScreenComponent class, and contains all the buttons to the various parts of the game. This is optimized for a mobile layout, so that the quick menu buttons don't cover the art and other aspects of the game.

The other screen that extends the ScreenComponent class is the Skills screen.

This was actually very interesting to make. The entire screen is just a collections of spans, images, and other HTML elements.

<h3>Interpersonal</h3>
        <div class="skill-container"> 
            <img src="./assets/ui/square.png"></img>
            <div>
                <span class="skill-name" id="interpersonal-name">???</span>
                <span class="skill-desc" id="interpersonal-desc">My most advantageous trait has yet to be revealed. </span>
            </div>
        </div>

This is a small sampling of how the screen looks like! (Of course, there's some styling & CSS present). So, how is this screen modified when skills are defined, or there's more elements to add? Well, that brings us to...

Functions

This is the next main file. It contains all the functions that I will use to modify the screens, and display additional information when needed.

Here are the current functions, I'll be adding more when needed (and will post an update when I do!), but this has most of what I need:

checkMonetization()

Pretty simple function—This is a simple function that checks monetization—It uses the actual monetization function in this, but integrated into Monogatari.

notify(string message)

This function takes a string, creates and displays a <span> element with it, then destroys it after a few seconds. This is so that notifications based on increasing skill, exp, etc. don't spam the actual notifications of the players and instead provides a nice visual representation.

changeSkill(string variable, string name)

This takes the name of the variable to change (combat, survival, or interpersonal) and the name of the skill to change it to (there are 9 currently, you'll know what they are soon 👀). This selects the respective elements from the Skill screen above, and swaps out the text and images based on which skill is entered, and also saves the skill to the game's storage so it can be used later.

notifyImage(string img, string message)

This is similar to the notify function above, but takes in an image url and message to display a notification with both an image and message. This is specific for when a skill is used rather than is being modified/updated.

To-do

Now, the work is far from done! A few things I have left to do:

• Create particle configurations for special effects
• Work on the screen setup for relationships and personality traits

This shouldn't take me too long to do—I post micro-updates about my progress on Twitter, so you can check me out there if you're curious.

Thank you for checking this out! Maybe this setup & my thought process behind it was sorta interesting, or does it not make sense? Do let me know!