meta data for this page

📚 RadialMenu

RadialMenu是一个轻量的基础UI系统,可供开发者快速实现圆形轮盘菜单GUI

RadialMenu是特殊的UI形式,支持以World端直接为某个玩家建立一个UI并绑定事件(而不需要客户端写多余的代码),同时也支持Client端正常独立使用。

注意:RadialMenu属于世界场景实例,加载新场景时将会自动销毁。

📒 使用方式

World端Client端的具体使用方式有些许差异(指API方法部分),除此之外的数据绑定等内容都是通用的。

注意:由于轮盘菜单的结构原因,过少或过多的数据将无法完全展示,Items数据结构需要在数量范围限制内(2~6)。

RadialMenu会根据传递的Items数组长度进行动态分配UI,索引的顺序按照:【优先上方+顺时针】规律排序。

let view = {
    Tag: "Test",
    Title: "Center Text",
    Background: -1, //-1=None, 0=Black, 1=Blur
    ItemBGColor: "#ffffff", //Test Color (nullable)
    ItemFocusColor: "#00adf5", //Test Color (nullable)
    Items: [
        {
            Icon: 100,
            Text: "MyName",
            OnClick: () => {
                DLog("PlayerName: " + player.Name);
            }
        },{
            Text: "OnlyText",
            OnClick: () => {
                DLog("Only text, no icon");
            }
        }
    ]
};
 
//World
player.CreateRadialMenu(view);
 
//Client
CreateRadialMenu(view);
 
//Destroy
player.DestroyRadialMenu();
DestroyRadialMenu();

📒 传递数据解析

使用RadialMenu的方法十分简单,只需要按规范自定义一个JavaScript的对象结构,就可以实现一个轻量级菜单的UI效果。

let view = {
    Tag: "Test", //识别标签,可空,无实际作用,主要用于检测\分辨
    Title: "Center Text", //标题文本
	Background: -1, //-1=None, 0=Black, 1=Blur
    ItemBGColor: "#ffffff", //按钮背景颜色(可空)
	ItemFocusColor: "#00adf5", //按钮激活颜色(可空)
    Items: [
        {
            Icon: 100, //按钮图标ID(2选1可空)
            Text: "MyName", //按钮文本(2选1可空)
            Info: "Show your name", //可空,如填写则表示【鼠标悬停焦点】时,将此段内容更换至【标题文本】,失去焦点时恢复默认标题
            OnClick: () => { //当被点击事件
                DLog("PlayerName: " + player.Name);
            }
        },{
            Text: "OnlyText", //按钮文本
            OnClick: () => { //当被点击事件
                DLog("Only text, no icon");
            }
        }
    ]
};
 
CreateRadialMenu(view);