表现层:资源组织与界面架构
表现层数值少,但藏着大量资源组织与界面架构的设计决策。一套什么样的美术/UI 资源组织, 才能撑起一个 60 城横向铺开、几十个界面、纯激励视频变现的放置游戏?答案是三句话: 3D 低模做 2.5D 场景、移动端压缩格式 + 极致图集复用、UI 用一套组件套件批量拼装。 本篇把重心放在"设计目标 → 资源体系 → 结构 → 设计意图",对应系统全景 K 表现层类。
一设计目标:用高复用低体积资源撑起 60 城
表现层服务的是总览"宽度优先"的取舍:60 城 × 7 餐厅 × 几十个界面横向铺开,必须用一套 高复用、低体积、可批量换皮的资源组织撑起来,否则包体和制作成本都会失控。整篇围绕一条隐性预算原则展开:
用相机约束反哺美术成本 → 网格只做单面低模 → 压缩格式 + 标准尺寸 + 图集复用 → 包体可控 → 撑得起 60 城横向铺开
城市差异主要落在网格/贴图/材质的替换上,而非重画 2D 场景——横向铺 60 城靠资源替换,不靠逐城重制。这与 02 进度结构 的"模板复用"在美术层一一对应。
二五类美术资源的规模
美术资源元数据索引对全量美术对象做了统计,五类资源规模如下:
| 资源类型 | 数量 | 用途 | 关键特征 |
|---|---|---|---|
| Mesh 3D 网格 | 996 | 场景物件 / 角色 / 工位 / 装饰 | 总 327,302 顶点,绝大多数低模 |
| 贴图 Texture | 899 | 网格贴图 + UI 底图 | 697(77%)移动压缩格式(带 alpha) |
| 精灵 Sprite | 793 | UI 图标 / 卡片 / 按钮 / 特效贴片 | 集中在 128 / 256 / 512 三档 |
| 材质 Material | 261 | 渲染材质 | 含 66 个自定义着色器 |
| 音频 AudioClip | 71 | BGM + SFX | 全音频压缩,总 1467 秒 |
2.1 为什么用 3D 网格做 2.5D 表现 ★
放置餐厅游戏的画面是"伪 3D 长方形地图"——这不是 2D 贴图堆叠,而是 996 个真实 3D 网格在正交相机下的 2.5D 呈现。 顶点桶分布证明这是"成本可控的 3D":996 个网格总共才 327,302 顶点,平均每个 ~329 顶点。
| 顶点桶 | 网格数 | 占比 | 含义 |
|---|---|---|---|
<50 | 348 | 35% | 超过一半(56%)不到 200 顶点 —— 典型低多边形卡通风 |
50–199 | 210 | 21% | |
200–499 | 274 | 28% | 中等精度(主要角色/工位) |
500–999 | 97 | 10% | 较精细物件 |
≥1000 | 67 | 7% | 少量高模(主角/关键道具) |
低模成本极低
单个物件 ~329 顶点,建模成本极低,但因为是真 3D,能在相机俯角下自然呈现立面与遮挡。
换城 = 换网格/贴图
60 城共用同一套相机与布局逻辑,城市差异落在网格/贴图/材质替换上,而非重画 2D 场景。
正交相机锁死视角
玩家永远只从同一固定俯角看,建模只需保证那个角度好看,背面/底面可极简,进一步压成本。
2.2 贴图:移动端压缩格式 + 标准化尺寸
899 张贴图的格式分布高度集中——84% 走移动端标准纹理压缩,直接决定了包体可控:
| 格式 | 数量 | 占比 | 用途 |
|---|---|---|---|
| 压缩(带 alpha) | 697 | 77% | 主力压缩格式(带 alpha) |
| 不压缩 RGBA32 | 93 | 10% | 不压缩(UI / 需精度处) |
| 二次压缩(带 alpha) | 46 | 5% | 二次裁剪压缩 |
| 低精度 RGBA4444 | 32 | 4% | 低精度小图 |
| 压缩(无 alpha) / Alpha8 / RGB24 等 | 31 | 4% | 杂项 |
尺寸上同样标准化:贴图与精灵都集中在 128×128 / 256×256 / 512×512 三档(精灵里这三档占 677/793 ≈ 85%), 少量 1024 用于大背景,1920 仅 1 张(启动 / 全屏图)。
| 精灵尺寸档 | 数量 | 占比 |
|---|---|---|
128×128 | 256 | 32% |
512×512 | 244 | 31% |
256×256 | 177 | 22% |
| 1024 / 1920 / 其它 | 116 | 15% |
2.3 材质与着色器:261 材质里藏着润色预算
261 个材质的着色器分布揭示了渲染管线与"润色去哪了":
| 着色器族 | 材质数 | 说明 |
|---|---|---|
| 标准着色器(Lit / Unlit / Simple Lit / Particles) | 132 | 场景/角色/粒子基础渲染(移动渲染管线) |
| 自定义着色器 | 66 | 设计性着色器,是润色重点 |
| UI 着色器(自定义) | 28 | UI 特效(滚动纹理 / 光线 / 圆形遮罩) |
| 文字着色器 | 25 | 文字渲染 |
66 个自定义着色器是表现层投入最集中的地方,命名直接对应玩法场景与活动:
水体族
Water WaterRipple WaterFountain WaterTankShader FullScreenUnderwater
神话角色族
MythicCharacterShader Character Shader PetActiveFresnelShader(高稀有度角色发光/金属质感)
活动族
EventBackgroundShader DiscoveryGem DiscoveryTile Field(活动专属背景)
爽点反馈族
ShineCoin ShineCustomer RadialShine BoostShader Ray
三相机:正交投影 + 52° 俯角的"伪 3D 长方形地图"
游戏视角的相机参数如下(关卡加载时的相机设置逻辑):
var ang := deg_to_rad(52.0) # 中等俯角 ~52° var dist := maxf(w, h) + 10.0 # 按地图 bounds 自动拉远 cam.position = Vector3(cx, dist*sin(ang), cz + dist*cos(ang)) cam.look_at(center, Vector3.UP) cam.projection = Camera3D.PROJECTION_ORTHOGONAL # 正交,非透视 cam.size = h * sin(ang) + 6.0 # 正交视口高度 = 纵深投影 + 人物高度余量
| 参数 | 值 | 设计含义 |
|---|---|---|
| 投影 | 正交 Orthographic | 地图保持长方形,不收成梯形——平行线不汇聚,适合规整的"餐厅格子" |
| 俯角 | ~52° | 中等俯角:既看到桌椅/工位/角色朝向玩家的正立面,又有清晰纵深层叠,不是纯顶视 |
| 机位 | 由地图 bounds 自动算 | dist = max(w,h)+10,60 城/不同布局共用一套取景逻辑 |
| 视口尺寸 | h·sin(52°)+6 | 纵深 h 在 52° 下投影约 h·sin52°,再加人物高度 + 边距,保证整餐厅入画 |
固定视角换来的三重收益
正交 → 地图不变形
餐厅是规整网格布局,透视会让远端收窄、近端放大,破坏"规整经营"观感;正交让整张地图始终是干净的长方形。
52° → 看到布局+立面
纯顶视看不到角色/工位的正脸与招牌,丧失店面感;过低又互相遮挡。52° 是"看清谁在哪"与"看清是什么"的折中。
固定 → 反哺美术省成本
玩家永远只从这一角度看(无旋转/无缩放进店),低模只需保证这个角度好看,背面可极简。
3.1 Slomo 慢动作:廉价的爽点放大器
Slomo 慢动作是把时间缩放临时调低做慢镜头,用在开新餐厅、开箱、升星等关键反馈瞬间。
它不需要任何额外资源(纯改时间缩放),却能把"质变时刻"在感官上放大——是表现层里性价比最高的润色手段之一,与 §六的特效/触感一起构成"关键时刻多通道反馈"。
四UI 结构:340 预制体树、组件套件、锚点驱动竖屏适配
UI 树对全部 UI 预制体做了层级树解析:
节点深度直方图呈中段隆起——大多数界面是 2–4 层中等嵌套,没有过深层级,便于复用与维护。
4.1 主要界面的节点规模
剔除引擎调试 UI(DebugUIHandler* / Profiler / 云存档弹窗等系统 UI)后,真正的游戏界面 Top12:
| 界面 | 节点数 | 对应系统 |
|---|---|---|
| RestaurantUiView | 214 | 主界面 HUD(资源条 / 升级按钮 / Boost / 入口聚合) |
| Character Equipment Inventory | 190 | 装备背包(04 养成) |
| PetMergeView | 166 | 宠物合成 |
| PetMergeFeedbackView | 158 | 宠物合成反馈动画 |
| BrewKettleView | 130 | 药水酿造 |
| InviteChefPreviewView | 119 | 邀请 / 角色预览 |
| ClubView | 116 | 俱乐部(07 社交) |
| WardrobeUiView | 101 | 衣橱 / 装扮 |
| ClubChefPreviewView / LeaderboardChefPreviewView | 96 / 92 | 俱乐部 / 排行成员预览 |
| InviteProfileEntryView | 87 | 邀请档案条目 |
4.2 组件套件:极致的节点与精灵复用 ★
7,423 个节点不是 340 套独立设计,而是一套组件套件反复拼装。证据来自节点名与精灵的复用频次:
最高频节点名 —— 组件库
| 节点名 | 次数 | 角色 |
|---|---|---|
| ButtonContainer | 349 | 按钮容器骨架 |
| Background | 309 | 背景板 |
| Label_Bold / Label / Text | 278 / 170 / 143 | 三种标准文本 |
| Image / Icon | 205 / 130 | 图片 / 图标位 |
| CloseButton | 127 | 关闭按钮(几乎每弹窗都有) |
| PopupContainer | 117 | 弹窗容器骨架 |
最高复用精灵 —— 共享图集
| 精灵 | 复用 | 用途 |
|---|---|---|
| WhiteCircle | 645 | 万能白色圆形底(占全部 23%) |
| Button_1 | 361 | 标准按钮底图 |
| Item Card Outline / Level / Content BG | 127/93/78 | 卡片三件套 |
| Arrow / Circle / SoftCircle | 103/84/60 | 通用装饰 |
| CharacterHatIcon / LockedIcon / CheckMark | 80/74/66 | 通用状态图标 |
仅 226 个不同精灵就拼出了 2,807 个带图节点 —— 平均每个精灵被复用 12 次
WhiteCircle + Button_1 两个就占了全部引用的 36%。组件类型分布也佐证:43.8% 节点是 image、23.3% 是 text、32.9% 是纯容器。
WhiteCircle 配色即得任意圆底、Button_1 配文字即得任意按钮、PopupContainer+CloseButton 即得任意弹窗。这套组件套件让 340 界面用极少原子资源拼成,既压包体、又保证全局视觉一致、还让新增活动界面能快速搭建——直接呼应"宽度优先 + 频繁上活动"对 UI 产能的要求。4.3 锚点驱动的竖屏适配 ★
放置游戏是竖屏手游,必须适配 16:9 到 19.5:9 各种长宽比。Eatventure 完全靠 UI 矩形锚点做自适应,不靠脚本算布局。7,423 个节点的锚点模式分布:
| 锚点模式 | 节点数 | 占比 | 适配作用 |
|---|---|---|---|
| 全拉伸 stretch-full([0,0]→[1,1]) | 2,842 | 38% | 撑满父容器,随分辨率自动伸缩 |
| 钉底 pinned-bottom(y 锚=0) | 1,592 | 21% | 底部操作区 / 升级按钮固定贴底 |
| 钉点 pinned-corner(min==max) | 1,212 | 16% | 图标 / 角标固定到某点 |
| 钉顶 pinned-top(y 锚=1) | 898 | 12% | 顶部资源条 / 状态栏固定贴顶 |
| 纵向拉伸 stretch-V | 607 | 8% | 随屏高伸缩 |
| 横向拉伸 stretch-H | 15 | 0.2% | 极少 |
46% 节点带纵向伸缩
stretch-full 38% + stretch-V 8%——界面高度随屏高自适应,长屏短屏都不破版。
横向拉伸几乎为零(0.2%)
竖屏专属设计,宽度方向元素宁可固定/居中也不横向拉伸,避免在宽屏上被拉变形。
钉顶(12%)+ 钉底(21%)= 33% 的节点固定在屏幕上下边——这正是竖屏 HUD 的典型骨架:顶部资源条 + 底部操作区夹住中间的场景视口。
4.4 主画布分层(MainCanvas / TopUi / SubUiElements / BlockScreen)
UI 模块的分层对应上面的锚点骨架:
| 模块 | 职责 | 锚点对应 |
|---|---|---|
MainCanvas | 主画布根,所有 UI 的容器 | stretch-full 根节点 |
TopUi | 顶部 HUD(资源条 / 设置入口) | 钉顶层 |
SubUiElements | 场景内浮动 UI(升级气泡 / 价格牌 / Boost 计时) | 跟随世界坐标 |
BlockScreen | 模态遮罩(弹窗背后的半透明拦截层) | stretch-full 黑幕 |
SubAreas | 餐厅分区 / 楼层切换 UI | 见 02 进度结构 |
BlockScreen 值得单点:每个弹窗(PopupContainer 117 次)背后都有一层全屏遮罩拦截点击,这是放置游戏"弹窗驱动"交互(开箱/升级/活动全是弹窗)的基础设施——它本身就是一个 stretch-full 的纯色块复用案例。
五音频:71 个压缩片段,分层做"循环 BGM + 高频反馈 SFX"
音频片段索引:71 个片段,全部音频压缩,总时长 1467.3 秒(约 24 分钟)。 声道上 49 单声道 + 22 立体声——SFX 多为单声道(省体积),BGM 与氛围音用立体声。按时长分桶:
| 时长桶 | 片段数 | 类型 | 说明 |
|---|---|---|---|
| ≥30s | 14 | BGM 循环 | 城市 / 活动主题背景乐 |
| 1–5s | 39 | 反馈 / 过场 SFX | 开箱、卖钱、过场动效 |
| <1s | 18 | UI / 点击 / 短 SFX | 按钮、金币、即时反馈 |
最长 5 个全是 BGM:Casual Game Music 05(126s)、04(121s)、Seaport(117s)、Casual Game Music 13(114s)、Sailing-Flavors(110s);最短的是 Potion Drink(0.34s)、quick transitions(0.36s) 这类瞬时音效。
5.1 音频配置:事件驱动的 SFX 映射
音频配置把音效绑定到游戏事件上,共 ~22 个具名 SFX 引用 + 一个 7 首的 musicTracks 列表。SFX 命名直接对应核心循环与反馈瞬间:
| 事件类 | SFX | 对应玩法 |
|---|---|---|
| UI 操作 | buttonDownSfx buttonUpSfx stationPopupSfx | 按钮按下/抬起、工位弹窗 |
| 核心循环 | createOrderSfx coinFlySfx saleSfx | 出餐、金币飞、卖钱(01) |
| 开箱链 | chestSpawnSfx chestDropSfx chestTapSfx chestOpenSfx | 宝箱生成→落地→点击→开启(多段反馈) |
| 卡片 | cardFlipSfx cardRevealSfx | 装备卡翻转 / 揭示 |
| 爽点 | perfectItemSfx instantItemSfx activeSkillSfx stationTierSfx | 完美菜 / 即时菜 / 技能 / 升星 |
| 开店 / 奖励 | openRestaurantSfx openRestaurantApplauseSfx openGiftSfx | 开新餐厅(含掌声)、领礼 |
coinFlySfx+saleSfx、升星有 stationTierSfx——每个正反馈都有声音盖章。总量极省(71 片段/24 分钟)靠复用驱动:同一个 coinFlySfx 覆盖所有卖钱场景。六特效、装扮、触感:润色系统
6.1 全屏特效 RestaurantFullScreenEffects
配合全屏自定义着色器(FullScreenUnderwater、EventBackgroundShader),在特定场景/活动叠加全屏后处理。把"主题氛围"做成可叠加的全屏层,配合 BGM 切换,让换城/进活动有整体的视听包裹感。
6.2 装扮 Cosmetics
管角色皮肤/季节皮(界面是 WardrobeUiView 101 节点)。纯表现层的养成出口——不影响数值,只换外观,配 MythicCharacterShader 做高稀有度角色视觉差异化。给养成系统提供"不破坏数值平衡的收集动机"。
6.3 触感 HapticFeedback
调用设备振动马达,在关键操作(开箱/升星/买升级/领奖)触发短振动。是三通道反馈的触觉通道:和金币音效、数字跳动、Slomo 一起把每次正反馈做成"看得到、听得到、摸得到"。零资源成本,却显著增强实感。
6.4 润色系统的共性:零/低成本放大爽点
§3.1 Slomo、§6.1 全屏特效、§6.3 触感有一个共同设计逻辑——它们都不增加美术资源量(Slomo 改时间、触感调马达、全屏特效是着色器),却都精准作用在"质变瞬间"。
这是表现层的隐性预算原则:美术资源砸在高频可见处(ShineCoin/ShineCustomer),运行时润色用零成本手段(Slomo/触感)放大低频但关键的爽点。
七设计要点与对自研的借鉴
| 结论 | 数据来源 |
|---|---|
| 五类资源数量、顶点桶、贴图格式/尺寸分布 | 美术资源元数据索引 |
| 材质着色器分布(标准 + 66 自定义着色器) | 美术资源材质着色器统计 |
| 相机正交 + 52° 俯角 + 自动取景公式 | 关卡加载相机设置逻辑 |
| UI 340 树 / 7423 节点 / 锚点分布 / 复用频次 | UI 树解析 |
| 音频 71 片段 / 1467s / 时长分桶 | 美术资源音频片段索引 |
| SFX 事件映射 | 音频配置 |
| Slomo / 触感反馈 / 全屏特效 机制 | 系统命名 + 通用模式 |
1 · 用相机约束反哺美术成本
固定正交俯角锁死视角 → 网格只做单面低模 → 包体可控。视角不是表现选择,而是成本杠杆。
2 · 3D 低模做 2.5D
996 个 ~329 顶点低模配正交相机即得"伪 3D 长方形地图",换城靠换网格/贴图而非重画。
3 · 压缩格式 + 标准尺寸 + 图集复用
84% 贴图走移动压缩、尺寸锁 128/256/512、226 精灵拼 2807 节点(WhiteCircle 复用 645 次)。
4 · UI 组件套件 + 纯锚点适配
用 ButtonContainer/PopupContainer/CloseButton 积木 + 共享图集批量搭 340 界面,竖屏适配零脚本全靠锚点。
5 · 美术预算精准分配
基础渲染用标准着色器省成本,66 个自定义着色器全砸在"高频可见 + 活动主题 + 爽点反馈"。
6 · 多通道反馈 + 零成本润色
视觉(数字/Slomo)+ 听觉(金币声)+ 触觉(震动)三通道盖章每个正反馈;润色手段零美术成本却精准放大关键瞬间。