数据基准 游戏v1.51 · 文档v1.6
公式速查
GAME DESIGN DOC · 08 表现层

表现层:资源组织与界面架构

表现层数值少,但藏着大量资源组织与界面架构的设计决策。一套什么样的美术/UI 资源组织, 才能撑起一个 60 城横向铺开、几十个界面、纯激励视频变现的放置游戏?答案是三句话: 3D 低模做 2.5D 场景、移动端压缩格式 + 极致图集复用、UI 用一套组件套件批量拼装。 本篇把重心放在"设计目标 → 资源体系 → 结构 → 设计意图",对应系统全景 K 表现层类。

设计目标资源体系结构设计意图
996
网格 Mesh(56%<200顶点)
899
贴图(移动压缩占84%)
793
精灵 Sprite
261
材质(自定义着色器 66)
71
音频片段(1467s)
340
UI 树 / 7423 节点
52°
正交相机俯角
226
精灵拼出2807带图节点
数据落点美术规模来自全量美术对象的元数据索引;UI 结构来自 UI 树解析(340 树 / 7423 节点);音频事件来自音频配置;相机参数来自关卡加载脚本。

设计目标:用高复用低体积资源撑起 60 城

表现层服务的是总览"宽度优先"的取舍:60 城 × 7 餐厅 × 几十个界面横向铺开,必须用一套 高复用、低体积、可批量换皮的资源组织撑起来,否则包体和制作成本都会失控。整篇围绕一条隐性预算原则展开:

用相机约束反哺美术成本 → 网格只做单面低模 → 压缩格式 + 标准尺寸 + 图集复用 → 包体可控 → 撑得起 60 城横向铺开

城市差异主要落在网格/贴图/材质的替换上,而非重画 2D 场景——横向铺 60 城靠资源替换,不靠逐城重制。这与 02 进度结构 的"模板复用"在美术层一一对应。

五类美术资源的规模

美术资源元数据索引对全量美术对象做了统计,五类资源规模如下:

资源类型数量用途关键特征
Mesh 3D 网格996场景物件 / 角色 / 工位 / 装饰总 327,302 顶点,绝大多数低模
贴图 Texture899网格贴图 + UI 底图697(77%)移动压缩格式(带 alpha)
精灵 Sprite793UI 图标 / 卡片 / 按钮 / 特效贴片集中在 128 / 256 / 512 三档
材质 Material261渲染材质含 66 个自定义着色器
音频 AudioClip71BGM + SFX全音频压缩,总 1467 秒
美术资源规模与贴图格式
五类美术资源规模 + 贴图格式分布

2.1 为什么用 3D 网格做 2.5D 表现 ★

放置餐厅游戏的画面是"伪 3D 长方形地图"——这不是 2D 贴图堆叠,而是 996 个真实 3D 网格在正交相机下的 2.5D 呈现。 顶点桶分布证明这是"成本可控的 3D":996 个网格总共才 327,302 顶点,平均每个 ~329 顶点。

顶点桶网格数占比含义
<5034835%超过一半(56%)不到 200 顶点 —— 典型低多边形卡通风
50–19921021%
200–49927428%中等精度(主要角色/工位)
500–9999710%较精细物件
≥1000677%少量高模(主角/关键道具)

低模成本极低

单个物件 ~329 顶点,建模成本极低,但因为是真 3D,能在相机俯角下自然呈现立面与遮挡。

换城 = 换网格/贴图

60 城共用同一套相机与布局逻辑,城市差异落在网格/贴图/材质替换上,而非重画 2D 场景。

正交相机锁死视角

玩家永远只从同一固定俯角看,建模只需保证那个角度好看,背面/底面可极简,进一步压成本。

2.2 贴图:移动端压缩格式 + 标准化尺寸

899 张贴图的格式分布高度集中——84% 走移动端标准纹理压缩,直接决定了包体可控:

格式数量占比用途
压缩(带 alpha)69777%主力压缩格式(带 alpha)
不压缩 RGBA329310%不压缩(UI / 需精度处)
二次压缩(带 alpha)465%二次裁剪压缩
低精度 RGBA4444324%低精度小图
压缩(无 alpha) / Alpha8 / RGB24 等314%杂项

尺寸上同样标准化:贴图与精灵都集中在 128×128 / 256×256 / 512×512 三档(精灵里这三档占 677/793 ≈ 85%), 少量 1024 用于大背景,1920 仅 1 张(启动 / 全屏图)。

精灵尺寸档数量占比
128×12825632%
512×51224431%
256×25617722%
1024 / 1920 / 其它11615%
设计意图统一尺寸 = 统一图集 = 复用最大化。压缩格式锁住包体,标准尺寸锁住图集排布,这是手游美术体积控制的标准答案。

2.3 材质与着色器:261 材质里藏着润色预算

261 个材质的着色器分布揭示了渲染管线与"润色去哪了":

着色器族材质数说明
标准着色器(Lit / Unlit / Simple Lit / Particles)132场景/角色/粒子基础渲染(移动渲染管线)
自定义着色器66设计性着色器,是润色重点
UI 着色器(自定义)28UI 特效(滚动纹理 / 光线 / 圆形遮罩)
文字着色器25文字渲染

66 个自定义着色器是表现层投入最集中的地方,命名直接对应玩法场景与活动:

水体族

Water WaterRipple WaterFountain WaterTankShader FullScreenUnderwater

神话角色族

MythicCharacterShader Character Shader PetActiveFresnelShader(高稀有度角色发光/金属质感)

活动族

EventBackgroundShader DiscoveryGem DiscoveryTile Field(活动专属背景)

爽点反馈族

ShineCoin ShineCustomer RadialShine BoostShader Ray

设计意图基础渲染用标准着色器省成本,把美术预算精准砸在"玩家高频看到 + 活动主题 + 爽点反馈"三类场景——金币闪光、顾客高光、水下全屏、活动专属背景。这与 05 副本与活动 的"每个活动一套独立沙盒"呼应:活动连专属着色器都备好了。

相机:正交投影 + 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 预制体做了层级树解析:

340
UI 预制体树
7,423
总节点数
226
引用的不同贴图
12
最大深度(层)
38%
带 sprite 的节点(2807)

节点深度直方图呈中段隆起——大多数界面是 2–4 层中等嵌套,没有过深层级,便于复用与维护。

4.1 主要界面的节点规模

剔除引擎调试 UI(DebugUIHandler* / Profiler / 云存档弹窗等系统 UI)后,真正的游戏界面 Top12:

主要 UI 界面节点规模
真正游戏界面 Top12 节点规模
界面节点数对应系统
RestaurantUiView214主界面 HUD(资源条 / 升级按钮 / Boost / 入口聚合)
Character Equipment Inventory190装备背包(04 养成
PetMergeView166宠物合成
PetMergeFeedbackView158宠物合成反馈动画
BrewKettleView130药水酿造
InviteChefPreviewView119邀请 / 角色预览
ClubView116俱乐部(07 社交
WardrobeUiView101衣橱 / 装扮
ClubChefPreviewView / LeaderboardChefPreviewView96 / 92俱乐部 / 排行成员预览
InviteProfileEntryView87邀请档案条目
设计信号RestaurantUiView(214 节点)是绝对核心——玩家全程驻留的主界面,聚合 HUD / 升级 / Boost / 各侧系统入口。第二梯队(养成/宠物/俱乐部)正对应 04/07 的重界面系统:界面节点规模直接反映系统复杂度的分布——养成与社交是 UI 最重的两块。

4.2 组件套件:极致的节点与精灵复用 ★

7,423 个节点不是 340 套独立设计,而是一套组件套件反复拼装。证据来自节点名与精灵的复用频次:

最高频节点名 —— 组件库

节点名次数角色
ButtonContainer349按钮容器骨架
Background309背景板
Label_Bold / Label / Text278 / 170 / 143三种标准文本
Image / Icon205 / 130图片 / 图标位
CloseButton127关闭按钮(几乎每弹窗都有)
PopupContainer117弹窗容器骨架

最高复用精灵 —— 共享图集

精灵复用用途
WhiteCircle645万能白色圆形底(占全部 23%)
Button_1361标准按钮底图
Item Card Outline / Level / Content BG127/93/78卡片三件套
Arrow / Circle / SoftCircle103/84/60通用装饰
CharacterHatIcon / LockedIcon / CheckMark80/74/66通用状态图标

仅 226 个不同精灵就拼出了 2,807 个带图节点 —— 平均每个精灵被复用 12 次

WhiteCircle + Button_1 两个就占了全部引用的 36%。组件类型分布也佐证:43.8% 节点是 image、23.3% 是 text、32.9% 是纯容器。

设计意图UI 是用"积木 + 共享图集"批量搭出来,不是逐界面手绘。WhiteCircle 配色即得任意圆底、Button_1 配文字即得任意按钮、PopupContainer+CloseButton 即得任意弹窗。这套组件套件让 340 界面用极少原子资源拼成,既压包体、又保证全局视觉一致、还让新增活动界面能快速搭建——直接呼应"宽度优先 + 频繁上活动"对 UI 产能的要求。

4.3 锚点驱动的竖屏适配 ★

放置游戏是竖屏手游,必须适配 16:9 到 19.5:9 各种长宽比。Eatventure 完全靠 UI 矩形锚点做自适应,不靠脚本算布局。7,423 个节点的锚点模式分布:

UI 锚点模式分布
7423 节点的锚点模式分布
锚点模式节点数占比适配作用
全拉伸 stretch-full([0,0]→[1,1])2,84238%撑满父容器,随分辨率自动伸缩
钉底 pinned-bottom(y 锚=0)1,59221%底部操作区 / 升级按钮固定贴底
钉点 pinned-corner(min==max)1,21216%图标 / 角标固定到某点
钉顶 pinned-top(y 锚=1)89812%顶部资源条 / 状态栏固定贴顶
纵向拉伸 stretch-V6078%随屏高伸缩
横向拉伸 stretch-H150.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餐厅分区 / 楼层切换 UI02 进度结构

BlockScreen 值得单点:每个弹窗(PopupContainer 117 次)背后都有一层全屏遮罩拦截点击,这是放置游戏"弹窗驱动"交互(开箱/升级/活动全是弹窗)的基础设施——它本身就是一个 stretch-full 的纯色块复用案例。

音频:71 个压缩片段,分层做"循环 BGM + 高频反馈 SFX"

音频片段索引:71 个片段,全部音频压缩,总时长 1467.3 秒(约 24 分钟)。 声道上 49 单声道 + 22 立体声——SFX 多为单声道(省体积),BGM 与氛围音用立体声。按时长分桶:

音频时长分布
71 个音频片段的时长分桶
时长桶片段数类型说明
≥30s14BGM 循环城市 / 活动主题背景乐
1–5s39反馈 / 过场 SFX开箱、卖钱、过场动效
<1s18UI / 点击 / 短 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开新餐厅(含掌声)、领礼
设计意图少量音频撑满"循环 + 反馈"两层:BGM 按城市/活动主题切(14 首 ≥30s,Seaport/Sailing/Mine/Space/Potion Shop 等命名对应主题城与活动),强化"环游世界"新鲜感;SFX 全部钉在反馈瞬间——开箱拆成 4 段、卖钱有专属 coinFlySfx+saleSfx、升星有 stationTierSfx——每个正反馈都有声音盖章。总量极省(71 片段/24 分钟)靠复用驱动:同一个 coinFlySfx 覆盖所有卖钱场景。

特效、装扮、触感:润色系统

6.1 全屏特效 RestaurantFullScreenEffects

配合全屏自定义着色器(FullScreenUnderwaterEventBackgroundShader),在特定场景/活动叠加全屏后处理。把"主题氛围"做成可叠加的全屏层,配合 BGM 切换,让换城/进活动有整体的视听包裹感。

6.2 装扮 Cosmetics

管角色皮肤/季节皮(界面是 WardrobeUiView 101 节点)。纯表现层的养成出口——不影响数值,只换外观,配 MythicCharacterShader 做高稀有度角色视觉差异化。给养成系统提供"不破坏数值平衡的收集动机"。

6.3 触感 HapticFeedback

调用设备振动马达,在关键操作(开箱/升星/买升级/领奖)触发短振动。是三通道反馈的触觉通道:和金币音效、数字跳动、Slomo 一起把每次正反馈做成"看得到、听得到、摸得到"。零资源成本,却显著增强实感。

6.4 润色系统的共性:零/低成本放大爽点

§3.1 Slomo、§6.1 全屏特效、§6.3 触感有一个共同设计逻辑——它们都不增加美术资源量(Slomo 改时间、触感调马达、全屏特效是着色器),却都精准作用在"质变瞬间"。

数字跳动视觉
+
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)+ 听觉(金币声)+ 触觉(震动)三通道盖章每个正反馈;润色手段零美术成本却精准放大关键瞬间。

一句话总结表现层没多少数值,但每一处资源组织都是"宽度优先"的承接——低模 + 压缩 + 图集 + 组件套件 + 锚点适配,让一套美术/UI 资源撑起 60 城横向铺开;运行时再用 Slomo/触感/全屏特效零成本放大爽点。