refactor: 重构 gl2 元素的部分内容

src/core/render/gl2.ts

@@ -184,62 +184,66 @@ export abstract class GL2<E extends EGL2Event = EGL2Event> extends RenderItem<
         this.init();
     }
 
+    setHD(hd: boolean): void {
+        super.setHD(hd);
+        this.sizeGL(this.width, this.height);
+    }
+
+    size(width: number, height: number): void {
+        super.size(width, height);
+        this.sizeGL(width, height);
+    }
+
+    private sizeGL(width: number, height: number) {
+        const ratio = this.highResolution ? devicePixelRatio : 1;
+        const scale = ratio * core.domStyle.scale;
+        this.canvas.width = width * scale;
+        this.canvas.height = height * scale;
+    }
+
     protected render(
         canvas: MotaOffscreenCanvas2D,
         transform: Transform
     ): void {
-        if (!GL2.support || !this.program) return;
+        if (!GL2.support || !this.program || !this.gl) return;
         const compile = this.program.requestCompile();
         if (compile) {
             this.gl.useProgram(this.program.program);
         }
 
         if (this.cacheDirty) {
-            this.drawScene(canvas, transform);
+            // 清空画布
+            const gl = this.gl;
+            gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clearDepth(1);
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+            this.drawScene(canvas, gl, this.program, transform);
             this.cacheDirty = false;
         }
 
         canvas.ctx.drawImage(this.canvas, 0, 0, this.width, this.height);
     }
 
-    drawScene(canvas: MotaOffscreenCanvas2D, transform: Transform) {
+    /**
-        const gl = this.gl;
+     * 渲染当前 gl2 画布
-        const program = this.program;
+     * @param canvas 渲染至的目标画布，注意系统会自动将 gl2 画布渲染至目标画布，不需要手动画到该画布上
-        if (!gl || !program) return;
+     * @param gl 当前正在渲染的 gl2 画布
-        const ready = program.ready();
+     * @param program 当前元素正在使用的着色器程序
-        if (!ready) return;
+     * @param transform 当前元素相对父元素的变换矩阵
-
+     */
-        // 清空画布
+    protected abstract drawScene(
-        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
-        gl.clearColor(0, 0, 0, 0);
-        gl.clearDepth(1);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-        const pre = this.preDraw(canvas, transform, gl, program);
-        if (!pre) {
-            this.postDraw(canvas, transform, gl, program);
-            return;
-        }
-
-        this.draw(gl, program);
-
-        this.postDraw(canvas, transform, gl, program);
-    }
-
-    protected abstract preDraw(
         canvas: MotaOffscreenCanvas2D,
-        transform: Transform,
         gl: WebGL2RenderingContext,
-        program: GL2Program
+        program: GL2Program,
-    ): boolean;
+        transform: Transform
-
-    protected abstract postDraw(
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform,
-        gl: WebGL2RenderingContext,
-        program: GL2Program
     ): void;
 
+    /**
+     * 执行顶点绘制
+     * @param gl 当前正在渲染的 gl2 画布
+     * @param program 当前元素正在使用的着色器程序
+     */
     draw(gl: WebGL2RenderingContext, program: GL2Program) {
         const indices = program.usingIndices;
         const param = program.getDrawParams(program.renderMode);
@@ -1675,7 +1679,7 @@ export class GL2Program extends EventEmitter<ShaderProgramEvent> {
     }
 
     /**
-     * 摧毁这个着色器程序，不要直接调用，请使用 {@link Shader.deleteProgram} 来删除一个着色器程序
+     * 摧毁这个着色器程序，不要直接调用，请使用 {@link GL2.deleteProgram} 来删除一个着色器程序
      */
     destroy() {
         this.clearProgram();

src/core/render/index.tsx

@@ -100,5 +100,3 @@ export * from './render';
 export * from './shader';
 export * from './sprite';
 export * from './transform';
-export * from './utils';
-export * from './event';

src/core/render/shader.ts

@@ -1,5 +1,4 @@
 import { MotaOffscreenCanvas2D } from '../fx/canvas2d';
-import { Transform } from './transform';
 import { EGL2Event, GL2, GL2Program, IGL2ProgramPrefix } from './gl2';
 
 const SHADER_PREFIX: IGL2ProgramPrefix = {
@@ -37,51 +36,26 @@ export interface EShaderEvent extends EGL2Event {}
 export class Shader<E extends EShaderEvent = EShaderEvent> extends GL2<
     EShaderEvent | E
 > {
-    setHD(hd: boolean): void {
+    protected drawScene(
-        super.setHD(hd);
-        this.sizeGL(this.width, this.height);
-    }
-
-    size(width: number, height: number): void {
-        super.size(width, height);
-        this.sizeGL(width, height);
-    }
-
-    private sizeGL(width: number, height: number) {
-        const ratio = this.highResolution ? devicePixelRatio : 1;
-        const scale = ratio * core.domStyle.scale;
-        this.canvas.width = width * scale;
-        this.canvas.height = height * scale;
-    }
-
-    protected preDraw(
         canvas: MotaOffscreenCanvas2D,
-        _transform: Transform,
+        gl: WebGL2RenderingContext,
-        _gl: WebGL2RenderingContext,
         program: GL2Program
-    ): boolean {
+    ): void {
-        if (!program.modified) return false;
+        if (!program.modified) return;
         const tex = program.getTexture('u_sampler');
-        if (!tex) return false;
+        if (!tex) return;
         const c = canvas.canvas;
         if (tex.width === c.width && tex.height === c.height) {
             tex.sub(c, 0, 0, c.width, c.height);
         } else {
             tex.set(c);
         }
-        return true;
+        this.draw(gl, program);
     }
-
-    protected postDraw(
-        _canvas: MotaOffscreenCanvas2D,
-        _transform: Transform,
-        _gl: WebGL2RenderingContext,
-        _program: GL2Program
-    ): void {}
 }
 
 export class ShaderProgram extends GL2Program {
-    protected readonly prefix: IGL2ProgramPrefix = SHADER_PREFIX;
+    protected override readonly prefix: IGL2ProgramPrefix = SHADER_PREFIX;
 
     constructor(gl2: GL2, vs?: string, fs?: string) {
         super(gl2, vs, fs);

src/module/weather/sun.ts

@@ -1,8 +1,4 @@
-import { Shader, ShaderProgram } from '@/core/render/shader';
 import { IWeather, WeatherController } from './weather';
-import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
-import { GL2Program } from '@/core/render/gl2';
-import { Transform } from '@/core/render/transform';
 
 export class SunWeather implements IWeather {
     static id: string = 'sun';
@@ -15,21 +11,3 @@ export class SunWeather implements IWeather {
 }
 
 WeatherController.register(SunWeather);
-
-class SunShader extends Shader {
-    protected preDraw(
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform,
-        gl: WebGL2RenderingContext,
-        program: GL2Program
-    ): boolean {
-        return true;
-    }
-
-    protected postDraw(
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform,
-        gl: WebGL2RenderingContext,
-        program: GL2Program
-    ): void {}
-}

src/plugin/boss/barrage.ts

@@ -103,7 +103,7 @@ export abstract class BarrageBoss extends EventEmitter<BarrageBossEvent> {
     }
 }
 
-export abstract class BossSprite<
+export class BossSprite<
     T extends BarrageBoss = BarrageBoss
 > extends RenderItem {
     /** 这个sprite所属的boss */
@@ -115,36 +115,16 @@ export abstract class BossSprite<
     }
 
     /**
-     * 在内置渲染函数执行前渲染内容，返回false会阻止内置渲染函数执行
+     * override 此方法来实现自定义渲染，默认会调用 {@link renderProjectiles} 方法。
-     * @param canvas 渲染至的画布
+     * 关于本方法，参考 {@link RenderItem.render}
-     * @param transform 渲染时的变换矩阵
+     * @param canvas 渲染至的目标画布
+     * @param transform 当前画布相对于父元素的变换矩阵
      */
-    protected abstract preDraw(
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform
-    ): boolean;
-
-    /**
-     * 在内置渲染函数执行后渲染内容，如果preDraw返回false，也会执行本函数
-     * @param canvas 渲染至的画布
-     * @param transform 渲染时的变换矩阵
-     */
-    protected abstract postDraw(
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform
-    ): void;
-
     protected render(
         canvas: MotaOffscreenCanvas2D,
         transform: Transform
     ): void {
-        const pre = this.preDraw(canvas, transform);
-        if (!pre) {
-            this.postDraw(canvas, transform);
-            return;
-        }
         this.renderProjectiles(canvas, transform);
-        this.postDraw(canvas, transform);
     }
 
     /**

src/plugin/boss/towerBoss.ts

@@ -5,7 +5,6 @@ import { MotaRenderer } from '@/core/render/render';
 import { LayerGroup } from '@/core/render/preset/layer';
 import { RenderItem } from '@/core/render/item';
 import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
-import { Transform } from '@/core/render/transform';
 import { Animation, hyper, power, sleep, Transition } from 'mutate-animate';
 import { Container } from '@/core/render/container';
 import {
@@ -22,7 +21,7 @@ import {
 import { IStateDamageable } from '@/game/state/interface';
 import { HeroRenderer } from '@/core/render/preset/hero';
 import { controller } from '@/module/weather';
-import { Pop, PopText } from '../fx/pop';
+import { Pop } from '../fx/pop';
 
 Mota.require('var', 'loading').once('coreInit', () => {
     const shader = new Shader();
@@ -67,7 +66,7 @@ export class TowerBoss extends BarrageBoss {
 
     readonly hitbox: Hitbox.Rect;
     readonly state: IStateDamageable;
-    readonly main: BossEffect;
+    readonly main: BossSprite;
 
     /** 血条显示元素 */
     private healthBar: HealthBar;
@@ -127,7 +126,7 @@ export class TowerBoss extends BarrageBoss {
 
         this.healthBar = new HealthBar('absolute');
         this.word = new Word('absolute');
-        this.main = new BossEffect('absolute', this);
+        this.main = new BossSprite('absolute', this);
         const render = MotaRenderer.get('render-main')!;
         this.group = render.getElementById('layer-main') as LayerGroup;
         this.mapDraw = render.getElementById('map-draw') as Container;
@@ -135,7 +134,9 @@ export class TowerBoss extends BarrageBoss {
 
         this.healthBar.init();
         this.word.init();
-        this.main.init();
+        this.main.size(480, 480);
+        this.main.setHD(true);
+        this.main.setZIndex(80);
 
         TowerBoss.effect.setTransform(this.group.camera);
 
@@ -201,7 +202,7 @@ export class TowerBoss extends BarrageBoss {
     /**
      * 用于全局检测，例如受伤、攻击boss等
      */
-    check(time: number) {
+    check(_time: number) {
         this.checkLose();
     }
 
@@ -298,7 +299,7 @@ export class TowerBoss extends BarrageBoss {
         this.stageProgress = 0;
     }
 
-    private aiPrologue(time: number, frame: number) {
+    private aiPrologue(time: number, _frame: number) {
         // stageProgress:
         // 0: 开始; 1: 开始血条动画
 
@@ -362,7 +363,7 @@ export class TowerBoss extends BarrageBoss {
         }
     }
 
-    private aiStage1(time: number, frame: number) {
+    private aiStage1(time: number, _frame: number) {
         // stageProgress:
         // 0: 开始; 1,2,3,4: 对应对话
 
@@ -394,7 +395,7 @@ export class TowerBoss extends BarrageBoss {
         }
     }
 
-    private aiDialogue1(time: number, frame: number) {
+    private aiDialogue1(time: number, _frame: number) {
         this.changeStage(TowerBossStage.Stage2, time);
         this.attackTime = 3;
         this.skill4Time = 5;
@@ -441,7 +442,7 @@ export class TowerBoss extends BarrageBoss {
         }
     }
 
-    private aiStage2(time: number, frame: number) {
+    private aiStage2(time: number, _frame: number) {
         const skill4Release = this.skill4Time * this.skill4Interval;
         const skill5Release = this.skill5Time * this.skill5Interval;
         const attack = this.attackTime * this.attackInterval;
@@ -496,7 +497,7 @@ export class TowerBoss extends BarrageBoss {
         core.setBlock(557, 7, n + 1);
     }
 
-    private aiDialogue2(time: number, frame: number) {
+    private aiDialogue2(time: number, _frame: number) {
         this.changeStage(TowerBossStage.Stage3, time);
         this.attackTime = 3;
         this.terrainClose(1);
@@ -539,7 +540,7 @@ export class TowerBoss extends BarrageBoss {
         }
     }
 
-    private aiStage3(time: number, frame: number) {
+    private aiStage3(time: number, _frame: number) {
         const skill6Release = this.skill6Time * this.skill6Interval;
         const skill7Release = this.skill7Time * this.skill7Interval;
         const attack = this.attackTime * this.attackInterval;
@@ -567,7 +568,7 @@ export class TowerBoss extends BarrageBoss {
         }
     }
 
-    private aiStage4(time: number, frame: number) {
+    private aiStage4(time: number, _frame: number) {
         const skill6Release = this.skill6Time * this.skill6Interval;
         const skill7Release = this.skill7Time * this.skill7Interval;
         const attack = this.attackTime * this.attackInterval;
@@ -595,7 +596,7 @@ export class TowerBoss extends BarrageBoss {
         }
     }
 
-    private aiStage5(time: number, frame: number) {
+    private aiStage5(time: number, _frame: number) {
         const skill6Release = this.skill6Time * this.skill6Interval;
         const skill7Release = this.skill7Time * this.skill7Interval;
         const attack = this.attackTime * this.attackInterval;
@@ -618,7 +619,7 @@ export class TowerBoss extends BarrageBoss {
         }
     }
 
-    private aiEnd(time: number, frame: number) {
+    private aiEnd(_time: number, _frame: number) {
         this.end();
         core.insertAction([
             { type: 'openDoor', loc: [13, 6], floorId: 'MT19' },
@@ -630,29 +631,6 @@ export class TowerBoss extends BarrageBoss {
     }
 }
 
-class BossEffect extends BossSprite<TowerBoss> {
-    /**
-     * 初始化
-     */
-    init() {
-        this.size(480, 480);
-        this.setHD(true);
-        this.setZIndex(80);
-    }
-
-    protected preDraw(
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform
-    ): boolean {
-        return true;
-    }
-
-    protected postDraw(
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform
-    ): void {}
-}
-
 interface TextRenderable {
     x: number;
     y: number;
@@ -747,10 +725,7 @@ class Word extends RenderItem {
         return res;
     }
 
-    protected render(
+    protected render(canvas: MotaOffscreenCanvas2D): void {
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform
-    ): void {
         const data = this.getTextRenerable();
         const ctx = canvas.ctx;
         ctx.font = '18px "normal"';
@@ -832,10 +807,7 @@ class HealthBar extends RenderItem {
         this.status = HealthBarStatus.End;
     }
 
-    protected render(
+    protected render(canvas: MotaOffscreenCanvas2D): void {
-        canvas: MotaOffscreenCanvas2D,
-        transform: Transform
-    ): void {
         const ctx = canvas.ctx;
 
         const hp = this.trans.value.hp;

src/plugin/chase/chase.ts

@@ -142,7 +142,7 @@ export class Chase extends EventEmitter<ChaseEvent> {
 
         this.emit('frame', nTime, fTime);
 
-        while (1) {
+        while (true) {
             const time = this.onTimeListener[0];
             if (!time) break;
             if (time.time <= nTime) {
@@ -157,7 +157,7 @@ export class Chase extends EventEmitter<ChaseEvent> {
         const floor = this.onFloorTimeListener[this.nowFloor];
         if (!floor) return;
 
-        while (1) {
+        while (true) {
             const time = floor[0];
             if (!time) break;
             if (time.time <= fTime) {