# Install "Pixel Diorama Game (tiny isometric pixel games with seamless ambience)"

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.

- Source: GameSkill original, hosted only on https://gameskill.dev/skills/pixel-diorama-game
- Based on (their code, bundled unchanged; see CREDITS.md): Pixel Plays https://github.com/amirmushichge/pixel-plays by Amir Mushich (MIT; engine.js shipped unchanged, music not included)
- Based on (ideas only, code is ours): Pure-code pixel ambience (post, idea only) https://x.com/zer0point_eth by @zer0point_eth (no licence, idea only, no code or text used)
- License: MIT
- By: GameSkill
- Works with: Claude Code, Codex, Cursor, OpenCode
- Engines: Web (Phaser / Three.js), Engine-agnostic

## Prerequisites

- 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)

## Install GameSkill's tested copy (recommended)

GameSkill wrote this skill for gameskill.dev and hosts it here (MIT). The ZIP holds SKILL.md, SKILL.zh.md, scripts, a runnable example, tests, CHECKLIST.md, LICENSE, CREDITS.md, ATTRIBUTION.md and a `gameskill/` folder (test report, self-check list, Chinese guide).

- ZIP: https://gameskill.dev/dl/skills/pixel-diorama-game.zip (306 KB, sha256 bfa918a2299d628a96e8edcc318dffa72007a0baa0bf498c2234c713268e1450)
- Version: 1.0.0 (2026-11-03). Latest version and changes: https://gameskill.dev/skills/pixel-diorama-game/version.json
- Tested by GameSkill on Canvas 2D software renderer (Pixel Plays engine.js) in Chrome headless, 2026-11-03: 28/28 checks passed. Report: https://gameskill.dev/dl/skills/pixel-diorama-game/test-report.json

The ZIP holds one folder, `pixel-diorama-game/`, with SKILL.md directly inside it.

Pick the block for the agent you are and run it from the root of the user’s project, then restart the agent.

### Claude Code (`.claude/skills/pixel-diorama-game/`)

```bash
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
```

### Codex, Gemini CLI, OpenCode (`.agents/skills/pixel-diorama-game/`)

```bash
mkdir -p .agents/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 .agents/skills
rm /tmp/gameskill-pixel-diorama-game.zip
```

### Cursor (`.cursor/skills/pixel-diorama-game/`)

```bash
mkdir -p .cursor/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 .cursor/skills
rm /tmp/gameskill-pixel-diorama-game.zip
```

### GitHub Copilot (`.github/skills/pixel-diorama-game/`)

```bash
mkdir -p .github/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 .github/skills
rm /tmp/gameskill-pixel-diorama-game.zip
```

### Windsurf (`.windsurf/skills/pixel-diorama-game/`)

```bash
mkdir -p .windsurf/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 .windsurf/skills
rm /tmp/gameskill-pixel-diorama-game.zip
```

### Self-check after using the skill

- 先写一句话：地方、时间、唯一的动作 / 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

## Verify

- `pixel-diorama-game/SKILL.md` exists in the skills folder above.
- Try a request like: "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."
- Tell the user what you installed and where.

## Attribution

"Pixel Diorama Game (tiny isometric pixel games with seamless ambience)" is a GameSkill original (https://gameskill.dev/skills/pixel-diorama-game), licensed under MIT. CREDITS.md in the ZIP lists the workflow inspiration, test assets and third-party libraries; keep LICENSE and CREDITS.md with any copy.