(Unimportant) Background

When you want to make a visual novel, you’ll go for Ren’Py. When you want to make an interactive adventure, you’ll build it from scratch with a heavy game engine. When you’re a Your Turn to Die fanatic, you’ll use RPG Maker.

When I chose to finally put together the remains of our Your Turn to Die fangame into a playable Prologue (instead of making a video essay on it), I looked into different game engines. At the end, I decided for RPG Maker MZ. Not only was Your Turn to Die also made with an older version of RPM (being MV), MZ is also a highly customizable one. Gone are the days of obscure and limited code languages; MZ employs JavaScript, allowing the average programmer to customize the game to their heart’s content.

As such, I bought it, created a new project, and threw out almost everything RPG related. Then, I began creating my own “system”, being a smart use of the show image event to fake a visual novel. It felt so strange to bury the normal game map and plaster images over it, but it felt even stranger knowing someone had done all of this before me in an older (and inferior?) engine.

One thing I became especially fond of was the fact my game could be played on a phone using the Itch website. Sure, the buttons are really small as it’s designed for a proper monitor, but it fills me with glee knowing that someone somewhere similar to me can feel joy in finding out their mobile is “supported”, something still not too common. Man, the web page even reminds me of old arcade machines, with the game title plastered big and wide over the actual screen!

TL;DR This is about the RPG Maker MZ visual novel game playable on the Itch website.

The Problem

Yet although my right eye was full of joy, my left was full of tears. The PC version worked flawlessly, but the web version had a big problem: Time and time again, incorrect images were displayed until the proper one loaded, and sounds had a delay of up to several seconds. I tried to fix it in a previous patch, but I just couldn’t get it to work. It was a thorn in my eye.

Almost 3 months after release, I sat down again and found the issue. Web exports of RPG Maker MZ games only have a limited preloading into the cache.

Roughly 30% of the current event’s images will be preloaded into the cache, at least during my own testing. This has three issues:

• It can create a massive bottleneck as parallel HTTP requests feast on the same connection
• Images that aren’t part of the preload caching will have a delay when required, which is highly disruptive to the flow of a visual novel
• It doesn’t preload any audios into the cache

The Solution

After some tinkering, I was able to find a solution for issues 1 and 2. I wrote a plugin for a custom event which manually requests images from the server at adequate moments, basically a manual implementation of a caching method similar to the aforementioned one.

If the player has a slow internet connection, the game “stream” will continue to suck, so basically vivid players on a connection below 4G. However, connections above this should no longer experience issues regarding images.

The Usage

The plugin is a double-edged sword. If you’re loading an image, it will slow down any sound downloads, so you have to avoid placing the event near them, both before- and after the play event. If you find a sweet spot but load too many images at once, you create a new bottleneck, and the images will likely not be loaded by the time you need them.

However, if you find adequate gaps between the sounds and preload the next 1-4 unloaded images at a time, it works like a charm. If you play KTTD with the Network tab open and a filter of -Cursor1.ogg., you’ll be able to see when the game loads which files and how long it takes for each of them.

Below is the code, feel free to use it for projects of any kind without crediting me. Put it into your plugins folder as ImagePreloadFreefMZ.js, once activated it adds a custom event call with a folder parameter and an images parameter

/*:
@target MZ
@author Freef
@help Version 1.0.0.
Adds custom plugin command for requesting (more) images before they are used, press F8 and go to Network during testing to see load order.
USE WITH CARE:
Image downloads will slow down other downloads, such as sounds or music. Make sure the event is as far away from the next sound as possible, but also at a reasonable reach of where it's required.
To test this offline, you can run a XAMPP Apache server, put your web game into the htdocs folder, open browser at localhost, then under inspector go into Network and change it to a slower connection.
@plugindesc Preload specified images into local device cache for later use, made for Web Visual Novel games
@command preload_images
@text Preload Images
@desc Preload a comma separated list of bitmaps
@arg folderSelect
@text Folder
@type select
 
@option pictures
@option parallaxes
@option battlebacks1
@option battlebacks2
@option characters
@option enemies
@option faces
@option sv_actors
@option sv_enemies
@option system
@option tilesets
@option titles1
@option titles2
@desc Folder under img/ from which to load
@default pictures
@arg names
@text Image Names
@type string
@default myimage1,myimage2,myimage3
@desc Comma separated list of image filenames, no extension or wildcards. Example: myimg1,myimg2,myimg3
 */
(() => {
  const PLUGIN_NAME = "ImagePreloadFreefMZ";
  PluginManager.registerCommand(PLUGIN_NAME, "preload_images", args => {
    const basePath = "img/"+args.folderSelect+"/";
    const list = args.names.split(",");
    list.forEach(name => {
        ImageManager.loadBitmap(basePath, name, 0, true);
    });
  });
})();

The Testing

There’s only one problem: Browsers will usually give you the error “Your browser does not allow to read local files.” when trying to launch the index file. Although you could use the built-in network tab of the game when played within RPG Maker using F8, (at the time of writing) it doesn’t support throttling. All your files will be loaded almost instantly from the disk, so you can’t do a proper benchmark.

In order to get around this, I host an Apache Webserver using XAMPP. I compile the web version and put it into the htdocs folder, overriding all old files. Make sure to get rid of the index.php file!

Then, I open up an incognito browser (to avoid cross-session caching) and write localhost into the address bar. Finally, I open the inspector, go to the network tab, set the filter to -Cursor1.ogg if it’s not there already, and set the network throttle to something like 3G or Slow 4G. Now, I am simulating a low to mid end connection to my game and can watch all loading operations in real time. Sure, this method needs a good portion of effort, but the game is already finished and quite short at that, so it’s not a big bother to me.

With that said, I hope you learned something today and enjoy your future working, and God bless you!