【UI使用最佳实践】教你如何规范的使用UI

空伊伊 · 发表于 2023-3-24 18:23:20

UI使用最佳实践

所使用编辑器版本：Online_v0.22.0.3

UI使用最佳实践
本篇以制作一个背包UI为例，展示一套规范的制作和使用流程

一、案例效果展示

UIProject.rar (65.28 KB, 下载次数: 69)

2023-3-28 10:21 上传

点击文件名下载附件

步骤一：创建UI
创建制作背包所需要的UI

步骤二：编辑UI
MainUI
MainUI中提供了一个“背包”按钮，后面需要通过这个按钮来打开背包面板

BagUI
BagUI中提供了一个“×”按钮，用来关闭背包UI；提供了一个滑动框mScrollBox，用来显示Item

BagItemUI

ItemUI中提供了一个"mBtn"按钮，用来进行交互（例如：当被点击时，显示物品信息、使用物品等~）

步骤三：导出UI

导出结果
这些脚本帮我们绑定了对应的UI，以及查找到了首字母为小写的的UI组件

步骤四：创建UI脚本

Q：为什么已经导出脚本了？还需要再创建脚本？
A：导出的脚本在每次点到处时，都会被重新覆盖一次，如果逻辑直接写在导出的脚本里，那么自己的代码就很容易丢失。所以需要创建一个脚本来继承导出的脚本，这样就能实现在使用导出脚本中UI的同时，又不用担心自己的代码被覆盖啦~

步骤五：编写UI脚本
MainUI
MainUI上有一个背包按钮，给这个背包按钮的点击事件添加一个逻辑：显示BagUI

export class MainUI extends MainUI_Generate {

    protected onAwake(): void {



        this.mBag_btn.onClicked.add(() => {

            // 显示BagUI

            UI.UIManager.instance.show(BagUI)

        })

    }

}

BagUI

export class BagUI extends BagUI_Generate {

    /**所有的Item */

    private _allItem: BagItemUI[] = []



    protected onAwake(): void {

        this.mClose_btn.onClicked.add(() => {

            UI.UIManager.instance.hide(BagUI)

        })



        // 监听外部事件，当事件派发时，创建对应的按钮（对UI操作的逻辑，最好不要在外部进行。内部监听外部指令，内部执行具体逻辑，这样能够使逻辑更清晰）

        Events.addLocalListener("AddBagItem", (itemName: string) => {

            this.addBagItem(itemName)

        })

    }



    /**给背包添加一个Item */

    private addBagItem(itemName: string) {

        // 动态创建一个BagItemUI，并获取到它的脚本

        let item = UI.createUI("BagItemUI", BagItemUI)



        // 给BagItemUI的按钮文字赋值，来区分是什么物品（当然你可以有更好的方式）

        item.mBtn.text = itemName



        // 将item绑定的UI添加到滑动框中

        this.mScrollBox.addChild(item.uiObject)



        // 将item添加到_allItem列表中，统一管理

        this._allItem.push(item)



        // 假设背包里的东西只增不减，那么就直接用_allItem的长度来做为Index

        item.uiObject.position = this.getItemPosByIndex(this._allItem.length)

    }



    /**根据Index来获取Item在滑动框中的位置（这个是根据滑动框以及Item的实际大小计算出来的） */

    private getItemPosByIndex(index: number) {

        let x = 20 + (index - 1) % 6 * 160

        let y = 20 + Math.floor(((index - 1) / 6)) * 160

        return new Type.Vector2(x, y)

    }

}

BagItemUI
ItemUI中提供了一个"mBtn"按钮，用来进行交互（例如：当被点击时，显示物品信息、使用物品等~）

export class BagItemUI extends BagItemUI_Generate {

    protected onAwake(): void {

        // 将按钮设置为精确点击，否则按钮会挡住滑动事件

        this.mBtn.touchMethod = UI.ButtonTouchMethod.PreciseTap

        this.mBtn.onClicked.add(() => {

            // Item do SomeThing

        })

    }

}

步骤六：显示UI

@Core.Class

export default class GameStart extends Core.Script {



    /** 当脚本被实例后，会在第一帧更新前调用此函数 */

    protected onStart(): void {

        if (SystemUtil.isClient()) {



            // 游戏一开始，只需要显示MainUI即可，其它UI都通过MainUI上的按钮进行打开

            // 这个“MainUI”是第5步创建的UI脚本的类名

            UI.UIManager.instance.show(MainUI)



            // 方便在PC上进行测试，给按钮添加了事件，事件的功能是派发AddBagItem事件，向背包添加Item

            InputUtil.onKeyDown(Type.Keys.Q, () => {

                Events.dispatchLocal("AddBagItem", "苹果")

            })

            InputUtil.onKeyDown(Type.Keys.W, () => {

                Events.dispatchLocal("AddBagItem", "橘子")

            })

            InputUtil.onKeyDown(Type.Keys.E, () => {

                Events.dispatchLocal("AddBagItem", "草莓")

            })

            InputUtil.onKeyDown(Type.Keys.R, () => {

                Events.dispatchLocal("AddBagItem", "葡萄")

            })

        }

    }

}