Pixel Diorama Game (tiny isometric pixel games with seamless ambience)
/pixel-diorama-game
A GameSkill original for making a small browser game as an isometric pixel diorama: one place floating on white, a fixed 30-degree camera, a 360x280 canvas scaled by whole pixels, hue-shifted shading, long hard shadows and one physical action, plus rain, ripples, smoke, embers and lamp flicker drawn by code in loops that wrap without a seam. Ships the Pixel Plays renderer (MIT), our ambience kit and a tested example game.
- License
- MIT
- By
- By GameSkill
Tested by GameSkill
28/28 checks passed on Canvas 2D software renderer (Pixel Plays engine.js) in Chrome headless (2026-11-03): trigger, a runnable example, a screenshot and self-check, one job per skill, and English + Chinese docs. Trigger checks match prompts against skill descriptions; they are not a live agent run.
Test reportGameSkill's tested copy
Written and tested by GameSkill for gameskill.dev. The ZIP holds the whole skill: SKILL.md and its Chinese version, scripts, a runnable example, tests, the self-check list and our test report.
A GameSkill original, released under MIT. The ZIP keeps LICENSE and CREDITS.md, which lists the workflow inspiration, the CC0 test assets and the third-party libraries with their licenses.
Self-check
- 先写一句话：地方、时间、唯一的动作 / Write one line first: the place, the time of day, the one action
- 画布 360x280，按整数倍像素放大 / Canvas 360x280, scaled by whole device pixels
- 环境层只由 帧号 % 周期 决定，整数圈，不用随机数 / Ambience depends only on frame % period, whole cycles, no random numbers
- 第 f 帧和第 f+周期 帧逐像素相同 / Frame f equals frame f + period pixel for pixel
- 键盘和触屏都能玩，减少动态时画面不动 / Keyboard and touch both play it; reduced motion holds still
- 不复刻任何现有游戏或画师的场景，不带没有授权的音乐 / No recreation of an existing game or artist's scene, no unlicensed music
Pairs well with
Install
Tell your AI
Install the skill from https://gameskill.dev/skills/pixel-diorama-game/install.md
GameSkill's tested copy
mkdir -p .claude/skills
curl -fsSL https://gameskill.dev/dl/skills/pixel-diorama-game.zip -o /tmp/gameskill-pixel-diorama-game.zip
unzip -oq /tmp/gameskill-pixel-diorama-game.zip -d .claude/skills
rm /tmp/gameskill-pixel-diorama-game.zipWhat you get
- kit/engine.js: the Pixel Plays software renderer (depth buffer, ramps, dither, shadows, edges, figures, trees, wind), unchanged, MIT
- kit/ambience.js: rain, water rings, smoke, embers and lamp flicker as pure functions of frame % period
- Skip Stone: a rainy lake jetty where you hold to wind up and release to skip a stone, five throws
- The look, the build order and the done checks, in English and Chinese
- 15 checks in headless Chrome, from seamless loops to keyboard, pointer and reduced motion
Good fit
- A tiny pixel-art game for the web: one place, one action, made entirely in code
- Ambient pixel loops (rain, smoke, flicker) without sprite sheets, that wrap with no seam
- Fixing a pixel scene that looks blurry, muddy or like a checkerboard
Not for
- Pixel effects exported as sprite sheets for an engine: use pixelfx
- Three.js dioramas with a full 3D scene: use diorama
- Large games with many screens: this is one place and one action
Try this prompt
Make a tiny isometric pixel diorama game in the browser: a snowy rooftop at night where you hold and release to toss a parcel into a chimney, with smoke and falling snow that loop without a seam.About this skill
Pixel Diorama Game is a GameSkill original for one kind of small game: a single place you can take in at a glance, floating on white, with one thing to do in it. Everything is drawn by code into a 360x280 canvas, so there are no sprites, no assets and no build step. The skill gives the agent the look in eight rules, a build order from ground to bake to draw, and the checks that tell it when the scene is done.
It ships Pixel Plays' renderer by Amir Mushich (MIT) unchanged, which already handles the depth buffer, hue-shifted ramps, dither, shadows, edges, figures, trees and wind, and our own ambience kit: rain, water rings, chimney smoke, embers and lamp flicker as pure functions of the frame within a fixed period, so a recording of one period loops with no seam. The example, Skip Stone, is our own rainy lake jetty: hold to wind up, release to skip a stone.
The renderer is Pixel Plays by Amir Mushich (MIT, kit/engine.js bundled unchanged; its music is not included). The idea of pure-code ambient loops comes from a post by @zer0point_eth (link only; no code or text was used). The skill text, the ambience kit and the example are ours.
Related
Requirements
- Any modern browser; no build step, no runtime dependencies
- Node 18+ to serve the folder and run the tests (puppeteer-core via npm ci, Google Chrome)
Topics
FAQ
Based on Pixel Plays by Amir Mushich (MIT; engine.js shipped unchanged, music not included). Their code ships unchanged in the ZIP with its licence; GameSkill wrote the skill text, tests and example. CREDITS.md lists every source. · Based on Pure-code pixel ambience (post, idea only) by @zer0point_eth (no licence, idea only, no code or text used). Ideas only: GameSkill wrote the code and text; CREDITS.md in the ZIP lists every source.
Works well with
Skills the author points to as related or as the better fit for neighbouring tasks.
pixelfx
244 pixel-art effects written as code (fire, explosions, magic, weather, UI, pickups, critters) plus a draft, render, look, refine loop for making new ones; every effect exports a sprite sheet with Aseprite-style JSON for Godot, Unity, Phaser or any engine.
Diorama (pixel-art Three.js dioramas)
A one-file agent playbook plus a Three.js code kit for small pixel-art isometric dioramas: research-first builds, locked camera, 64-colour palette snap, ordered dither, inked contour and an animated toy-scale cast, with per-frame QA.
Codixel
A pixel-art skill built on one idea: the agent writes code, it is not a painter. It asks for a reference image, then removes the background, pixelates, rigs with bones and animates it in code with a 2,000-line toolkit (core/pixel.js), showing every step on a sheet before making game files.
Similar skills
open-game-skills
An MIT pack of about 190 SKILL.md agent skills for game design: combat feel, camera, traversal, world, validation, 2D/Spine and art pipeline, with a dispatcher and adapters for Three.js, PixiJS, Phaser, Cocos, Godot, Unity and Unreal.
Style Cards (one art style as hard limits, switch looks by switching cards)
A GameSkill original that writes a game's art style down as a card of measurable limits (canvas, colours and palette, alpha, triangles, shading, materials, textures, voxel grid), pastes it into every asset request and checks every asset against it. Ships 12 cards from pixel and one-bit to low-poly, voxel and toon, a no-dependency PNG checker, a Blender GLB checker and a palette locker; switch the whole look by switching the card.
Agent Sprite Forge
Five agent skills that turn one approved character still into a game-ready sprite set: one image-to-video clip per action, then deterministic Python tools key, register, loop, retime, palette-lock and export it for Godot, Aseprite and the web. Also maps, tiles and code-drawn art.
Novel to Game
Agent skills for source-grounded adaptation of novels into games: cited design docs, target-runtime builds and evidence-based QA.