Repolode
提交项目
studioigor

studioigor/ref2game

面向 Claude Code 和 Codex 的智能体技能，可将一张参考图转为可在浏览器中游玩的 2D 游戏原型。

在 GitHub 查看
Star
294
Fork
41
未关闭 Issue
2
最近提交
23天前

这是什么？

ref2game 接收一张截图、主视觉或概念图，在浏览器中生成可游玩的 2D 游戏原型。画面由 AI 按参考图风格逐块生成，而移动、光照、粒子、镜头和 HUD 等动态部分由代码在一个小型 WebGL2 引擎中实现，智能体工作时页面会实时更新。

项目以两个版本提供同一技能：claude/ 目录面向 Claude Code，codex/ 目录面向 Codex。两者共享引擎、骨骼绑定、自动检查和参考图处理逻辑。角色由带两骨骼肢体的切割式骨骼构成，行走和动物动作通过关节驱动，而不是整张图片平移。

流程从几轮设置问答开始，到与参考图对比的首帧画面，最后输出包含贴图、清单和源码的静态可玩版本。每个反馈的问题都会被修复，并配套一条自动检查，后台评审还会对素材、动作和还原度打分。

核心功能

  • 01按参考图风格逐块生成美术素材，运动与特效由引擎实现。
  • 02角色采用带两骨骼肢体的切割式骨骼绑定，并按关节进行测量。
  • 03提供脚步滑动、步幅等自动动作检查。
  • 04每次修改后页面自动刷新并保留游戏状态。
  • 05输出包含贴图、清单和源码的静态可玩版本。

适用场景

  • 将游戏概念截图转为可点击的原型，用于提案或试玩。
  • 基于一张图尝试平台跳跃、俯视射击等 2D 游戏类型。
  • 无需手工搭建骨骼，即可从概念图制作带动画的角色原型。
  • 在智能体会话中导出一个小型浏览器游戏版本。

快速上手

  1. 1

    把安装提示发送给你的代理(Claude Code 或 Codex)

  2. 2

    Claude Code 使用 claude/ 文件夹,Codex 使用 codex/ 文件夹

  3. 3

    在 Claude Code 中发送 /ref2game,或在 Codex 中发送 $ref2game,并附上参考图片

使用前须知

  • 需要 Claude Code 或 Codex,且仅支持 macOS 或 Linux。
  • 需要 Python 3.9+ 和 Node.js 18+;首次运行时会安装带 Chromium 的 Playwright。
  • 处理视频参考和视频渲染需要 ffmpeg。
  • Claude Code 版的图像生成依赖你选择并需付费的图像 API 或工具。

收录于专题

Claude Code 工具、技能与插件开源 AI Agent 框架与应用AI 编程助手与编码 Agent游戏开发工具与引擎

标签

#game-development#ai-agent#claude-code#codex#webgl#2d-game#prototyping#procedural-animation

常见问题

ref2game 是什么？
面向 Claude Code 和 Codex 的智能体技能，可将一张参考图转为可在浏览器中游玩的 2D 游戏原型。 ref2game 接收一张截图、主视觉或概念图，在浏览器中生成可游玩的 2D 游戏原型。画面由 AI 按参考图风格逐块生成，而移动、光照、粒子、镜头和 HUD 等动态部分由代码在一个小型 WebGL2 引擎中实现，智能体工作时页面会实时更新。
ref2game 可以免费使用吗？用的什么许可证？
ref2game 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
ref2game 还在维护吗？
活跃维护中。ref2game 最近一次提交是在 2026年10月15日。
ref2game 适合用来做什么？
将游戏概念截图转为可点击的原型，用于提案或试玩。 基于一张图尝试平台跳跃、俯视射击等 2D 游戏类型。 无需手工搭建骨骼，即可从概念图制作带动画的角色原型。 在智能体会话中导出一个小型浏览器游戏版本。
ref2game 怎么安装和运行？
把安装提示发送给你的代理(Claude Code 或 Codex) Claude Code 使用 claude/ 文件夹,Codex 使用 codex/ 文件夹 在 Claude Code 中发送 /ref2game,或在 Codex 中发送 $ref2game,并附上参考图片
在哪里获取 ref2game？
源代码和安装说明在 GitHub 上：https://github.com/studioigor/ref2game

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目