How to make a LÖVE WebGL build? [Beathoven DevBlog 2]

Since last article, I worked on these two planned features

• Game Over screen with scoring and retry button
• Finalizing the notes balancing and rhythm

But it’s not completely finalized yet, and will continue working on both.

I thought though it would be nice to make an article about building the game for WebGL and sharing a link to play the game in its current state!

🌐How to make a WebGL build?

First, you need to install the tool from Davidobot: https://github.com/Davidobot/love.js

npm install -g love.js

Web server with proper headers

Then you will need a server and a web server running on it. On my end, I use Nginx, and this is how I configured my location:

location /beathoven/ {
        add_header Cross-Origin-Opener-Policy same-origin;
        add_header Cross-Origin-Embedder-Policy require-corp;
        alias /usr/share/nginx/html/beathoven/;
}

Add missing mime type

After several tries looking at errors in browser, I realize also I needed to edit the file /etc/nginx/mime.types to add the definition for wasm file:

    application/vnd.google-earth.kmz      kmz;
    application/wasm                      wasm;
    application/x-7z-compressed           7z;

Use 7zip not tar on Windows

To package your game into a love file, you need to simply zip the files.

And since Windows 10, it includes a tar command line utility that you can use to make zip in scripts. But it looks like it’s not supported by the WebGL build. So I switched to 7Zip using the following parameters:

You can also use 7zip in command line.

My Build & Deploy script

And this is what I ended up with to build and deploy my game on demand:

#!/bin/bash

tools/7za a -tzip Beathoven.zip assets/ gameobjects/ pages/ responsive/ utils/ fonts.lua main.lua -mx0
mv Beathoven.zip Beathoven.love

love.js -t Beathoven -c Beathoven.love game 

ssh server rm -rf /usr/share/nginx/html/beathoven/*

scp -r game/* server:/usr/share/nginx/html/beathoven/

🎮 Where to test the game:

Now that I am able to build and deploy the game, here is the link to test it: https://utile.space/beathoven/

Conclusion

Don't hesitate to give feedback on the game in the comments. Or let me know if you would like to give a hand.

Next steps are going to finalize the retry function of the game, which I started a big refactor for it. And I want to improve the UI then with animations and such.