猫史档案馆


[Box3 Arena]带按钮GUI模板

用户:145a145a查看:14 回复:22 评论:14 创建时间:2023-06-28T21:43:05


/**
 * 常用gui元素类型
 */
gui.ElementTypes = {
    Dialog:"dialog",
    Group:"group",
    Label:"label",
    Button:"button",
    Image:"image"
}
/**
 *常用16进制颜色
 */
gui.Colors = {
    Red:"#FF0000",
    Yellow:"#FFFF00",
    Green:"#008000",
    Blue:"#0000FF",
    Indigo:"#00FFFF",
    Black:"#000000",
    White:"#111111",
    Pink:"#FFC0CB",
    Purple:"#800080",
    Grey:"#888888"
}
/**
 *点击事件配置
 *@param {GameSelectorStirng} selector
 *@param {string} name
 *@returns {GUIBindTypes<T>}
 */
gui.onClickMessage = function(selector,name){
    return {action:"sendMessage",messageName:name,event:"click",selector:selector};
}
/**
 *将json转为xml元素(官方提供的试了半天不会用,所以自己写了一个)
 *@param {object} attributes
 *@returns {string}
 */
gui.xmlElement = function (attributes) {
    if(typeof attributes === "string")return attributes;
    let type = attributes.type;
    if (!Object.values(gui.ElementTypes).includes(type)) throw new Error(`不支持此元素类型: ${type}`);
    let children = attributes.children;
    delete attributes.type;
    delete attributes.children;
    let element = `<${type}`;
    Object.entries(attributes).forEach(([k, v]) => {
        element += ` ${k}="${v}"`;
    });
    element += ">";
    if (children) {
        children.forEach((label) => {
            element += gui.xmlElement(label);
        });
    }
    element += `</${type}>`
    return element;
};
//示例代码
console.clear();
world.onPlayerJoin(async ({ entity }) => {
    gui.init(entity, {//init gui
        "test": {
            display: true,
            bindings:[
                gui.onClickMessage("#say","press2")//设置点击事件
            ],
            data: gui.xmlElement({//xml
                type: gui.ElementTypes.Dialog,
                width: 300,
                percentHeight: 100,
                top: 60,
                right: 20,
                children: [{
                    type: gui.ElementTypes.Label,
                    text:"Hello,world!",
                    height: 100,
                    percentWidth: 100,
                    color: gui.Colors.Yellow,
                    fontSize: 30,
                    id: "l1"
                }, {
                    type: gui.ElementTypes.Button,
                    text: "广播消息",
                    color: gui.Colors.Indigo,
                    percentHeight: 5,
                    percentWidth: 80,
                    y: 150,
                    id: "say"
                }]
            }),
        },
    });
});
gui.onMessage(async({entity,name})=>{
    if(name === "press2"){
        world.say("Hello,world!");//按钮触发
    }
});


回复

上一页1 页 / 共 1下一页
ฅ智慧编程猫ฅ----(和平工作室室长)ฅ智慧编程猫ฅ----(和平工作室室长)

沙发~)

点赞0


评论


追梦ez追梦ez

e,抄(划掉)借鉴我的逝罢(

点赞0


评论


追梦ez追梦ez

哎?转xml(趁早上没人赶紧拿走(

点赞0


评论


FML饭米粒FML饭米粒

data里面自己写xml不香嘛)

点赞0


评论


伴只狗头伴只狗头

qp

点赞0


评论


DebugDynamoDebugDynamo

666

点赞0


评论


DebugDynamoDebugDynamo

图片也能插入???

点赞0


评论


小鹿UUyM小鹿UUyM

收藏

点赞0


评论


Star_Ink_sansStar_Ink_sans

!nb

点赞0


评论


Dao3的C6H8O7Dao3的C6H8O7

NB 想做MC

点赞0


评论


爽快的小电鼠bMMb爽快的小电鼠bMMb

直接写data``他不香吗()

点赞0


评论


Dao3的C6H8O7Dao3的C6H8O7

white,不是ffffff? 

点赞0


评论


KaNSFKaNSF

感谢,会力(我很好奇帖子里面的“官方提供的”到底是什么内容)

点赞1


评论


Star_Ink_sansStar_Ink_sans

所以图片怎么插入有点没搞懂)Image设置成什么)()

点赞0


评论


阳光猫阳光猫

图片的插入:

{
                        type: gui.ElementTypes.Image,
                        src: 'https://https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png',
                        color: gui.Colors.Indigo,
                        percentHeight: 100,
                        percentWidth: 100,
                        y: 100,
                        id: "img"
                    },

点赞2


评论


治愈绾兮治愈绾兮

收藏()

点赞0


评论


ZNS_哪吒ZNS_哪吒

收藏(

点赞0


评论


一吱笑喵一吱笑喵

收藏

点赞0


评论


yee剑走天下yee剑走天下

那怎么更新呢())(

点赞0


评论


tiger666250tiger666250

thx 帮大忙

点赞0


评论


伴只狗头伴只狗头

xml图片咋设置大小(试了layout)

点赞0


评论


145a145a

这个模版是早期研究gui的产物,及其落后,不推荐使用。

点赞1


评论