shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 开发与工程API Key 暂未确认

photo-to-game

把一张真实场所照片（街角、店铺、校园、景点等）端到端做成可漫游的箱庭小游戏。触发词：图片生成游戏、照片转游戏、照片转箱庭、用照片做游戏、实景还原游戏、photo to game、street photo to game。输入一张照片，输出俯视规划地图与文档、NPC 分支剧情文档、Blender 程序化场景工程+Cycles 效果图、Three.js 第一人称可玩网页（含自动导演 demo、后处理）以及制作说明+实机演示视频。全流程程序化生成，可反复重建。

person作者: benben2paopaohubModelScope
download下载资源包

photo-to-game：一张照片 → 可玩箱庭

何时使用

用户给出一张真实场所照片并想"做成游戏 / 做成可漫游场景 / 还原成小游戏"时。若用户只要静态渲染图或只要建模，不必走完整流程，裁剪对应步骤即可。

输入与交付物

  • 输入：1 张照片（>2MB 先压缩查看）、用户对玩法/画风的偏好（不确定就按本文默认的"风格化箱庭"执行）。
  • 四项交付：
    1. 俯视规划地图 PNG + docs/01_游戏地图规划.md
    2. docs/02_NPC与剧情设定.md（3+1 名 NPC × 3–4 轮分支对话，串成一条任务链）
    3. Blender 工程 .blend + Cycles 效果图（无独显时 CPU 渲染 + 节点组降噪）
    4. Three.js 网页游戏（game/start.bat 双击即玩）+ 自动导演演示 + 制作说明/演示视频

环境约定（Windows 实战值，按本机替换）

  • Blender：D:\softinstall\Blender\blender.exe（5.x，合成器是节点组架构，见 pitfalls）
  • 浏览器：Edge --app= 窗口模式录屏；本机无 Chrome 时用 Edge
  • ffmpeg：D:\softinstall\ffmpeg-*\bin\ffmpeg.exe（需 libx264）
  • 中文 TTS：System.Speech + Microsoft Huihui Desktop
  • 核显机器：渲染走 Cycles CPU；网页端 DPR 限制 1.35、MSAA 4x 保帧率

工作流（9 步，前一步验证通过再进下一步）

1. 解析照片

  • 超大图用 PIL 压到 <2MB 再 view_image；记录：空间布局、可行走区、光影方向与时间、招牌文字、标志物、车辆/街道家具、远景天际线。
  • 用同一份"地面坐标系"贯穿全程：照片前方为 -Z（Blender Y），右手为 +X。
  • 检查点：能口头复述 10 个以上必做元素（如店名、公交路号、树种）。

2. 俯视地图 + 规划文档

  • PIL 画俯视图 map/map_gen.py：底图比例与后续 Blender 一致；标注可行走区/阻挡/兴趣点 P1–P10/NPC 锚点。
  • 写 docs/01_游戏地图规划.md：坐标系、动线、POI、玩法范围。
  • 检查点：地图坐标能直接被建模脚本引用。

3. NPC 与分支剧情

  • 3 名核心 NPC + 1 名关联 NPC；每人 3–4 轮对话，选项分支但必须能收敛到一条任务链（本次：热美式 → 借书卡 → 橘猫 → 猫条 → 52 路）。
  • 文档给出每个 NPC 的锚点坐标，供建模放 empty、供网页放交互点。
  • 检查点：不看 3D 场景，文档本身可玩（文字冒险成立）。

4. 程序化贴图

  • PIL 生成全套：中文招牌（用 C:/Windows/Fonts/simkai.ttf|msyh.ttc）、黑板菜单、路面、墙面、玻璃幕墙等，输出到 assets/textures/。
  • 玻璃幕墙低金属度 + 柔和贴图，高反射会把树冠映成同心环/摩尔纹（pitfalls）。

5. Blender 程序化建模

  • blender/build_street.py：建筑体块→门窗→招牌→街道家具→车辆→NPC 锚点 empty，参数化、可整场景重建。
  • 朝向贴图平面用统一"朝东/南/西/北"工具函数，手写旋转极易错 90° 或法线反向。
  • 导出 glTF 供网页用；另存 .blend。
  • 检查点：EEVEE 视口验证材质（用户打开白膜时让其切"材质预览"，Walk 模式是 Shift+`）。

6. Cycles 效果图

  • CPU 渲染，96 采样约 2 分钟（i5 级核显机参考）。
  • Blender 5.x 降噪链路：RLayers → NodeGroupInput → Denoise → NodeGroupOutput（旧版 Composite 节点已不存在）。
  • 曝光勿冲；相机避免过近仰视。

7. Three.js 网页游戏

  • 结构：game/index.html + js/main.js + js/dialog.js + assets/street.glb；本地静态服务 python -m http.server（start.bat）。
  • 必备：PointerLock 第一人称（眼高 1.62、半径 0.32）、AABB 碰撞盒（本次 242 个，从 glTF 命名批量生成）、E 键交互、分支对话 UI、任务物品栏、至少一个环境演出（本次公交进站）。
  • NPC 用简单几何体即可；细腻度问题优先级：后处理 > 2D 立绘 > 模型精度（性价比排序见 references/workflow.md）。
  • 后处理：GTAO + Bloom + MSAA4 + 色调分级 + 暗角；H 键给用户关 AO 对比。

8. 自动导演 demo + 无头自检

  • 加 ?demo=1 钩子：main.js 暴露 window.__game（camera/scene/controls/collide/startDialog…），动态导入 js/demo.js。
  • demo 导演负责：黑场片名、章节字幕、自动走路（视线连续性规则见下）、自动推进对话/旁白、载具演出、升空片尾；标题写 STAGE xxx/DEMO DONE/DEMO ERROR 便于录屏脚本发现异常。
  • 对话自动推进要点：skip/选项按钮要防"残留按钮连点"（给按钮打 dataset.hit，否则选项列表反复重建死锁）。
  • 无头浏览器跑 FLOW 自检（命令见 references/headless-check.md）。
  • 走路镜头铁律：每段 lookAt 起点必须沿用上一段的 lookAt 终点，末段视线沿行进方向外推；严禁 lookAt 起点==相机位置（会瞬间看脚下，录出来就是黑帧贴面）。

9. 制作说明 + 演示视频

全部脚本在 scripts/，流程详见 scripts/video/README.md：

  1. Edge --app=http://127.0.0.1:PORT/index.html?demo=1 --window-size=1280,752；http.server 要用 WMI Win32_Process.Create 启动（Start-Process 起的会随 shell 退出被杀）。
  2. measure.ps1 refresh：DPI 感知枚举窗口、强制归位 1600×940 物理像素、F5 重置（Windows 125% 缩放下客户区 = 物理 1582×931@(9,0)，录屏裁剪 1582×893@(9,39)）。
  3. record_demo.ps1：gdigrab 30fps 抓屏，必须 scale=1280:720（奇数高度 893 libx264 直接报错）。
  4. 抽帧联系表目检（sheet.py），重点查：步行段开头不看地、不穿车/绿篱/NPC、时间线跑到 DEMO DONE、片尾黑场。
  5. TTS：解说词存 UTF-8 txt（PowerShell 5.1 用 -Encoding UTF8 读，ps1 里不要写中文字面量），tts.ps1 逐句出 wav。
  6. PIL 做说明段卡片底图（中文直接画进图，避开 drawtext 转义），ffmpeg zoompan Ken Burns + apad 对齐解说；演示段 adelay+amix 放解说。
  7. concat 前统一 1280×720/30fps/yuv420p/AAC；volumedetect 验证 max ≥ -1dB 且不削波。

批处理 / 复用

  • 重建管线（贴图→建模→glTF→渲染→无头测试→录屏）适合做 batch 一键跑，见 scripts/video/。
  • 重新生成时只改参数文件，不手改产物。

参考

  • references/workflow.md — 各步细节、画质性价比、验收清单
  • references/pitfalls.md — 全部踩坑与解法（Blender 5.2、录屏窗口/DPI、TTS、导演脚本）
  • references/demo-director-template.js — 自动导演模板（相机补间/对话推进/载具演出）
  • scripts/video/ — 窗口定位、gdigrab 录屏、TTS、卡片、合成的已验证脚本