UE引擎LGUI框架记录

注册事件的写法

// 在EventDefine.ts里添加对应的枚举和interface

GuideGroupOpening, //引导组打开
    
[EEventName.GuideFocusNeedUiTabView]: (stepInfo: GuideStepInfo, focusConf: GuideFocusNew) => void;
        
// 在对应的Controller的OnAddEvents和OnRemoveEvents添加
        
EventSystem.Add(EEventName.GuideGroupOpening, this.OnGuideGroupOpening);
EventSystem.Remove(EEventName.GuideGroupOpening, this.OnGuideGroupOpening);


// 在对应的Model代码添加触发器
EventSystem.Emit(EEventName.GuideGroupOpening, this.Owner!.Id, isPreExecute);

LGUI在TS中的绑定写法

实际操作

prefab会有一个LGUIComponentsRegistry组件，定义了引用的顺序，例如：

然后在OnRegisterComponen方法里面按照熟悉绑定即可。

protected override OnRegisterComponent(): void {
    this.ComponentRegisterInfos = [
        [EDigitalScreenView.ButtonMask, UE.UIButtonComponent],
        [EDigitalScreenView.TextName, UE.UIText],
        [EDigitalScreenView.TextList, UE.UIText],
        [EDigitalScreenView.TextureBg, UE.UITexture],
    ];
}

原理解析

‌⁠‬‌‬‬‬‬‌‌‍‌‬‬⁠‍LGUI设计说明文档 - 飞书云文档 (feishu.cn)

‌‍⁠⁠‬‬‬‍‬‬‌‍‌‌‌Ts Ui框架说明 - 飞书云文档 (feishu.cn)

‌⁠‌‬‬‍‌⁠‍‌⁠⁠‌‌⁠‌⁠‌‌‍‬‍‌业务UI框架重构 - 飞书云文档 (feishu.cn)

一些关键的基类：ComponentAction（所有UI类和UIBehavior类的共同最终基类，实现了一套带状态的生命周期调度和可重载接口）、UIPanelBase（提供给小UI，即界面中的格子、小界面等继承，拥有丰富的UI相关操作能力）、UIViewBase（提供给界面继承，它本身也继承自UIPanelBase，在其上扩展了动画、场景、事件、读取UI配置表的能力），继承关系ComponentAction->UIPanelBase->UIViewBase

UiPanelBase.ts

    protected ComponentRegisterInfos: TComponentsRegisterInfo[] = [];

    protected BtnBindInfo: TBtnBindInfo[] = []; //所有按钮绑定事件的定义

// 重写OnRegisterComponent方法

    protected override OnRegisterComponent(): void {
        this.ComponentRegisterInfos = [
            [EVideoView.CgTextureBtn, UE.UIButtonComponent],
            [EVideoView.SkipBtn, UE.UIButtonComponent],
            [EVideoView.CaptionText, UE.UIText],
            [EVideoView.BtnAuto, UE.UIItem],
            [EVideoView.BtnHide, UE.UIButtonComponent],
        ];
    }

生命周期函数（带Async是异步版本）

OnRegisterComponent：绑定具体界面定义的enum里面的控件。

OnAddEventListener：添加ui事件监听，按钮啥的

控件相关的api在UIItem.d.ts里面

比如

this.GetButton(EVideoView.SkipBtn)!.RootUIComp.SetUIActive(false);

预制体中组件的显示与隐藏

SetUIActive

this.GetItem(ETutorialsPopupComponents.PnlBottom)!.SetUIActive(true);

UI动画调用

this.LevelSequencePlayer = new LevelSequencePlayer(this.RootItem);
this.LevelSequencePlayer!.PlayLevelSequenceByName('Start', true);
this.LevelSequencePlayer!.PlayLevelSequenceByName('Loop', true);

游戏中LGUI层级结构

‌‍‍‌⁠‌⁠‌‬⁠⁠‍‬⁠‌‌‌‍‌‍‌⁠UI层级节点描述文档，包含容器逻辑实现规则 - 飞书云文档 (feishu.cn)

屏幕空间UI层级说明 - 飞书云文档 (feishu.cn)

Hud层

交互和剧情界面旁白

Normal层

常规系统界面，只显示最表面的界面

NormalMask层

Normal层的点击阻挡遮罩

Pop层

可交互弹窗

Float层

飘字和提示

NetWork层

网络提示相关的ui

Mark层

以上所有层的点击阻挡遮罩

Pool层

对象池界面，优化性能使用

播放声音

使用AudioSystem

const LOOP_DIGITAL_SCREEN = 'play_ui_digital_screen';
AudioSystem.PostEvent(LOOP_DIGITAL_SCREEN);
AudioSystem.ExecuteAction(LOOP_DIGITAL_SCREEN, UE.EAudioActionType.Stop);

修改某一个组件的具体参数

使用SetCustomMaterialScalarParameter，这里要用到FName

const factor = new UE.FName('factor');
this.GetText(EDigitalScreenView.TextList)?.SetCustomMaterialScalarParameter(
            factor,
            ModelManager.DigitalScreenModel?.TextFactor ?? 0.2,
        );