cabinw
e92cccba82
Restore v0.1 and v0.2 archives with separate progress, publish the curved v0.3 campaign, and document the original 24-level design with reproducible evidence. Refine board presentation and movement, and keep video lab tooling within its own directory.
52 lines
4.1 KiB
Markdown
52 lines
4.1 KiB
Markdown
# HEX Video Lab 01
|
||
|
||
独立的 UI / 动效实验室，入口：`http://localhost:4173/labs/hex-video/index.html`。根目录运行 `npm run dev`；`npm --prefix labs/hex-video run build` 会将独立站点输出到 `labs/hex-video/dist/`。
|
||
|
||
完整用色分析见 [designv2.md](designv2.md) 与 [离线 HTML 手册](designv2.html)，按项目 Design.md 结构整理，并附原尺寸参考帧、采样记录与色板。
|
||
|
||
## 视频研究
|
||
|
||
来源：`examples/hex.mp4`，416 × 960，约 30 fps，193.405 秒。已检查全片每 4–5 秒抽帧，并检查旋转器教学附近连续帧。
|
||
|
||
| 时间 | 可观察内容 | Lab 实现 |
|
||
| --- | --- | --- |
|
||
| 00:00 | 蓝青径向背景、竖直关卡线、顶部货币/体力、绿色开始按钮 | 地图场景，可选择关卡编号并进入试玩 |
|
||
| 00:05–00:35 | 浅灰背景、顶部操作栏、六边形灰底与彩色箭头，离场后露出底板 | 共用现有 Game / trace / swept collision；18 片可解实验棋盘 |
|
||
| 00:10–00:11 | 同色多片连续翻转离场 | 按用户要求适配为**一片**翻转，侧壁仅 4 px（逻辑画布 416 px 宽），不画堆叠或副本 |
|
||
| 00:40–00:45 | 蓝色胜利页、放射光、金币堆、收集按钮 | 旋转光芒、金币浮动、10 枚金币沿二次曲线飞入余额 |
|
||
| 01:48–01:52 | 暗色遮罩、淡蓝圆角教学卡、旋转器示意 | 解锁弹窗；旋转操作使用本项目整块底盘规则 |
|
||
| 01:52–03:00 | 更多形状、旋转器关卡、重复彩纸反馈 | 保留统一实验棋盘；双侧粒子喷发可独立触发 |
|
||
| 03:00–03:13 | 领奖与返回地图，包含商店平台画面 | 收集后返回地图，实验余额及关卡编号更新 |
|
||
|
||
视频多片叠放不等于单片本体很厚。本 lab 的美术约束是：薄侧边、轻倒角、轻投影，移动中也只渲染一片；不模拟视频的堆叠玩法。
|
||
|
||
## 交互与参数
|
||
|
||
- 三个场景独立切换；自动演示通过真实可离场查询逐片清空，并自动进入领奖页。
|
||
- 被阻挡的棋子向接触位置轻碰后返回，不扣操作数。撤销、提示、底盘旋转可用。
|
||
- 动画速度 0.25×–1.5×；彩纸可单独触发；可开启轨道辅助线与参考帧对比。
|
||
- 设置中可打开简单合成反馈音；默认静音。尊重系统减少动态效果偏好。
|
||
- 桌面提供检查面板，窄屏上下排列；键盘 Tab 可聚焦棋子，Enter 操作；弹窗支持 Escape。
|
||
- 试玩数据不写入主项目存档；地图编号仅用于 UI 演示，所有节点使用同一可解棋盘。
|
||
|
||
## 文件与移植
|
||
|
||
`lab.js` 负责 Canvas 棋子、单片翻转、粒子、金币曲线与场景交互；`lab.css` 负责 UI；`fixture.js` 提供确定性可解关卡。共用 `src/core.js`、`src/geometry.js`、`src/path-math.js`，未更改正式游戏玩法。
|
||
|
||
`reference/` 的 JPG 是从视频提取的对比素材，不用作棋子或背景贴图。UI、棋子、金币、光芒均为 CSS / Canvas / SVG 重绘。图标和角色采用简化占位，没有复制原游戏角色、商店或平台 UI。色值、动效时长是视觉近似，不是从原游戏资源获取的精确参数。
|
||
|
||
当前是浏览器 lab；未做 Cocos 或微信真机验证。
|
||
|
||
HTML 手册包含可搜索/复制色板、原尺寸参考帧灯箱、箭头对比示例和完整正文，图片全部内嵌。修改 Markdown 或采样 JSON 后运行 `npm --prefix labs/hex-video run design`（根目录的 `npm run design:v2` 保留兼容入口）。
|
||
|
||
## 目录约定
|
||
|
||
本项所有新增产出只放在 `labs/hex-video/`。`scripts/` 保存生成与构建脚本，`tests/` 保存测试，`reference/` 保存视频与颜色证据，`research/session/` 归档本次中间抽帧及检查日志，`dist/` 保存可部署站点。正式游戏 `../../src/` 仅作为共享依赖读取，原视频仍保留在用户提供的 `../../examples/hex.mp4`。
|
||
|
||
- 设计文档：`npm --prefix labs/hex-video run design`
|
||
- 独立测试：`npm --prefix labs/hex-video test`
|
||
- 独立构建：`npm --prefix labs/hex-video run build`
|
||
- 浏览预览：在项目根目录运行 `npm run dev`，访问 `/labs/hex-video/index.html`。
|
||
|
||
根项目的常规构建不再向其 `dist/` 复制实验室，防止本项产出散落到第二个目录。
|