Appearance
C-🖼️ 游戏用户界面
ClientUI 是管理游戏界面的主要接口,它提供了以下核心功能:
- 界面布局:管理 UI 节点的层级、位置、尺寸等布局属性
- 节点管理:创建和操作各类 UI 节点(屏幕、盒子、图片、文本、输入框等)
- 事件系统:处理用户交互、节点状态变化等事件
- 样式控制:自定义节点的颜色、透明度、旋转等视觉效果
提示
在推出此功能前,已有 GUI 功能(基于 xml 编写)。但已不推荐使用,因有更优方案且支持可视化编辑。推荐使用最新的 ClientUI。 对旧版 GUI 感兴趣可查阅d.ts 文件。
类定义
typescript
declare const ui: UiNode;
declare const input: InputSystem;
declare const screenWidth: number; // 全局对象,获取当前玩家屏幕宽度
declare const screenHeight: number; // 全局对象,获取当前玩家屏幕高度
declare class InputSystem {
//...
}
declare class UiNode {
//...
}属性列表
基础属性
节点结构
布局与变换
anchor: 节点锚点,用于确定位置position: 相对于父节点的位置size: 节点尺寸rotation: 旋转角度uiScale: 等比例缩放数据autoResize: 自动调整尺寸的方式
外观样式
backgroundColor: 背景颜色backgroundOpacity: 背景透明度pointerEventBehavior: 鼠标指针事件响应方式
图片节点
image: 图片内容(路径或 URL)imageOpacity: 图片透明度imageDisplayMode: 图像显示模式complete: 图片加载状态
滚动框节点
scrollPosition: 滚动的位置
文本节点
textContent: 文本内容richText: 是否支持富文本textFontSize: 字体大小textColor: 文本颜色textFontFamily: 字体样式textXAlignment: 水平对齐方式textYAlignment: 垂直对齐方式autoWordWrap: 自动换行textLineHeight: 行高textStrokeColor: 描边颜色textStrokeOpacity: 描边透明度textStrokeThickness: 描边厚度
输入节点
placeholderColor: 占位文本颜色placeholderOpacity: 占位文本透明度isFocus: 是否处于焦点状态
方法
节点操作
findChildByName: 按名称查找子节点clone: 复制节点
节点创建
create: 创建 UI 屏幕实例create: 创建 UI 盒子实例create: 创建 UI 滚动框实例create: 创建 UI 图片实例create: 创建 UI 文本实例create: 创建 UI 输入实例
屏幕管理
getAllScreen: 获取所有屏幕实例
输入控制
focus: 使输入框获得焦点blur: 使输入框失去焦点unlockPointer: 显示鼠标指针lockPointer: 隐藏鼠标指针
事件处理
on: 监听事件once: 监听一次性事件add: 添加事件监听器(同 on)emit: 触发事件remove: 移除第一个匹配的监听器off: 移除事件监听器(同 remove)removeAll: 移除所有监听器
枚举值
PointerEventBehavior: 鼠标指针事件行为ImageDisplayMode: 图像显示模式UITextFontFamily: 字体样式