关于 video-to-game
video-to-game 是一项将游戏视频转化为可玩 Three.js 游戏的技能,并以视频作为设计规格。流程涵盖视频分析、用 fal 生成素材、画面对照和录制试玩,交付内容还需说明与原视频的差异。
主要功能
- 01提取视频帧、调色板、镜头和机制
- 02使用 fal 根据视频帧生成素材
- 03构建含操控与进度的 Three.js 游戏
- 04并排比较游戏和视频画面
- 05录制并检查试玩过程
- 06记录素材及与视频的差异
适用场景
- 01根据游戏视频制作原型
- 02让游戏视觉风格贴近参考视频
- 03通过录制试玩发现游戏问题
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ lovisdotio/ video-to-game --skill video-to-game安装后在 Claude Code 中输入/video-to-game确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/fal-assets.mdgame-loop.mdlook-and-post.mdplaytest.mdstudy-the-video.mdscripts/best_window.pyfal_asset.pyrecord_play.mjsside_by_side.pystudy_video.pytemplates/game.htmlplay.mjs详细介绍
视频转游戏
视频就是游戏设计文档,而你无法观看它。视频模型擅长你不擅长的部分: 游戏的视觉效果、镜头,以及一个令人难忘的机制。你的工作是对视频片段进行逆向工程,将其变成 可供玩家游玩的游戏,并生成与之匹配的素材,用画面而非形容词来证明成果。
工作流
- 生成或拍摄视频。 一个原创概念,一个能看出来的机制,一个第三人称或侧面镜头,
不要有 HUD 文字。
prompts/gameplay-video-prompts.md(仓库根目录)包含制作方法和 31 个效果不错的提示词。 - 研究视频。
python3 scripts/study_video.py gameplay.mp4 -o study/每隔 0.25 s 保存一帧、生成一张 联系表,并提取调色板和剪辑点。先打开联系表,再查看各帧。在编写代码前先写好规格: 镜头(距离、高度、焦距)、主角、一个核心机制、世界布局、调色板、光线、材质、氛围, 以及视频着重呈现的关键时刻。参见references/study-the-video.md。 - 使用 fal 生成所有素材,一次一个任务,并以视频中的帧作为参考:
概念图、移除背景、图像转 3D、绑定骨骼、纹理、视差图层、音效、音乐。
python3 scripts/fal_asset.py <endpoint> --arg k=v --file k=path -o assets/可运行模型并记录日志。 不要手绘,也不要从其他地方下载。参见references/fal-assets.md。 - 基于
templates/game.html构建游戏:仅使用 Three.js,一个导入映射,完整的游戏循环(控制、目标、 进度、反馈、结束、重新开始),支持键盘和游戏手柄,提供?autostart和?seed=N,以及window.__game状态。 参见references/game-loop.md。 - 匹配视觉效果。 调色板、雾效、光照、色彩分级、泛光、暗角和颗粒效果从一开始就是规格的一部分,
而非后期润色。每次修改后,在固定位置对比游戏帧与视频帧:
python3 scripts/side_by_side.py gameplay.mp4 shot.png -o pairs/ --times 2,5,8。 参见references/look-and-post.md。 - 亲自试玩。 根据
templates/play.mjs编写play.mjs:仅使用键盘,并读取window.__game。node scripts/record_play.mjs "http://127.0.0.1:8000/?autostart" play.mjs -o take.mp4会以实际 帧率录制游戏;python3 scripts/best_window.py take.mp4 --length 10会找出最精彩的片段;查看这些 帧。修复玩家可能遇到的问题:跌落、墙壁、无聊的片段、难以看懂的时刻。参见references/playtest.md。 - 交付:
index.html+assets/+README.md(概念、控制方式,以及每项 fal 素材及其端点), 并附上并排对比图、最佳录制片段,以及一份如实列出与视频差异的清单。
脚本需要 Python 3.9+、ffmpeg、带有 playwright-core 的 Node 18+(用于录制器),以及在设置好 FAL_KEY 后通过 pip install fal-client
安装的依赖。请从此技能目录运行脚本,或使用完整路径。
硬性规则
- 游戏看起来要和视频一致。 摄像机、配色、光线和材质都要相同。每次都在同样的三个位置,对比并排显示的画面,检查每项视觉效果。“看起来没问题”但没有并排对比图,不算检查。
- 视频中的玩法机制就是游戏的玩法机制。 如果片段展示的是女孩把世界上下颠倒,那么游戏的核心就是上下颠倒世界,而不是套用她的模型做一个普通跑酷游戏。
- 所有资产都来自 fal,并以视频帧为参考生成。记录每次调用(文件、端点)。一次只处理一个任务:查看每次生成的结果后,再请求下一个。
- 屏幕上不显示文字,仅保留极简标题和一行操作说明。让世界自己讲述。
- 只创作原创世界。 不得使用现有游戏或电影中的角色、徽标、名称或关卡设计。
- 后期处理是规格的一部分:色调映射、一套调色、用于增强纵深感的泛光和雾效、暗角、颗粒。在笔记本电脑上保持 60 fps;只有在画面效果显著提升时,才可接受 30 fps。
- 让世界平静下来,让游戏更清晰易懂。 使用和谐统一的配色,避免刺眼的颜色;内容丰富但分组清晰;让主角和可交互物体在安静的背景中脱颖而出。
- 发布前先试玩。 录制一次游戏过程:控制台错误为零,不坠落,没有无事发生的片段,并且能看到视频中的关键时刻。
参考资料索引
| 文件 | 阅读时机 |
|---|---|
references/study-the-video.md | 开始时:画面帧、配色、摄像机、玩法机制,以及要编写的规格 |
references/fal-assets.md | 生成资产时:各模型的用途、角色制作流程、有效的提示词和成本 |
references/game-loop.md | 开发时:结构、输入、摄像机、状态约定、多人游戏、性能 |
references/look-and-post.md | 匹配视频风格时:调色、雾效、泛光、密度、层级,以及并排对比流程 |
references/playtest.md | 试玩自己的游戏时:场景、录制、最佳窗口和待修复的问题 |
模板:templates/game.html(带有后期处理栈、输入和状态约定的 Three.js 骨架),
templates/play.mjs(键盘试玩场景)。
输出要求
- 说明检查了什么,以及如何检查:哪些画面进行了对比、使用了哪次试玩录制、帧率和控制台错误情况。
- 列出 fal 调用:各端点的调用次数和总成本。
- 如实列出与视频不同之处(例如简化的玩法机制、缺失的特效),不要声称“完全一致”。
评论
支持 Markdown