mcpField
V
video-to-game

video-to-game

github.com/lovisdotio开发44014 次安装5 天前更新
代码仓库

关于 video-to-game

video-to-game 是一项将游戏视频转化为可玩 Three.js 游戏的技能,并以视频作为设计规格。流程涵盖视频分析、用 fal 生成素材、画面对照和录制试玩,交付内容还需说明与原视频的差异。

主要功能

  1. 01提取视频帧、调色板、镜头和机制
  2. 02使用 fal 根据视频帧生成素材
  3. 03构建含操控与进度的 Three.js 游戏
  4. 04并排比较游戏和视频画面
  5. 05录制并检查试玩过程
  6. 06记录素材及与视频的差异

适用场景

  1. 01根据游戏视频制作原型
  2. 02让游戏视觉风格贴近参考视频
  3. 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.md
game-loop.md
look-and-post.md
playtest.md
study-the-video.md
scripts/
best_window.py
fal_asset.py
record_play.mjs
side_by_side.py
study_video.py
templates/
game.html
play.mjs

详细介绍

视频转游戏

视频就是游戏设计文档,而你无法观看它。视频模型擅长你不擅长的部分: 游戏的视觉效果、镜头,以及一个令人难忘的机制。你的工作是对视频片段进行逆向工程,将其变成 可供玩家游玩的游戏,并生成与之匹配的素材,用画面而非形容词来证明成果。

工作流

  1. 生成或拍摄视频。 一个原创概念,一个能看出来的机制,一个第三人称或侧面镜头, 不要有 HUD 文字。prompts/gameplay-video-prompts.md(仓库根目录)包含制作方法和 31 个效果不错的提示词。
  2. 研究视频。 python3 scripts/study_video.py gameplay.mp4 -o study/ 每隔 0.25 s 保存一帧、生成一张 联系表,并提取调色板和剪辑点。先打开联系表,再查看各帧。在编写代码前先写好规格: 镜头(距离、高度、焦距)、主角、一个核心机制、世界布局、调色板、光线、材质、氛围, 以及视频着重呈现的关键时刻。参见 references/study-the-video.md。
  3. 使用 fal 生成所有素材,一次一个任务,并以视频中的帧作为参考: 概念图、移除背景、图像转 3D、绑定骨骼、纹理、视差图层、音效、音乐。 python3 scripts/fal_asset.py <endpoint> --arg k=v --file k=path -o assets/ 可运行模型并记录日志。 不要手绘,也不要从其他地方下载。参见 references/fal-assets.md。
  4. 基于 templates/game.html 构建游戏:仅使用 Three.js,一个导入映射,完整的游戏循环(控制、目标、 进度、反馈、结束、重新开始),支持键盘和游戏手柄,提供 ?autostart 和 ?seed=N,以及 window.__game 状态。 参见 references/game-loop.md。
  5. 匹配视觉效果。 调色板、雾效、光照、色彩分级、泛光、暗角和颗粒效果从一开始就是规格的一部分, 而非后期润色。每次修改后,在固定位置对比游戏帧与视频帧: python3 scripts/side_by_side.py gameplay.mp4 shot.png -o pairs/ --times 2,5,8。 参见 references/look-and-post.md。
  6. 亲自试玩。 根据 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。
  7. 交付: 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