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

refactor: 重构 MotaRenderer 创建方式

Browse Source
This commit is contained in:
unanmed 2025-05-25 18:05:54 +08:00
parent fc1e9751eb
commit 7b4f907bc2
2 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages-user/client-modules/src/render/index.tsx
View File

@ -10,8 +10,11 @@ import { createGameCanvas } from './legacy/gameCanvas';
import { createElements } from './elements'; import { createElements } from './elements';
export function createGameRenderer() { export function createGameRenderer() {
const main = new MotaRenderer(); const main = new MotaRenderer({
main.size(MAIN_WIDTH, MAIN_HEIGHT); canvas: '#render-main',
width: MAIN_WIDTH,
height: MAIN_HEIGHT
});
const App = defineComponent(_props => { const App = defineComponent(_props => {
const ui = new UIController('root-ui'); const ui = new UIController('root-ui');

37
packages/render-core/src/render.ts
View File

@ -28,6 +28,17 @@ interface MouseInfo {
identifier: number; identifier: number;
} }
export interface MotaRendererConfig {
/** 要挂载到哪个画布上，可以填 css 选择器或画布元素本身 */
canvas: string | HTMLCanvasElement;
/** 画布的宽度，所有渲染操作会自行适配缩放 */
width: number;
/** 画布的高度，所有渲染操作会自行适配缩放 */
height: number;
/** 是否启用不透明度通道 */
alpha?: boolean;
}
export class MotaRenderer extends Container implements IRenderTreeRoot { export class MotaRenderer extends Container implements IRenderTreeRoot {
static list: Map<string, MotaRenderer> = new Map(); static list: Map<string, MotaRenderer> = new Map();
@ -58,23 +69,23 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
readonly isRoot = true; readonly isRoot = true;
constructor(id: string = 'render-main') { constructor(config: MotaRendererConfig) {
super('static', false); super('static', false);
const canvas = document.getElementById(id) as HTMLCanvasElement; const canvas = this.getMountCanvas(config.canvas);
if (!canvas) { if (!canvas) {
logger.error(19); logger.error(19);
return; return;
} }
this.target = new MotaOffscreenCanvas2D(true, canvas); this.target = new MotaOffscreenCanvas2D(config.alpha, canvas);
this.size(core._PX_, core._PY_); this.size(config.width, config.height);
this.target.withGameScale(true); this.target.withGameScale(true);
this.target.setAntiAliasing(false); this.target.setAntiAliasing(false);
this.setAnchor(0.5, 0.5); this.setAnchor(0.5, 0.5);
this.transform.translate(240, 240); this.transform.translate(240, 240);
MotaRenderer.list.set(id, this); MotaRenderer.list.set(canvas.id, this);
const update = () => { const update = () => {
this.requestRenderFrame(() => { this.requestRenderFrame(() => {
@ -87,6 +98,14 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
this.listen(); this.listen();
} }
private getMountCanvas(canvas: string | HTMLCanvasElement) {
if (typeof canvas === 'string') {
return document.querySelector(canvas) as HTMLCanvasElement;
} else {
return canvas;
}
}
size(width: number, height: number): void { size(width: number, height: number): void {
super.size(width, height); super.size(width, height);
this.target.size(width, height); this.target.size(width, height);
@ -565,10 +584,14 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
if (item.isComment) return ''; if (item.isComment) return '';
const name = item.constructor.name; const name = item.constructor.name;
if (item.children.size === 0) { if (item.children.size === 0) {
return `${' '.repeat(deep * space)}<${name} ${item.id ? `id="${item.id}" ` : ''}uid="${item.uid}"${item.hidden ? ' hidden' : ''} />\n`; return `${' '.repeat(deep * space)}<${name} ${
item.id ? `id="${item.id}" ` : ''
}uid="${item.uid}"${item.hidden ? ' hidden' : ''} />\n`;
} else { } else {
return ( return (
`${' '.repeat(deep * space)}<${name} ${item.id ? `${item.id} ` : ''}uid="${item.uid}" ${item.hidden ? 'hidden' : ''}>\n` + `${' '.repeat(deep * space)}<${name} ${
item.id ? `${item.id} ` : ''
}uid="${item.uid}" ${item.hidden ? 'hidden' : ''}>\n` +
`${[...item.children] `${[...item.children]
.filter(v => !v.isComment) .filter(v => !v.isComment)
.map(v => this.toTagString(v, space, deep + 1)) .map(v => this.toTagString(v, space, deep + 1))