1. 产品结论
整体体验参考《去月球》式的叙事像素冒险:玩家在小而精心设计的场景里走动、调查和触发事件,剧情用镜头和对白推进,关键科学过程用可操作的小游戏呈现。美术保留平面像素的清晰轮廓,但在光影、层次、动作帧和环境细节上做得更精细。
这不是一段自动播放的 PPT,也不是一张背景图上叠几个会晃动的角色。
最终产品是一款浏览器内运行的 2D 平面像素游戏,使用同一套农场、粮仓、人物、道具和纳米装置资产,提供两种互相连接的玩法:
- 剧场模式:按照《最终脚本.md》的 3 分钟故事进行镜头编排。镜头会推拉、横移、切换景别,角色会走路、转身、举灯、打开工具箱和做出表情,分子装置会分阶段完成识别、链置换、合拢和荧光读出。玩家在关键节点点击、拖动或按键,推动剧情和实验步骤。
- 自由行动模式:玩家控制玛姬奶奶在几个小型、手工设计的夜晚场景中行走、观察、拾取、放置和交互。它的节奏接近《去月球》的探索段落:地图不追求大,场景里的每一件物品都服务于调查或剧情。米米按照自己的路线和状态活动,玩家需要收集麦屑、布置纳米夹、选择识别徽章并观察警报。自由行动的结果会改变剧场模式中装置的状态和结尾表现。
剧场模式负责把科学故事讲清楚,自由行动模式负责让玩家真正参与因果链。两种模式不能是两套互不相干的页面。
2. 美术和叙事方向
《去月球》式的体验基准
- 叙事优先:玩家通过走到人物和物件旁边触发对白、动作和短镜头,而不是持续管理数值或战斗。
- 小场景高密度:每个房间只有 1–3 个重要交互点;镜头会因为玩家的调查顺序改变构图和对白。
- 平面像素冒险:采用俯视或三分之二视角,角色在平面地图上四方向移动,前景物件可以遮挡角色,房间之间用门、走廊和镜头切换连接。
- 情绪化镜头:月光、油灯、观察屏和红色荧光承担情绪变化。镜头在重要台词时停住、推近或切到局部特写,让动作有停顿和重量。
- 低压力交互:没有战斗和失败惩罚。玩家的目标是观察、理解和完成装置;错误操作通过角色反应和轮廓提示纠正。
比参考作品更精细的美术方案
- 背景使用可拼接的像素瓦片和独立前中后景层,保证角色走动时有真实遮挡关系。
- 光照使用月光、油灯、屏幕蓝光、警报红光四套动态遮罩,光源的范围和颜色会随剧情状态改变。
- 角色不使用单张立绘平移,至少提供站立、行走、转身、检查、对话、惊讶、庆祝等动作序列。
- 场景中加入可重复但有节奏的细节动画:风吹麦穗、灯焰、尘埃、屏幕扫描、门的轻晃、米米耳朵和尾巴动作。
- 颜色保持有限像素色板,但用冷暖对比区分叙事状态:夜晚冷蓝、油灯暖黄、识别成功的绿色、FRET 读出的红色。
- UI 采用清晰的像素边框和现代可读中文排版,故事对白不压缩到低分辨率画布里。
房间和镜头的关系
每个可探索房间由一张可行走地图和一组可触发镜头组成。玩家走到交互点后,游戏短暂锁定移动,镜头可以推近、横移或切换到观察屏特写;事件结束后回到同一个房间,玩家继续行动。这样自由探索和分镜叙事使用同一套空间,不会像打开另一页 PPT。
3. 故事中的核心玩法循环
玩家在游戏中的目标不是“按 E 看下一页”,而是完成这一条可观察的因果链:
发现粮仓被偷 -> 在粮仓中寻找麦屑和鼠迹 -> 组装纳米捕鼠警报器 -> 选择麦子识别徽章 -> 把装置放到晶片地板 -> 观察米米携带麦屑经过 -> 麦屑触发支点 -> 锚链发生链置换 -> 左臂释放并与右臂合拢 -> Cy3/Cy5 靠近并产生红色荧光 -> 玛姬确认偷粮鼠 -> 更换玉米徽章并测试无粮鼠不误报每一步都要有可见状态变化、可操作对象和反馈音效。没有玩家动作的段落只能作为短的镜头过渡,不能占据主要游戏时长。
4. 剧场模式的镜头设计
剧场模式不是九张静态卡片。每个镜头由背景层、角色层、道具层、特效层、镜头运动和对白层组成。一个镜头至少要有一个入场动作、一个持续动作和一个离场动作。
镜头 01:月光落进粮仓(0:00–0:12)
画面
- 从月亮和屋顶开始,镜头缓慢向下俯冲,穿过粮仓屋檐进入内部。
- 粮袋、木梁、散落麦粒、晶片地板和纳米观察屏分成不同景深层。
- 月光、油灯光、空气尘埃和远处麦浪各自有独立的轻微循环动画。
- 玛姬从画面左侧走入,举油灯寻找痕迹;她停下时灯光照亮脚边麦粒。
- 画面边缘出现短暂的鼠影和窸窣提示,但不直接揭示米米。
玩家动作
- 可在这个镜头中直接切换自由行动,控制玛姬走到三个调查点:倒下的麦袋、散落的麦粒、晶片地板。
- 检查两个正确调查点后,镜头自动回到剧场构图。
需要的素材
- 粮仓可拼接瓦片集,而不是一张完整背景:木墙、地板、梁柱、门、屋檐、月光窗、晶片地板。
- 玛姬四方向行走表情序列:站立、行走、举灯、惊讶、叹气,至少每个动作 4 帧。
- 油灯火焰 4–6 帧、灯光遮罩、麦粒散落小物件、鼠影和脚印。
- 月亮、云层、星点、灰尘和麦浪的循环图层。
镜头 02:旧夹误抓(0:12–0:25)
画面
- 镜头从玛姬的脚边快速推近旧捕鼠夹。
- 旧夹有“张开、触发、夹住”三个状态;小田鼠在夹住状态下挣扎两下,然后露出空嘴巴。
- 玛姬的脚在前景停住,油灯光扫过旧夹;她蹲下检查后摇头。
- 对白显示在清晰的 DOM 对话框中,角色名和情绪图标分离显示。
玩家动作
- 点击旧夹可以查看三个状态;玩家可以选择“检查嘴边”确认这只鼠没有麦屑。
- 确认误抓后解锁商人登场。
需要的素材
- 旧夹独立图层和三状态动画。
- 无辜小田鼠至少 4 帧挣扎、2 帧失落表情。
- 玛姬蹲下、摇头、叹气动作。
- 木屑、夹子弹簧、油灯投影和小幅屏幕震动特效。
镜头 03:阿丹推门登场(0:25–0:40)
画面
- 粮仓门被推开,月光从门外切入;阿丹背着工具箱走入并停在画面中央。
- 工具箱从关闭状态打开,内部零件逐个亮起;阿丹拿出一滴液体滴到晶片地板。
- 纳米观察屏从黑屏、蓝色待机线、扫描线逐步点亮。
- 阿丹的销售动作包含抬手、指向屏幕和打开箱子,不能只把透明角色从左边平移进来。
玩家动作
- 玩家可以走到工具箱旁,逐件查看底板、锚绳、夹臂、支点和两个荧光灯。
- 点击一个零件时,观察屏显示对应的局部放大解释。
需要的素材
- 阿丹四方向移动、站立、指向、打开箱子、拿取零件动作。
- 工具箱关闭/打开/内部零件高亮三组图层。
- 液滴、晶片地板水滴扩散和观察屏启动动画。
- 观察屏外框、玻璃反光、扫描线和提示灯。
镜头 04:观察屏进入纳米世界(0:40–0:55)
画面
- 镜头沿观察屏向内缩放,屏幕边框离开画面,进入纳米尺度平面。
- 底板先落下,锚绳逐根固定,左臂和右臂分别从两侧折叠组装。
- 左臂末端的支点开关、锚链、蓝色 Cy3 灯和红色 Cy5 灯必须有清晰的局部特写。
- 设备状态从“未组装”到“张开锁定”连续变化,不能直接画成一张完成图。
玩家动作
- 玩家在工作台小游戏中依次拖动零件到吸附位置。
- 零件放错位置会轻微弹回并显示轮廓提示;放对位置会锁定并产生机械卡扣反馈。
需要的素材
- 纳米装置零件的独立透明像素图和高分辨率矢量几何备用层。
- 锚链逐节、支点开关、DNA 折纸夹臂、底板纹理、荧光灯和连接点。
- 吸附轮廓、错误弹回、锁定闪光、微粒和扫描线特效。
镜头 05:米米带着麦屑进入(0:55–1:10)
画面
- 镜头退出纳米世界,回到粮仓侧视平面;米米从粮袋后方探头,确认四周安全后跑出。
- 米米有停、闻、跑、回头、偷吃、嘴边沾屑六个动作阶段。
- 麦屑不是贴在一张角色图上不动,而是从麦袋掉落、被米米捡起、粘到嘴边和爪子上。
- 玛姬可以在画面另一侧观察,不能遮挡玩家对米米路线的判断。
玩家动作
- 自由行动中玩家可以跟踪米米,也可以躲在麦袋后观察。
- 玩家需要捡起一粒麦屑并放到观察屏的支点测试位,验证识别链当前目标。
需要的素材
- 米米四方向移动和动作帧,至少包含空嘴和带麦屑两套状态。
- 麦袋、麦屑小物、米米脚印、嗅闻波纹和惊吓感叹号。
- 粮仓遮挡层和前景麦袋,支持角色经过时的前后遮挡。
镜头 06:支点触发与链置换(1:10–1:35)
画面
- 先用分屏显示米米嘴边的麦屑蹭到支点,再把镜头完全推入纳米观察屏。
- 动画必须按以下五个状态播放:麦屑接近、支点结合、锚链松动、左臂释放、两臂合拢。
- 锚链要逐节滑落,左臂绕铰链运动,右臂保持固定;不能通过整体旋转一张夹子图代替。
- 两臂接近后,Cy3 绿色光点把能量传给 Cy5 红色光点,红光扩散并照亮观察屏。
- 触发时加入屏幕扫描暂停、短暂高亮、粒子飞散和清晰的声音节奏。
玩家动作
- 玩家点击或拖动麦屑进入支点,启动反应。
- 每一阶段可以暂停观察、拖动时间轴回看,完成后才允许继续对白。
需要的素材
- 支点结合位、锚链逐节滑落、铰链旋转、夹臂多角度帧或可程序化骨骼。
- 绿色 Cy3、红色 Cy5、能量转移轨迹、红色荧光扩散、屏幕反光。
- 反应阶段对应的音效:卡扣、链条滑落、弹性释放、合拢、警报。
镜头 07:换徽章,识别玉米(1:35–2:10)
画面
- 回到工作台近景。阿丹把“麦子徽章”从支点槽中取出,放进工具箱;玩家从两个徽章中选择玉米。
- 识别链像一条短 DNA 链,插入支点后发生一次可见的配对动画。
- 观察屏分别展示“玉米碎屑触发”和“空嘴老鼠不触发”两个测试样本。
- 无粮老鼠经过时夹臂保持张开,锁链和两盏灯不应闪烁;这一步必须清楚表现“特异性”和“不过报”。
玩家动作
- 拖动玉米徽章到槽位,确认新的识别序列。
- 选择测试样本:玉米碎屑、麦屑、空嘴。只有玉米样本触发。
- 测试错误样本会记录到右侧实验日志,失败时不能直接跳过。
需要的素材
- 麦子徽章、玉米徽章、DNA 链条、插槽、工具箱内衬和配对动画。
- 三种样本图标和样本流动动画。
- 观察屏状态:待机、匹配、错配、无响应、警报。
- 实验日志、成功/失败印章和清晰的颜色标记。
镜头 08:结尾歌舞台(2:10–2:40)
画面
- 粮仓变成平面像素舞台,麦穗灯串、观察屏、玛姬、阿丹、夹夹和米米全部有站位。
- 歌词按节拍逐行出现;角色按句子做动作:夹夹合拢、粉色警报灯闪烁、玛姬举灯、米米投降。
- 舞台灯光、麦穗摆动、屏幕星光和角色跳步形成循环,但不能遮挡歌词。
玩家动作
- 玩家按节拍点击灯光按钮,连续命中会增加舞台亮度和星光;错过只影响表演评级,不阻断剧情。
- 结尾显示“识别、换位、合拢、发光”四个已完成步骤。
需要的素材
- 舞台背景分层、麦穗灯串、地面阴影、角色站立/唱歌/跳步/举灯动作。
- 夹夹的闭合灯光状态、歌词节拍提示、星光和粒子。
- 一段可循环的短音乐、卡点音效和完成提示音。
镜头 09:科学收尾与再玩入口(2:40–3:00)
画面
- 镜头从红色荧光特写拉回粮仓,再拉到金色麦田和夜空。
- 画面保留四个科学步骤的图标和一句简短解释:目标识别、链置换、夹臂合拢、FRET 读出。
- 不使用一大段小字塞在画面底部;详细科学说明放到可展开的 DOM 面板。
玩家动作
- 选择“再玩剧场”“进入粮仓自由行动”“查看实验日志”三个入口。
- 进入自由行动后保留本局已经选择的徽章和装置状态。
5. 自由行动模式
地图结构
第一版只做一个可完成的夜晚区域,避免地图大而空:
- 粮仓主室:麦袋、旧捕鼠夹、晶片地板、观察屏、出口。
- 粮仓侧门和麦田边缘:米米出入路线、麦粒和脚印、月光层。
- 工作台角落:阿丹、工具箱、零件槽、徽章测试区。
三块区域必须用同一张连续平面地图连接,玩家通过门、走廊或镜头滚动移动,而不是点击按钮切换页面。
玩家控制
- 键盘:WASD 或方向键移动,E 交互,鼠标点击地面移动。
- 移动端:屏幕左下虚拟摇杆,右下交互按钮和观察按钮。
- 角色有碰撞体、行走速度、转向、脚步节奏和前后景遮挡。
- 交互对象显示短提示,如“检查麦袋”“捡起麦屑”“打开工具箱”“放置装置”。
游戏状态
状态需要数据化保存:
barnInvestigated:是否调查粮仓。trapInspected:是否确认旧夹误抓。deviceParts:已安装的装置部件。badge:当前识别目标为麦子或玉米。sensorPlacement:装置是否放在晶片地板。mimiHasCrumbs:米米当前是否携带目标碎屑。alarmState:待机、触发、合拢、发光。falsePositiveTested:是否完成空嘴鼠和错配样本测试。
6. 素材生产规格
背景和地图
现在的单张 1024×1024 背景只能用于剧场远景,不能承担自由行动地图。需要新增:
- 16×16 或 32×32 的原创像素瓦片集。
- 粮仓主室、侧门、麦田边缘、工作台角落四套可拼接区域。
- 每套地图拆成地面层、墙体层、装饰层、前景遮挡层和碰撞层。
- 同一场景至少有远景、中景、前景三层,以支持镜头推拉和角色遮挡。
角色和 NPC
每个主要角色需要透明精灵表,而不是一张立绘:
- 玛姬:四方向行走、举灯、蹲下、检查、惊讶、叹气、庆祝。
- 阿丹:四方向行走、打开工具箱、拿取零件、指向屏幕、解释。
- 米米:四方向行走、停、闻、偷吃、带屑、回头、触发后逃跑。
- 夹夹:张开、识别、链置换、释放、合拢、发光、歌唱。
- 无粮对照鼠:至少一套空嘴状态,用于表现不误报。
推荐主要角色单帧 48×64 或 64×80 像素,动作每组 4–8 帧,所有角色使用统一描边和有限色板。
道具和特效
- 旧夹三状态、麦袋多状态、散落麦粒、麦屑、脚印、油灯火焰、工具箱开合。
- 观察屏待机、扫描、匹配、错配、红光报警五状态。
- 锚链逐节、支点卡扣、铰链、夹臂、两盏灯和能量转移轨迹。
- 灰尘、月光、灯光、屏幕扫描线、卡扣火花、红色荧光、舞台星光。
音频
- 粮仓夜间底噪、麦田风声、脚步、木门、油灯、鼠叫和麦粒掉落。
- 旧夹弹簧、工具箱、液滴、链条、DNA 结构卡扣、弹性释放、合拢和警报。
- 结尾歌的循环伴奏、歌词节拍和完成提示。
7. 文字和 UI 重新设计
当前文字不可辨识的根本原因是把中文对白压缩到 480×270 画布内,以 6–9px 逻辑字号渲染。最终产品采用分层 UI:
- 游戏世界和像素特效在 Phaser 画布内。
- 对白、角色名、章节标题、交互提示和实验日志使用 HTML/CSS 层,随视口缩放,保持中文清晰。
- 对白框使用深色不透明底、浅色正文、角色专属色名牌和轻微描边阴影。
- 每行控制在 18–24 个中文字符,使用逐字出现和点击跳过。
- 重要科学名词用短标签显示,详细解释通过点击展开面板查看。
- 画布内只保留必要的像素标签,不再用 6px 中文承载完整对白。
8. 技术结构
建议拆成以下模块:
GameShell ├─ WorldScene 自由行动地图、碰撞、NPC、交互物 ├─ TheaterScene 剧场镜头、时间轴、镜头运动、对白事件 ├─ MacroScene 纳米装置组装和反应阶段 ├─ AssetRegistry 背景、图层、精灵表、音频和许可元数据 ├─ StoryState 剧情进度、徽章、装置和米米状态 ├─ DialogueOverlay DOM 对白和角色名牌 ├─ InteractionSystem 可交互对象、拖动、拾取、放置、检查 └─ AudioDirector 环境音、动作音效、音乐和节奏提示镜头和对白从代码逻辑中抽出,使用数据定义:镜头时长、相机目标、角色轨迹、动画片段、对白、玩家可操作阶段和完成条件都放在章节数据里。这样后续把中文换成英文不会重写游戏逻辑。
9. 开发顺序
- 先完成一张可自由行动的粮仓地图、玛姬行走、米米 AI、交互物和清晰 DOM 对白。
- 再完成一个可玩的纳米装置组装和链置换小游戏。
- 将第一、二、三、五、六镜头串成一个可完成的夜晚任务。
- 补齐阿丹、玛姬、米米和夹夹的动作精灵表与音效。
- 加入完整剧场时间轴和自由行动之间的切换。
- 最后制作结尾歌、科学收尾、移动端控制和录屏模式。
每个阶段都要用真实浏览器验收:角色是否能走、碰撞是否正确、镜头是否有连续运动、对白是否清楚、互动是否改变状态、刷新后是否能重新开始。
10. 当前草版与目标差距
当前 AlarmScene 已经验证了素材加载、基本分镜顺序和部分动态效果,但仍属于视觉原型:场景由单张背景构成,角色主要是单张透明图,中文对白仍在低分辨率画布内,镜头状态和自由行动状态没有统一存档,也没有完整地图、碰撞、NPC AI、音频和可重复任务。
后续工作应以本定义为验收标准。只有完成连续地图、角色动作表、DOM 对白、可完成的装置组装、米米行为和两种模式切换后,才可以称为正式网页游戏。