How to make a LÖVE WebGL build?

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.

How to make a LÖVE WebGL build?

Comments

Game Dev

How to enter the gaming industry?

More from this blog

Introduction to programming for kids

How to run an SE Spectrum online?

A better way to discuss?

Modern dependency management

Street Epistemology

🌐How to make a WebGL build?

Web server with proper headers

Add missing mime type

Use 7zip not tar on Windows

My Build & Deploy script

🎮 Where to test the game:

Conclusion

Command Palette

Comments

Game Dev

How to enter the gaming industry?

More from this blog

🌐How to make a WebGL build?

Web server with proper headers

Add missing mime type

Use 7zip not tar on Windows

My Build & Deploy script

🎮 Where to test the game:

Conclusion