Building Sleepy King: a cozy 3D game for the browser

Sleepy King is a 3D game that runs in the browser, with nothing to install. You play Sol, a lion cub and the rather sleepy king of a valley that has lost its colour. Each run is one day: you trot across the land, drink at watering holes, gather petals, and lie down for a nap. While the king sleeps, the kingdom blooms.

It’s a game, but it asks the same questions as any interactive web project: does it feel good, does it load on a phone, and does it stay kind to the people using it. Here’s how it’s made.

1. The idea: a hero who wants to sleep

Most action games reward you for never stopping. Sleepy King turns that around: standing still is the most powerful thing you can do, and also the most dangerous.

Water is Sol’s health, and it drains while he runs. Petals fill a dream, and when you nap, every full dream becomes a choice of one upgrade out of three. Bigger dreams need a longer sleep, out in the open, while the wilt creeps closer. A shade tree makes the nap safe and adds a free pick. Stirring early costs nothing: the dreams stay saved. Nap with no dream ready, though, and the petals you gathered drift away. Carry too many dreams and Sol gets drowsy and slows down. So every run keeps asking one small question: one more petal, or sleep now?

The wilt are small drought creatures, and they’re cleansed, never hurt. Nothing in the game is violent. A day can end early when the water runs out, but petals and the kingdom you build with them are never lost. And there’s a checklist the game has to pass: no timers outside the game, no streaks, no leaderboards. It should be there when you feel like playing and leave you alone when you don’t.

2. World: a round planet on a flat map

Sol lives on what looks like a tiny planet: the horizon curves away, and distant trees sink behind it trunk-first. The game itself knows nothing about that. Movement, collisions and enemies all live on a flat map; only the vertex shader bends the picture onto a sphere around Sol, and it does so before lighting and shadows are worked out, so everything agrees.

The flat map also makes the world endless. The meadow is a tile of 112 metres whose hills and colour patches join up at the edges, and the shader draws everything at the copy nearest to Sol. Walk in one direction for long enough and you come back around, without a seam or a loading screen.

Movement is written by hand, too: height lookup on the terrain and soft circle collisions are all this game needs, so there’s no physics engine to download.

3. Look: paint without a post-process

The look comes from hand-painted animation films: gouache backgrounds, warm light, shadows that change hue instead of only getting darker. Full-screen filters are the usual way to get there, and they’re also what makes phones run hot, so the game has none. All of it sits in one shared material.

• Light: a small colour ramp replaces normal shading. The shaded side turns a cool lilac and the lit side a warm cream, with one short, soft step between them.
• Brush strokes: a tiling texture of warm and cool strokes, sampled at two scales so it never shows as a repeat. It’s tied to each object rather than to the screen, so the paint doesn’t swim when the camera moves.
• Ink: only what moves or can be touched gets an outline. Trees and rocks have none, so scenery reads as painted background and Sol stands out in front of it, the way cel characters do.
• Clouds: tall cumulus painted once on a 2D canvas at startup, then shown on flat quads. Two rings drift at different speeds, and a slow wobble of the image makes them billow.
• Wind and water: grass, flowers and leaves sway in the vertex shader, and flecks of light drift across the ponds.

4. Air: 182 particles, one draw call

A meadow feels alive because of what’s in the air: pollen, dandelion fluff, drifting leaves, butterflies, and fireflies after dark. All of it is a single mesh of small quads. Each one only stores a starting position and a few random numbers; its whole path is a function of time, worked out in the vertex shader. The particles wrap around a box that follows Sol and fade out before they reach its edge.

So they cost one draw call and no work on the main thread at all, no matter how many are flying.

5. Assets: everything is code

The game has no model files, no textures and no audio files. Sol, the trees and the creatures are built from geometry with vertex colours from one shared palette. Footsteps, chimes, ambience and music are synthesized with Web Audio. The only runtime dependency is Three.js, which keeps the download small and means the palette can change the whole look from one file.

The interface follows the same idea. Icons, orbs and frames are small 3D models with the game’s own material and ink, rendered once at startup into images. The result looks like part of the world, and it costs nothing while playing. Layout and text stay plain HTML, so screen readers work, both orientations work, and the game can speak English, German and Spanish.

6. Phones: one thumb, cool hardware

Sleepy King is played with one thumb: a floating joystick appears wherever you touch, in portrait on phones and in landscape on tablets and desktops. No jump button, no second stick.

A few decisions keep the phone cool:

• Shadows refresh every other frame, which the eye doesn’t notice at this pace.
• Antialiasing is only on for low-density screens; on dense ones the edges are already fine.
• Blooming ground re-uploads only the rows that changed. Plants are numbered by area, so the ones that change together sit side by side in memory and only a small slice goes to the graphics chip.
• Hidden tab: game and sound pause when the window loses focus.

It installs to the home screen as a PWA, and a reduced-motion setting calms the screen for anyone who needs it.

7. Saves: no account

Progress is saved on the device and, under an anonymous ID, in a small database at the edge. There’s no sign-up and no personal data. The game itself is static files, and only the save route runs any code on the server, so a busy day costs the server almost nothing.

The short version

• A nap as the core mechanic: the strongest move is also the riskiest.
• A flat map with a round picture: simple game logic and an endless little planet.
• Painted in one material, with no full-screen filters.
• 182 particles in one draw call, moved entirely by the graphics chip.
• No asset files: models, art and sound all come from code.
• Cozy by rule: nothing violent, nothing lost, nothing nagging.

Play Sleepy King, ideally on your phone. And if your brand could use a game or an interactive world of its own, here’s what I build, or just get in touch.