top

    英雄的黎明2自定义UI教程

    英雄的黎明2，自1250版本起，将在剧本编辑器中支持自定义UI系统。剧本开发者可以自行设计自己的UI界面，用以自己剧本个性化的需要。

    自定义UI系统能做什么？

    例如，一位剧本作者利用脚本系统开发了比武大会系统。但是系统中没有自带武将对阵表。此时可以使用自定义UI系统制作一份武将对阵表。

    自定义UI系统支持的功能

    挂件(Widget)

    自定义UI系统支持2种基本控件：

    图片挂件

    用以显示一副图片。

    文字挂件

    用以显示一段文字。

    事件绑定

    用以处理玩家的点击事件。

    一个例子

    一个自定义窗口的例子 

    {
    "app":"com.zlmcd.sanlite2",
    "ver":1,
    "name":"my_ui",
    "res":{
        "img_panel":{
            "texture":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAvCAYAAABzJ5OsAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFw2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIyLTA0LTExVDIyOjM0OjQxKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0wOC0wMVQxMzoyODo0MyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0wOC0wMVQxMzoyODo0MyswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTJiMmVmYTUtM2Q3NS1hZjRiLTkxOTYtNzdiNDk3NDZiZmIwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOmM0NDIwMTI1LTBiNDctNDI0NS1iNGFhLTE2MzQ0NTA0OTg5YyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmM0NDIwMTI1LTBiNDctNDI0NS1iNGFhLTE2MzQ0NTA0OTg5YyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YzQ0MjAxMjUtMGI0Ny00MjQ1LWI0YWEtMTYzNDQ1MDQ5ODljIiBzdEV2dDp3aGVuPSIyMDIyLTA0LTExVDIyOjM0OjQxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjUyYjJlZmE1LTNkNzUtYWY0Yi05MTk2LTc3YjQ5NzQ2YmZiMCIgc3RFdnQ6d2hlbj0iMjAyMi0wOC0wMVQxMzoyODo0MyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgzVfmIAAALOSURBVGiB7ZpPSBRRHMc/bx3X9U+InvuH6WqCKBUU/oEOWmZQl25CGtVhJewSdOuYpyhI6lLaoRKhm5kUglJrrosJEglqqAy2lqauqbu66r4Os1u7aiFpPoX5wI9h3rwZPu83j7l8B35zExgBmoAydhZlGF5eoGa9CSM3bteM6rruBnw7rXRdd7d1umZCCwBAC63KAaSk7d/nH/KM2dtdXYGczMzEj/3985tp11YQ9hjyjNkfNTZOAqkYb+EhQJOu627d41mYnPYu2exZfXHpGbLV2TEPSNXV1umasdmz+mz2rL7Jae/S96mp5e7u7hGgSWB0/nlbp0sIIWTpxQrP03t3D/yvTv4r5dXVCc1P6v1SSlFSVCSBCyJ07QHgaHV2+EAK749ZWXX1ijUmGNQU+v7i/uM6X/KeJIsQlmBxYUEC8A5o0KSUAFVCCIemaUsnTxxPfvGqxRcTDGpTiUlqrYHU+TkASoqKbK1Opz80fAtot0ROzMnMTNxmt40iAfKys60ALW9e1wJEyXvGvwW232vjzM37JMCZU6evAViEEAghAFa+jo9b/nazagZHhpcxvvt5EN35QGysdVGF1EYRQkggFgjAqm2ziwjC7pXXYPfKA6a8Okx5VZjyqjDlVWHKq8KUV4UprwpTXhWmvCpMeVWY8qow5VVhyqsiLL9utrmTiEvPiDw9BxDOpLzhQE1KKbIOpSUeyc2N2XbDP9DT27vyaWAgABARqCVEBWalFZU6UmrDzrf2nt7elY7uD4uEIhVVFBw7agM4W3kpHsSXtoZnWthpTdongyuHD+YX8LK+bqG8ujph8fPgNutG0+p0+g1xA6sQC8As4AhvmxrgerurK5ASbxufmJ3di7E6sfZxaikuLIzBSL97IsfvAL5QurwYUYGIo7LqdLvHhNU6ATQDl4Hzqzsb/g9hFHgPJG+iSVtJPlAIODG8AGp/AjMuXH9nvj29AAAAAElFTkSuQmCC",
            "width":47,
            "height":47,
            "border":{"l":8,"r":8,"t":8,"b":8}
        },
        "img_button":{
            "texture":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAUCAYAAAAdmmTCAAAAAXNSR0IArs4c6QAAAQtJREFUSEvtlyEShDAMRVOHQCKRHIFD9CgcAskROAQS2QMgOEBlJQKBQCBw7Hx2ysDCsqzYbmGIKTNkyPshTVNGRMQ5H7CeyYQQjIVhOKRpeiZuKsuShBA0widJQlmWLQQ4jrMpqO97evfuFxlAvFdTSlFd10/4OI4pz/PRB2CmAY+InovYhAe467pHvmXcp+u6MSZErOBRQ7aCA3oXHmXjeZ61AlDj2qSU65q3GR6Z19m/4U3uWp11rIvMR1FERVFYXfM3vMlSmce6ZuYxHth+SOm/0DTN+oTFIWXzeAB4gMOuM5jpVjnfICbH3r0m8HEk9n2fqqr6VyP5Km7btpM/w1MQBKe7Biql2ANsyBIW+VOdCQAAAABJRU5ErkJggg==",
            "width":47,
            "height":20,
            "border":{"l":8,"r":8,"t":8,"b":8}
        }
    },

    "children":[
        {
            "name":"win_1",
            "comment":"这是一个显示窗口的例子，窗口上有一个按钮和一个武将头像",
            "type":"image",
            "size":{"x":400, "y":250},
            "position":{"x":0,"y":0},
            "touchmask":true,
            "filltype":"sliced",
            "texture":"ui:img_panel",
            "active":true,
            "children":[
                {
                    "name":"text_msg",
                    "type":"text",
                    "size":{"x":380, "y":230},
                    "position":{"x":0,"y":0},
                    "text":"就快要爆炸",
                    "fontsize":24,
                    "halign":-1,
                    "valign":-1,
                    "active":true
                },
                {
                    "name":"btn_ok",
                    "type":"image",
                    "size":{"x":128, "y":32},
                    "position":{"x":0,"y":-100},
                    "touchmask":true,
                    "filltype":"sliced",
                    "texture":"ui:img_button",
                    "active":true,
                    "children":[
                        {
                            "name":"text_button",
                            "type":"text",
                            "size":{"x":128, "y":32},
                            "position":{"x":0,"y":0},
                            "text":"确定",
                            "fontsize":24,
                            "halign":0,
                            "valign":0,
                            "active":true
                        }
                    ]
                }
            ]
        }

    ]
}

    自定义UI节点定义

    自定义UI由根节点和孩子挂件组成。当然，孩子挂件还可以有孩子挂件。 通常，一个剧本里只有一个自定义UI根节点。具体自定义的UI窗口全部放在此根节点之下即可。 

    根节点
|---窗口1背景框
    |---窗口1图片1
    |---窗口1图片2
    |---窗口1按钮1
|---窗口2背景框
    |---窗口2文字1
    |---窗口1文字2
    ....
....

    ....

    根节点

    {
    app:"com.zlmcd.sanlite2",   // 数据应用范围。！！！请不要修改！！！。
    ver:1,                      // 数据版本。！！！请不要修改！！！。
    name:"my_ui",               // 根节点名字。用以从脚本中定位访问。
    res："...",                 // 本根节点下所有使用到的第三方图片资源数据合集。
    children:[],                // 孩子节点列表。用于存放各种自定义窗口的挂件。
}

    图片挂件

    {
    name:"win_1",                   // 挂件名字。用以从脚本中定位访问。
    type:"image",                   // 挂件类型。image表示该挂件为图片。
    size:{"x":400, "y":250},        // 挂件尺寸。
    position:{"x":0,"y":0},         // 挂件位置。
    touchmask:true,                 // 挂件是否可接收点击事件。
    filltype:"sliced",              // 挂件的显示类型
                                    // single:直接显示图片。
                                    // sliced:9宫格图片。
    texture:"ui:img_panel",         // 图片id
    active:true,                    // 是否显示
    children:[],                    // 孩子节点列表。用于存放本窗口中的其他部件，例如文字或者其他小图片。
}

    文字挂件

    {
    name:"text_msg",                // 挂件名字。用以从脚本中定位访问。
    type:"text",                    // 挂件类型。image表示该挂件为图片。
    size:{"x":64, "y":32},          // 挂件尺寸。文字挂件背景半透明黑框的大小。
    position:{"x":0,"y":0},         // 挂件位置。
    color:"#ff0000",                // 文字颜色。html风格的颜色显示。#号+RGB颜色格式。
    text:"你好~",                   // 文字默认内容。
                                    // 支持富文本标签让文字不同部分显示不同颜色。例如:你好，我是<color=0xff00ffff>鱼怪</color>，欢迎下载！ 
                                    // 富文本方式通常不和color字段混用。

    fontsize:24,                    // 字体大小
    halign:-1,                      // 水平方向对齐方式
                                    // -1:左对齐
                                    // 0:居中对齐
                                    // 1:右对齐
    valign:-1,                      // 垂直方向对齐方式
                                    // -1:上对齐
                                    // 0:居中对齐
                                    // 1:下对齐
    active:true,                    // 是否显示
    children:[],                    // 孩子节点列表。用于存放本窗口中的其他部件，例如文字或者其他小图片。
}

    如何在脚本中访问

    加载自定义UI

    UI.LoadWidget("my_custom_ui.json");

    修改属性

    var win = UI.GetWidget("my_ui/win_1");      // 查询获取名叫my_ui下的win_1挂件。
win.active = true;                          // 显示该挂件
win.active = false;                         // 关闭该挂件

var msg = UI.GetWidget("my_ui/win_1/text_msg");         // 查询获取my_ui下win_1下text_msg的文字挂件。
msg.text = "oh’baby";                                   // 修改文字挂件内容

    处理点击事件

    var btn_ok = UI.GetWidget("my_ui/win_1/btn_ok");
btn_ok.OnClick=()=>{
    console.log("btn_ok按钮被点击！");
};

    其他

    坐标系

    与Unity3D的ugui坐标系一致。采用笛卡尔坐标系。 至下而上变大，从左至右变大。 屏幕中心为原点(0,0)

    屏幕安全区域

    TODO

    九宫格图片

    使用九宫格图片显示技术，可以让UI不会因为“拉伸”而变形。原理如下： 九宫格图片 (图片引用来至：https://www.shuzhiduo.com/A/Vx5MBYRpdN/)

    添加自己的图片做面板

    先将图片转换成base64格式的字符串 图片转base64编码字符串网站
    然后参考res中的现有数据，让你的图片添加进根节点res中。