# Game Studio · Claude Code Plugin

为 Claude Code 提供浏览器游戏开发的全套指导技能 —— 涵盖 2D（Phaser）、3D（Three.js / React Three Fiber）、3D 资源管线、HUD 设计、精灵图工作流和浏览器自测。

> 本包来自 OpenAI 的 `game-studio` plugin（MIT License），适配 Claude Code 的 plugin 规范后发布。

## 包含内容

### 9 个 Skill

| Skill | 用途 |
|---|---|
| `game-studio` | 入口路由 —— 帮你选 2D/3D 技术栈 |
| `web-game-foundations` | 实现前的架构规划（仿真/渲染/UI/资源边界） |
| `phaser-2d-game` | 2D 游戏实现（Phaser + TypeScript + Vite） |
| `three-webgl-game` | 原生 Three.js 实现 |
| `react-three-fiber-game` | React Three Fiber 实现 |
| `web-3d-asset-pipeline` | GLB/glTF 2.0 资源优化与导出 |
| `game-ui-frontend` | HUD、菜单、响应式布局 |
| `sprite-pipeline` | 2D 精灵图生成与归一化（含 Python 工具） |
| `game-playtest` | 浏览器游戏自测与 QA |

### 16 篇 references（引擎选型、架构模式、starter 模板等）

### 3 个 Python 脚本（位于 `scripts/`，仅 `sprite-pipeline` 用到）

- `build_sprite_edit_canvas.py` —— 围绕种子帧构建透明编辑画布
- `normalize_sprite_strip.py` —— 把原始动画 strip 归一化成等大帧
- `render_sprite_preview_sheet.py` —— 渲染预览贴图表

## 安装

### 方式 A：通过 marketplace（推荐）

```
/plugin marketplace add https://gitea.qonnwolf.com/<org>/game-studio.git
/plugin install game-studio
```

### 方式 B：手动放置

把整个仓库 clone 到 Claude Code 的 plugins 目录：

```bash
git clone https://gitea.qonnwolf.com/<org>/game-studio.git ~/.claude/plugins/game-studio
```

重启 Claude Code 即可加载。

## 可选依赖：Pillow

只有用 `sprite-pipeline` 调用 Python 脚本时才需要装。其他 8 个 skill 都是纯文档型指导，零依赖。

```bash
python3 -m pip install -r scripts/requirements.txt
# 或
python3 -m pip install Pillow
```

不装也不会破坏插件加载，只是 sprite 脚本运行时会报错（脚本自带友好提示）。

## 用户项目里需要装的 npm 包（按选择的技术栈）

这些不是本插件的依赖 —— 是 Claude 在帮你写代码时会建议你在自己的游戏项目里装：

- **Phaser 2D**：`phaser`、`typescript`、`vite`
- **原生 Three.js**：`three`、`typescript`、`vite`、`@dimforge/rapier3d`（物理）
- **React Three Fiber**：`@react-three/fiber`、`three`、`@react-three/drei`、`@react-three/rapier`、`@react-three/postprocessing`

外部工具（自己装）：Blender（3D 建模）、glTF Transform CLI（资源压缩）、Playwright（浏览器自测）。

## 使用

安装后，在 Claude Code 任意会话中说出意图，Claude 会自动触发对应 skill：

- "帮我做个浏览器小游戏" → 触发 `game-studio` 路由
- "用 Phaser 做个跳跃游戏" → 直接进 `phaser-2d-game`
- "把这张人物图做成 4 帧待机动画" → 进 `sprite-pipeline`
- "测一下这个游戏在 Chrome 里的表现" → 进 `game-playtest`

## 目录结构

```
game-studio/
├── .claude-plugin/
│   └── plugin.json            # Claude Code plugin 清单
├── README.md                  # 本文件
├── assets/                    # 插件图标
├── references/                # 16 篇技术参考文档
├── scripts/                   # Python 工具（sprite-pipeline 用）
│   ├── build_sprite_edit_canvas.py
│   ├── normalize_sprite_strip.py
│   ├── render_sprite_preview_sheet.py
│   └── requirements.txt
└── skills/                    # 9 个 SKILL.md
    ├── game-studio/
    ├── web-game-foundations/
    ├── phaser-2d-game/
    ├── three-webgl-game/
    ├── react-three-fiber-game/
    ├── web-3d-asset-pipeline/
    ├── game-ui-frontend/
    ├── sprite-pipeline/
    └── game-playtest/
```

## 致谢与授权

来源：[OpenAI Plugins](https://github.com/openai/plugins) 仓库的 `game-studio` 包，MIT License。

适配 Claude Code 时的变更：

- 移除 Codex CLI 专用的 `.codex-plugin/plugin.json` 和 `agents/openai.yaml`
- 添加 Claude Code 专用的 `.claude-plugin/plugin.json`
- 添加 `scripts/requirements.txt`
- 添加中文 README

License: MIT