Roblox UI 介绍的是 Roblox UI 在引擎层面的工作方式,以及如何用 Fusion 0.3 构建 UI。资料来源包括 Roblox 官方 UI 文档(引擎原语)、elttob.uk 上的 Fusion 0.3 文档,以及 dphfox/Fusion 源码仓库。技能附带多个深入参考文档:roblox-ui-primitives.md(完整的 GuiObject / 布局 / 输入参考)、design-guidelines.md(与框架无关的 UX 指南、间距/字体/颜色尺度、状态、动效、无障碍)、fusion-instances.md(New / Hydrate / [Children] / [OnEvent] / [OnChange] / [Out] / [Attribute] / [Child] 参考)、fusion-state.md(Value、Computed、Observer、peek、use、动画原语)。
集成策略部分说明:该技能描述的是推荐模式,不授权重写现有 UI;规则只应用于新组件和用户明确要求的改动,并应与项目已选的 UI 框架保持一致(例如代码库使用 Roact 就不要擅自迁移到 Fusion;已有组件混用 offset 与 scale 就沿用该混用方式;已存在主题模块就使用它,不另建平行的主题)。设计指南属于建议而非强制。
引擎心智模型方面:每个 Roblox UI 都是挂在 UI 容器下的 GuiObject 树,容器决定渲染位置,GuiObject 决定显示内容。容器包括 ScreenGui(玩家屏幕上的平面 2D 叠加层,位于 Players[X].PlayerGui,由 StarterGui 按角色复制)、SurfaceGui(3D 世界中部件的某个面上,像广告牌)、BillboardGui(漂浮在 3D 中,始终面向相机,可选 MaxDistance)。文档还介绍了 ScreenGui 的 DisplayOrder、IgnoreGuiInset、ResetOnSpawn、ZIndexBehavior 等属性,SurfaceGui 的 Face、SizingMode、AlwaysOnTop,以及 BillboardGui 以 studs 为单位、MaxDistance 剔除、StudsOffset 等特性。
GuiObject 核心属性部分列出了所有 GuiObject 共有的属性,包括 Size(UDim2,Scale 为父级比例,Offset 为像素,两者相加)、Position、AnchorPoint((0..1, 0..1),默认 (0,0) 为左上角)、只读的 AbsoluteSize 与 AbsolutePosition、AutomaticSize、ClipsDescendants、Visible、Active、ZIndex、LayoutOrder、Selectable,并给出 UDim2 的速查写法与 scale/offset 混用规则。
布局结构部分介绍父级控制的定位方式:UIListLayout(沿轴堆叠)、UIGridLayout(网格)、UIPageLayout(一次显示一个子项,常用于标签页/向导)、UITableLayout(等高等宽行列),并给出 UIListLayout 的示例代码。修饰器与约束部分介绍 UICorner、UIPadding、UIStroke、UIScale、UIAspectRatioConstraint、UISizeConstraint、UITextSizeConstraint、UIGradient、UIFlexItem 的作用。
常用 GuiObject 部分涵盖 Frame、ScrollingFrame、CanvasGroup、TextLabel/TextButton/TextBox、ImageLabel/ImageButton、ViewportFrame、VideoFrame 及其关键属性。输入部分说明按钮的 Activated 事件(抽象鼠标/触摸/手柄)、更底层的 MouseButton1Down、TouchTap 等事件、任意 GuiObject 的 InputBegan/InputChanged/InputEnded,以及全局输入推荐使用 UserInputService(带 gameProcessed 参数)与 ContextActionService。渲染顺序部分说明 DisplayOrder、ZIndex、LayoutOrder 的层级关系。
顶部栏内边距与安全区域部分说明 Roblox 顶部保留区域,IgnoreGuiInset = true 可全屏,GuiService:GetGuiInset() 可获取保留区域,iOS 刘海与 Android 挖孔也计入内边距。注意事项部分列出若干实践要点:AbsoluteSize/AbsolutePosition 在创建后有一帧延迟、AutomaticSize 循环问题、居中简写、宽高比锁定容器、任意父级内实现正方形、手机像素精确、TextScaled 配合 UITextSizeConstraint、伪阴影、带图圆角按钮、模态对话框、拖拽推荐使用 UserInputService、手柄导航的选择组、隐藏光标、使用 TextService:GetTextSize 测量文本、新代码优先使用 FontFace。
设计指南部分与框架无关,适用于 Fusion、Vide、React Lua 或直接 Instance.new,美学目标是中性干净的产品风格。原则包括:层级优于装饰、一致性优于取巧、每个动作都要有反馈、每屏一个焦点、尊重平台、性能即 UX。文档给出间距尺度(4 8 12 16 24 32 48 64)与字体尺度(12 14 16 18 24 32 48)及各自角色,颜色采用语义角色(Surface、SurfaceElevated、Primary、OnPrimary、Text、TextMuted、Border、Success/Warning/Danger),集中在一个模块中,对比度参考 WCAG AA(正文 4.5:1,大字号 3:1),并列出应避免的做法(彩虹渐变、仅用颜色传达信号、纯黑纯白文字等)。层级与布局部分强调相关内容分组、使用 UIListLayout 与间距尺度、把留白作为主要手段。
由于提供的资料在此处截断,正文中后续内容暂未提供。