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.
- 许可证
- MIT
- 出品
- GameSkill 出品
我们测过
在 Canvas 2D software renderer (Pixel Plays engine.js) in Chrome headless 上通过 28/28 项检查（2026-11-03）：能触发、有可运行示例、有截图和自检清单、单一职责、中英文文档齐全。触发检查是把提示词和 skill 描述做匹配，不是真实 agent 运行。
测试报告GameSkill 测过的版本
GameSkill 为 gameskill.dev 原创编写并测过。ZIP 里是完整的 skill：SKILL.md 及中文版、脚本、可运行示例、测试、自检清单和我们的测试报告。
GameSkill 原创，协议 MIT。ZIP 保留 LICENSE 和 CREDITS.md，里面列出了流程灵感来源、CC0 测试素材和第三方库及其协议。
自检清单
- 先写一句话：地方、时间、唯一的动作 / 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
中文指南
这个 skill 做什么
教 agent 用代码做一个「像素小景」浏览器小游戏：一个浮在白底上的小地方，固定 30 度正交相机，360x280 的小画布按整数倍放大，色相偏移的明暗、Bayer 抖动、单侧长硬阴影，只有一个物理动作。再加上纯代码的环境动态：雨、水面涟漪、烟、火星、灯光闪烁，循环首尾无缝。附带 Pixel Plays 的软件渲染器（MIT，无构建、无依赖）、我们写的环境层和一个测过的示例游戏。
什么时候用
- 想用纯代码做一个很小的像素风网页游戏
- 想给像素场景加会动的雨、烟、灯光，又不想做精灵图
- 像素场景看起来发糊、发脏或像棋盘格
怎么装
下载本页 ZIP，把 pixel-diorama-game/ 放进 agent 的 skills 文件夹：Claude Code 用 .claude/skills/，Codex、Gemini CLI、OpenCode 用 .agents/skills/，Cursor 用 .cursor/skills/，Copilot 用 .github/skills/，Windsurf 用 .windsurf/skills/。也可以直接对 agent 说：Install the skill from https://gameskill.dev/skills/pixel-diorama-game/install.md
最小示例
example/skip-stone/ 是我们自己做的「打水漂」：黄昏下雨的湖边小码头，木屋烟囱冒烟，灯笼一闪一闪，水面有雨点涟漪。按住蓄力、松开把石头甩出去，力度越好跳得越多，力气太小直接沉底，用力最大会跳到对岸。共五次，记录最好成绩和总数。
我们怎么测的
用无界面 Chrome 跑 15 项检查：没有报错、没有外部请求；画布 360x280 且整数倍放大；环境层第 f 帧和 f+48 帧逐像素相同、相邻帧不同、同一帧两次结果相同；弱投掷 0 次、强投掷至少 4 次、蓄力越多跳得越多；五次后结束、点击重开；键盘空格和鼠标都能玩；开启「减少动态」时画面不动。结果在 gameskill/test-report.json。
搭配
pixelfx：像素特效导出成 sprite sheetdiorama：用 Three.js 做的像素小景codixel：像素角色和精灵
安装
告诉你的 AI
Install the skill from https://gameskill.dev/skills/pixel-diorama-game/install.md
GameSkill 测过的版本
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.zip包含内容
- 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
适合
- 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
不适合
- 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
试试这条提示词
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.关于这个 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
环境要求
- 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)
相关主题
常见问题
基于 Pixel Plays （作者 Amir Mushich，MIT; engine.js shipped unchanged, music not included）。原作者的代码原样打包进 ZIP，附带其许可证；skill 文字、测试和示例由 GameSkill 编写，ZIP 里的 CREDITS.md 列出所有来源。 · 基于 Pure-code pixel ambience (post, idea only) （作者 @zer0point_eth，no licence, idea only, no code or text used）的思路。代码和文字由 GameSkill 编写，ZIP 里的 CREDITS.md 列出所有来源。
搭配使用
作者标注的相关 Skills，或更适合相邻任务的 Skills。
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.
相似 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.