hilo游戏开发实现弹出层的两种方式

1.利用html-loader让hilo支持html（需求复杂，渲染内容多，用hilo实现复杂的可以用这种方法）
2.hilo方式（全程使用坐标，渲染内容简单比较推荐，毕竟是hilo框架自己的方法，速度上应该是更快的）

stage.js

import Hilo from 'Hilo';

import getDialog from './dialog'  //封装的公共弹层
import openHtmlCon from './dialog/openHtml/index'  //弹层（内容html文件）
import openHiloCon from './dialog/openHiloCon'   //弹层（内容为hilo写的）


export default class Stage extends Hilo.Stage {  
    constructor(props) {
        super(props);
        this.init(); 

        // enableDOMEvent 允许触发DOM事件， 即打开事件机制
        this.enableDOMEvent([
            Hilo.event.POINTER_START,
            Hilo.event.POINTER_MOVE,
            Hilo.event.POINTER_END,
            'click'
        ])
    }

    init() {
        new Hilo.Bitmap({    
            image: 'images/html1.png',  
            y: 100,   
            x: 100,  
            scaleX: 1,   
            scaleY: 1   
        }).addTo(this)
        .on(Hilo.event.POINTER_START, ()=>{  //点击弹出弹层
            openHtmlCon()
        })

        new Hilo.Bitmap({   
            image: 'images/hilo1.png',  
            y: 300,  
            x: 100,  
            scaleX: 1,   
            scaleY: 1   
        }).addTo(this)
        .on('click', ()=>{              //点击弹出弹层
            getDialog(openHiloCon).addTo(this);   
        })

        var ticker = new Hilo.Ticker(60);
        ticker.addTick(this);
        ticker.start();
    }
}

openHtml

index.js文件

import tpl from "./tpl.html"

module.exports = function () {

    return new dialog(tpl, {
        STYLE_NO_CLOSEBTN: true,
        theme: 'rule_dialog_content',
        fixed: true,
    }).promise.then(() => {
    })

}

tpl.html (内容自定义，html该怎么写就怎么写)

<div style="position: absolute;top:0;left:0;z-index:900;width:100%;height:100%;color:#fff;">
    <div class="shuoming" style="margin: 100px 30px;">
        <div style="margin-top: 20px;">
            <span style="padding:0;margin: 0;background: #fff;padding: 4px 8px;font-size: 14px;color:#000;display: inline-block;margin-bottom:8px;">活动规则</span>
            <p style="font-size: 14px;">游戏规则代替文字游戏规则代替文字游戏规则代替游戏规则代替文字游戏规则代替文字游戏规则代替文字游戏规则代替文字文字游戏规则代替文字</p>
        </div>
        <div style="margin-top: 20px;">
            <span style="padding:0;margin: 0;background: #fff;padding: 4px 8px;font-size: 14px;color:#000;display: inline-block;margin-bottom:8px;">奖项设置</span>
            <p style="font-size: 14px;">一等奖：xxx</p>
            <p style="font-size: 14px;">二等奖：xxx</p>
            <p style="font-size: 14px;">三等奖：xxx</p>
            <p>.................</p>
            <img src="images/html1.png" alt="一张图片">
        </div>
    </div>
    <div class="dialog-close-btn" dialog-close-value="cancel" style="position:absolute;top:50px;right:15px;"></div>
</div>

openHiloCon

index.js

import Hilo from 'Hilo';

export default class openHiloCon extends Hilo.Container {

    constructor(props) {
        super(props);
    
        // hilo遮罩层里面的具体内容，就是一张图片
        new Hilo.Bitmap({
            image: 'images/hilo1.png',   
            width: 200,
            height: 80,
            x: 100,
            y: 200
        }).addTo(this);


        // 利用文字写关闭按钮
        new Hilo.Text({
            font: "32px 微软雅黑",
            text: 'X',
            x: 350,
            y: 0,
            width: 100,
            height: 100,
            color: '#fff',
        }).addTo(this).on(Hilo.event.POINTER_START, () => {
            this.parent.fire('closeDialog')   //关闭弹层
        });

    }
};