85 lines
5.0 KiB
Markdown
85 lines
5.0 KiB
Markdown
# 崩坏童话：蜜糖村（网页版）
|
||
|
||
一个看起来百分之百治愈的像素童话村庄，实际是一场情绪疗程的沉浸幻境。
|
||
纯单机网页游戏：无存档、无后端、无 localStorage，浏览器打开即玩。完整流程约 25–35 分钟，含 4 个结局（E1 糖衣 / E2 回收 / E3 苏醒 / E4 静默）。
|
||
|
||
## 启动方式
|
||
|
||
```bash
|
||
npm install # 安装依赖（phaser / vite / typescript）
|
||
npm run build # 产出纯静态 dist/
|
||
npm run preview # 本地游玩 → http://127.0.0.1:4815/
|
||
```
|
||
|
||
开发模式可用 `npm run dev`（热更新）。构建产物为纯静态文件，无外部网络请求、无外部音频/字体文件。
|
||
|
||
## 按键
|
||
|
||
| 按键 | 功能 |
|
||
|---|---|
|
||
| WASD / 方向键 | 移动（96 像素/秒，四向动画） |
|
||
| E | 交互 / 推进对话（靠近对象 ≤24 像素出现「按 E」提示） |
|
||
| ↑ / ↓ + E 或 1 / 2 / 3 | 对话选项（温柔 / 迟疑 / 否定） |
|
||
| `` ` ``（反引号） | Debug 面板开关 |
|
||
|
||
## Debug 面板（PRD §13）
|
||
|
||
默认关闭、无 UI 痕迹，不影响正常游玩。按反引号键 `` ` `` 开关，功能：
|
||
|
||
- 直接设置幸福值（0–100）、觉知值（0–100）、当前日（1–7）
|
||
- 传送到任意场景（10 选）
|
||
- 置齐全部线索（9 处）
|
||
- 强制触发四个结局之一（E1–E4）
|
||
|
||
## 玩法提示（无剧透）
|
||
|
||
每天早上看广场公告板接「今日幸福任务」，完成后黄昏钟声响起，回小屋睡觉进入次日。幸福值由左上角向日葵表盘显示（12 瓣，无数字）。村里的规则是「必须幸福」——但通往真相的路，恰恰是那些系统禁止的悲伤。古井与雾墙从第 5 天起可以靠近。
|
||
|
||
## 素材与地图制作流程（全部原创，无现成素材）
|
||
|
||
所有像素素材与地图均为本项目内程序化自制，未使用任何素材包或开源 tileset。生成脚本全部保留在仓库内，可一键复现。
|
||
|
||
### 像素素材（Aseprite 1.3，`tools/aseprite/`）
|
||
|
||
- 脚本：`gen_all.lua` 总编排，dofile 组织 `helpers.lua`（糖果色板/白色层灰板 + 像素原语）、`gen_tileset.lua`、`gen_player.lua`、`gen_npcs.lua`、`gen_extras.lua`、`gen_portraits.lua`。
|
||
- 复现命令：
|
||
```bash
|
||
/Applications/Aseprite.app/Contents/MacOS/aseprite -b --script tools/aseprite/gen_all.lua
|
||
```
|
||
- 产出（`public/assets/`）：
|
||
- `tileset.png` 256×128：16×16 瓦片 ×128（草地/石路/湖水/花丛/莓果丛/树/房屋/室内家具/井/雾/白色层，瓦片 id 表见 `CONTRACT.md` §2）
|
||
- `sprites/player.png` 64×96：16×24/帧，4 朝向 × 4 帧行走，第 0 帧兼待机
|
||
- `sprites/npc_*.png`：7 组具名 NPC 各 3 档表情（smile/flat/off，off 与 smile 仅差 1–2 像素）+ 双子鸟 2 帧张嘴 + 群演 ×5 各 2 帧循环
|
||
- `portraits/*.png`：主角微笑头像、E3 专用「真实的脸」头像、7 张 NPC 头像，各 32×32
|
||
|
||
### 地图（Tiled 1.12，`tools/tiled/`）
|
||
|
||
- 脚本：`genmaps.js`（Tiled 脚本运行时 `Tiled -e` 执行，TextFile 写出 .tmx），再用 Tiled CLI 导出 JSON。
|
||
- 复现命令：
|
||
```bash
|
||
/Applications/Tiled.app/Contents/MacOS/Tiled -e tools/tiled/genmaps.js
|
||
for m in house plaza bakery shop clinic lake field well fog white; do
|
||
/Applications/Tiled.app/Contents/MacOS/Tiled --export-map --embed-tilesets \
|
||
public/assets/maps/$m.tmx public/assets/maps/$m.json
|
||
done
|
||
```
|
||
- 产出（`public/assets/maps/`）：10 张地图（小屋 12×8 / 广场 30×20 / 面包房 15×10 / 杂货店 15×10 / 诊所 12×8 / 湖畔 24×16 / 花田 20×14 / 古井 14×10 / 雾墙 20×8 / 白色层 20×14），统一 `ground` / `obstacles`（`collides=true`）/ `objects`（spawn、NPC 点位、door、交互点）三层结构；所有室外场景经村广场互通，门双向成对。
|
||
|
||
## 技术架构（PRD §12）
|
||
|
||
- Phaser 3 + TypeScript + Vite；逻辑分辨率 320×180，整数倍放大居中，`pixelArt: true` 禁用纹理平滑。
|
||
- 场景：BootScene / TitleScene / 10 个地图 Scene（共用 MapScene 基类）/ 常驻 UIScene（对话框、向日葵表盘、提示）/ DreamScene / EndingScene。
|
||
- `CorruptionDirector`：普通 TS 单例 + 事件发射器，持有幸福/觉知/日期/任务标记/线索集合/侵蚀阶段，是全部状态与视听参数的唯一真源；饱和度与晕影用相机 postFX（ColorMatrix / Vignette），负片闪帧用 ColorMatrix negative 单帧切换。
|
||
- BGM 与音效全部 Web Audio 程序合成（8 小节 8-bit 循环：方波主旋律 + 三角波低音 + 鸟鸣声部；音效 4 个），playbackRate 与低通由 CorruptionDirector 按 §6.4 矩阵驱动。
|
||
- 文本腐蚀在对话渲染层实施（§6.5 十组同音错字，原文案保持干净），优先命中咪咪。
|
||
|
||
## 验收
|
||
|
||
`tools/acceptance.mjs` 为自动化验收脚本（puppeteer-core + 本机 Chrome），覆盖 PRD §14 的 20 条清单（静态逐字校验 + 真实浏览器全流程游玩 + Debug 面板 + 四结局 + 截图）：
|
||
|
||
```bash
|
||
npm run build && (npm run preview &) && node tools/acceptance.mjs
|
||
```
|
||
|
||
截图输出在 `tools/shots/`。
|