AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-31 23:19:35 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 地图渲染缓存小优化

Browse Source
This commit is contained in:
unanmed 2024-08-17 23:11:20 +08:00
parent c7660e93c7
commit d73fe27680
6 changed files with 66 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/core/render/container.ts
View File

@ -17,36 +17,50 @@ export class Container
canvas: MotaOffscreenCanvas2D;
constructor(type: RenderItemPosition = 'static') {
/** 是否启用缓存机制，对于特殊场景，内部已经包含了缓存机制，这时就不需要启用了 */
private readonly enableCache: boolean;
/**
* 创建一个容器，容器中可以包含其他渲染对象
* @param type 渲染模式，absolute表示绝对位置，static表示跟随摄像机移动，只对顶层元素有效
* @param cache 是否启用缓存机制
*/
constructor(type: RenderItemPosition = 'static', cache: boolean = true) {
super();
this.canvas = new MotaOffscreenCanvas2D();
this.type = type;
this.canvas.withGameScale(true);
this.enableCache = cache;
}
render(
canvas: HTMLCanvasElement,
ctx: CanvasRenderingContext2D,
camera: Camera
): void {
private renderTo(canvas: MotaOffscreenCanvas2D, camera: Camera) {
const { ctx } = canvas;
this.sortedChildren.forEach(v => {
if (v.hidden) return;
ctx.save();
if (!v.antiAliasing) {
ctx.imageSmoothingEnabled = false;
} else {
ctx.imageSmoothingEnabled = true;
}
v.render(canvas, camera);
ctx.restore();
});
}
render(canvas: MotaOffscreenCanvas2D, camera: Camera): void {
this.emit('beforeRender');
if (this.needUpdate) {
this.cache(this.using);
this.needUpdate = false;
}
withCacheRender(this, canvas, ctx, camera, c => {
this.sortedChildren.forEach(v => {
if (v.hidden) return;
ctx.save();
if (!v.antiAliasing) {
ctx.imageSmoothingEnabled = false;
} else {
ctx.imageSmoothingEnabled = true;
}
v.render(c.canvas, c.ctx, camera);
ctx.restore();
if (this.enableCache) {
withCacheRender(this, canvas.canvas, canvas.ctx, camera, c => {
this.renderTo(c, camera);
});
});
} else {
this.renderTo(canvas, camera);
}
this.writing = void 0;
this.emit('afterRender');
}

15
src/core/render/item.ts
View File

@ -185,14 +185,9 @@ export abstract class RenderItem
/**
* 渲染这个对象
* @param canvas 渲染至的画布
* @param ctx 渲染至的画布的渲染上下文
* @param camera 渲染时使用的摄像机
*/
abstract render(
canvas: HTMLCanvasElement,
ctx: CanvasRenderingContext2D,
camera: Camera
): void;
abstract render(canvas: MotaOffscreenCanvas2D, camera: Camera): void;
/**
* 修改这个对象的大小
@ -286,6 +281,14 @@ export abstract class RenderItem
this.update(this);
}
/**
* 将这个渲染元素添加到其他父元素上
* @param parent 父元素
*/
append(parent: IRenderChildable) {
parent.appendChild(this);
}
/**
* 从渲染树中移除这个节点
*/

11
src/core/render/preset/damage.ts
View File

@ -135,7 +135,7 @@ export class Damage extends Sprite {
private needUpdateBlocks: Set<number> = new Set();
constructor() {
super();
super('absolute', false);
this.block = new BlockCacher(0, 0, core._WIDTH_, 1);
this.type = 'absolute';
@ -386,6 +386,7 @@ export class Damage extends Sprite {
* @param camera 摄像机
*/
renderDamage(camera: Camera) {
console.time('damage');
const { ctx } = this.damageMap;
ctx.save();
transformCanvas(this.damageMap, camera, true);
@ -401,6 +402,7 @@ export class Damage extends Sprite {
const px = bx * cell;
const py = by * cell;
// todo: 是否真的需要缓存
// 检查有没有缓存
const cache = block.cache.get(v * block.cacheDepth);
if (cache) {
@ -408,7 +410,6 @@ export class Damage extends Sprite {
return;
}
console.time('damage1');
// 否则依次渲染并写入缓存
const temp = new MotaOffscreenCanvas2D();
temp.setHD(true);
@ -416,9 +417,7 @@ export class Damage extends Sprite {
temp.withGameScale(true);
temp.size(size, size);
const { ctx: ct } = temp;
console.timeEnd('damage1');
console.time('damage2');
const render = this.renderable.get(v);
render?.forEach(v => {
if (!v) return;
@ -431,13 +430,11 @@ export class Damage extends Sprite {
ct.strokeText(v.text, v.x, v.y);
ct.fillText(v.text, v.x, v.y);
});
console.timeEnd('damage2');
console.time('damage3');
ctx.drawImage(temp.canvas, px, py, size, size);
block.cache.set(v, temp.canvas);
console.timeEnd('damage3');
});
ctx.restore();
console.timeEnd('damage');
}
}

4
src/core/render/preset/layer.ts
View File

@ -103,7 +103,7 @@ export class LayerGroup extends Container {
private extend: Map<string, ILayerGroupRenderExtends> = new Map();
constructor() {
super();
super('static', false);
this.setHD(true);
this.setAntiAliasing(false);
@ -831,7 +831,7 @@ export class Layer extends Container {
private extend: Map<string, ILayerRenderExtends> = new Map();
constructor() {
super('absolute');
super('absolute', false);
// this.setHD(false);
this.setAntiAliasing(false);

2
src/core/render/render.ts
View File

@ -89,7 +89,7 @@ export class MotaRenderer extends Container {
ctx.imageSmoothingEnabled = true;
ct.imageSmoothingEnabled = true;
}
v.render(ca, ct, camera);
v.render(this.target, camera);
ct.restore();
});
});

26
src/core/render/sprite.ts
View File

@ -3,6 +3,7 @@ import {
ICanvasCachedRenderItem,
RenderFunction,
RenderItem,
RenderItemPosition,
withCacheRender
} from './item';
import { MotaOffscreenCanvas2D } from '../fx/canvas2d';
@ -12,26 +13,35 @@ export class Sprite extends RenderItem implements ICanvasCachedRenderItem {
canvas: MotaOffscreenCanvas2D;
constructor() {
private readonly enableCache: boolean;
/**
* 创建一个精灵，可以自由在上面渲染内容
* @param type 渲染模式，absolute表示绝对位置，static表示跟随摄像机移动，只对顶层元素有效
* @param cache 是否启用缓存机制
*/
constructor(type: RenderItemPosition = 'static', cache: boolean = true) {
super();
this.type = type;
this.enableCache = cache;
this.renderFn = () => {};
this.canvas = new MotaOffscreenCanvas2D();
this.canvas.withGameScale(true);
}
render(
canvas: HTMLCanvasElement,
ctx: CanvasRenderingContext2D,
camera: Camera
): void {
render(canvas: MotaOffscreenCanvas2D, camera: Camera): void {
this.emit('beforeRender');
if (this.needUpdate) {
this.cache(this.using);
this.needUpdate = false;
}
withCacheRender(this, canvas, ctx, camera, canvas => {
if (this.enableCache) {
withCacheRender(this, canvas.canvas, canvas.ctx, camera, canvas => {
this.renderFn(canvas, camera);
});
} else {
this.renderFn(canvas, camera);
});
}
this.writing = void 0;
this.emit('afterRender');
}