六张卡带的游戏画面
方案 C · 卡带 · 第三轮

每张卡带,一个小世界

上一轮的问题在于,首页换成了卡带,一进游戏还是一格一格的单色方块。这一轮给六款游戏各画了一套画面:每款一个睡前小故事、一个主色、一套像素小图。主色和首页卡带的标签颜色一致,从选卡带到进游戏,看起来是同一个世界。

游戏逻辑没动。画面里的局面来自游戏导出的真实帧,只是把每一格换成了对应的小图:蛇头、箱子、树篱等等。

01

格子不变,画法变逻辑网格和尺寸跟现在一样,表现层把每格画成 8~12 像素的小图,还是像素风。

02

始终是暗的最亮的颜色也是偏暖的浅色,没有纯白;发光只用在少数焦点上(萤火虫、灯笼、到位的箱子)。

03

单色主题还能用每个小图都按明暗分层设计。切到琥珀、豆绿、墨水屏时,按亮度映射成单色,照样看得清。顶部可以切换试试。

配色
首页

卡带不变,加上各自的颜色

保留你喜欢的卡带轮播。每张卡带的标签和“开始”按钮用这款游戏的主色,窗口里显示的是新画风的游戏画面。左右滑到哪款,主色就跟着换。

代码怎么改

表现层需要知道每一格是什么

现在的 PixelFrame 只有亮、半亮、灭三种状态,要画蛇头、箱子、树篱,必须知道每一格代表什么。有两种做法:

A. 表现层解析帧。这个网页就是这么做的,比如推箱子用 3×3 的像素图案认出箱子和目标。Kit 不用改,但每款游戏的画法都要反推一遍帧的格式,很脆弱。

B. Kit 输出语义帧(推荐)。每款游戏除了点阵以外,再输出一份“每格是什么”(墙、箱子、蛇头朝向……)。逻辑层依然可以单独测试,渲染层只负责画。需要改六款游戏的输出和测试。

怎么推进

先做一款定手感,再铺开

画风属于手感的一部分,所以按项目“第一关先行”的做法:先挑一款(建议推箱子或贪吃蛇)完整做到真机上,你看过、调过精灵和亮度以后,再做其余五款。

上一轮定下的掌机/大屏双模式继续保留,大屏用同一套画面,只是格子更大。

哪款的小故事或小图你想换,直接指出来就行,比如“迷宫不要树篱,要石墙”。