RGB Studio · 全彩像素叙事 RPG 设计技能
把一款全彩像素叙事 RPG从零做到可上架的完整方法论。
本技能提炼自已完成并上架的《第二大脑 SECONDBRAIN》第 1–4 章——
四章主线(平凡生活→启程群山→禅室觉醒→草甸新路)、10×9 瓦片场景、三语文案、
75 情绪图鉴、30 条禅语、9 处可收集记忆、两类小游戏、随海拔流转的四季 BGM,
全部装进一个单文件 HTML。
原作是 GB 四阶绿;本技能是它的全彩(RGB)分支——保留全部经过实战验证的
叙事与系统设计,把"四阶绿约束"替换为"全彩色阶体系"。
详细逐步操作见 references/SOP.md(必读,含每一步的命令与代码模板)。
〇、适用范围(先确认再开工)
| ✅ 适用 | 全彩像素、叙事驱动、章节制、探索+对话+轻机制、单文件 HTML、疗愈/文艺向 |
| ↔️ 分流 | 目标是 Game Boy 四阶绿(160×144·DMG 复古掌机风) → 改用 gameboy-game-dev 技能 |
| ❌ 不含 | 战斗/数值成长/装备背包系统、3D、多人联机、需要引擎(Unity/Godot)的项目 |
第 1–4 章的设计之所以成立,是因为它只做探索、对话、情绪与轻机制——
把战斗与数值全部砍掉,才换来了叙事密度。要做 RPG 战斗系统,本技能不适用。
一、五条设计基石
-
单文件原则:代码/美术/地图/音频/文案全在一个 HTML 内,零外部请求。
美术是索引字符串 + 调色板表,音乐是 MIDI 音符数组。双击即玩、离线可玩、一个 zip 上架。 -
全彩=有纪律的彩,不是随便的彩:不是"想用什么色就用什么色",而是
主调色板(16–32 色) + 若干条色阶(ramp)。每个物件从一条 ramp 里取暗/中/亮三档,
全局统一光照方向。禁止在绘制代码里写裸色值——只准引用调色板常量。
(GB 项目靠 4 色天然统一;全彩必须靠 ramp 纪律人为维持统一感,否则立刻变脏。) -
叙事驱动系统:先有"这一章要让玩家感受到什么",再决定加什么机制。
第 3 章要"第一次听见自己的呼吸",才有了禅走与禅语;第 4 章要"喜悦很简单",
才有了呼吸引导坐禅。没有情绪目标的机制一律砍掉。 -
章节冻结原则:通过验收的章节即冻结区。任何新功能上线前,
全量回归必须证明旧章行为不变(通关流程/记忆数/情绪数)。 -
音频程序化:所有声音由 Web Audio 现场合成(振荡器+噪声),零音频文件。
全彩不代表要上真人配乐——单文件原则优先。BGM 用 MIDI 数组 + 音序器实时演奏,
随场景/环境切换。明确排除:<audio>、new Audio()、mp3/ogg/wav、TTS。
二、第 1–4 章验证过的系统清单(照抄即可用)
这七套系统是四章跑通的骨架,任何叙事 RPG 都能复用:
| 系统 | 核心做法 | 来自 |
|---|---|---|
| 瓦片场景 | 10×9 网格、T=16px;SCENES={id:{map,night,start,npcs}} 注册表;SOLID 集合管碰撞 |
全章 |
| 对话 | 行=数组 ['情绪码',中,英,日];startDialog(lines, 回调),回调切场景/结算 |
全章 |
| 情绪图鉴 | 台词携带情绪码 → EMOTRIG 映射 → checkEmo() 收录 → 75 条图鉴 |
全章 |
| AI 陪伴页签 | 暂停菜单 5 页签(交谈/技能/记忆/语言/系统);"交谈"页按 chatState() 显示当前情绪与心声 |
全章 |
| 可收集记忆 | 关键交互 addMem(中,英);四章共 9 处;结算与图鉴可回看 |
全章 |
| CG 插画 | cg='key'; SFX.cg(); + startDialog(..., ()=>{cg=null;})——过场用 CG 定场再拉回场景 |
全章 |
| 环境流转 | trailSeason() 按玩家 y 坐标返回春/夏/秋/冬 → 同时切 BGM 与季节字幕(150 帧浮现) |
第 2 章 |
存档字段(localStorage 一个 key,try/catch 包住):
ch, sceneId, flags, progress, mem, LANG, soundOn, seenHowto, textSpeed, fontBig, emoSeen, curEmo, started, px, py, zenSeen
三、两类小游戏原型(第 3、4 章验证)
叙事 RPG 的小游戏不该是"考验操作",而是让玩家用身体经历那个情绪:
- 推进型 · 禅走(第 3 章):镜头帧推进
zenApproach从 0 到 N,
A/B 可跳过(直接置 N);抵达后进入抽取(zenpick) → 逐字揭示(zenreveal,
zenRevN/zenRevTotal计数)。用于"仪式感的接近与领受"。 - 节奏型 · 坐禅(第 4 章):
A+B组合键启动 → 难度选择(初心者/上级者) →
呼吸引导 吐 8000ms / 吸 5000ms(慢而深),配"吐气/吸气"字幕与两张姿势 CG →
结束起身动画。用于"把顿悟收回到呼吸这件最小的事上"。
通用规矩:每个小游戏=一个 state 字符串,必须在四处登记
(状态变量 / loop 更新 / loop 绘制 / onPress 输入),且必有跳过路径。
四、全彩美术管线(与 GB 的关键差异)
- 建调色板:先定 4–6 条 ramp(肤色/植被/木石/织物/天空/金属),每条 4–5 档。
全局PAL={ramp名:[c0..c4]},绘制只引用PAL.wood[2]这种索引。 - 参考图 → 像素:PIL 裁 4:3 → LANCZOS 缩到目标分辨率 →
量化到你的主调色板(而非亮度四分位):用最近邻色距离匹配 + Floyd–Steinberg 或
Bayer 抖动 → 输出"每像素一个调色板索引"的字符串行 → 注入CG={}。 - 昼夜/情绪染色:不再靠"整体降一档",改用染色函数——
对最终帧做一次色相/明度偏移(夜=偏蓝降明,回忆=偏黄降饱和),
场景注册表里night:true触发。 - 精灵:字符网格,一字符=一个调色板索引,
.=透明;主角 16×28、小跟班 14×19 档;
翻转靠 flip 取row[w-1-xx]。 - 彩色纪律的验收:全彩最容易死于"脏"——每张新美术都要和已有场景并排截图比对,
确认没有引入 ramp 之外的杂色。
五、叙事设计要点(四章提炼)
- 一章一情绪:01 麻痹 → 02 决断 → 03 觉醒 → 04 安住。章名即情绪落点。
- 章节制 + 隐藏内容:菜单只列公开章(硬编码
for(let i=0;i<公开数;i++)),
隐藏内容只能经剧情选项进入。 - 引导靠拒绝:顺序外的交互返回一句提示,用
flags记录前置是否完成。 - 环境即叙事:第 2 章不写"他走了很久",而是让海拔改变季节——
玩家自己"走"出了时间流逝。 - 三语同步:文案数组一次写齐(中/英/日);英文最长,用英文验收框宽。
- 逐字演出:关键台词逐字浮现 + 每字一声 tick(0.5 字/帧),
首次 A 补全整句、再按 A 收束。
六、测试与发布
三层测试栈,每里程碑全跑:
1. Node headless 逻辑回归:stub 环境 + ctx 用 Proxy 吞掉 + 尾部 return {内部句柄};
脚本化按键序列跑完四章。标准断言:情绪全触发、每章 progress、
记忆数不变(冻结区证明)、菜单只列公开章、小游戏可跳过可完成。
2. Playwright 真机截图:evaluate 直跳目标画面截图——文字出框、色彩脏否、
精灵比例全靠这步;全彩项目必须比对色板一致性。
3. grep 抽查:禁用词为零、调色板外裸色值为零(grep -oE "#[0-9a-f]{6}" 应只命中调色板定义处)。
发布:zip(index.html + README_上架指引.txt);README 含操作键位、
音频解锁提示、章节流程表、特色列表、上架四步。
何时读 SOP
- 从零起项目 → SOP §1–§3
- 建全彩调色板与染色 → SOP §2
- 新场景/新章节 → SOP §4
- 对话/情绪/记忆/存档系统 → SOP §5
- 参考图转全彩像素 → SOP §6
- 设计新小游戏 → SOP §7
- BGM/音效与环境流转 → SOP §8
- 回归测试与发布 → SOP §9–§10
- 反模式清单 → SOP §11