Here are a couple of words about our experience building this game during Gamedev.js Jam 2024. Uncohesive and in no particular order:

CI is the GOAT

We set up automatic builds in the first 10 minutes of this game jam. If we had not, we would not have had a submission ready at the deadline.

Being able to deploy a new version by git tag -a <version> -m <version> && git push --tags and then having the version live 60 seconds later is life-changing. It gave us the following super-powers:

• Work on the game up to the last minute.
• Catch any issues on the deployed version immediately after a change. That means we immediately knew what caused it.
• Catch local setup issues: if the CI built fine, but the local setup did not, it was a local issue.

Rendering Performance

The rendering performance of Wonderland Engine allowed us to just dump anything into the scene we wanted. Despite using PBR shaders for everything, it runs smoothly even on mobile.

Custom React Renderer

However, we did have one issue: We were using a new custom react-based UI system for the HUD that we built mostly during the game jam.

Being able to declaratively build the UI is very fun to work with and it kind of worked! But unfortunately adding a text message to the top right will drive React crazy: it may take anything from 1-5000 ms for React to compute the graph that gets passed to the engine.

So you might experience a hang when accepting or returning a quest. Hopefully, this is just a stupid mistake, it is such a powerful tool for creating complex user interfaces.

Ability Sequencing System

We built a fun scripting system during the jam. It allowed us to quickly script sequences for abilities:

    async somePower(play: VFXPlayer) {
        const playerPos = this.object.getPositionWorld();
        const hoverPos = vec3.create();
        vec3.copy(hoverPos, playerPos);
        hoverPos[1] += 3;

        play(move(this.object, playerPos, hoverPos), 1);
        await play(uniformScale(this.object, 1, 2), 1);

        await delay(2);

        play(move(this.object, hoverPos, playerPos), 1);
        await play(uniformScale(this.object, 2, 1), 1);
    }

TypeScript

We used TypeScript at Gamedev**.js**. Is that legal?

Jokes aside, without it, we probably would have nothing to show for. It is definitely one of the most valuable tools on complex web game projects, and once you got through the initial learning curve, you’ll love it, I promise!

Camera Shake

I love this article, and I hope you get as much from it as we did: http://www.davetech.co.uk/gamedevscreenshake

It is just not fair how much camera shake can add to the impact feel in games. We might have gone overboard, but it would feel so dull without it.

Game Analytics

The game is fully equipped with game analytics via GameAnalytics (not affiliated), which would technically even allow A/B Testing various gameplay settings in the game.

We believe this is a very important part of game development. Being able to measure which settings are the best for a specific outcome reduces the luck required for the game to be successful.

It also allows collecting any errors and exceptions that happen while your users are playing the game.

Unfortunately, it looks like the service is blocked on itch.io, but if we were to release a polished version after the jam, it would be ready.

Closing Words

Hope you got something out of this! We might follow up with a more official post-mortem on our website.

Give Wonderland Engine a try, it’s fun and fast!