"We want something cute and shareable for Valentine's week, our mascot should be the star, and we have no budget for servers." Brand teams, agencies, kids' publishers and even couples planning a surprise ask for this kind of thing. A cozy little game, or a love note people can send to each other, spreads well. Building one from scratch, with touch controls, music and sharing, is a lot of work for a seasonal campaign.
This guide shows how to turn a finished cozy game suite into your own branded microsite: swap in your characters, adjust the games, and launch a shareable note campaign with no backend. It uses the Bubu & Dudu Cozy Game Suite, our free collection of four HTML5 games built with Phaser 3 and TypeScript. It is written for developers, agencies, small studios and educators.
First, a note on the characters
Bubu and Dudu are characters created by their original artist. The suite is a free, non-commercial fan tribute and is not affiliated with or endorsed by the creator. For any commercial or branded use, replace the characters with your own. The suite is designed to make that easy, because all character art is drawn in two source files.
What good looks like for a cozy microsite
- Your characters, everywhere. In every game, every pose and every screen.
- Gentle, kind gameplay. No harsh fail states for young or casual players.
- Works on phones. Touch controls for each player, sharp art on Retina screens.
- Shareable without a backend. People can send something personal by link.
- Cheap to host. Static files only, no database, no API keys.
The suite already fits this. It has four games in one app (a co-op platformer, a café cooking game, a co-op puzzle maze and a room decorator with love notes), a shared Paw Coin wallet, and a client of about 385 KB gzipped plus the font, with no image or audio files. It needs only static hosting.
Step 1: Run it
With Node.js 18 or newer (20 LTS recommended), run npm install and npm run dev, then open http://localhost:3110. The pastel hub shows four game cards. Play each game once so you know what you are reskinning.
Step 2: Swap in your own characters
All character and prop art is drawn in code in two files:
src/core/bears.tsfor the two main characters (9 poses, 7 emotions and hats),src/core/props.tsfor everything else: customers, food, furniture and tiles.
Because the art is painted at the screen's own resolution, your characters will stay sharp on phones and high-DPI displays without exporting sprite sheets at several sizes.
To review your work, open the gallery views: ?gallery shows every pose of the main characters and ?gallery=props shows every prop on one page. This is the quickest way to spot a pose or emotion you have not redrawn yet.
Then update music and sound effects in src/core/audio.ts, which are synthesised rather than loaded from files.
Step 3: Adjust the games for your audience
Each game is a plain TypeScript engine plus a Phaser scene that only draws it, so rule changes go in src/games/. The main levers are:
| To change | Edit |
|---|---|
| Platformer levels | src/games/snack/levels.ts, using its builder for ground, platforms, snacks, springs and bunnies |
| Puzzle maze levels | src/games/maze/levels.ts (ASCII) |
| Café recipes and shop items | RECIPES and SHOP in src/games/cafe/logic.ts |
Keep it kind
The original design avoids harsh failure, and it is worth keeping that for a family or brand audience. In the café, when a customer runs out of patience or a pancake burns, nobody loses: Dudu cries, and a tap on Bubu gives every waiting customer 30% of their patience back. In the platformer, the Love Tether rewards the two characters for staying close (snacks score ×1.2 within 120 px, and a Heart Shield after 4 seconds together) rather than punishing hard. Swap the names, keep the mechanic.
Let the tests check your levels
Run npm test after changing levels. The tests check that every platformer snack and goal can be reached with the real jump physics, and that every maze level can be solved at its par. If you change a maze, the test failure tells you the new par value to set.
Step 4: Launch a love-note campaign
The Love Notes & Room Decorator game is the part most campaigns are built around.
- A visitor decorates the characters' room with any of 16 furniture items, and picks one of 5 wall colours and 4 floor colours.
- They press Write a love note, fill in To, a Message of up to 600 characters and From, and choose one of 4 stationery styles and up to 3 stickers.
- Optionally they add a Secret word. The note is then encrypted with AES-GCM-256, and only someone who knows the word can open it.
- They press Create share link and copy or share it.
The note and the decorated room live entirely inside the link, so nothing is stored on a server and there is no database to secure or pay for. When the recipient opens the link, the characters walk in carrying an envelope, which opens with music and floating hearts before the letter and the room appear.
For a brand, that is a ready-made, privacy-friendly share mechanic: rename the game, restyle the stationery and stickers with your characters, and promote the link around a seasonal date.
Step 5: Host it
Build the app and deploy it to any static host. Vercel and Netlify configs are included, along with a GitHub Actions CI workflow. No server, database or API keys are needed.
Tips and pitfalls
- Replace the characters before launch. It bears repeating: the fan-made bears are not for commercial use.
- Keep the share link short. The message limit and room contents keep links manageable, but test the link in the messaging apps your audience uses.
- Tell people about the secret word. An encrypted note cannot be opened without it, and there is no server-side reset.
- Remember saves are local. Coins, settings, progress and the decorated room are saved in one browser save, so they do not follow a player to another device.
- Use it in class. Each game is small, readable TypeScript, so students can change a recipe, a level or a character pose and see the result straight away.
Who it's for
The suite suits agencies and brand teams building a seasonal or mascot-led microsite, small studios that want a polished base for a cozy game, and educators teaching game logic with a friendly codebase. The Bubu & Dudu case study explains the engine pattern and the serverless sharing. For a fully custom game with your characters, talk to our web development team or contact us.
Next step
With your own characters drawn in, the suite becomes four branded cozy games and a shareable love-note campaign that needs nothing more than static hosting. Sign in to any DEV3 account to get the full source free from the Bubu & Dudu Cozy Game Suite marketplace page.
