From 6f10ac3d81bdd3a9be6bbbc0826bb8c99568ed78 Mon Sep 17 00:00:00 2001 From: unanmed <1319491857@qq.com> Date: Wed, 29 Jan 2025 16:30:55 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=20gl2=20?= =?UTF-8?q?=E5=85=83=E7=B4=A0=E7=9A=84=E9=83=A8=E5=88=86=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/render/gl2.ts | 78 +++++++++++++++++++----------------- src/core/render/index.tsx | 2 - src/core/render/shader.ts | 40 ++++-------------- src/module/weather/sun.ts | 22 ---------- src/plugin/boss/barrage.ts | 30 +++----------- src/plugin/boss/towerBoss.ts | 64 +++++++++-------------------- src/plugin/chase/chase.ts | 4 +- 7 files changed, 73 insertions(+), 167 deletions(-) diff --git a/src/core/render/gl2.ts b/src/core/render/gl2.ts index 8a13dbf..9d9e2a0 100644 --- a/src/core/render/gl2.ts +++ b/src/core/render/gl2.ts @@ -184,62 +184,66 @@ export abstract class GL2 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; - const program = this.program; - if (!gl || !program) return; - const ready = program.ready(); - if (!ready) return; - - // 清空画布 - 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( + /** + * 渲染当前 gl2 画布 + * @param canvas 渲染至的目标画布，注意系统会自动将 gl2 画布渲染至目标画布，不需要手动画到该画布上 + * @param gl 当前正在渲染的 gl2 画布 + * @param program 当前元素正在使用的着色器程序 + * @param transform 当前元素相对父元素的变换矩阵 + */ + protected abstract drawScene( canvas: MotaOffscreenCanvas2D, - transform: Transform, gl: WebGL2RenderingContext, - program: GL2Program - ): boolean; - - protected abstract postDraw( - canvas: MotaOffscreenCanvas2D, - transform: Transform, - gl: WebGL2RenderingContext, - program: GL2Program + program: GL2Program, + transform: Transform ): 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 { } /** - * 摧毁这个着色器程序，不要直接调用，请使用 {@link Shader.deleteProgram} 来删除一个着色器程序 + * 摧毁这个着色器程序，不要直接调用，请使用 {@link GL2.deleteProgram} 来删除一个着色器程序 */ destroy() { this.clearProgram(); diff --git a/src/core/render/index.tsx b/src/core/render/index.tsx index 3e4123a..d6c6bf9 100644 --- a/src/core/render/index.tsx +++ b/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'; diff --git a/src/core/render/shader.ts b/src/core/render/shader.ts index 973109c..bc4c8f0 100644 --- a/src/core/render/shader.ts +++ b/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 extends GL2< EShaderEvent | E > { - 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 preDraw( + protected drawScene( canvas: MotaOffscreenCanvas2D, - _transform: Transform, - _gl: WebGL2RenderingContext, + gl: WebGL2RenderingContext, program: GL2Program - ): boolean { - if (!program.modified) return false; + ): void { + 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); diff --git a/src/module/weather/sun.ts b/src/module/weather/sun.ts index af5c7e8..da467d1 100644 --- a/src/module/weather/sun.ts +++ b/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 {} -} diff --git a/src/plugin/boss/barrage.ts b/src/plugin/boss/barrage.ts index 487bed5..c98b834 100644 --- a/src/plugin/boss/barrage.ts +++ b/src/plugin/boss/barrage.ts @@ -103,7 +103,7 @@ export abstract class BarrageBoss extends EventEmitter { } } -export abstract class BossSprite< +export class BossSprite< T extends BarrageBoss = BarrageBoss > extends RenderItem { /** 这个sprite所属的boss */ @@ -115,36 +115,16 @@ export abstract class BossSprite< } /** - * 在内置渲染函数执行前渲染内容，返回false会阻止内置渲染函数执行 - * @param canvas 渲染至的画布 - * @param transform 渲染时的变换矩阵 + * override 此方法来实现自定义渲染，默认会调用 {@link renderProjectiles} 方法。 + * 关于本方法，参考 {@link RenderItem.render} + * @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); } /** diff --git a/src/plugin/boss/towerBoss.ts b/src/plugin/boss/towerBoss.ts index d8b1de1..fb6d307 100644 --- a/src/plugin/boss/towerBoss.ts +++ b/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 { - /** - * 初始化 - */ - 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( - canvas: MotaOffscreenCanvas2D, - transform: Transform - ): void { + protected render(canvas: MotaOffscreenCanvas2D): 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( - canvas: MotaOffscreenCanvas2D, - transform: Transform - ): void { + protected render(canvas: MotaOffscreenCanvas2D): void { const ctx = canvas.ctx; const hp = this.trans.value.hp; diff --git a/src/plugin/chase/chase.ts b/src/plugin/chase/chase.ts index 63d103f..38e9906 100644 --- a/src/plugin/chase/chase.ts +++ b/src/plugin/chase/chase.ts @@ -142,7 +142,7 @@ export class Chase extends EventEmitter { 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 { const floor = this.onFloorTimeListener[this.nowFloor]; if (!floor) return; - while (1) { + while (true) { const time = floor[0]; if (!time) break; if (time.time <= fTime) {