41 lines
3.3 KiB
Markdown
41 lines
3.3 KiB
Markdown
# HEX Video Lab 01
|
||
|
||
独立的 UI / 动效实验室，入口：`http://localhost:4173/labs/hex-video/index.html`。根目录运行 `npm run dev`；`npm run build` 会将 lab 一起输出到 `dist/labs/hex-video/`。
|
||
|
||
完整用色分析见 [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 run design:v2`；根项目 `npm run design` 也会同步生成。
|