AncTe/HumanBreak
1
1
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-04-11 15:47:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
unanmed 2025-01-29 16:30:55 +08:00
parent b9f4804c8c
commit 6f10ac3d81
7 changed files with 73 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/core/render/gl2.ts
View File

@ -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;
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<ShaderProgramEvent> {
}
/**
* 摧毁这个着色器程序，不要直接调用，请使用 {@link Shader.deleteProgram} 来删除一个着色器程序
* 摧毁这个着色器程序，不要直接调用，请使用 {@link GL2.deleteProgram} 来删除一个着色器程序
*/
destroy() {
this.clearProgram();

2
src/core/render/index.tsx
View File

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

40
src/core/render/shader.ts
View File

@ -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 {
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);

22
src/module/weather/sun.ts
View File

@ -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 {}
}

30
src/plugin/boss/barrage.ts
View File

@ -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会阻止内置渲染函数执行
* @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);
}
/**

64
src/plugin/boss/towerBoss.ts
View File

@ -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(
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;

4
src/plugin/chase/chase.ts
View File

@ -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) {