fix: 光影效果

src/core/render/gl.ts

@@ -0,0 +1,40 @@
+import { MotaOffscreenCanvas2D, MotaOffscreenCanvasGL2 } from '../fx/canvas2d';
+import { RenderItem } from './item';
+import { Transform } from './transform';
+
+type GL2RenderFunc = (
+    canvas: MotaOffscreenCanvasGL2,
+    transform: Transform
+) => void;
+
+export class GL2 extends RenderItem {
+    canvas: MotaOffscreenCanvasGL2 = new MotaOffscreenCanvasGL2();
+
+    /** 渲染函数 */
+    private renderFn: GL2RenderFunc = () => {};
+
+    protected render(
+        canvas: MotaOffscreenCanvas2D,
+        transform: Transform
+    ): void {
+        const gl = this.canvas.gl;
+        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+
+        gl.clearColor(0, 0, 0, 0);
+        gl.clearDepth(1);
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LEQUAL);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+        this.renderFn(this.canvas, transform);
+        canvas.ctx.drawImage(this.canvas.canvas, 0, 0, this.width, this.height);
+    }
+
+    /**
+     * 设置这个gl2元素的渲染函数
+     * @param fn 渲染函数
+     */
+    setRenderFn(fn: GL2RenderFunc) {
+        this.renderFn = fn;
+    }
+}

src/core/render/index.ts

@@ -4,6 +4,7 @@ import { LayerDoorAnimate, LayerGroupFloorBinder } from './preset/floor';
 import { HeroRenderer } from './preset/hero';
 import { LayerGroup, FloorLayer } from './preset/layer';
 import { MotaRenderer } from './render';
+import { LayerShadowExtends } from '../fx/shadow';
 
 let main: MotaRenderer;
 
@@ -27,10 +28,12 @@ Mota.require('var', 'loading').once('loaded', () => {
     const hero = new HeroRenderer();
     const detail = new FloorItemDetail();
     const door = new LayerDoorAnimate();
+    const shadow = new LayerShadowExtends();
     layer.extends(damage);
     layer.extends(detail);
     layer.getLayer('event')?.extends(hero);
     layer.getLayer('event')?.extends(door);
+    layer.getLayer('event')?.extends(shadow);
 
     render.appendChild(layer);
 });

src/core/render/preset/hero.ts

@@ -12,6 +12,7 @@ type HeroMovingStatus = 'stop' | 'moving' | 'moving-as';
 
 interface HeroRenderEvent {
     stepEnd: [];
+    moveTick: [x: number, y: number];
 }
 
 export class HeroRenderer
@@ -170,6 +171,7 @@ export class HeroRenderer
             this.renderable.x = rx;
             this.renderable.y = ry;
         }
+        this.emit('moveTick', this.renderable.x, this.renderable.y);
         this.renderable.animate = this.movingFrame;
         this.layer.update(this.layer);
     }
@@ -272,6 +274,7 @@ export class HeroRenderer
         if (!isNil(y)) {
             this.renderable.y = y;
         }
+        this.emit('moveTick', this.renderable.x, this.renderable.y);
         this.layer.update(this.layer);
     }
 
@@ -306,6 +309,7 @@ export class HeroRenderer
                             (a, b) => a.zIndex - b.zIndex
                         );
                     }
+                    this.emit('moveTick', this.renderable.x, this.renderable.y);
                     this.layer.update(this.layer);
                 },
                 time,
@@ -315,6 +319,7 @@ export class HeroRenderer
                     this.renderable.animate = 0;
                     this.renderable.x = x;
                     this.renderable.y = y;
+                    this.emit('moveTick', this.renderable.x, this.renderable.y);
                     this.layer.update(this.layer);
                     res();
                 }