fix: 光环显示 & 删除无用内容

index.html

@@ -142,7 +142,7 @@
                 <canvas class='gameCanvas draw-canvas hide' id='event2'></canvas>
                 <canvas class='gameCanvas draw-canvas hide' id='fg'></canvas>
                 <canvas class='gameCanvas hide' id='damage'></canvas>
-                <canvas class='gameCanvas' id='animate'></canvas>
+                <canvas class='gameCanvas hide' id='animate'></canvas>
                 <canvas class='gameCanvas hide' id='curtain'></canvas>
                 <canvas class='gameCanvas' id='ui'></canvas>
                 <canvas class='gameCanvas' id='data'>此浏览器不支持HTML5</canvas>

src/core/fx/shadow.ts

@@ -121,6 +121,7 @@ hook.once('reset', () => {
     Mota.rewrite(core.control, 'loadData', 'add', () => {
         if (!main.replayChecking) {
             Shadow.update(true);
+            LayerShadowExtends.shadowList.forEach(v => v.update());
         }
     });
     // Mota.require('var', 'hook').on('changingFloor', (floorId) => {
@@ -141,7 +142,7 @@ hook.on('setBlock', () => {
 })
 hook.on('changingFloor', floorId => {        
     Shadow.clearBuffer();
-    Shadow.update();
+    Shadow.update(true);
     // setCanvasFilterByFloorId(floorId);
     LayerShadowExtends.shadowList.forEach(v => v.update());
 })

src/core/plugin.ts

@@ -17,8 +17,6 @@
 // import frag from '@/plugin/fx/frag';
 // import { Mota } from '.';
 
-import * as shadow from '@/plugin/shadow/shadow';
-import * as gameShadow from '@/plugin/shadow/gameShadow';
 import * as fly from '@/plugin/ui/fly';
 import * as chase from '@/plugin/chase/chase';
 import * as completion from '@/plugin/completion';
@@ -29,8 +27,6 @@ import * as gameCanvas from '@/plugin/fx/gameCanvas';
 import * as smooth from '@/plugin/fx/smoothView';
 import * as animateController from '@/plugin/animateController';
 
-Mota.Plugin.register('shadow_r', shadow, shadow.init);
-Mota.Plugin.register('gameShadow_r', gameShadow, gameShadow.init);
 Mota.Plugin.register('fly_r', fly);
 Mota.Plugin.register('chase_r', chase);
 Mota.Plugin.register('completion_r', completion, completion.init);

src/core/render/index.ts

@@ -8,6 +8,7 @@ import { LayerShadowExtends } from '../fx/shadow';
 import { LayerGroupFilter } from '@/plugin/fx/gameCanvas';
 import { LayerGroupAnimate } from './preset/animate';
 import { LayerGroupPortal } from '@/plugin/fx/portal';
+import { LayerGroupHalo } from '@/plugin/fx/halo';
 
 let main: MotaRenderer;
 
@@ -35,16 +36,19 @@ Mota.require('var', 'loading').once('loaded', () => {
     const filter = new LayerGroupFilter();
     const animate = new LayerGroupAnimate();
     const portal = new LayerGroupPortal();
+    const halo = new LayerGroupHalo();
     layer.extends(damage);
     layer.extends(detail);
     layer.extends(filter);
     layer.extends(portal);
+    layer.extends(halo);
     layer.getLayer('event')?.extends(hero);
     layer.getLayer('event')?.extends(door);
     layer.getLayer('event')?.extends(shadow);
     layer.extends(animate);
 
     render.appendChild(layer);
+    // console.log(render);
 });
 
 Mota.require('var', 'hook').on('reset', () => {

src/core/render/preset/damage.ts

@@ -56,6 +56,7 @@ export class FloorDamageExtends
     private create() {
         if (this.sprite) return;
         const sprite = new Damage();
+        sprite.setZIndex(80);
         this.group.appendChild(sprite);
         this.sprite = sprite;
     }

src/core/render/preset/layer.ts

@@ -83,6 +83,14 @@ export interface ILayerGroupRenderExtends {
 
 export type FloorLayer = 'bg' | 'bg2' | 'event' | 'fg' | 'fg2';
 
+const layerZIndex: Record<FloorLayer, number> = {
+    bg: 10,
+    bg2: 20,
+    event: 30,
+    fg: 40,
+    fg2: 50
+};
+
 export class LayerGroup extends Container implements IAnimateFrame {
     /** 地图组列表 */
     // static list: Set<LayerGroup> = new Set();
@@ -190,6 +198,7 @@ export class LayerGroup extends Container implements IAnimateFrame {
         const l = new Layer();
         l.layer = layer;
         if (l.layer) this.layers.set(l.layer, l);
+        l.setZIndex(layerZIndex[layer]);
         this.appendChild(l);
 
         for (const ex of this.extend.values()) {

src/plugin/fx/frag.ts

@@ -1,6 +1,8 @@
 import { Animation, linear, sleep } from 'mutate-animate';
 import { has } from '../utils';
 
+// todo: 移植到渲染树
+
 interface SplittedImage {
     canvas: HTMLCanvasElement;
     x: number;

src/plugin/fx/gameCanvas.ts

@@ -5,10 +5,6 @@ import {
     LayerGroup
 } from '@/core/render/preset/layer';
 
-export default function init() {
-    return {};
-}
-
 const filterMap: [FloorIds[], string][] = [];
 
 function getCanvasFilterByFloorId(floorId: FloorIds = core.status.floorId) {

src/plugin/fx/halo.ts

@@ -0,0 +1,106 @@
+import { logger } from '@/core/common/logger';
+import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
+import { mainSetting } from '@/core/main/setting';
+import { LayerGroupFloorBinder } from '@/core/render/preset/floor';
+import {
+    ILayerGroupRenderExtends,
+    LayerGroup
+} from '@/core/render/preset/layer';
+import { Sprite } from '@/core/render/sprite';
+import { Transform } from '@/core/render/transform';
+
+export class LayerGroupHalo implements ILayerGroupRenderExtends {
+    id: string = 'halo';
+
+    group!: LayerGroup;
+    binder!: LayerGroupFloorBinder;
+    halo!: Halo;
+
+    awake(group: LayerGroup): void {
+        this.group = group;
+        const ex = group.getExtends('floor-binder');
+        if (ex instanceof LayerGroupFloorBinder) {
+            this.binder = ex;
+            this.halo = new Halo();
+            this.halo.setHD(true);
+            this.halo.size(group.width, group.height);
+            this.halo.setZIndex(75);
+            this.halo.binder = ex;
+            group.appendChild(this.halo);
+        } else {
+            logger.error(
+                1401,
+                `Halo extends needs 'floor-binder' extends as dependency.`
+            );
+            group.removeExtends('halo');
+        }
+    }
+
+    onDestroy(group: LayerGroup): void {
+        this.halo?.destroy();
+    }
+}
+
+const haloColor: Record<number, string[]> = {
+    21: ['cyan'],
+    25: ['purple'],
+    26: ['blue'],
+    27: ['red'],
+    29: ['#3CFF49']
+};
+
+class Halo extends Sprite {
+    /** 单元格大小 */
+    cellSize: number = 32;
+    /** 当前楼层，用于获取有哪些光环 */
+    binder!: LayerGroupFloorBinder;
+
+    constructor() {
+        super('static', false);
+
+        this.setRenderFn((canvas, transform) => {
+            this.drawHalo(canvas, transform);
+        });
+    }
+
+    drawHalo(canvas: MotaOffscreenCanvas2D, transform: Transform) {
+        if (!mainSetting.getValue('screen.halo', true)) return;
+        const floorId = this.binder.getFloor();
+        if (!floorId) return;
+        const col = core.status.maps[floorId].enemy;
+        if (!col) return;
+        const [dx, dy] = col.translation;
+        const list = col.haloList.concat(
+            Object.keys(flags[`melt_${floorId}`] ?? {}).map(v => {
+                const [x, y] = v.split(',').map(v => parseInt(v));
+                return {
+                    type: 'square',
+                    data: {
+                        x: x + dx,
+                        y: y + dy,
+                        d: 3
+                    },
+                    special: 25
+                };
+            })
+        );
+        const { ctx } = canvas;
+        const cell = this.cellSize;
+        ctx.lineWidth = 1;
+        for (const halo of list) {
+            if (halo.type === 'square') {
+                const { x, y, d } = halo.data;
+                const [color, border] = haloColor[halo.special];
+                const r = Math.floor(d / 2);
+                const left = x - r;
+                const top = y - r;
+                ctx.fillStyle = color;
+                ctx.strokeStyle = border ?? color;
+                ctx.globalAlpha = 0.1;
+                ctx.fillRect(left * cell, top * cell, d * cell, d * cell);
+                ctx.globalAlpha = 0.6;
+                ctx.strokeRect(left * cell, top * cell, d * cell, d * cell);
+            }
+        }
+    }
+}

src/plugin/fx/itemDetail.ts

@@ -227,7 +227,7 @@ export class FloorItemDetail implements ILayerGroupRenderExtends {
             for (const [key, value] of Object.entries(diff)) {
                 if (!value) continue;
                 const color = FloorItemDetail.detailColor[key] ?? '#fff';
-                const text = value.toString();
+                const text = Math.floor(value).toString();
                 const renderable: DamageRenderable = {
                     x: x * this.sprite.cellSize + 2,
                     y: y * this.sprite.cellSize + 31 - n * 10,

src/plugin/fx/noise.ts

@@ -1,54 +0,0 @@
-export default function init() {
-    return { createGaussNoise };
-}
-
-interface GaussNoiseConfig {
-    /** 分辨率，最小为1，最大为画布长宽的最大值，默认为画布长宽最大值的一半，过大可能会卡顿 */
-    resolution?: number;
-    /** 画布宽度 */
-    width?: number;
-    /** 画布高度 */
-    height?: number;
-    /** 噪声灰度的均值，范围 0 ~ 255 */
-    expectation: number;
-    /** 噪声灰度方差 */
-    deviation: number;
-    /** 目标画布，如果不指定会创建一个新的 */
-    canvas?: HTMLCanvasElement;
-}
-
-/**
- * 创建一个高斯噪声
- * @param config 噪声选项
- * @returns 噪声画布
- */
-export function createGaussNoise(config: GaussNoiseConfig): HTMLCanvasElement {
-    const canvas = config.canvas ?? document.createElement('canvas');
-    canvas.width = config.width ?? core._PX_;
-    canvas.height = config.height ?? core._PY_;
-    canvas.style.imageRendering = 'pixelated';
-    const ctx = canvas.getContext('2d')!;
-    ctx.imageSmoothingEnabled = false;
-
-    const max = Math.max(canvas.width, canvas.height);
-    const resolution = Math.min(max, config.resolution ?? max / 2);
-
-    const step =
-        max === canvas.width
-            ? canvas.width / resolution
-            : canvas.height / resolution;
-
-    for (let x = 0; x < canvas.width; x += step) {
-        for (let y = 0; y < canvas.height; y += step) {
-            const random =
-                Math.sqrt(Math.log(Math.random()) * -2) *
-                Math.sin(2 * Math.PI * Math.random());
-            const gray = 255 - random * config.deviation - config.expectation;
-
-            ctx.fillStyle = `rgba(${gray},${gray},${gray},${gray / 255})`;
-            ctx.fillRect(x, y, step, step);
-        }
-    }
-
-    return canvas;
-}

src/plugin/game/enemy/checkblock.ts

@@ -1,5 +1,4 @@
 import { has, ofDir } from '@/plugin/game/utils';
-import { drawHalo } from '../fx/halo';
 
 export function init() {
     // 伤害弹出

src/plugin/game/fallback.ts

@@ -986,11 +986,8 @@ export function init() {
                 core.setHeroLoc('y', ny);
                 core.setHeroLoc('direction', action);
             }
-            if (!main.replayChecking) {
+
             setTimeout(core.replay, 100);
-            } else {
-                core.replay();
-            }
 
             return true;
         } else {

src/plugin/game/fx/halo.ts

@@ -1,69 +0,0 @@
-const haloColor: Record<number, string[]> = {
-    21: ['cyan'],
-    25: ['purple'],
-    26: ['blue'],
-    27: ['red'],
-    29: ['#3CFF49']
-};
-
-export function drawHalo(
-    ctx: CanvasRenderingContext2D,
-    onMap: boolean,
-    floorId: FloorIds
-) {
-    if (main.replayChecking) return;
-    const setting = Mota.require('var', 'mainSetting');
-    if (!setting.getValue('screen.halo', true)) return;
-    Mota.require('fn', 'ensureFloorDamage')(floorId);
-    const col = core.status.maps[floorId].enemy;
-    const [dx, dy] = col.translation;
-    const list = col.haloList.concat(
-        Object.keys(flags[`melt_${floorId}`] ?? {}).map(v => {
-            const [x, y] = v.split(',').map(v => parseInt(v));
-            return {
-                type: 'square',
-                data: {
-                    x: x + dx,
-                    y: y + dy,
-                    d: 3
-                },
-                special: 25
-            };
-        })
-    );
-    ctx.save();
-    for (const halo of list) {
-        if (halo.type === 'square') {
-            const { x, y, d } = halo.data;
-            const [color, border] = haloColor[halo.special];
-            const r = Math.floor(d / 2);
-            let left = x - r,
-                right = x + r,
-                top = y - r,
-                bottom = y + r;
-            if (onMap && core.bigmap.v2) {
-                left -= core.bigmap.posX;
-                top -= core.bigmap.posY;
-                right -= core.bigmap.posX;
-                bottom -= core.bigmap.posY;
-                if (
-                    right < -1 ||
-                    left > core._PX_ / 32 + 1 ||
-                    top < -1 ||
-                    bottom > core._PY_ / 32 + 1
-                ) {
-                    continue;
-                }
-            }
-            ctx.fillStyle = color;
-            ctx.strokeStyle = border ?? color;
-            ctx.lineWidth = 1;
-            ctx.globalAlpha = 0.1;
-            ctx.fillRect(left * 32, top * 32, d * 32, d * 32);
-            ctx.globalAlpha = 0.6;
-            ctx.strokeRect(left * 32, top * 32, d * 32, d * 32);
-        }
-    }
-
-    ctx.restore();
-}

src/plugin/game/fx/heroDetail.ts

@@ -1,34 +0,0 @@
-function drawHeroDetail(px: number, py: number) {
-    const setting = Mota.require('var', 'mainSetting');
-    if (!setting.getValue('screen.heroDetail', false)) return;
-    const { hp, atk, def } = core.status.hero;
-    const toDraw = {
-        atk: {
-            value: atk,
-            color: '#FF7A7A'
-        },
-        def: {
-            value: def,
-            color: '#00E6F1'
-        },
-        hp: {
-            value: hp,
-            color: '#F9FFFF0'
-        }
-    };
-
-    let i = 0;
-    for (const [key, value] of Object.entries(toDraw)) {
-        const ctx = core.canvas['hero'];
-        core.fillBoldText(
-            ctx,
-            core.formatBigNumber(value.value),
-            px,
-            py - 10 * i,
-            value.color
-        );
-        i++;
-    }
-}
-
-export { drawHeroDetail };

src/plugin/game/fx/heroFourFrames.ts

@@ -1,60 +0,0 @@
-// @ts-nocheck
-
-var heroMoving = timestamp => {
-    if (core.status.heroMoving <= 0) return;
-    if (timestamp - core.animateFrame.moveTime > core.values.moveSpeed) {
-        core.animateFrame.leftLeg++;
-        core.animateFrame.moveTime = timestamp;
-    }
-    core.drawHero(
-        ['stop', 'leftFoot', 'midFoot', 'rightFoot'][
-            core.animateFrame.leftLeg % 4
-        ],
-        4 * core.status.heroMoving
-    );
-};
-
-export function init() {
-    ['up', 'down', 'left', 'right'].forEach(one => {
-        // 指定中间帧动画
-        core.material.icons.hero[one].midFoot = 2;
-    });
-
-    core.registerAnimationFrame('heroMoving', true, heroMoving);
-
-    core.events._eventMoveHero_moving = function (step, moveSteps) {
-        var curr = moveSteps[0];
-        var direction = curr[0],
-            x = core.getHeroLoc('x'),
-            y = core.getHeroLoc('y');
-        // ------ 前进/后退
-        var o = direction == 'backward' ? -1 : 1;
-        if (direction == 'forward' || direction == 'backward')
-            direction = core.getHeroLoc('direction');
-        var faceDirection = direction;
-        if (direction == 'leftup' || direction == 'leftdown')
-            faceDirection = 'left';
-        if (direction == 'rightup' || direction == 'rightdown')
-            faceDirection = 'right';
-        core.setHeroLoc('direction', direction);
-        if (curr[1] <= 0) {
-            core.setHeroLoc('direction', faceDirection);
-            moveSteps.shift();
-            return true;
-        }
-        if (step <= 4) core.drawHero('stop', 4 * o * step);
-        else if (step <= 8) core.drawHero('leftFoot', 4 * o * step);
-        else if (step <= 12) core.drawHero('midFoot', 4 * o * (step - 8));
-        else if (step <= 16) core.drawHero('rightFoot', 4 * o * (step - 8)); // if (step == 8) {
-        if (step == 8 || step == 16) {
-            core.setHeroLoc('x', x + o * core.utils.scan2[direction].x, true);
-            core.setHeroLoc('y', y + o * core.utils.scan2[direction].y, true);
-            core.updateFollowers();
-            curr[1]--;
-            if (curr[1] <= 0) moveSteps.shift();
-            core.setHeroLoc('direction', faceDirection);
-            return step == 16;
-        }
-        return false;
-    };
-}

src/plugin/game/fx/itemDetail.ts

@@ -27,118 +27,7 @@ export function init() {
 
         // floor.enemy.render(true);
 
-        getItemDetail(floorId, onMap); // 宝石血瓶详细信息
+        // getItemDetail(floorId, onMap); // 宝石血瓶详细信息
         // this.drawDamage(ctx, floorId);
     };
 }
-
-// 获取宝石信息 并绘制
-function getItemDetail(floorId: FloorIds, onMap: boolean) {
-    const setting = Mota.require('var', 'mainSetting');
-    if (!setting.getValue('screen.itemDetail')) return;
-    floorId ??= core.status.thisMap.floorId;
-    let diff: Record<string | symbol, number | undefined> = {};
-    const before = core.status.hero;
-    const hero = core.clone(core.status.hero);
-    const handler: ProxyHandler<any> = {
-        set(target, key, v) {
-            diff[key] = v - (target[key] || 0);
-            if (!diff[key]) diff[key] = void 0;
-            return true;
-        }
-    };
-    core.status.hero = new Proxy(hero, handler);
-
-    core.status.maps[floorId].blocks.forEach(function (block) {
-        if (block.event.cls !== 'items' || block.disable) return;
-        const x = block.x,
-            y = block.y;
-        // v2优化，只绘制范围内的部分
-        if (onMap && core.bigmap.v2) {
-            if (
-                x < core.bigmap.posX - core.bigmap.extend ||
-                x > core.bigmap.posX + core._PX_ + core.bigmap.extend ||
-                y < core.bigmap.posY - core.bigmap.extend ||
-                y > core.bigmap.posY + core._PY_ + core.bigmap.extend
-            ) {
-                return;
-            }
-        }
-        diff = {};
-        const id = block.event.id as AllIdsOf<'items'>;
-        const item = core.material.items[id];
-        if (item.cls === 'equips') {
-            // 装备也显示
-            const diff: Record<string, any> = core.clone(
-                item.equip.value ?? {}
-            );
-            const per = item.equip.percentage ?? {};
-            for (const name in per) {
-                diff[name + 'per'] =
-                    per[name as SelectKey<HeroStatus, number>].toString() + '%';
-            }
-            drawItemDetail(diff, x, y);
-            return;
-        }
-        // 跟数据统计原理一样 执行效果 前后比较
-        core.setFlag('__statistics__', true);
-        try {
-            eval(item.itemEffect!);
-        } catch (error) {}
-        drawItemDetail(diff, x, y);
-    });
-    core.status.hero = before;
-    window.hero = before;
-    window.flags = before.flags;
-}
-
-// 绘制
-function drawItemDetail(diff: any, x: number, y: number) {
-    const px = 32 * x + 2,
-        py = 32 * y + 31;
-    let content = '';
-    // 获得数据和颜色
-    let i = 0;
-    for (const name in diff) {
-        if (!diff[name]) continue;
-        let color = '#fff';
-
-        if (typeof diff[name] === 'number')
-            content = core.formatBigNumber(Math.round(diff[name]), true);
-        else content = diff[name];
-
-        switch (name) {
-            case 'atk':
-            case 'atkper':
-                color = '#FF7A7A';
-                break;
-            case 'def':
-            case 'defper':
-                color = '#00E6F1';
-                break;
-            case 'mdef':
-            case 'mdefper':
-                color = '#6EFF83';
-                break;
-            case 'hp':
-                color = '#A4FF00';
-                break;
-            case 'hpmax':
-            case 'hpmaxper':
-                color = '#F9FF00';
-                break;
-            case 'manaper':
-            case 'mana':
-                color = '#c66';
-                break;
-        }
-        // 绘制
-        core.status.damage.data.push({
-            text: content,
-            px: px,
-            py: py - 10 * i,
-            color: color as Color
-        });
-        i++;
-    }
-}

src/plugin/game/index.ts

@@ -1,11 +1,9 @@
 /* @__PURE__ */ import './dev/hotReload'; // 仅开发会用到
 import * as fiveLayer from './fiveLayer';
-import * as heroFourFrames from './fx/heroFourFrames';
 import * as itemDetail from './fx/itemDetail';
 import * as replay from './replay';
 import * as ui from './ui';
 import * as rewrite from './fx/rewrite';
-import * as halo from './fx/halo';
 import * as loopMap from './loopMap';
 import * as removeMap from './removeMap';
 import * as shop from './shop';
@@ -29,10 +27,8 @@ Mota.Plugin.register('chase_g', chase);
 Mota.Plugin.register('skill_g', skill);
 Mota.Plugin.register('towerBoss_g', towerBoss);
 Mota.Plugin.register('fiveLayer_g', fiveLayer, fiveLayer.init);
-Mota.Plugin.register('heroFourFrames_g', heroFourFrames, heroFourFrames.init);
 Mota.Plugin.register('rewrite_g', rewrite, rewrite.init);
 Mota.Plugin.register('itemDetail_g', itemDetail, itemDetail.init);
-Mota.Plugin.register('halo_g', halo);
 // Mota.Plugin.register('study_g', study);
 Mota.Plugin.register('remainEnemy_g', remainEnemy);
 Mota.Plugin.register('checkBlock_g', checkBlock, checkBlock.init);

src/plugin/layout/layout.ts

@@ -1,345 +0,0 @@
-import { has } from '../utils';
-
-type CanvasStyle = string | CanvasPattern | CanvasGradient;
-
-export class Layout {
-    /** 画布 */
-    canvas: HTMLCanvasElement;
-    /** 绘制上下文 */
-    ctx: CanvasRenderingContext2D;
-
-    static readonly CLEAR: number = 1;
-    static readonly MASK: number = 2;
-    static readonly IMAGE: number = 4;
-
-    static readonly FILL: number = 1;
-    static readonly STROKE: number = 2;
-
-    constructor(canvas: HTMLCanvasElement) {
-        this.canvas = canvas;
-        this.ctx = canvas.getContext('2d')!;
-    }
-
-    image(layout: Layout | CanvasImageSource | Path2D, type: number): this;
-    image(
-        layout: Layout | CanvasImageSource | Path2D,
-        type: number,
-        x: number,
-        y: number
-    ): this;
-    image(
-        layout: Layout | CanvasImageSource | Path2D,
-        type: number,
-        x: number,
-        y: number,
-        w: number,
-        h: number
-    ): this;
-    image(
-        layout: Layout | CanvasImageSource | Path2D,
-        type: number,
-        sx: number,
-        sy: number,
-        sw: number,
-        sh: number,
-        dx: number,
-        dy: number,
-        dw: number,
-        dh: number
-    ): this;
-    image(
-        layout: Layout | CanvasImageSource | Path2D,
-        type: number,
-        sx: number = 0,
-        sy: number = 0,
-        sw?: number,
-        sh?: number,
-        dx?: number,
-        dy?: number,
-        dw?: number,
-        dh?: number
-    ) {
-        const img = layout instanceof Layout ? layout.canvas : layout;
-        const fill = () => {
-            if (img instanceof Path2D) {
-                this.ctx.fill(img);
-            } else {
-                if (!has(sw)) {
-                    this.ctx.drawImage(img, sx, sy);
-                } else if (!has(dx)) {
-                    this.ctx.drawImage(img, sx, sy, sw, sh!);
-                } else {
-                    this.ctx.drawImage(img, sx, sy, sw, sh!, dx, dy!, dw!, dh!);
-                }
-            }
-        };
-        if (type & Layout.IMAGE) {
-            // 绘制图片
-            fill();
-        }
-        if (type & Layout.CLEAR) {
-            // 按照图片清除一个区域
-            this.ctx.save();
-            this.ctx.globalCompositeOperation = 'destination-out';
-            fill();
-            this.ctx.restore();
-        }
-        if (type & Layout.MASK) {
-            // 蒙版，只显示蒙版内的东西
-            this.ctx.save();
-            this.ctx.globalCompositeOperation = 'destination-in';
-            fill();
-            this.ctx.restore();
-        }
-        return this;
-    }
-
-    /**
-     * 擦除一个矩形
-     */
-    clear(x: number, y: number, w: number, h: number): this {
-        this.ctx.clearRect(x, y, w, h);
-        return this;
-    }
-
-    /**
-     * 绘制文字
-     * @param str 文字
-     * @param type 绘制类型，FILL表示填充，STROKE表示描边，FILL | STROKE 表示既填充又描边
-     * @param x 横坐标
-     * @param y 纵坐标
-     * @param maxWidth 最大宽度
-     */
-    text(
-        str: string,
-        type: number,
-        x: number,
-        y: number,
-        maxWidth?: number
-    ): this {
-        if (type & Layout.FILL) this.ctx.fillText(str, x, y, maxWidth);
-        if (type & Layout.STROKE) this.ctx.strokeText(str, x, y, maxWidth);
-        return this;
-    }
-
-    /**
-     * 根据路径进行绘制
-     * @param path 路径
-     * @param type 绘制类型
-     */
-    path(path: Path2D, type: number, rule?: CanvasFillRule): this {
-        if (type & Layout.FILL) this.ctx.fill(path, rule);
-        if (type & Layout.STROKE) this.ctx.stroke(path);
-        return this;
-    }
-
-    /**
-     * 保存画布状态
-     */
-    save(): this {
-        this.ctx.save();
-        return this;
-    }
-
-    /**
-     * 回退画布状态
-     */
-    restore(): this {
-        this.ctx.restore();
-        return this;
-    }
-
-    /**
-     * 设置填充样式
-     * @param style 样式
-     */
-    fillStyle(style: CanvasStyle): this {
-        this.ctx.fillStyle = style;
-        return this;
-    }
-
-    /**
-     * 设置描边样式
-     * @param style 样式
-     */
-    strokeStyle(style: CanvasStyle): this {
-        this.ctx.strokeStyle = style;
-        return this;
-    }
-
-    /**
-     * 设置文本对齐
-     * @param align 文本左右对齐方式
-     */
-    textAlign(align: CanvasTextAlign): this {
-        this.ctx.textAlign = align;
-        return this;
-    }
-
-    /**
-     * 设置文本基线
-     * @param align 文本基线，即文本上下对齐方式
-     */
-    textBaseline(align: CanvasTextBaseline): this {
-        this.ctx.textBaseline = align;
-        return this;
-    }
-
-    /**
-     * 设置滤镜
-     * @param filter 滤镜
-     */
-    filter(filter: string): this {
-        this.ctx.filter = filter;
-        return this;
-    }
-
-    /**
-     * 设置阴影信息
-     * @param shadow 阴影信息
-     */
-    shadow(shadow: Partial<CanvasShadowStyles>): this {
-        for (const [p, v] of Object.entries(shadow)) {
-            // @ts-ignore
-            this.ctx[p] = v;
-        }
-        return this;
-    }
-
-    /**
-     * 设置线宽（描边宽度，包括字体描边）
-     * @param width 宽度
-     */
-    lineWidth(width: number): this {
-        this.ctx.lineWidth = width;
-        return this;
-    }
-
-    /**
-     * 设置线尾样式
-     * @param cap 线尾样式
-     */
-    lineCap(cap: CanvasLineCap): this {
-        this.ctx.lineCap = cap;
-        return this;
-    }
-
-    /**
-     * 设置线段连接方式样式
-     * @param join 线段连接方式
-     */
-    lineJoin(join: CanvasLineJoin): this {
-        this.ctx.lineJoin = join;
-        return this;
-    }
-
-    /**
-     * 设置画布的字体
-     * @param font 字体
-     */
-    font(font: string): this {
-        this.ctx.font = font;
-        return this;
-    }
-
-    /**
-     * 设置画布之后绘制的不透明度
-     * @param alpha 不透明度
-     */
-    alpha(alpha: number): this {
-        this.ctx.globalAlpha = alpha;
-        return this;
-    }
-
-    /**
-     * 设置虚线样式
-     * @param dash 虚线样式
-     */
-    lineDash(dash: number[]): this {
-        this.ctx.setLineDash(dash);
-        return this;
-    }
-
-    /**
-     * 放缩画布
-     * @param x 横向放缩量
-     * @param y 纵向放缩量
-     */
-    scale(x: number, y: number): this {
-        this.ctx.scale(x, y);
-        return this;
-    }
-
-    /**
-     * 旋转画布
-     * @param rad 顺时针旋转的弧度数
-     */
-    rotate(rad: number): this {
-        this.ctx.rotate(rad);
-        return this;
-    }
-
-    /**
-     * 平移画布
-     * @param x 水平平移量
-     * @param y 竖直平移量
-     */
-    translate(x: number, y: number): this {
-        this.ctx.translate(x, y);
-        return this;
-    }
-
-    /**
-     * 重设变换矩阵
-     */
-    transform(): Layout;
-    /**
-     * 叠加变换矩阵（当前画布的矩阵乘以传入的矩阵）
-     * 矩阵说明：
-     * [a c e]
-     * [b d f]
-     * [0 0 0]
-     * @param a 水平缩放
-     * @param b 垂直倾斜
-     * @param c 水平倾斜
-     * @param d 垂直缩放
-     * @param e 水平移动
-     * @param f 垂直移动
-     */
-    transform(
-        a: number,
-        b: number,
-        c: number,
-        d: number,
-        e: number,
-        f: number
-    ): Layout;
-    transform(
-        a?: number,
-        b?: number,
-        c?: number,
-        d?: number,
-        e?: number,
-        f?: number
-    ) {
-        if (!has(a)) this.ctx.resetTransform();
-        else this.ctx.transform(a, b!, c!, d!, e!, f!);
-        return this;
-    }
-
-    /**
-     * 设置混合方式，像image的蒙版功能与擦除功能本质上也是通过设置混合方式实现的
-     * @param value 混合方式
-     */
-    composite(value: GlobalCompositeOperation): this {
-        this.ctx.globalCompositeOperation = value;
-        return this;
-    }
-
-    /**
-     * 删除这个布局
-     */
-    destroy() {
-        this.canvas.remove();
-    }
-}

src/plugin/layout/layoutGame.ts

@@ -1,255 +0,0 @@
-import { Layout } from './layout';
-
-export class LayoutGame extends Layout {
-    /** 画布id */
-    id: string;
-
-    constructor(
-        id: string,
-        x: number,
-        y: number,
-        w: number,
-        h: number,
-        z: number
-    ) {
-        const ctx = core.createCanvas(id, x, y, w, h, z);
-        super(ctx.canvas);
-        this.id = id;
-    }
-
-    image2(
-        layout: Layout | CanvasImageSource | Path2D | ImageIds,
-        type: number
-    ): LayoutGame;
-    image2(
-        layout: Layout | CanvasImageSource | Path2D | ImageIds,
-        type: number,
-        x: number,
-        y: number
-    ): LayoutGame;
-    image2(
-        layout: Layout | CanvasImageSource | Path2D | ImageIds,
-        type: number,
-        x: number,
-        y: number,
-        w: number,
-        h: number
-    ): LayoutGame;
-    image2(
-        layout: Layout | CanvasImageSource | Path2D | ImageIds,
-        type: number,
-        sx: number,
-        sy: number,
-        sw: number,
-        sh: number,
-        dx: number,
-        dy: number,
-        dw: number,
-        dh: number
-    ): LayoutGame;
-    image2(
-        layout: Layout | CanvasImageSource | Path2D | ImageIds,
-        type: number,
-        sx?: number,
-        sy?: number,
-        sw?: number,
-        sh?: number,
-        dx?: number,
-        dy?: number,
-        dw?: number,
-        dh?: number
-    ): this {
-        const img =
-            typeof layout === 'string'
-                ? core.material.images.images[layout]
-                : layout;
-
-        this.image(img, type, sx!, sy!, sw!, sh!, dx!, dy!, dw!, dh!);
-        return this;
-    }
-
-    /**
-     * 绘制一个图标
-     * @param id 图标id
-     * @param x 横坐标
-     * @param y 纵坐标
-     * @param w 宽度
-     * @param h 高度
-     * @param frame 绘制第几帧
-     */
-    icon(
-        id: AllIds,
-        x: number,
-        y: number,
-        w?: number,
-        h?: number,
-        frame?: number
-    ): this {
-        core.drawIcon(this.ctx, id, x, y, w, h, frame);
-        return this;
-    }
-
-    /**
-     * 绘制WindowSkin
-     * @param direction 指向箭头的方向
-     */
-    winskin(
-        background: any,
-        x: number,
-        y: number,
-        w: number,
-        h: number,
-        direction?: 'up' | 'down',
-        px?: number,
-        py?: number
-    ): this {
-        core.drawWindowSkin(
-            background,
-            this.ctx,
-            x,
-            y,
-            w,
-            h,
-            direction,
-            px,
-            py
-        );
-        return this;
-    }
-
-    /**
-     * 绘制一个箭头
-     * @param x1 起始点横坐标
-     * @param y1 起始点纵坐标
-     * @param x2 终止点横坐标
-     * @param y2 终止点纵坐标
-     */
-    arrow(x1: number, y1: number, x2: number, y2: number): this {
-        core.drawArrow(this.ctx, x1, y1, x2, y2);
-        return this;
-    }
-
-    /**
-     * 绘制线段
-     */
-    line(x1: number, y1: number, x2: number, y2: number): this {
-        this.ctx.beginPath();
-        this.ctx.moveTo(x1, y1);
-        this.ctx.lineTo(x2, y2);
-        this.ctx.stroke();
-        return this;
-    }
-
-    /**
-     * 绘制圆弧或扇形
-     * @param type 绘制类型
-     * @param start 起始弧度
-     * @param end 终止弧度
-     * @param anticlockwise 是否逆时针
-     */
-    arc(
-        type: number,
-        x: number,
-        y: number,
-        r: number,
-        start: number,
-        end: number,
-        anticlockwise: boolean = false
-    ): this {
-        this.ctx.beginPath();
-        this.ctx.arc(x, y, r, start, end, anticlockwise);
-        this.draw(type);
-        return this;
-    }
-
-    /**
-     * 绘制一个圆
-     * @param type 绘制类型
-     */
-    circle(type: number, x: number, y: number, r: number): this {
-        return this.arc(type, x, y, r, 0, Math.PI * 2);
-    }
-
-    /**
-     * 绘制椭圆
-     */
-    ellipse(
-        type: number,
-        x: number,
-        y: number,
-        a: number,
-        b: number,
-        rotation: number = 0,
-        start: number = 0,
-        end: number = Math.PI * 2,
-        anticlockwise: boolean = false
-    ): this {
-        this.ctx.beginPath();
-        this.ctx.ellipse(x, y, a, b, rotation, start, end, anticlockwise);
-        this.draw(type);
-        return this;
-    }
-
-    /**
-     * 绘制多边形
-     * @param type 绘制类型
-     * @param nodes 多边形节点
-     * @param close 是否闭合路径
-     */
-    polygon(type: number, nodes: LocArr[], close: boolean = true): this {
-        this.ctx.beginPath();
-        this.ctx.moveTo(nodes[0][0], nodes[0][1]);
-        for (let i = 1; i < nodes.length; i++) {
-            this.ctx.lineTo(nodes[i][0], nodes[i][1]);
-        }
-        if (close) this.ctx.closePath();
-        this.draw(type);
-        return this;
-    }
-
-    /**
-     * 绘制矩形
-     */
-    rect(type: number, x: number, y: number, w: number, h: number): this {
-        if (type & Layout.FILL) this.ctx.fillRect(x, y, w, h);
-        if (type & Layout.STROKE) this.ctx.strokeRect(x, y, w, h);
-        return this;
-    }
-
-    /**
-     * 绘制圆角矩形
-     */
-    roundRect(
-        type: number,
-        x: number,
-        y: number,
-        w: number,
-        h: number,
-        r: number
-    ) {
-        this.ctx.beginPath();
-        this.ctx.moveTo(x + r, y);
-        this.ctx.lineTo(x + w - r, y);
-        this.ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-        this.ctx.lineTo(x + w, y + h - r);
-        this.ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-        this.ctx.lineTo(x + r, y + h);
-        this.ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-        this.ctx.lineTo(x, y + r);
-        this.ctx.quadraticCurveTo(x, y, x + r, y);
-        this.ctx.closePath();
-        this.draw(type);
-    }
-
-    /**
-     * 删除这个布局
-     */
-    destroy() {
-        core.deleteCanvas(this.id);
-    }
-
-    private draw(type: number) {
-        if (type & Layout.FILL) this.ctx.fill();
-        if (type & Layout.STROKE) this.ctx.stroke();
-    }
-}

src/plugin/shadow/gameShadow.ts

@@ -1,243 +0,0 @@
-import { Polygon } from './polygon';
-import {
-    Light,
-    getAllLights,
-    initShadowCanvas,
-    refreshLight,
-    removeAllLights,
-    setBackground,
-    setBlur,
-    setLightList,
-    setShadowNodes
-} from './shadow';
-import { pColor } from '../utils';
-import { setCanvasFilterByFloorId } from '../fx/gameCanvas';
-
-export function init() {
-    // 勇士身上的光源
-    // Mota.rewrite(core.control, 'drawHero', 'add', () => {
-    //     if (core.getFlag('__heroOpacity__') !== 0) {
-    //         getAllLights().forEach(v => {
-    //             if (!v.followHero) return;
-    //             v._offset ??= { x: v.x, y: v.y };
-    //             v.x = core.status.heroCenter.px + v._offset.x;
-    //             v.y = core.status.heroCenter.py + v._offset.y;
-    //             refreshLight();
-    //         });
-    //     }
-    // });
-    // // 更新地形数据
-    // Mota.rewrite(core.maps, 'removeBlock', 'add', success => {
-    //     if (success && main.replayChecking) updateShadow(true);
-    //     return success;
-    // });
-    // Mota.rewrite(core.maps, 'setBlock', 'add', () => {
-    //     if (main.replayChecking) updateShadow(true);
-    // });
-    // Mota.rewrite(core.events, 'changingFloor', 'add', (_, floorId) => {
-    //     if (!main.replayChecking) {
-    //         updateShadow();
-    //         setCanvasFilterByFloorId(floorId);
-    //     }
-    // });
-    // // 初始化画布信息
-    // Mota.rewrite(core.ui, 'deleteAllCanvas', 'add', () => {
-    //     if (main.mode === 'play' && !main.replayChecking) initShadowCanvas();
-    // });
-}
-
-const shadowInfo: Partial<Record<FloorIds, Light[]>> = {
-    MT50: [
-        {
-            id: 'mt50_1',
-            x: 144,
-            y: 144,
-            decay: 20,
-            r: 150,
-            color: pColor('#e953'),
-            noShelter: true
-        },
-        {
-            id: 'mt50_2',
-            x: 336,
-            y: 144,
-            decay: 20,
-            r: 150,
-            color: pColor('#e953'),
-            noShelter: true
-        },
-        {
-            id: 'mt50_2',
-            x: 336,
-            y: 336,
-            decay: 20,
-            r: 150,
-            color: pColor('#e953'),
-            noShelter: true
-        },
-        {
-            id: 'mt50_2',
-            x: 144,
-            y: 336,
-            decay: 20,
-            r: 150,
-            color: pColor('#e953'),
-            noShelter: true
-        }
-    ],
-    MT52: [
-        {
-            id: 'mt51_1',
-            x: 13 * 32 + 16,
-            y: 6 * 32 + 16,
-            decay: 20,
-            r: 250,
-            color: pColor('#e953')
-        },
-        {
-            id: 'mt51_2',
-            x: 1 * 32 + 16,
-            y: 13 * 32 + 16,
-            decay: 20,
-            r: 350,
-            color: pColor('#e953')
-        }
-    ]
-};
-const backgroundInfo: Partial<Record<FloorIds, Color>> = {
-    MT50: pColor('#0006'),
-    MT51: pColor('#0004'),
-    MT52: pColor('#0004')
-};
-const blurInfo: Partial<Record<FloorIds, number>> = {};
-const immersionInfo: Partial<Record<FloorIds, number>> = {};
-const shadowCache: Partial<Record<FloorIds, Polygon[]>> = {};
-
-let calMapShadow = true;
-
-Mota.require('var', 'loading').once('coreInit', () => {
-    core.floorIds.slice(61).forEach(v => {
-        shadowInfo[v] ??= [];
-        shadowInfo[v]?.push({
-            id: `${v}_hero`,
-            x: 0,
-            y: 0,
-            decay: 50,
-            r: 300,
-            color: 'transparent',
-            followHero: true
-        });
-        core.floors[v].map.forEach((arr, y) => {
-            arr.forEach((num, x) => {
-                if (num === 103) {
-                    shadowInfo[v]?.push({
-                        id: `${v}_${x}_${y}`,
-                        x: x * 32 + 16,
-                        y: y * 32 + 16,
-                        decay: 20,
-                        r: 350,
-                        color: pColor('#e953')
-                    });
-                }
-            });
-        });
-    });
-});
-
-export function updateShadow(nocache: boolean = false) {
-    // todo: 需要优化，优化成bfs
-    const floor = core.status.floorId;
-    if (!shadowInfo[floor] || !backgroundInfo[floor]) {
-        removeAllLights();
-        setShadowNodes([]);
-        setBackground('transparent');
-        return;
-    }
-    const f = core.status.thisMap;
-    const w = f.width;
-    const h = f.height;
-    const nodes: Polygon[] = [];
-    if (calMapShadow) {
-        if (shadowCache[floor] && !nocache) {
-            setShadowNodes(shadowCache[floor]!);
-        } else {
-            core.extractBlocks();
-            const blocks = core.getMapBlocksObj();
-            core.status.maps[floor].blocks.forEach(v => {
-                if (
-                    !['terrains', 'autotile', 'tileset', 'animates'].includes(
-                        v.event.cls
-                    )
-                ) {
-                    return;
-                }
-
-                if (v.event.noPass) {
-                    const immerse = immersionInfo[floor] ?? 4;
-                    const x = v.x;
-                    const y = v.y;
-                    let left = x * 32 + immerse;
-                    let top = y * 32 + immerse;
-                    let right = left + 32 - immerse * 2;
-                    let bottom = top + 32 - immerse * 2;
-                    const l: LocString = `${x - 1},${y}`;
-                    const r: LocString = `${x + 1},${y}`;
-                    const t: LocString = `${x},${y - 1}`;
-                    const b: LocString = `${x},${y + 1}`;
-
-                    if (x === 0) left -= immerse * 2;
-                    if (x + 1 === w) right += immerse * 2;
-                    if (y === 0) top -= immerse * 2;
-                    if (y + 1 === h) bottom += immerse * 2;
-
-                    if (blocks[l] && blocks[l].event.noPass) {
-                        left -= immerse;
-                    }
-                    if (blocks[r] && blocks[r].event.noPass) {
-                        right += immerse;
-                    }
-                    if (blocks[t] && blocks[t].event.noPass) {
-                        top -= immerse;
-                    }
-                    if (blocks[b] && blocks[b].event.noPass) {
-                        bottom += immerse;
-                    }
-                    nodes.push(
-                        new Polygon([
-                            [left, top],
-                            [right, top],
-                            [right, bottom],
-                            [left, bottom]
-                        ])
-                    );
-                    return;
-                }
-            });
-            shadowCache[floor] = nodes;
-            setShadowNodes(nodes);
-        }
-    } else {
-        setShadowNodes([]);
-        setBlur(0);
-    }
-    setLightList(shadowInfo[floor]!);
-    setBackground(backgroundInfo[floor]!);
-    setBlur(blurInfo[floor] ?? 3);
-}
-
-/**
- * 清除某一层的墙壁缓存
- * @param floorId 楼层id
- */
-export function clearShadowCache(floorId: FloorIds) {
-    delete shadowCache[floorId];
-}
-
-/**
- * 设置是否不计算墙壁遮挡，对所有灯光有效
- * @param n 目标值
- */
-export function setCalShadow(n: boolean) {
-    calMapShadow = n;
-    updateShadow();
-}

src/plugin/shadow/polygon.ts

@@ -1,91 +0,0 @@
-export class Polygon {
-    /**
-     * 多边形的节点
-     */
-    nodes: LocArr[];
-
-    private cache: Record<string, LocArr[][]> = {};
-
-    static from(...polygons: LocArr[][]) {
-        return polygons.map(v => new Polygon(v));
-    }
-
-    constructor(nodes: LocArr[]) {
-        if (nodes.length < 3) {
-            throw new Error(`Nodes number delivered is less than 3!`);
-        }
-        this.nodes = nodes.map(v => [v[0] + 32, v[1] + 32]);
-    }
-
-    /**
-     * 获取一个点光源下的阴影
-     */
-    shadowArea(x: number, y: number, r: number): LocArr[][] {
-        const id = `${x},${y}`;
-        if (this.cache[id]) return this.cache[id];
-        const res: LocArr[][] = [];
-        const w = (core._PX_ ?? core.__PIXELS__) + 64;
-        const h = (core._PY_ ?? core.__PIXELS__) + 64;
-
-        const aspect = h / w;
-
-        const intersect = (nx: number, ny: number): LocArr => {
-            const k = (ny - y) / (nx - x);
-            if (k > aspect || k < -aspect) {
-                if (ny < y) {
-                    const ix = x + y / k;
-                    return [2 * x - ix, 0];
-                } else {
-                    const ix = x + (h - y) / k;
-                    return [ix, h];
-                }
-            } else {
-                if (nx < x) {
-                    const iy = y + k * x;
-                    return [0, 2 * y - iy];
-                } else {
-                    const iy = y + k * (w - x);
-                    return [w, iy];
-                }
-            }
-        };
-        const l = this.nodes.length;
-        let now = intersect(...this.nodes[0]);
-        for (let i = 0; i < l; i++) {
-            const next = (i + 1) % l;
-            const nextInter = intersect(...this.nodes[next]);
-            const start = [this.nodes[i], now];
-            const end = [nextInter, this.nodes[next]];
-            let path: LocArr[];
-            if (
-                (now[0] === 0 && nextInter[1] === 0) ||
-                (now[1] === 0 && nextInter[0] === 0)
-            ) {
-                path = [...start, [0, 0], ...end];
-            } else if (
-                (now[0] === 0 && nextInter[1] === h) ||
-                (now[1] === h && nextInter[0] === 0)
-            ) {
-                path = [...start, [0, h], ...end];
-            } else if (
-                (now[0] === w && nextInter[1] === 0) ||
-                (now[1] === 0 && nextInter[0] === w)
-            ) {
-                path = [...start, [w, 0], ...end];
-            } else if (
-                (now[0] === w && nextInter[1] === h) ||
-                (now[1] === h && nextInter[0] === w)
-            ) {
-                path = [...start, [w, h], ...end];
-            } else {
-                path = [...start, ...end];
-            }
-            res.push(path);
-            now = nextInter;
-        }
-
-        this.cache[id] = res;
-
-        return res;
-    }
-}

src/plugin/shadow/shadow.ts

@@ -1,468 +0,0 @@
-import {
-    Animation,
-    linear,
-    PathFn,
-    TimingFn,
-    Transition
-} from 'mutate-animate';
-import { has } from '../utils';
-import { Polygon } from './polygon';
-
-interface TransitionInfo {
-    time: number;
-    mode: TimingFn;
-}
-
-export interface Light {
-    id: string;
-    x: number;
-    y: number;
-    r: number;
-    /** 衰减开始半径 */
-    decay: number;
-    /** 颜色，每个值的范围0.0~1.0 */
-    color: Color;
-    /** 是否可以被物体遮挡 */
-    noShelter?: boolean;
-    /** 是否跟随勇士 */
-    followHero?: boolean;
-    /** 正在动画的属性 */
-    _animating?: Record<string, boolean>;
-    /** 执行渐变的属性 */
-    _transition?: Record<string, TransitionInfo>;
-    /** 表示是否是代理，只有设置渐变后才会变为true */
-    _isProxy?: boolean;
-    /** 跟随勇士的时候的偏移量 */
-    _offset?: Loc;
-}
-
-export function init() {
-    core.registerAnimationFrame('shadow', true, () => {
-        if (!needRefresh) return;
-        drawShadow();
-    });
-}
-
-let canvas: HTMLCanvasElement;
-let ctx: CanvasRenderingContext2D;
-let lights: Light[] = [];
-let needRefresh = false;
-let shadowNodes: Polygon[] = [];
-let background: Color;
-let blur = 3;
-const temp1 = document.createElement('canvas');
-const temp2 = document.createElement('canvas');
-const temp3 = document.createElement('canvas');
-const ct1 = temp1.getContext('2d')!;
-const ct2 = temp2.getContext('2d')!;
-const ct3 = temp3.getContext('2d')!;
-
-const animationList: Record<string, Animation> = {};
-const transitionList: Record<string, Transition> = {};
-
-/**
- * 初始化阴影画布
- */
-export function initShadowCanvas() {
-    const w = core._PX_ ?? core.__PIXELS__;
-    const h = core._PY_ ?? core.__PIXELS__;
-    ctx = core.createCanvas('shadow', -32, -32, w + 64, h + 64, 55);
-    canvas = ctx.canvas;
-
-    const s = core.domStyle.scale * devicePixelRatio;
-    temp1.width = (w + 64) * s;
-    temp1.height = (h + 64) * s;
-    temp2.width = (w + 64) * s;
-    temp2.height = (h + 64) * s;
-    temp3.width = (w + 64) * s;
-    temp3.height = (h + 64) * s;
-    ct1.scale(s, s);
-    ct2.scale(s, s);
-    ct3.scale(s, s);
-    canvas.style.filter = `blur(${blur}px)`;
-}
-
-/**
- * 添加一个光源
- * @param info 光源信息
- */
-export function addLight(info: Light) {
-    lights.push(info);
-    needRefresh = true;
-}
-
-/**
- * 移除一个光源
- * @param id 光源id
- */
-export function removeLight(id: string) {
-    const index = lights.findIndex(v => v.id === id);
-    if (index === -1) {
-        throw new ReferenceError(`You are going to remove nonexistent light!`);
-    }
-    lights.splice(index, 1);
-    needRefresh = true;
-}
-
-/**
- * 设置一个光源的信息
- * @param id 光源id
- * @param info 光源信息
- */
-export function setLight(id: string, info: Partial<Light>) {
-    if (has(info.id)) delete info.id;
-    const light = lights.find(v => v.id === id);
-    if (!light) {
-        throw new ReferenceError(`You are going to set nonexistent light!`);
-    }
-    for (const [p, v] of Object.entries(info)) {
-        light[p as SelectKey<Light, number>] = v as number;
-    }
-    needRefresh = true;
-}
-
-/**
- * 设置当前的光源列表
- * @param list 光源列表
- */
-export function setLightList(list: Light[]) {
-    lights = list;
-    needRefresh = true;
-}
-
-/**
- * 去除所有的光源
- */
-export function removeAllLights() {
-    lights = [];
-    needRefresh = true;
-}
-
-/**
- * 获取一个灯光
- * @param id 灯光id
- */
-export function getLight(id: string) {
-    return lights.find(v => v.id === id);
-}
-
-/**
- * 获取所有灯光
- */
-export function getAllLights() {
-    return lights;
-}
-
-/**
- * 设置背景色
- * @param color 背景色
- */
-export function setBackground(color: Color) {
-    background = color;
-    needRefresh = true;
-}
-
-/**
- * 刷新灯光信息并重绘
- */
-export function refreshLight() {
-    needRefresh = true;
-}
-
-/**
- * 动画改变一个属性的值
- * @param id 灯光id
- * @param key 动画属性，x,y,r,decay，颜色请使用animateLightColor（下个版本会加）
- * @param n 目标值
- * @param time 动画时间
- * @param mode 动画方式，渐变函数，高级动画提供了大量内置的渐变函数
- * @param relative 相对方式，是绝对还是相对
- */
-export function animateLight<K extends Exclude<keyof Light, 'id'>>(
-    id: string,
-    key: K,
-    n: Light[K],
-    time: number = 1000,
-    mode: TimingFn = linear(),
-    relative: boolean = false
-) {
-    const light = getLight(id);
-    if (!has(light)) {
-        throw new ReferenceError(`You are going to animate nonexistent light`);
-    }
-    if (typeof n !== 'number') {
-        light[key] = n;
-    }
-    const ani = animationList[id] ?? (animationList[id] = new Animation());
-    if (typeof ani.value[key] !== 'number') {
-        ani.register(key, light[key] as number);
-    } else {
-        ani.time(0)
-            .mode(linear())
-            .absolute()
-            .apply(key, light[key] as number);
-    }
-    ani.time(time)
-        .mode(mode)
-        [relative ? 'relative' : 'absolute']()
-        .apply(key, n as number);
-    const start = Date.now();
-    const fn = () => {
-        if (Date.now() - start > time + 50) {
-            ani.ticker.remove(fn);
-            light._animating![key] = false;
-        }
-        needRefresh = true;
-        light[key as SelectKey<Light, number>] = ani.value[key];
-    };
-    ani.ticker.add(fn);
-    light._animating ??= {};
-    light._animating[key] = true;
-}
-
-/**
- * 把一个属性设置为渐变模式
- * @param id 灯光id
- * @param key 渐变的属性
- * @param time 渐变时长
- * @param mode 渐变方式，渐变函数，高级动画提供了大量内置的渐变函数
- */
-export function transitionLight<K extends Exclude<keyof Light, 'id'>>(
-    id: string,
-    key: K,
-    time: number = 1000,
-    mode: TimingFn = linear()
-) {
-    const index = lights.findIndex(v => v.id === id);
-    if (index === -1) {
-        throw new ReferenceError(`You are going to transite nonexistent light`);
-    }
-    const light = lights[index];
-    if (typeof light[key] !== 'number') return;
-    light._transition ??= {};
-    light._transition[key] = { time, mode };
-    const tran = transitionList[id] ?? (transitionList[id] = new Transition());
-    tran.value[key] = light[key] as number;
-    if (!light._isProxy) {
-        const handler: ProxyHandler<Light> = {
-            set(t, p, v) {
-                if (typeof p === 'symbol') return false;
-                const start = Date.now();
-                if (
-                    !light._transition![p] ||
-                    light._animating?.[key] ||
-                    typeof v !== 'number'
-                ) {
-                    t[p as SelectKey<Light, number>] = v;
-                    return true;
-                }
-                // @ts-ignore
-                t[p] = light[p];
-                const info = light._transition![p];
-                tran.mode(info.mode).time(info.time);
-                const fn = () => {
-                    if (Date.now() - start > info.time + 50) {
-                        tran.ticker.remove(fn);
-                    }
-                    needRefresh = true;
-                    t[p as SelectKey<Light, number>] = tran.value[key];
-                };
-                tran.ticker.add(fn);
-                tran.transition(p, v);
-                return true;
-            }
-        };
-        lights[index] = new Proxy(light, handler);
-    }
-}
-
-/**
- * 移动一个灯光
- * @param id 灯光id
- * @param x 目标横坐标
- * @param y 目标纵坐标
- * @param time 移动时间
- * @param mode 移动方式，渐变函数
- * @param relative 相对模式，相对还是绝对
- */
-export function moveLight(
-    id: string,
-    x: number,
-    y: number,
-    time: number = 1000,
-    mode: TimingFn = linear(),
-    relative: boolean = false
-) {
-    animateLight(id, 'x', x, time, mode, relative);
-    animateLight(id, 'y', y, time, mode, relative);
-}
-
-/**
- * 以一个路径移动光源
- * @param id 灯光id
- * @param time 移动时长
- * @param path 移动路径
- * @param mode 移动方式，渐变函数，表示移动的完成度
- * @param relative 相对模式，相对还是绝对
- */
-export function moveLightAs(
-    id: string,
-    time: number,
-    path: PathFn,
-    mode: TimingFn = linear(),
-    relative: boolean = true
-) {
-    const light = getLight(id);
-    if (!has(light)) {
-        throw new ReferenceError(`You are going to animate nonexistent light`);
-    }
-    const ani = animationList[id] ?? (animationList[id] = new Animation());
-    ani.mode(linear()).time(0).move(light.x, light.y);
-    ani.time(time)
-        .mode(mode)
-        [relative ? 'relative' : 'absolute']()
-        .moveAs(path);
-    const start = Date.now();
-    const fn = () => {
-        if (Date.now() - start > time + 50) {
-            ani.ticker.remove(fn);
-            light._animating!.x = false;
-            light._animating!.y = false;
-        }
-        needRefresh = true;
-        light.x = ani.x;
-        light.y = ani.y;
-    };
-    ani.ticker.add(fn);
-    light._animating ??= {};
-    light._animating.x = true;
-    light._animating.y = true;
-}
-
-export function animateLightColor(
-    id: string,
-    target: Color,
-    time: number = 1000,
-    mode: TimingFn = linear()
-) {
-    // todo
-}
-
-/**
- * 根据坐标数组设置物体节点
- * @param nodes 坐标数组
- */
-export function setShadowNodes(nodes: LocArr[][]): void;
-/**
- * 根据多边形数组设置物体节点
- * @param nodes 多边形数组
- */
-export function setShadowNodes(nodes: Polygon[]): void;
-export function setShadowNodes(nodes: LocArr[][] | Polygon[]) {
-    if (nodes.length === 0) {
-        shadowNodes = [];
-        needRefresh = true;
-    }
-    if (nodes[0] instanceof Polygon) shadowNodes = nodes as Polygon[];
-    else shadowNodes = Polygon.from(...(nodes as LocArr[][]));
-    needRefresh = true;
-}
-
-/**
- * 根据坐标数组添加物体节点
- * @param polygons 坐标数组
- */
-export function addPolygon(...polygons: LocArr[][]): void;
-/**
- * 根据多边形数组添加物体节点
- * @param polygons 多边形数组
- */
-export function addPolygon(...polygons: Polygon[]): void;
-export function addPolygon(...polygons: Polygon[] | LocArr[][]) {
-    if (polygons.length === 0) return;
-    if (polygons[0] instanceof Polygon)
-        shadowNodes.push(...(polygons as Polygon[]));
-    else shadowNodes.push(...Polygon.from(...(polygons as LocArr[][])));
-    needRefresh = true;
-}
-
-/**
- * 设置光源的虚化程度
- * @param n 虚化程度
- */
-export function setBlur(n: number) {
-    blur = n;
-    canvas.style.filter = `blur(${n}px)`;
-}
-
-/**
- * 绘制阴影
- */
-export function drawShadow() {
-    const w = (core._PX_ ?? core.__PIXELS__) + 64;
-    const h = (core._PY_ ?? core.__PIXELS__) + 64;
-    needRefresh = false;
-    ctx.clearRect(0, 0, w, h);
-    ct1.clearRect(0, 0, w, h);
-    ct2.clearRect(0, 0, w, h);
-    ct3.clearRect(0, 0, w, h);
-
-    const b = core.arrayToRGBA(background);
-    ctx.globalCompositeOperation = 'source-over';
-    ct3.globalCompositeOperation = 'source-over';
-
-    // 绘制阴影，一个光源一个光源地绘制，然后source-out获得光，然后把光叠加，再source-out获得最终阴影
-    for (let i = 0; i < lights.length; i++) {
-        const { x, y, r, decay, color, noShelter } = lights[i];
-        const rx = x + 32;
-        const ry = y + 32;
-        // 绘制阴影
-        ct1.clearRect(0, 0, w, h);
-        ct2.clearRect(0, 0, w, h);
-        if (!noShelter) {
-            for (const polygon of shadowNodes) {
-                const area = polygon.shadowArea(rx, ry, r);
-                area.forEach(v => {
-                    ct1.beginPath();
-                    ct1.moveTo(v[0][0], v[0][1]);
-                    for (let i = 1; i < v.length; i++) {
-                        ct1.lineTo(v[i][0], v[i][1]);
-                    }
-                    ct1.closePath();
-                    ct1.fillStyle = '#000';
-                    ct1.globalCompositeOperation = 'source-over';
-                    ct1.fill();
-                });
-            }
-        }
-        // 存入ct2，用于绘制真实阴影
-        ct2.globalCompositeOperation = 'source-over';
-        ct2.drawImage(temp1, 0, 0, w, h);
-        ct2.globalCompositeOperation = 'source-out';
-        const gra = ct2.createRadialGradient(rx, ry, decay, rx, ry, r);
-        gra.addColorStop(0, core.arrayToRGBA(color));
-        gra.addColorStop(1, 'transparent');
-        ct2.fillStyle = gra;
-        ct2.beginPath();
-        ct2.arc(rx, ry, r, 0, Math.PI * 2);
-        ct2.fill();
-        ctx.drawImage(temp2, 0, 0, w, h);
-        // 再绘制ct1的阴影，然后绘制到ct3叠加
-        ct1.globalCompositeOperation = 'source-out';
-        const gra2 = ct1.createRadialGradient(rx, ry, decay, rx, ry, r);
-        gra2.addColorStop(0, '#fff');
-        gra2.addColorStop(1, '#fff0');
-        ct1.beginPath();
-        ct1.arc(rx, ry, r, 0, Math.PI * 2);
-        ct1.fillStyle = gra2;
-        ct1.fill();
-        // 绘制到ct3上
-        ct3.drawImage(temp1, 0, 0, w, h);
-    }
-    // 绘制真实阴影
-    ct3.globalCompositeOperation = 'source-out';
-    ct3.fillStyle = b;
-    ct3.fillRect(0, 0, w, h);
-    ctx.globalCompositeOperation = 'destination-over';
-    ctx.drawImage(temp3, 0, 0, w, h);
-}