Exporting a Web Build with Light.VN
Archived from Ko-fi, without images
Other Light.VN posts
A translation and commentary of the official wiki's web export page. This is not a 1:1 translation, and I've added my own opinion on things, so please don't take everything as an official advisory.
There's not a lot of Light.VN content in English so I figure out I should start contributing. Hopefully this will allow more people to discover this engine.
So you have finished your game. You want it to be browser-playable, perhaps embedded on itch.io. So you click on Settings->Publish, and... wait, why can't itch.io accepts your exported folder?
That's because there's a couple more steps to do before the build is truly fit for uploading. Fret not, some of these steps are only required for your very first web export.
But before that...
Technical Specs
The web version of Light.VN novels runs on WebGL. It should work on browsers with "WebAssembly" and "WebGL2" enabled, which is most Chromium-based browsers.
For iOS 12 to 14.8, you need to check Safari settings "advanced" > "experimental features" > " WebGL 2.0 ".
Difference from the desktop version
The music will not play until you have clicked on the player once, so it's recommended to have a message telling users to click after the first screen is loaded (usually the splashscreen).
The "SaveData" folder will not be created. This is important. Make sure you have this in mind when designing your game for web export.
Save data will not be managed unless the command 「セーブ情報継承」/ [ "waitSaveDataFetch" ] is in effect. For convenience, it's recommended to have this always included at the start of your script (you can customize your starting template in the editor).
Mind capitalizations in your file path, or your files might not load correctly.
The command "Open" can only be used on URLs.
Text input is not implemented yet.
Unwanted behavior might appear if your work has Lua scripts intended to be run on PCs.
All resources are downloaded at the start of the game. Unlike Ren'py, which has a progressive download option, Light.VN strictly frontloads all assets download. This means the game can be run very smoothly once it loads (almost similar to the desktop version), but your player might have to wait a long time. Be mindful of your filesize, apply necessary compression when needed. I usually use RIOT for this purpose.
Maximum FPS is around 60
When hosting the files on your own server, you have to configure the response header for WebAssembly.
"Cross-Origin-Opener-Policy" set to "same-origin". "Cross-Origin-Embedder-Policy" set to "require-corp".
Publishing a Web Version
Ingredients:
Python installed on your computer
A way to run bash/shell script on your computer If you have both, you can skip directly to Setting up emsdk
Python
If you haven't, download the latest version from the official site.
Run the installer and make sure you check the box where it asks whether you want to add it to PATH
If you miss adding it to PATH, you have to set it manually by clicking start->search for environment variables, click environment variables, then add PATH and point it to your Python installation folder.
Bash/Shell
The official Light.VN dev recommends cmder, but you can actually use whatever you have. I happen to have Anaconda installed, but if you have Git installed you are likely to have Git Bash as well. In a pinch, Windows Powershell works too. Why you would use that ugly thing is beyond me, but you do you.
Setting up emsdk
Now, navigate to your exported project folder and find this file "_export/webgl/scripts/setup_emscripten.sh"
Go to any folder in your computer where you wish to keep the installation. This step will create a new folder "emsdk". Choose a location you have permission on and as close to the root of the hard drive as possible.
Now, open your console of choice in that folder (right click or shift+right click to see "Open Git Bash here", "Open Powershell here..."), or use "cd" to get to the correct folder
Run "sh setup_emscripten.sh". If you, like me, has your Python installation on Anaconda, you have to run "bash setup_emscripten.sh" instead. If you have error saying package.sh fails, open package.sh and make sure it corresponds with the way you call Python on your console. In my case, I have to change "py" to "python".
At the end of the process, you will get a line specifying your installation path. Copy this to "scripts/emsdk_directory.txt" in your exported project folder.
Keep this newly updated emsdk_directory.txt somewhere easy to reach, as you can paste it to any project output from now on. You don't have to setup emsdk again.
Running a Test Play
Once you have confirmed that you have edited emsdk_directory.txt correctly, go back to your project folder and open your console of choice.
Run "sh ./scripts/run.sh" (again, if you use Anaconda, you have to run "bash ./scripts/run.sh" instead).
This will compress your project assets into "project.data" and create a new file, "loader.js". Your browser will also automatically open on port:8080 to begin test play.
Now, your web build is truly ready.
The folder "data" and "scripts" are not part of the files you have to upload. "data" contains your uncompressed asset files. "scripts" contains code for compressing and building test environment. They can be safely moved elsewhere.
Uploading to Itch.io (or similar sites)
Zip all the files excluding the "data" and "scripts" folder. Now, this should be ready to upload in itch and similar sites accepting a zip file with index.html.
Your game should be playable on itch.io. Don't forget to test play before you make the page public!
If you're self-hosting the files, setup the response header and refer to "server.py" for further settings.
I hope this document is of some help to you. If time allows, I'll try to translate and annotate other parts of the wiki.
If you run into problem in any of the steps above, consider joining the Light.VN Discord server here, where you can consult directly with the developer.