用户界面 - scutrobotlab/RM2022_SimulatorX GitHub Wiki
相较于旧版工程里把所有 UI 面板都堆在场景里面的不规范操作,SimulatorX 的 UI 面板大多数是动态加载的,主面板也来自另一个场景中。进入赛场后,UI 场景会被增量加载。当场景中的实体需要调起 UI 面板时,可以通过 UIManager 统一入口拿到面板引用:
/// <summary>
/// 准备补给站相关UI。
/// </summary>
protected override void LoadUI()
{
base.LoadUI();
if (!isClient) return;
// _supplyUI = UIManager.GetInstance().GetUI().GetComponentInChildren<SupplyPanel>();
_supplyUI = UIManager.Instance().UI<SupplyPanel>();
}
...
_supplyUI.StartSession(ReplySupplyUISession);
裁判和观众界面展示的 AR 血条也是平面上的 UI 组件。通过坐标变换就可以算出血条跟随实体所在的坐标位置。同时血条还要根据摄像机与实体的距离进行一定程度的缩放,根据视野范围显示和隐藏等。
var screenPos = fpvCamera.WorldToScreenPoint(storePos + Vector3.up * 0.7f);
screenPos.x *= scaler.x;
screenPos.y *= scaler.y;
var heightScale = Screen.height / (Screen.width / 16f * 9);
screenPos.y *= heightScale;
GetComponent<RectTransform>().anchoredPosition = screenPos;
GetComponent<RectTransform>().localScale =
5 / (fpvCamera.transform.position - storePos).magnitude * Vector3.one;
AR 另一个有意思的东西是基地防护罩,不过防护罩确实是一个三维实体,上面给了 ShaderGraph 画的材质动画和菲涅尔效果。
虽然有点想把锅扔给 UI 层级过少,但不得不承认 SimulatorX 并没有非常成熟的面板栈管理。其实如果有更加复杂的界面设计,有大量弹窗、界面堆叠的需求,设计一个合理的基于栈的 UI 面板管理器可以让后续的界面开发事半功倍。
另外,有一个神奇的坑。我们使用的 UI 视频背景,在拿不到显示设备的服务器端运行会段错误,需要显式关掉视频背景才能正常运行。记录,以防有人和我一样懵半天。
SimulatorX 有 3 个主要界面:
在这里,用户可以自定义在之后角色选择面板的用户名、选择界面语言、连接服务器、切换全屏状态等。进行信息输入时,交互按钮会有相应提示。
角色选择界面提供裁判、观众、红蓝方全兵种的选择。
正式进入游戏后,用户界面一比一还原比赛时的真实 UI,包括倒计时、小地图、本地机器人状态、增益提示等等。