用户:
145a查看: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!");//按钮触发
}
});
阳光猫图片的插入:
{
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
评论