feat: 楼层滤镜

index.html

@@ -136,14 +136,14 @@
             <div id="gameDraw">
                 <div id="gif"></div>
                 <div id="gif2"></div>
-                <canvas class='gameCanvas draw-canvas' id='bg'></canvas>
-                <canvas class='gameCanvas draw-canvas' id='event'></canvas>
-                <canvas class='gameCanvas draw-canvas' id='hero'></canvas>
-                <canvas class='gameCanvas draw-canvas' id='event2'></canvas>
-                <canvas class='gameCanvas draw-canvas' id='fg'></canvas>
-                <canvas class='gameCanvas' id='damage'></canvas>
+                <canvas class='gameCanvas draw-canvas hide' id='bg'></canvas>
+                <canvas class='gameCanvas draw-canvas hide' id='event'></canvas>
+                <canvas class='gameCanvas draw-canvas hide' id='hero'></canvas>
+                <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' id='curtain'></canvas>
+                <canvas class='gameCanvas hide' id='curtain'></canvas>
                 <canvas class='gameCanvas' id='ui'></canvas>
                 <canvas class='gameCanvas' id='data'>此浏览器不支持HTML5</canvas>
                 <div id="next"></div>

public/libs/control.js

@@ -1014,6 +1014,7 @@ control.prototype.tryMoveDirectly = function (destX, destY) {
 
 ////// 绘制勇士 //////
 control.prototype.drawHero = function (status, offset = 0, frame) {
+    return;
     if (!core.isPlaying() || !core.status.floorId || core.status.gameOver)
         return;
     var x = core.getHeroLoc('x'),
@@ -1488,6 +1489,7 @@ control.prototype._updateDamage_extraDamage = function (floorId, onMap) {
 
 ////// 重绘地图显伤 //////
 control.prototype.drawDamage = function (ctx, floorId = core.status.floorId) {
+    return;
     if (core.status.gameOver || !core.status.damage || main.mode != 'play')
         return;
     var onMap = false;

public/styles.css

@@ -615,9 +615,6 @@ p#name {
     }
 }
 
-#ui-editor {
-    z-index: 9999;
-    position: absolute;
-    overflow: visible;
-    height: 100%;
+.hide {
+    display: none;
 }

src/core/fx/shadow.ts

@@ -5,7 +5,6 @@ import {
     createProgram,
     isWebGL2Supported
 } from './webgl';
-import { setCanvasFilterByFloorId } from '@/plugin/fx/gameCanvas';
 import { ILayerRenderExtends, Layer } from '../render/preset/layer';
 import { HeroRenderer } from '../render/preset/hero';
 import { Sprite } from '../render/sprite';
@@ -81,14 +80,14 @@ hook.once('reset', () => {
         core.floorIds.slice(61, 70).concat(core.floorIds.slice(72, 81)).concat(core.floorIds.slice(85, 103)),
         103,
         { decay: 50, r: 300, color: [0.9333, 0.6, 0.333, 0.3] },
-        { background: [0, 0, 0, 0.26] },
+        { background: [0, 0, 0, 0.2] },
         { decay: 50, r: 250, color: [0, 0, 0, 0] }
     );
     addLightFromBlock(
         ['MT50', 'MT60', 'MT61', 'MT72', 'MT73', 'MT74', 'MT75'],
         103,
-        { decay: 20, r: 150, color: [0.9333, 0.6, 0.333, 0.4], noShelter: true },
-        { background: [0, 0, 0, 0.4] }
+        { decay: 20, r: 150, color: [0.9333, 0.6, 0.333, 0.3], noShelter: true },
+        { background: [0, 0, 0, 0.3] }
     );
     // Shadow.mount();
 
@@ -143,7 +142,7 @@ hook.on('setBlock', () => {
 hook.on('changingFloor', floorId => {        
     Shadow.clearBuffer();
     Shadow.update();
-    setCanvasFilterByFloorId(floorId);
+    // setCanvasFilterByFloorId(floorId);
     LayerShadowExtends.shadowList.forEach(v => v.update());
 })
 
@@ -1336,12 +1335,12 @@ export class LayerShadowExtends implements ILayerRenderExtends {
 
     awake(layer: Layer): void {
         const ex = layer.getExtends('floor-hero');
-        if (!ex) {
+        if (!(ex instanceof HeroRenderer)) {
             layer.removeExtends('shadow');
             logger.error(1101, `Shadow extends needs 'floor-hero' extends as dependency.`);
             return;
         }
-        this.hero = ex as HeroRenderer;
+        this.hero = ex;
         this.layer = layer;
         this.listen();
         LayerShadowExtends.shadowList.add(this);

src/core/render/index.ts

@@ -5,6 +5,7 @@ import { HeroRenderer } from './preset/hero';
 import { LayerGroup, FloorLayer } from './preset/layer';
 import { MotaRenderer } from './render';
 import { LayerShadowExtends } from '../fx/shadow';
+import { LayerGroupFilter } from '@/plugin/fx/gameCanvas';
 
 let main: MotaRenderer;
 
@@ -29,8 +30,10 @@ Mota.require('var', 'loading').once('loaded', () => {
     const detail = new FloorItemDetail();
     const door = new LayerDoorAnimate();
     const shadow = new LayerShadowExtends();
+    const filter = new LayerGroupFilter();
     layer.extends(damage);
     layer.extends(detail);
+    layer.extends(filter);
     layer.getLayer('event')?.extends(hero);
     layer.getLayer('event')?.extends(door);
     layer.getLayer('event')?.extends(shadow);

src/core/render/item.ts

@@ -228,8 +228,8 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
         const ay = -this.anchorY * this.height;
 
         canvas.ctx.save();
-        canvas.ctx.filter = this.filter;
         canvas.setAntiAliasing(this.antiAliasing);
+        if (this.enableCache) canvas.ctx.filter = this.filter;
         if (this.type === 'static') transformCanvas(canvas, tran);
         if (this.enableCache) {
             const { width, height, ctx } = this.cache;
@@ -264,7 +264,7 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
      * 设置本元素的滤镜
      * @param filter 滤镜
      */
-    seyFilter(filter: string) {
+    setFilter(filter: string) {
         this.filter = filter;
         this.update(this);
     }

src/core/render/preset/floor.ts

@@ -33,6 +33,7 @@ hook.on('changingFloor', floor => {
     // 考虑到楼层转换一般不会同时执行很多次，因此这里改为立刻更新
     LayerGroupFloorBinder.activedBinder.forEach(v => {
         if (v.bindThisFloor) v.updateBindData();
+        v.emit('floorChange', floor);
     });
     LayerFloorBinder.listenedBinder.forEach(v => {
         if (v.bindThisFloor) v.updateBindData();

src/core/render/preset/layer.ts

@@ -102,7 +102,7 @@ export class LayerGroup extends Container implements IAnimateFrame {
     private extend: Map<string, ILayerGroupRenderExtends> = new Map();
 
     constructor() {
-        super('static', false);
+        super('static');
 
         this.setHD(true);
         this.setAntiAliasing(false);

src/plugin/fx/gameCanvas.ts

@@ -1,37 +1,66 @@
-export default function init() {
-    return {
-        setGameCanvasFilter,
-        getCanvasFilterByFloorId,
-        setCanvasFilterByFloorId
-    };
-}
+import { logger } from '@/core/common/logger';
+import { LayerGroupFloorBinder } from '@/core/render/preset/floor';
+import {
+    ILayerGroupRenderExtends,
+    LayerGroup
+} from '@/core/render/preset/layer';
 
-export function setGameCanvasFilter(filter: string) {
-    ['bg', 'bg2', 'event', 'event2', 'fg', 'fg2', 'hero'].forEach(v => {
-        core.canvas[v].canvas.style.filter = filter;
-    });
+export default function init() {
+    return {};
 }
 
 const filterMap: [FloorIds[], string][] = [];
 
-export function getCanvasFilterByFloorId(
-    floorId: FloorIds = core.status.floorId
-) {
+function getCanvasFilterByFloorId(floorId: FloorIds = core.status.floorId) {
     return filterMap.find(v => v[0].includes(floorId))?.[1] ?? '';
 }
 
-export function setCanvasFilterByFloorId(
-    floorId: FloorIds = core.status.floorId
-) {
-    setGameCanvasFilter(getCanvasFilterByFloorId(floorId));
-}
-
 Mota.require('var', 'loading').once('coreInit', () => {
     filterMap.push(
         [['MT50', 'MT60', 'MT61'], 'brightness(80%)contrast(120%)'], // 童心佬的滤镜（
         [
             core.floorIds.slice(61, 70).concat(core.floorIds.slice(72)),
-            'brightness(90%)contrast(120%)'
+            'contrast(120%)'
         ] // 童心佬的滤镜（
     );
 });
+
+export class LayerGroupFilter implements ILayerGroupRenderExtends {
+    id: string = 'filter';
+
+    group!: LayerGroup;
+    binder!: LayerGroupFloorBinder;
+
+    setFilter(floorId: FloorIds) {
+        const filter = getCanvasFilterByFloorId(floorId);
+        this.group.setFilter(filter);
+        // console.log(filter);
+    }
+
+    private onFloorChange = (floor: FloorIds) => {
+        this.setFilter(floor);
+    };
+
+    private listen() {
+        this.binder.on('floorChange', this.onFloorChange);
+    }
+
+    awake(group: LayerGroup): void {
+        this.group = group;
+        const ex = group.getExtends('floor-binder');
+        if (ex instanceof LayerGroupFloorBinder) {
+            this.binder = ex;
+            this.listen();
+        } else {
+            logger.error(
+                1201,
+                `Floor-damage extends needs 'floor-binder' extends as dependency.`
+            );
+            group.removeExtends('floor-damage');
+        }
+    }
+
+    onDestroy(group: LayerGroup): void {
+        this.binder?.off('floorChange', this.onFloorChange);
+    }
+}

src/plugin/fx/itemDetail.ts

@@ -245,8 +245,6 @@ export class FloorItemDetail implements ILayerGroupRenderExtends {
     }
 
     awake(group: LayerGroup): void {
-        console.log(this);
-
         this.group = group;
 
         const binder = group.getExtends('floor-binder');