HumanBreak/public/project/plugin/fiveLayer.js

///<reference path="../../../src/types/core.d.ts" />
export {};

// 创建新图层
function createCanvas(name, zIndex) {
    if (!name) return;
    var canvas = document.createElement('canvas');
    canvas.id = name;
    canvas.className = 'gameCanvas';
    // 编辑器模式下设置zIndex会导致加入的图层覆盖优先级过高
    if (main.mode != 'editor') canvas.style.zIndex = zIndex || 0;
    // 将图层插入进游戏内容
    document.getElementById('gameDraw').appendChild(canvas);
    var ctx = canvas.getContext('2d');
    core.canvas[name] = ctx;

    return canvas;
}

var bg2Canvas = createCanvas('bg2', 20);
var fg2Canvas = createCanvas('fg2', 63);
// 大地图适配
core.bigmap.canvas = ['bg2', 'fg2', 'bg', 'event', 'event2', 'fg', 'damage'];
core.initStatus.bg2maps = {};
core.initStatus.fg2maps = {};

if (main.mode == 'editor') {
    /*插入编辑器的图层 不做此步新增图层无法在编辑器显示*/
    // 编辑器图层覆盖优先级 eui > efg > fg(前景层) > event2(48*32图块的事件层) > event(事件层) > bg(背景层)
    // 背景层2(bg2) 插入事件层(event)之前(即bg与event之间)
    document
        .getElementById('mapEdit')
        .insertBefore(bg2Canvas, document.getElementById('event'));
    // 前景层2(fg2) 插入编辑器前景(efg)之前(即fg之后)
    document
        .getElementById('mapEdit')
        .insertBefore(fg2Canvas, document.getElementById('ebm'));
    // 原本有三个图层 从4开始添加
    var num = 4;
    // 新增图层存入editor.dom中
    editor.dom.bg2c = core.canvas.bg2.canvas;
    editor.dom.bg2Ctx = core.canvas.bg2;
    editor.dom.fg2c = core.canvas.fg2.canvas;
    editor.dom.fg2Ctx = core.canvas.fg2;
    editor.dom.maps.push('bg2map', 'fg2map');
    editor.dom.canvas.push('bg2', 'fg2');

    // 创建编辑器上的按钮
    var createCanvasBtn = name => {
        // 电脑端创建按钮
        var input = document.createElement('input');
        // layerMod4/layerMod5
        var id = 'layerMod' + num++;
        // bg2map/fg2map
        var value = name + 'map';
        input.type = 'radio';
        input.name = 'layerMod';
        input.id = id;
        input.value = value;
        editor.dom[id] = input;
        input.onchange = () => {
            editor.uifunctions.setLayerMod(value);
        };
        return input;
    };

    var createCanvasBtn_mobile = name => {
        // 手机端往选择列表中添加子选项
        var input = document.createElement('option');
        var id = 'layerMod' + num++;
        var value = name + 'map';
        input.name = 'layerMod';
        input.value = value;
        editor.dom[id] = input;
        return input;
    };
    if (!editor.isMobile) {
        var input = createCanvasBtn('bg2');
        var input2 = createCanvasBtn('fg2');
        // 获取事件层及其父节点
        var child = document.getElementById('layerMod'),
            parent = child.parentNode;
        // 背景层2插入事件层前
        parent.insertBefore(input, child);
        // 不能直接更改背景层2的innerText 所以创建文本节点
        var txt = document.createTextNode('背2');
        // 插入事件层前(即新插入的背景层2前)
        parent.insertBefore(txt, child);
        // 向最后插入前景层2(即插入前景层后)
        parent.appendChild(input2);
        var txt2 = document.createTextNode('前2');
        parent.appendChild(txt2);
    } else {
        var input = createCanvasBtn_mobile('bg2');
        var input2 = createCanvasBtn_mobile('fg2');
        // 手机端因为是选项 所以可以直接改innerText
        input.innerText = '背景2';
        input2.innerText = '前景2';
        var parent = document.getElementById('layerMod');
        parent.insertBefore(input, parent.children[1]);
        parent.appendChild(input2);
    }
}
core.maps._loadFloor_doNotCopy = function () {
    return [
        'firstArrive',
        'eachArrive',
        'blocks',
        'parallelDo',
        'map',
        'bgmap',
        'fgmap',
        'bg2map',
        'fg2map',
        'events',
        'changeFloor',
        'afterBattle',
        'afterGetItem',
        'afterOpenDoor',
        'cannotMove'
    ];
};
////// 绘制背景和前景层 //////
core.maps._drawBg_draw = function (floorId, toDrawCtx, cacheCtx, config) {
    config.ctx = cacheCtx;
    core.maps._drawBg_drawBackground(floorId, config);
    // ------ 调整这两行的顺序来控制是先绘制贴图还是先绘制背景图块；后绘制的覆盖先绘制的。
    core.maps._drawFloorImages(
        floorId,
        config.ctx,
        'bg',
        null,
        null,
        config.onMap
    );
    core.maps._drawBgFgMap(floorId, 'bg', config);
    if (config.onMap) {
        core.drawImage(
            toDrawCtx,
            cacheCtx.canvas,
            core.bigmap.v2 ? -32 : 0,
            core.bigmap.v2 ? -32 : 0
        );
        core.clearMap('bg2');
        core.clearMap(cacheCtx);
    }
    core.maps._drawBgFgMap(floorId, 'bg2', config);
    if (config.onMap)
        core.drawImage(
            'bg2',
            cacheCtx.canvas,
            core.bigmap.v2 ? -32 : 0,
            core.bigmap.v2 ? -32 : 0
        );
    config.ctx = toDrawCtx;
};
core.maps._drawFg_draw = function (floorId, toDrawCtx, cacheCtx, config) {
    config.ctx = cacheCtx;
    // ------ 调整这两行的顺序来控制是先绘制贴图还是先绘制前景图块；后绘制的覆盖先绘制的。
    core.maps._drawFloorImages(
        floorId,
        config.ctx,
        'fg',
        null,
        null,
        config.onMap
    );
    core.maps._drawBgFgMap(floorId, 'fg', config);
    if (config.onMap) {
        core.drawImage(
            toDrawCtx,
            cacheCtx.canvas,
            core.bigmap.v2 ? -32 : 0,
            core.bigmap.v2 ? -32 : 0
        );
        core.clearMap('fg2');
        core.clearMap(cacheCtx);
    }
    core.maps._drawBgFgMap(floorId, 'fg2', config);
    if (config.onMap)
        core.drawImage(
            'fg2',
            cacheCtx.canvas,
            core.bigmap.v2 ? -32 : 0,
            core.bigmap.v2 ? -32 : 0
        );
    config.ctx = toDrawCtx;
};
////// 移动判定 //////
core.maps._generateMovableArray_arrays = function (floorId) {
    return {
        bgArray: this.getBgMapArray(floorId),
        fgArray: this.getFgMapArray(floorId),
        eventArray: this.getMapArray(floorId),
        bg2Array: this._getBgFgMapArray('bg2', floorId),
        fg2Array: this._getBgFgMapArray('fg2', floorId)
    };
};