Whimsy: a Tiny Game Engine I Made for Storytellers

• I've also posted about Whimsy on my website.
• If you want to see Whimsy right now, open the web editor here or see its website.

Recently, I released Whimsy, a small game engine and fantasy console for creating interactive storytelling games. If you've ever wanted to make a narrative game but felt intimidated by coding or complex game engines, this might be for you.

In this post, I will be talking about what is Whimsy, how it is different, how did I build it and what challenges I faced.

What is Whimsy and who is it for?

Whimsy is essentially a tiny game engine designed for creating interactive stories where players can navigate worlds and talk with objects. It's heavily inspired by Bitsy, but with my own spin on usability and features.

It's perfect for:

• Interactive fiction writers who want to add visual elements
• Educators teaching algorithms
• Artists who want to bring their pixel art to life
• Beginners that are shy to try more complicated tools
• Anyone with a story to tell!

How I make it different, and cool 😎

Those who used Bitsy before can say that Whimsy is just a clone—which is valid 😅 but I have a vision to make it special!

Whimsy works everywhere

Create games in any modern browser—no installation required—and it even works offline after loading once. (PWA is the future.)

You can make and play Whimsy games on desktop or tablet, and some game makers even use it on phones! I mean, it fits thanks to UI zoom controls!

Node-based programming for noobs

Instead of writing code, you create game logic by connecting intuitive blocks in a visual editor, similar to Unreal Engine's Blueprints but much simpler. Node-based structure allows for a more visual and "native" approach of writing scenarios compared to, a bit Scratch-like dialogue editor of Bitsy with linear grammar.

Ready-to-use advanced mechanics

As with Bitsy, hero movement, stage transitions, and dialogue systems are already implemented, so you can focus on storytelling rather than technical implementation. Besides that, Whimsy adds a bunch of blocks for more complex interactions, like changing or destroying an actor. (Or a set of actors!)

Fantasy console aspect

This is currently a bit weak—but the plan is to give users abilities to customize their games more and make the games feel like retro handheld consoles, with unified main menu with save slots and settings. Like in Playdate, actually!

Tech Behind Whimsy

Whimsy is built using:

• Svelte as the main framework. (Whimsy is my first Svelte project, actually! And Svelte didn't disappoint. Almost.)
• SvelteFlow for the node-based visual programming. The documentation website has tons of practical examples that go beyond API like QoL things for managing nodes — auto-layout, proximity connection, etc. The examples in the docs is what decided for me when picking between Svelvet and SvelteFlow. And they also featured Whimsy in their v1 release <3
• Vite for bundling with vite-plugin-singlefile for baking the player.
• TypeScript and type-fest for crisp type control and project data schema versioning, so I can ensure projects can be easily updated between versions without tons of manual testing.

The app consists of two main parts:

1. The IDE (the game editor)
2. The runtime (what displays a game and manages player input)

Both are Svelte components, and when you export a game, the game becomes a dependency-less HTML file where I replace some templating markers. Svelte makes it very easy to make the game preview integrated in the IDE.

The runtime also has a custom CanvasContext2D-powered renderer that tries to draw as little as possible, and caches drawing layers, so the games don't drain mobile battery life and are as swift as possible.

Struggles I faced

This was my first major Svelte project, and while previous experience with similar reactive frameworks helped, I ran into some interesting challenges:

Svelte v5 is more complicated than it tells you

The biggest hurdle came from Svelte 5's reactive state system. While it allows for describing a complex game project as a giant document object, the lazy calculation and proxification approach created subtle problems—data you work with is oftentimes not what you think is. I couldn't use WeakMaps, and I had to add primary keys to everything instead of using direct object references.

I wrote about these issues in more detail on GitHub if you're curious about the technical aspects.

Keeping the engine stupidly simple

You can only see if your ideas work when tested on people not acquainted with your project. Thankfully, as a nomadic teacher, I have an almost infinite supply of victims for testing purposes, he-he. The current biggest problem is that people get confused of the use of limited indexed palette: change color 1, paint with it a tile A, change it again while drawing another tile B, and see that tile A has a "wrong" color! The concept is simple for pixel artists, but for newcomers, I'm afraid, I will just have to show a tutorial/quick docs :c

Another challenge was designing a visual programming system that's powerful enough to create interesting game logic but simple enough for non-programmers. I am yet to make data inputs for the language, and though I have a clear design in my head (which is actually not a copycat of Blueprints and will be, I think, very cool), I still have to implement it. Without data inputs and data flow, complex interactions are not possible. You can't create an if/else statement, yet!

Time balancing

Well, balancing coding/marketing/actually living a great life is problematic. I would like to draw more users, but promotion takes time that would instead turn into several features or improvements to the engine. And I'm not known for a healthy work/life balance. I need a teammate.

Tools friction

A more minor issue that popped initially and while adding PWA support is the chicken-and-egg situation with the game player and IDE. IDE must have a prebuilt version of the player, and player needs to be built separately, but IDE build must start from a clean start (wiping the build dir). There was friction with Vite as a tool, but in the end I just build the player first and plop it into the public folder of the engine =)

Try Whimsy yourself!

Whimsy is completely free and works directly in your browser:

• Open Whimsy in your browser
• Documentation
• Discord community
• Example game: The Sleeper in the Gulf

What's Next?

Whimsy is still young and growing. The roadmap includes exciting features like:

• Improvements to the dialogue system with player choices a la visual novels and "voices" for characters based on sound effects
• Background music import
• Variables and conditionals in the programming blocks
• A desktop app version

Have you tried making games without programming before? What kinds of tools do you wish existed for creative projects like Bitsy or Scratch? Let me know in the comments! This will help me as a developer 🤗