本文最后更新于:2024年9月1日 晚上
[toc]
注册事件的写法
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
GuideGroupOpening, [EEventName.GuideFocusNeedUiTabView]: (stepInfo: GuideStepInfo, focusConf: GuideFocusNew) => void;
EventSystem.Add(EEventName.GuideGroupOpening, this.OnGuideGroupOpening); EventSystem.Remove(EEventName.GuideGroupOpening, this.OnGuideGroupOpening);
EventSystem.Emit(EEventName.GuideGroupOpening, this.Owner!.Id, isPreExecute);
|
LGUI在TS中的绑定写法
实际操作
prefab会有一个LGUIComponentsRegistry组件,定义了引用的顺序,例如:
![image-20240619141651430](C:\Users\jiangliyong\AppData\Roaming\Typora\typora-user-images\image-20240619141651430.png)
然后在OnRegisterComponen方法里面按照熟悉绑定即可。
1 2 3 4 5 6 7 8
| 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| protected ComponentRegisterInfos: TComponentsRegisterInfo[] = [];
protected BtnBindInfo: TBtnBindInfo[] = [];
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里面
比如
1
| this.GetButton(EVideoView.SkipBtn)!.RootUIComp.SetUIActive(false);
|
预制体中组件的显示与隐藏
SetUIActive
1
| this.GetItem(ETutorialsPopupComponents.PnlBottom)!.SetUIActive(true);
|
UI动画调用
1 2 3
| 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
1 2 3
| const LOOP_DIGITAL_SCREEN = 'play_ui_digital_screen' AudioSystem.PostEvent(LOOP_DIGITAL_SCREEN) AudioSystem.ExecuteAction(LOOP_DIGITAL_SCREEN, UE.EAudioActionType.Stop)
|
修改某一个组件的具体参数
使用SetCustomMaterialScalarParameter,这里要用到FName
1 2 3 4 5
| const factor = new UE.FName('factor'); this.GetText(EDigitalScreenView.TextList)?.SetCustomMaterialScalarParameter( factor, ModelManager.DigitalScreenModel?.TextFactor ?? 0.2, );
|