猫史档案馆

const FullBar = 66.7;
const Img = {
    'item_background': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzBfMTY4OTY3NzM5MzM1Ml8xZjIxNzk4ZQ.png',
    'redbarcenter': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjAzMzI3XzcwZmZkYjVj.png',
    'redbarleft': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjA5MzAwXzgwOWU2YWM4.png',
    'redbarright': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjA3MjMzX2Y5OTI4OGU0.png',
    'yellowbarcenter': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjEzM喵2X2YwOTRmYWJl.png',
    'yellowbarleft': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjIxMDA5XzgwNzE1NzM5.png',
    'yellowbarright': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjE2ODU4XzVhOTE4YjY4.png',
    'bluebarcenter': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjI1NDczXzM3NzI1NTRm.png',
    'bluebarleft': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjM0ODI0XzExYWU3Yzcz.png',
    'bluebarright': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjMxMTUxX2VkNTkxMTIz.png',
    'greenbarcenter': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjM4MDIyXzM4Yzc3Yzhh.png',
    'greenbarleft': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjQ0NTY2X2Q2ZDNlZDg1.png',
    'greenbarright': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU2MjQxMzEyXzM4NTRlNTQz.png',
    'blackbarcenter': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU5MDI0NTg3XzY0MGI5M2Yy.png',
    'blackbarleft': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU5MDI5NTExXzg3ODU3YWVj.png',
    'blackbarright': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzU5MDI3MzU4XzM1ODI0Zjk3.png',
    'whitebarcenter': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzY3NTUxNTQ5X2Y0OGFjZDM1.png',
    'whitebarleft': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzY3NTcxMjczXzk4OWU0NGRk.png',
    'whitebarright': 'https://cdn-community.codemao.cn/47/community/d2ViXzMwMDFfNjIzNTg3XzU1MjMxNF8xNjg5NzY3NTYzOTU4XzE1NWI2ODM4.png',
}
function initGui(entity){
    entity.data = [
        {type: gui.ElementTypes.Image,src: Img['blackbarcenter'],percentHeight: 100,percentWidth: 500,x: -20,y: 20,id: 'bg1-1'},
        {type: gui.ElementTypes.Image,src: Img['blackbarleft'],percentHeight: 100,percentWidth: 500,x: -30,y: 20,id: 'bg1-2'},
        {type: gui.ElementTypes.Image,src: Img['blackbarright'],percentHeight: 100,percentWidth: 500,x: 180,y: 20,id: 'bg1-3'},
        {type: gui.ElementTypes.Image,src: Img['whitebarcenter'],percentHeight: 100,percentWidth: 500,x: -20,y: 20,id: 'bar0-1'},
        {type: gui.ElementTypes.Image,src: Img['whitebarleft'],percentHeight: 100,percentWidth: 500,x: -30,y: 20,id: 'bar0-2'},
        {type: gui.ElementTypes.Image,src: Img['whitebarright'],percentHeight: 100,percentWidth: 500,x: 180,y: 20,id: 'bar0-3'},
        {type: gui.ElementTypes.Image,src: Img['greenbarcenter'],percentHeight: 100,percentWidth: 500,x: -20,y: 20,id: 'bar1-1'},
        {type: gui.ElementTypes.Image,src: Img['greenbarleft'],percentHeight: 100,percentWidth: 500,x: -30,y: 20,id: 'bar1-2'},
        {type: gui.ElementTypes.Image,src: Img['greenbarright'],percentHeight: 100,percentWidth: 500,x: 180,y: 20,id: 'bar1-3'},
        {type: gui.ElementTypes.Label,height: 50,x: 100,percentWidth: 100,color: '#ffffff',fontSize: 10,id: "hp"},
    ]
    entity.hurtAnimation = 100;
    gui.init(entity,{
        'panel': {
            display: true,
            data: gui.xmlElement({
                type: gui.ElementTypes.Dialog,
                width: 300,
                percentHeight: 100,
                top: 60,
                right: 20,
                children: entity.data,
                id: 'panel',
            }),
        },
    })
}//初始执行的
function updateGui(e){
        const ratioHp = e.hp / e.maxHp;
        const percentHp = ratioHp * 100;
        if(e.hurtAnimation > percentHp){
            e.hurtAnimation -= 2;
            gui.setAttribute(e,'#hp','color','#ff5555');
        }else{
            gui.setAttribute(e,'#hp','color','#ffffff');
        }
        if(e.hurtAnimation < percentHp){
            e.hurtAnimation = percentHp;
        }
        gui.setAttribute(e,'#hp','text',`${Math.ceil(e.hp)}/${parseInt(e.maxHp)}`);
        if(e.hp){
            const color = e.hp >= e.maxHp * 0.25? 'green':'red';
            gui.setAttribute(e,'#bar1-1','src',Img[color + 'barcenter']);
            gui.setAttribute(e,'#bar1-2','src',Img[color + 'barleft']);
            gui.setAttribute(e,'#bar1-3','src',Img[color + 'barright']);
        }else{
            gui.setAttribute(e,'#bar1-1','src','');
            gui.setAttribute(e,'#bar1-2','src','');
            gui.setAttribute(e,'#bar1-3','src','');
        }
        if(e.hurtAnimation){
            gui.setAttribute(e,'#bar0-1','src',Img['whitebarcenter']);
            gui.setAttribute(e,'#bar0-2','src',Img['whitebarleft']);
            gui.setAttribute(e,'#bar0-3','src',Img['whitebarright']);
        }else{
            gui.setAttribute(e,'#bar0-1','src','');
            gui.setAttribute(e,'#bar0-2','src','');
            gui.setAttribute(e,'#bar0-3','src','');
        }
        gui.setAttribute(e,'#bar0-1','percentWidth',FullBar * e.hurtAnimation * 0.01);
        gui.setAttribute(e,'#bar1-1','percentWidth',FullBar * ratioHp);
        gui.setAttribute(e,'#bar0-3','x',e.hurtAnimation * 2 - 20);
        gui.setAttribute(e,'#bar1-3','x',ratioHp * 200 - 20);
}//每帧执行的

从我一堆代码里抄出来的（）

没测试过（）

可能bug（）

gui.ElementTypes