refactor: 换用新的缩放方案

2025-06-08 00:07:59 +08:00 · 2025-05-25 20:59:20 +08:00 · 2025-05-25 20:59:20 +08:00 · e4a6a136ed
commit e4a6a136ed
parent a3115fff60
39 changed files with 239 additions and 345 deletions
--- a/packages-user/client-modules/src/action/move.ts
+++ b/packages-user/client-modules/src/action/move.ts
@ -2,7 +2,7 @@ import { KeyCode } from '@motajs/client-base';
 import { Hotkey, HotkeyData } from '@motajs/system-action';
 import { HeroMover, IMoveController } from '@user/data-state';
 import { Ticker } from 'mutate-animate';
-import { mainScope } from '@motajs/legacy-ui';
+import { mainScope } from './hotkey';

 type MoveKey = Record<Dir, HotkeyData>;
 type MoveKeyConfig = Record<Dir, string>;
--- a/packages-user/client-modules/src/render/components/textboxTyper.ts
+++ b/packages-user/client-modules/src/render/components/textboxTyper.ts
@ -1,14 +1,8 @@
 import { logger } from '@motajs/common';
-import {
-    AutotileRenderable,
-    Font,
-    onTick,
-    RenderableData,
-    texture,
-    MotaOffscreenCanvas2D
-} from '@motajs/render';
+import { Font, onTick, MotaOffscreenCanvas2D } from '@motajs/render';
 import EventEmitter from 'eventemitter3';
 import { isNil } from 'lodash-es';
+import { RenderableData, AutotileRenderable, texture } from '../elements';

 /** 文字的安全填充，会填充在文字的上侧和下侧，防止削顶和削底 */
 const SAFE_PAD = 1;
@ -596,10 +590,8 @@ export class TextContentParser {
        this.status = { ...initStatus };

        this.testCanvas = new MotaOffscreenCanvas2D(false);
-        this.testCanvas.withGameScale(false);
        this.testCanvas.setHD(false);
        this.testCanvas.size(1, 1);
-        this.testCanvas.freeze();
    }

    /**
--- a/packages-user/client-modules/src/render/components/tip.tsx
+++ b/packages-user/client-modules/src/render/components/tip.tsx
@ -1,10 +1,11 @@
-import { DefaultProps, ElementLocator, Font, texture } from '@motajs/render';
+import { DefaultProps, ElementLocator, Font } from '@motajs/render';
 import { logger } from '@motajs/common';
 import { computed, defineComponent, onUnmounted, ref } from 'vue';
 import { SetupComponentOptions } from './types';
 import { transitioned } from '../use';
 import { hyper } from 'mutate-animate';
 import { debounce } from 'lodash-es';
+import { texture } from '../elements';

 export interface TipProps extends DefaultProps {
    loc: ElementLocator;
--- a/packages-user/client-modules/src/render/elements/block.ts
+++ b/packages-user/client-modules/src/render/elements/block.ts
@ -305,7 +305,5 @@ export interface ICanvasCacheItem extends IBlockCacheable {
 export class CanvasCacheItem implements ICanvasCacheItem {
    constructor(public canvas: MotaOffscreenCanvas2D, public symbol: number) {}

-    destroy(): void {
-        this.canvas.delete();
-    }
+    destroy(): void {}
 }
--- a/packages-user/client-modules/src/render/elements/cache.ts
+++ b/packages-user/client-modules/src/render/elements/cache.ts
@ -464,11 +464,9 @@ function splitAutotiles(map: IdToNumber): AutotileCaches {
        const master = new MotaOffscreenCanvas2D();
        master.setHD(false);
        master.setAntiAliasing(false);
-        master.withGameScale(false);
        master.size(32, 32);
        master.ctx.drawImage(img, 0, 0, 32, 32, 0, 0, 32, 32);
        masterMap[auto] = master.canvas.toDataURL('image/png');
-        master.delete();

        // 自动图块的绘制信息
        for (let i = 0; i <= 0b11111111; i++) {
@ -491,9 +489,7 @@ function splitAutotiles(map: IdToNumber): AutotileCaches {
            const canvas = new MotaOffscreenCanvas2D();
            canvas.setHD(false);
            canvas.setAntiAliasing(false);
-            canvas.withGameScale(false);
            canvas.size(32 * frame, 32);
-            canvas.freeze();
            const ctx = canvas.ctx;
            for (let i = 0; i < frame; i++) {
                const dx = 32 * i;
@ -518,7 +514,6 @@ function splitAutotiles(map: IdToNumber): AutotileCaches {
    const judge = new MotaOffscreenCanvas2D();
    judge.setHD(false);
    judge.setAntiAliasing(false);
-    judge.withGameScale(false);
    judge.size(32, 32);
    // 进行父子关系判断
    for (const [key, img] of Object.entries(core.material.images.autotile)) {
@ -538,7 +533,6 @@ function splitAutotiles(map: IdToNumber): AutotileCaches {
            }
        }
    }
-    judge.delete();

    return cache as AutotileCaches;
 }
--- a/packages-user/client-modules/src/render/elements/damage.ts
+++ b/packages-user/client-modules/src/render/elements/damage.ts
@ -8,19 +8,17 @@ import {
 import { logger } from '@motajs/common';
 import EventEmitter from 'eventemitter3';
 import { isNil } from 'lodash-es';
-import {
-    BlockCacher,
-    CanvasCacheItem,
-    ICanvasCacheItem,
-    calNeedRenderOf,
-    ILayerGroupRenderExtends,
-    Layer,
-    LayerGroup,
-    LayerGroupFloorBinder,
-    tagMap
-} from '@motajs/render';
+import { tagMap } from '@motajs/render';
 import { IDamageEnemy, IEnemyCollection, MapDamage } from '@motajs/types';
 import { UserEnemyInfo } from '@user/data-state';
+import { BlockCacher, ICanvasCacheItem, CanvasCacheItem } from './block';
+import {
+    ILayerGroupRenderExtends,
+    LayerGroupFloorBinder,
+    LayerGroup,
+    Layer,
+    calNeedRenderOf
+} from './layer';

 /**
 * 根据伤害大小获取颜色
@ -517,7 +515,6 @@ export class Damage extends RenderItem<EDamageEvent> {
            temp.clear();
            temp.setHD(true);
            temp.setAntiAliasing(true);
-            temp.withGameScale(true);
            temp.size(size, size);
            const { ctx: ct } = temp;

--- a/packages-user/client-modules/src/render/elements/index.ts
+++ b/packages-user/client-modules/src/render/elements/index.ts
@ -75,3 +75,4 @@ export * from './hero';
 export * from './layer';
 export * from './misc';
 export * from './viewport';
+export * from './utils';
--- a/packages-user/client-modules/src/render/elements/itemDetail.ts
+++ b/packages-user/client-modules/src/render/elements/itemDetail.ts
@ -1,13 +1,9 @@
 import { logger } from '@motajs/common';
 import { mainSetting } from '@motajs/legacy-ui';
-import {
-    LayerGroupFloorBinder,
-    ILayerGroupRenderExtends,
-    LayerGroup
-} from '@motajs/render';
 import { hook } from '@user/data-base';
 import { ItemState } from '@user/data-state';
 import { Damage, DamageRenderable, FloorDamageExtends } from './damage';
+import { ILayerGroupRenderExtends, LayerGroup, LayerGroupFloorBinder } from '.';

 interface ItemDetailData {
    x: number;
@ -22,7 +18,7 @@ interface ItemData {
 }

 export function createItemDetail() {
-    hook.on('setBlock', (x, y, floorId, block) => {
+    hook.on('setBlock', (x, y, _floorId, block) => {
        FloorItemDetail.listened.forEach(v => {
            v.setBlock(block, x, y);
        });
@ -261,7 +257,7 @@ export class FloorItemDetail implements ILayerGroupRenderExtends {
        }
    }

-    onDestroy(group: LayerGroup): void {
+    onDestroy(_group: LayerGroup): void {
        this.sprite.off('beforeDamageRender', this.onBeforeDamageRender);
        this.sprite.off('setMapSize', this.onUpdateMapSize);
        FloorItemDetail.listened.delete(this);
--- a/packages-user/client-modules/src/render/elements/layer.ts
+++ b/packages-user/client-modules/src/render/elements/layer.ts
@ -629,15 +629,12 @@ export class Layer extends Container<ELayerEvent> {

        this.staticMap.setHD(false);
        // this.staticMap.setAntiAliasing(false);
-        this.staticMap.withGameScale(false);
        this.staticMap.size(core._PX_, core._PY_);
        this.movingMap.setHD(false);
        // this.movingMap.setAntiAliasing(false);
-        this.movingMap.withGameScale(false);
        this.movingMap.size(core._PX_, core._PY_);
        this.backMap.setHD(false);
        // this.backMap.setAntiAliasing(false);
-        this.backMap.withGameScale(false);
        this.backMap.size(core._PX_, core._PY_);
        this.main.setAntiAliasing(false);
        this.main.setHD(false);
@ -777,7 +774,6 @@ export class Layer extends Container<ELayerEvent> {
        const num = this.background;

        const data = texture.getRenderable(num);
-        this.backImage.forEach(v => v.delete());
        this.backImage = [];
        if (!data) return;

@ -785,7 +781,6 @@ export class Layer extends Container<ELayerEvent> {
        const temp = this.requireCanvas();
        temp.setHD(false);
        temp.setAntiAliasing(false);
-        temp.withGameScale(false);
        for (let i = 0; i < frame; i++) {
            const canvas = this.requireCanvas();
            const ctx = canvas.ctx;
@ -793,7 +788,6 @@ export class Layer extends Container<ELayerEvent> {
            const [sx, sy, w, h] = data.render[i];
            canvas.setHD(false);
            canvas.setAntiAliasing(false);
-            canvas.withGameScale(false);
            canvas.size(core._PX_, core._PY_);
            temp.size(w, h);

@ -806,7 +800,6 @@ export class Layer extends Container<ELayerEvent> {

            this.backImage.push(canvas);
        }
-        temp.delete();

        for (const ex of this.extend.values()) {
            ex.onBackgroundGenerated?.(this, this.backImage);
@ -1208,7 +1201,6 @@ export class Layer extends Container<ELayerEvent> {
            const temp = this.requireCanvas();
            temp.setAntiAliasing(false);
            temp.setHD(false);
-            temp.withGameScale(false);
            temp.size(core._PX_, core._PY_);

            // 先画到临时画布，用于缓存
@ -1512,10 +1504,6 @@ export class Layer extends Container<ELayerEvent> {
            ex.onDestroy?.(this);
        }
        super.destroy();
-        this.staticMap.delete();
-        this.movingMap.delete();
-        this.backMap.delete();
-        this.backImage.forEach(v => v.delete());
        this.block.destroy();
        this.main.destroy();
        layerAdapter.remove(this);
--- a/packages-user/client-modules/src/render/elements/misc.ts
+++ b/packages-user/client-modules/src/render/elements/misc.ts
@ -182,7 +182,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
        const pattern = this.requireCanvas();
        const img = this.image;
        pattern.size(32, 16);
-        pattern.withGameScale(false);
        pattern.setHD(false);
        pattern.setAntiAliasing(false);
        const ctx = pattern.ctx;
@ -211,7 +210,6 @@ export class Winskin extends RenderItem<EWinskinEvent> {
            Winskin.patternMap.set(this.imageName, winskinPattern);
        }
        this.patternCache = winskinPattern;
-        this.deleteCanvas(pattern);
        return winskinPattern;
    }

--- a/packages-user/client-modules/src/render/elements/utils.ts
+++ b/packages-user/client-modules/src/render/elements/utils.ts
--- a/packages-user/client-modules/src/render/index.tsx
+++ b/packages-user/client-modules/src/render/index.tsx
@ -1,21 +1,16 @@
-import { MotaRenderer, createApp } from '@motajs/render';
+import { createApp } from '@motajs/render';
 import { defineComponent } from 'vue';
 import { UIController } from '@motajs/system-ui';
 import { mainSceneUI } from './ui/main';
 import { MAIN_HEIGHT, MAIN_WIDTH } from './shared';
 import { hook } from '@user/data-base';
-import { createItemDetail } from './itemDetail';
+import { createItemDetail } from './elements/itemDetail';
 import { createLoopMap } from './loopMap';
 import { createGameCanvas } from './legacy/gameCanvas';
 import { createElements } from './elements';
+import { mainRenderer } from './renderer';

 export function createGameRenderer() {
-    const main = new MotaRenderer({
-        canvas: '#render-main',
-        width: MAIN_WIDTH,
-        height: MAIN_HEIGHT
-    });
-
    const App = defineComponent(_props => {
        const ui = new UIController('root-ui');
        ui.open(mainSceneUI, {});
@ -27,18 +22,18 @@ export function createGameRenderer() {
        );
    });

-    main.hide();
-    createApp(App).mount(main);
+    mainRenderer.hide();
+    createApp(App).mount(mainRenderer);

    hook.on('reset', () => {
-        main.show();
+        mainRenderer.show();
    });

    hook.on('restart', () => {
-        main.hide();
+        mainRenderer.hide();
    });

-    console.log(main);
+    console.log(mainRenderer);
 }

 export function createRender() {
--- a/packages-user/client-modules/src/render/legacy/gameCanvas.ts
+++ b/packages-user/client-modules/src/render/legacy/gameCanvas.ts
@ -1,10 +1,10 @@
 import { logger } from '@motajs/common';
-import {
-    LayerGroupFloorBinder,
-    ILayerGroupRenderExtends,
-    LayerGroup
-} from '@motajs/render';
 import { loading } from '@user/data-base';
+import {
+    ILayerGroupRenderExtends,
+    LayerGroup,
+    LayerGroupFloorBinder
+} from '../elements';

 const filterMap: [FloorIds[], string][] = [];

@ -58,7 +58,7 @@ export class LayerGroupFilter implements ILayerGroupRenderExtends {
        }
    }

-    onDestroy(group: LayerGroup): void {
+    onDestroy(_group: LayerGroup): void {
        this.binder?.off('floorChange', this.onFloorChange);
    }
 }
--- a/packages-user/client-modules/src/render/legacy/halo.ts
+++ b/packages-user/client-modules/src/render/legacy/halo.ts
@ -1,14 +1,13 @@
 import { logger } from '@motajs/common';
 import { MotaOffscreenCanvas2D } from '@motajs/render';
 import { mainSetting } from '@motajs/legacy-ui';
+import { Sprite, Transform } from '@motajs/render';
+import { gameListener, hook } from '@user/data-base';
 import {
-    LayerGroupFloorBinder,
    ILayerGroupRenderExtends,
    LayerGroup,
-    Sprite,
-    Transform
-} from '@motajs/render';
-import { gameListener, hook } from '@user/data-base';
+    LayerGroupFloorBinder
+} from '../elements';

 export class LayerGroupHalo implements ILayerGroupRenderExtends {
    id: string = 'halo';
@ -37,7 +36,7 @@ export class LayerGroupHalo implements ILayerGroupRenderExtends {
        }
    }

-    onDestroy(group: LayerGroup): void {
+    onDestroy(_group: LayerGroup): void {
        this.halo?.destroy();
        LayerGroupHalo.sprites.delete(this.halo);
    }
@ -67,7 +66,7 @@ class Halo extends Sprite {
        });
    }

-    drawHalo(canvas: MotaOffscreenCanvas2D, transform: Transform) {
+    drawHalo(canvas: MotaOffscreenCanvas2D, _transform: Transform) {
        if (!mainSetting.getValue('screen.halo', true)) return;
        const floorId = this.binder.getFloor();
        if (!floorId) return;
--- a/packages-user/client-modules/src/render/legacy/portal.ts
+++ b/packages-user/client-modules/src/render/legacy/portal.ts
@ -1,13 +1,13 @@
 import { logger } from '@motajs/common';
 import { MotaOffscreenCanvas2D } from '@motajs/render';
 import { mainSetting, MotaSettingItem } from '@motajs/legacy-ui';
+import { Sprite } from '@motajs/render';
+import { BluePalace } from '@user/data-state';
 import {
-    LayerGroupFloorBinder,
    ILayerGroupRenderExtends,
    LayerGroup,
-    Sprite
-} from '@motajs/render';
-import { BluePalace } from '@user/data-state';
+    LayerGroupFloorBinder
+} from '../elements';

 /** 最大粒子数 */
 const MAX_PARTICLES = 10;
@ -49,7 +49,7 @@ export class LayerGroupPortal implements ILayerGroupRenderExtends {
        }
    }

-    onDestroy(group: LayerGroup): void {
+    onDestroy(_group: LayerGroup): void {
        this.binder.off('floorChange', this.onFloorChange);
    }
 }
@ -104,7 +104,7 @@ export class Portal extends Sprite {

        this.setZIndex(35);

-        this.setRenderFn((canvas, transform) => {
+        this.setRenderFn((canvas, _transform) => {
            this.renderPortal(canvas);
        });
    }
--- a/packages-user/client-modules/src/render/loopMap.ts
+++ b/packages-user/client-modules/src/render/loopMap.ts
@ -1,15 +1,14 @@
-import {
-    Container,
-    LayerGroupFloorBinder,
-    FloorLayer,
-    LayerGroup,
-    FloorViewport,
-    MotaRenderer
-} from '@motajs/render';
+import { Container, MotaRenderer } from '@motajs/render';
 import { hook } from '@user/data-base';
 import { MiscData } from '@user/data-state';
-import { FloorDamageExtends } from './damage';
-import { FloorItemDetail } from './itemDetail';
+import { FloorDamageExtends } from './elements/damage';
+import { FloorItemDetail } from './elements/itemDetail';
+import {
+    LayerGroup,
+    FloorLayer,
+    LayerGroupFloorBinder,
+    FloorViewport
+} from './elements';

 const loopMaps = MiscData.loopMaps;

@ -19,7 +18,7 @@ let show: boolean = false;
 let delegation: number = -1;

 export function createLoopMap() {
-    hook.on('changingFloor', (floorId, heroLoc) => {
+    hook.on('changingFloor', (floorId, _heroLoc) => {
        enableLoopMapElement(floorId);
    });
 }
--- a/packages-user/client-modules/src/render/renderer.ts
+++ b/packages-user/client-modules/src/render/renderer.ts
@ -0,0 +1,8 @@
+import { MotaRenderer } from '@motajs/render-core';
+import { MAIN_WIDTH, MAIN_HEIGHT } from './shared';
+
+export const mainRenderer = new MotaRenderer({
+    canvas: '#render-main',
+    width: MAIN_WIDTH,
+    height: MAIN_HEIGHT
+});
--- a/packages-user/client-modules/src/render/ui/main.tsx
+++ b/packages-user/client-modules/src/render/ui/main.tsx
@ -1,15 +1,5 @@
 import { LayerShadowExtends } from '@motajs/legacy-ui';
-import {
-    ILayerGroupRenderExtends,
-    LayerGroupAnimate,
-    FloorViewport,
-    ILayerRenderExtends,
-    HeroRenderer,
-    LayerDoorAnimate,
-    Props,
-    LayerGroup,
-    Font
-} from '@motajs/render';
+import { Props, Font } from '@motajs/render';
 import { WeatherController } from '../../weather';
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import { Textbox, Tip } from '../components';
@ -31,14 +21,23 @@ import { ReplayingStatus } from './toolbar';
 import { getHeroStatusOn, HeroSkill, NightSpecial } from '@user/data-state';
 import { jumpIgnoreFloor } from '@user/legacy-plugin-data';
 import { hook } from '@user/data-base';
-import { FloorDamageExtends } from '../damage';
-import { FloorItemDetail } from '../itemDetail';
+import { FloorDamageExtends } from '../elements/damage';
+import { FloorItemDetail } from '../elements/itemDetail';
 import { LayerGroupPortal } from '../legacy/portal';
 import { LayerGroupFilter } from '../legacy/gameCanvas';
 import { LayerGroupHalo } from '../legacy/halo';
 import { FloorChange } from '../legacy/fallback';
 import { PopText } from '../legacy/pop';
 import { mainUIController } from './controller';
+import {
+    ILayerGroupRenderExtends,
+    LayerGroupAnimate,
+    FloorViewport,
+    ILayerRenderExtends,
+    HeroRenderer,
+    LayerDoorAnimate,
+    LayerGroup
+} from '../elements';

 const MainScene = defineComponent(() => {
    const layerGroupExtends: ILayerGroupRenderExtends[] = [
--- a/packages-user/data-state/src/mechanism/misc.ts
+++ b/packages-user/data-state/src/mechanism/misc.ts
@ -1,7 +1,6 @@
 import { backDir, has } from '@user/data-utils';
 import { loading } from '@user/data-base';
-import type { LayerDoorAnimate } from '@motajs/render';
-import { getSkillLevel } from './skillTree';
+import { LayerDoorAnimate } from '@user/client-modules';

 /**
 * 一些零散机制的数据
@ -87,7 +86,7 @@ export namespace BluePalace {

        const Adapter = Mota.require('@motajs/render').RenderAdapter;
        const adapter = Adapter.get<LayerDoorAnimate>('door-animate');
-        const texture = Mota.require('@motajs/render').texture;
+        const texture = Mota.require('@user/client-modules').texture;
        if (adapter) {
            Promise.all(
                toConvert.map(v => {
--- a/packages-user/data-state/src/state/hero.ts
+++ b/packages-user/data-state/src/state/hero.ts
@ -59,7 +59,7 @@ function getRealStatus(
    name: keyof HeroStatus | 'all' | (keyof HeroStatus)[],
    floorId: FloorIds = core.status.floorId
 ): any {
-    const { getSkillLevel } = Mota.require('@user/legacy-plugin-data');
+    const { getSkillLevel } = Mota.require('@user/data-state');
    if (name instanceof Array) {
        const res: any = {};
        name.forEach(v => {
--- a/packages-user/data-state/src/state/move.ts
+++ b/packages-user/data-state/src/state/move.ts
@ -1,17 +1,17 @@
 import EventEmitter from 'eventemitter3';
 import { backDir, checkCanMoveExtended, toDir } from './utils';
 import { loading } from '@user/data-base';
+import type { RenderAdapter } from '@motajs/render';
 import type {
-    RenderAdapter,
-    HeroRenderer,
-    FloorViewport,
    FloorLayer,
+    FloorViewport,
+    HeroKeyMover,
+    HeroRenderer,
    Layer,
+    LayerFloorBinder,
    LayerGroup,
-    LayerMovingRenderable,
-    LayerFloorBinder
-} from '@motajs/render';
-import type { HeroKeyMover } from '@user/client-modules';
+    LayerMovingRenderable
+} from '@user/client-modules';
 import { BluePalace, MiscData } from '../mechanism/misc';
 import { sleep } from '@motajs/common';

@ -318,7 +318,7 @@ export class BlockMover extends ObjectMoverBase {
        this.blockNum = blockNum;

        Mota.r(() => {
-            const { Layer } = Mota.require('@motajs/render');
+            const { Layer } = Mota.require('@user/client-modules');
            const r = Layer.getMovingRenderable(blockNum, this.x, this.y);

            if (r) {
--- a/packages-user/entry-client/src/create.ts
+++ b/packages-user/entry-client/src/create.ts
@ -50,7 +50,6 @@ export function create() {

 async function createModule() {
    LegacyUI.create();
-    RenderElements.create();
    ClientModules.create();

    await import('ant-design-vue/dist/antd.dark.css');
--- a/packages-user/legacy-plugin-client/src/boss/palaceBoss.ts
+++ b/packages-user/legacy-plugin-client/src/boss/palaceBoss.ts
@ -2,7 +2,6 @@ import { IStateDamageable } from '@user/data-state';
 import { BarrageBoss, BossSprite, Hitbox } from './barrage';
 import {
    Container,
-    LayerGroup,
    MotaRenderer,
    RenderItem,
    Shader,
@ -14,6 +13,7 @@ import { SplittableBall } from './palaceBossProjectile';
 import { PointEffect } from '../fx/pointShader';
 import { loading } from '@user/data-base';
 import { clip } from '@user/legacy-plugin-data';
+import { LayerGroup } from '@user/client-modules';

 loading.once('coreInit', () => {
    const shader = new Shader();
--- a/packages-user/legacy-plugin-client/src/boss/palaceBossProjectile.ts
+++ b/packages-user/legacy-plugin-client/src/boss/palaceBossProjectile.ts
@ -3,6 +3,7 @@ import { IStateDamageable } from '@user/data-state';
 import { Hitbox, Projectile } from './barrage';
 import type { PalaceBoss } from './palaceBoss';
 import { clamp } from '@motajs/legacy-ui';
+import { mainRenderer } from 'packages-user/client-modules/src/render/renderer';

 function popDamage(damage: number, boss: PalaceBoss, color: string) {
    const { x, y } = core.status.hero.loc;
@ -74,9 +75,8 @@ export class SplittableBall extends Projectile<PalaceBoss> {
    static init(colors: Record<string, string[]>) {
        this.ball.clear();
        for (const [key, color] of Object.entries(colors)) {
-            const canvas = new MotaOffscreenCanvas2D();
+            const canvas = mainRenderer.requireCanvas();
            canvas.size(32, 32);
-            canvas.withGameScale(true);
            canvas.setHD(true);
            const ctx = canvas.ctx;
            const gradient = ctx.createRadialGradient(16, 16, 8, 16, 16, 16);
@ -87,7 +87,6 @@ export class SplittableBall extends Projectile<PalaceBoss> {
            ctx.fillStyle = gradient;
            ctx.arc(16, 16, 16, 0, Math.PI * 2);
            ctx.fill();
-            canvas.freeze();
            this.ball.set(key, canvas);
        }
    }
@ -95,7 +94,7 @@ export class SplittableBall extends Projectile<PalaceBoss> {
    static end() {
        this.ball.forEach(v => {
            v.clear();
-            v.delete();
+            mainRenderer.deleteCanvas(v);
        });
        this.ball.clear();
    }
--- a/packages-user/legacy-plugin-client/src/boss/towerBoss.ts
+++ b/packages-user/legacy-plugin-client/src/boss/towerBoss.ts
@ -1,11 +1,9 @@
 import {
    Shader,
    MotaRenderer,
-    LayerGroup,
    RenderItem,
    MotaOffscreenCanvas2D,
-    Container,
-    HeroRenderer
+    Container
 } from '@motajs/render';
 import { PointEffect } from '../fx/pointShader';
 import { BarrageBoss, BossSprite, Hitbox } from './barrage';
@ -25,7 +23,11 @@ import { IStateDamageable } from '@user/data-state';
 import { Pop } from '../../../client-modules/src/render/legacy/pop';
 import { loading } from '@user/data-base';
 import { clip } from '@user/legacy-plugin-data';
-import { WeatherController } from '@user/client-modules';
+import {
+    HeroRenderer,
+    LayerGroup,
+    WeatherController
+} from '@user/client-modules';

 loading.once('coreInit', () => {
    const shader = new Shader();
--- a/packages-user/legacy-plugin-client/src/boss/towerBossProjectile.ts
+++ b/packages-user/legacy-plugin-client/src/boss/towerBossProjectile.ts
@ -5,6 +5,7 @@ import type { TowerBoss } from './towerBoss';
 import { IStateDamageable } from '@user/data-state';
 import { PointEffect, PointEffectType } from '../fx/pointShader';
 import { isNil } from 'lodash-es';
+import { mainRenderer } from 'packages-user/client-modules/src/render/renderer';

 export const enum ProjectileDirection {
    Vertical,
@ -131,12 +132,11 @@ export class ArrowProjectile extends Projectile<TowerBoss> {
    static init() {
        this.easing = power(2, 'in');
        this.dangerEasing = power(3, 'out');
-        this.horizontal = new MotaOffscreenCanvas2D();
-        this.vertical = new MotaOffscreenCanvas2D();
+        this.horizontal = mainRenderer.requireCanvas();
+        this.vertical = mainRenderer.requireCanvas();
        const hor = this.horizontal;
        hor.size(480, 32);
        hor.setHD(true);
-        hor.withGameScale(true);
        const ctxHor = hor.ctx;
        ctxHor.fillStyle = '#f00';
        ctxHor.globalAlpha = 0.6;
@ -146,15 +146,12 @@ export class ArrowProjectile extends Projectile<TowerBoss> {
        const ver = this.vertical;
        ver.size(32, 480);
        ver.setHD(true);
-        ver.withGameScale(true);
        const ctxVer = ver.ctx;
        ctxVer.fillStyle = '#f00';
        ctxVer.globalAlpha = 0.6;
        for (let i = 0; i < 15; i++) {
            ctxVer.fillRect(2, i * 32 + 2, 28, 28);
        }
-        hor.freeze();
-        ver.freeze();
    }

    /**
@ -164,10 +161,10 @@ export class ArrowProjectile extends Projectile<TowerBoss> {
        this.easing = void 0;
        this.dangerEasing = void 0;
        this.horizontal?.clear();
-        this.horizontal?.delete();
+        if (this.horizontal) mainRenderer.deleteCanvas(this.horizontal);
        this.horizontal = null;
        this.vertical?.clear();
-        this.vertical?.delete();
+        if (this.vertical) mainRenderer.deleteCanvas(this.vertical);
        this.vertical = null;
    }

@ -460,15 +457,14 @@ export class ThunderProjectile extends Projectile<TowerBoss> {
    private effectId2?: number;

    static init() {
-        this.cache = new MotaOffscreenCanvas2D();
+        this.cache = mainRenderer.requireCanvas();
        this.cache.setHD(true);
-        this.cache.withGameScale(true);
        this.cache.size(480, 480);
    }

    static end() {
        this.cache?.clear();
-        this.cache?.delete();
+        if (this.cache) mainRenderer.deleteCanvas(this.cache);
        this.cache = null;
    }

@ -622,12 +618,11 @@ export class ThunderBallProjectile extends Projectile<TowerBoss> {
     */
    static init() {
        this.dangerEasing = power(3, 'out');
-        this.horizontal = new MotaOffscreenCanvas2D();
-        this.vertical = new MotaOffscreenCanvas2D();
+        this.horizontal = mainRenderer.requireCanvas();
+        this.vertical = mainRenderer.requireCanvas();
        const hor = this.horizontal;
        hor.size(480, 32);
        hor.setHD(true);
-        hor.withGameScale(true);
        const ctxHor = hor.ctx;
        ctxHor.fillStyle = '#fff';
        ctxHor.globalAlpha = 0.6;
@ -637,15 +632,12 @@ export class ThunderBallProjectile extends Projectile<TowerBoss> {
        const ver = this.vertical;
        ver.size(32, 480);
        ver.setHD(true);
-        ver.withGameScale(true);
        const ctxVer = ver.ctx;
        ctxVer.fillStyle = '#fff';
        ctxVer.globalAlpha = 0.6;
        for (let i = 0; i < 15; i++) {
            ctxVer.fillRect(2, i * 32 + 2, 28, 28);
        }
-        hor.freeze();
-        ver.freeze();
    }

    /**
@ -654,10 +646,10 @@ export class ThunderBallProjectile extends Projectile<TowerBoss> {
    static end() {
        this.dangerEasing = void 0;
        this.horizontal?.clear();
-        this.horizontal?.delete();
+        if (this.horizontal) mainRenderer.deleteCanvas(this.horizontal);
        this.horizontal = null;
        this.vertical?.clear();
-        this.vertical?.delete();
+        if (this.vertical) mainRenderer.deleteCanvas(this.vertical);
        this.vertical = null;
    }

--- a/packages-user/legacy-plugin-client/src/chase/chase.ts
+++ b/packages-user/legacy-plugin-client/src/chase/chase.ts
@ -1,14 +1,11 @@
 import { MotaOffscreenCanvas2D } from '@motajs/render';
+import { Container, MotaRenderer, Shader, Sprite } from '@motajs/render';
 import {
    CameraAnimation,
-    Container,
    LayerGroup,
-    MotaRenderer,
-    Shader,
-    Sprite,
    disableViewport,
    enableViewport
-} from '@motajs/render';
+} from '@user/client-modules';
 import { loading } from '@user/data-base';
 import {
    heroMoveCollection,
@ -16,6 +13,7 @@ import {
    type MoveStep
 } from '@user/data-state';
 import EventEmitter from 'eventemitter3';
+import { mainRenderer } from 'packages-user/client-modules/src/render/renderer';

 export interface IChaseController {
    /** 本次追逐战实例 */
@ -190,7 +188,7 @@ export class Chase extends EventEmitter<ChaseEvent> {
        for (const [key, nodes] of Object.entries(this.data.path)) {
            if (nodes.length === 0) return;
            const floor = key as FloorIds;
-            const canvas = new MotaOffscreenCanvas2D();
+            const canvas = mainRenderer.requireCanvas();
            const ctx = canvas.ctx;
            const cell = 32;
            const half = cell / 2;
@ -345,7 +343,7 @@ export class Chase extends EventEmitter<ChaseEvent> {
        Chase.shader.remove();
        this.emit('end', success);
        this.removeAllListeners();
-        this.pathMap.forEach(v => v.delete());
+        this.pathMap.forEach(v => mainRenderer.deleteCanvas(v));
        this.pathMap.clear();
    }
 }
--- a/packages-user/legacy-plugin-client/src/chase/chase1.ts
+++ b/packages-user/legacy-plugin-client/src/chase/chase1.ts
@ -1,16 +1,14 @@
 import { Animation, hyper, linear, power, sleep } from 'mutate-animate';
 import { Chase, ChaseData, IChaseController } from './chase';
-// import { completeAchievement } from '@motajs/legacy-ui';
+import { MotaRenderer, Sprite } from '@motajs/render';
+import { PointEffect, PointEffectType } from '../fx/pointShader';
 import {
+    bgmController,
    Camera,
    CameraAnimation,
    ICameraScale,
-    LayerGroup,
-    MotaRenderer,
-    Sprite
-} from '@motajs/render';
-import { PointEffect, PointEffectType } from '../fx/pointShader';
-import { bgmController } from '@user/client-modules';
+    LayerGroup
+} from '@user/client-modules';
 import { loading } from '@user/data-base';
 import { chaseInit1, clip } from '@user/legacy-plugin-data';

@ -301,7 +299,7 @@ function processScale(
    });
 }

-async function wolfMove(chase: Chase) {
+async function wolfMove(_chase: Chase) {
    core.moveBlock(23, 17, Array(6).fill('down'), 80);
    await sleep(550);
    core.setBlock(508, 23, 23);
@ -701,7 +699,7 @@ function para3(chase: Chase, ani: Animation) {
        addLargeContrast(61, 7, ani, chase);
    });
    const exploded: Set<number> = new Set();
-    chase.on('step', (x, y) => {
+    chase.on('step', x => {
        if (core.status.floorId !== 'MT14') return;
        if (exploded.has(x)) return;
        if (x > 20 && x < 49) {
--- a/packages-user/legacy-plugin-data/src/fallback.ts
+++ b/packages-user/legacy-plugin-data/src/fallback.ts
@ -1,17 +1,17 @@
-import type {
-    RenderAdapter,
-    LayerDoorAnimate,
-    LayerGroupAnimate,
-    LayerFloorBinder,
-    HeroRenderer,
-    Layer,
-    LayerGroup,
-    FloorViewport
-} from '@motajs/render';
+import type { RenderAdapter } from '@motajs/render';
 import type { TimingFn } from 'mutate-animate';
 import { BlockMover, heroMoveCollection, MoveStep } from '@user/data-state';
 import { hook, loading } from '@user/data-base';
 import { Patch, PatchClass } from '@motajs/legacy-common';
+import type {
+    HeroRenderer,
+    LayerDoorAnimate,
+    LayerGroupAnimate,
+    Layer,
+    FloorViewport,
+    LayerFloorBinder,
+    LayerGroup
+} from '@user/client-modules';

 // 向后兼容用，会充当两个版本间过渡的作用

@ -88,8 +88,8 @@ export function initFallback() {

    Mota.r(() => {
        // ----- 引入
-        const { Camera, MotaRenderer: Renderer } =
-            Mota.require('@motajs/render');
+        const { MotaRenderer: Renderer } = Mota.require('@motajs/render');
+        const { Camera } = Mota.require('@user/client-modules');
        const Animation = Mota.require('MutateAnimate');

        const patch = new Patch(PatchClass.Control);
@ -116,7 +116,7 @@ export function initFallback() {
            '_action_moveAction',
            function (data: any, x: number, y: number, prefix: any) {
                if (core.canMoveHero()) {
-                    var nx = core.nextX(),
+                    const nx = core.nextX(),
                        ny = core.nextY();
                    // 检查noPass决定是撞击还是移动
                    if (core.noPass(nx, ny)) {
@ -314,10 +314,10 @@ export function initFallback() {
                needKey: boolean,
                callback?: () => void
            ) {
-                var block = core.getBlock(x, y);
+                const block = core.getBlock(x, y);
                core.saveAndStopAutomaticRoute();
                if (!core.events._openDoor_check(block, x, y, needKey)) {
-                    var locked = core.status.lockControl;
+                    const locked = core.status.lockControl;
                    core.waitHeroToStop(function () {
                        if (!locked) core.unlockControl();
                        if (callback) callback();
@ -383,8 +383,8 @@ export function initFallback() {
                    if (callback) callback();
                    return;
                }
-                var block = core.getBlockById(id);
-                var doorInfo = (block.event || {}).doorInfo;
+                const block = core.getBlockById(id);
+                const doorInfo = (block.event || {}).doorInfo;
                if (!doorInfo) {
                    if (callback) callback();
                    return;
--- a/packages/legacy-ui/src/fx/shadow.ts
+++ b/packages/legacy-ui/src/fx/shadow.ts
@ -1,12 +1,8 @@
 import { mat4 } from 'gl-matrix';
 import { logger } from '@motajs/common';
 import { WebGLColorArray, createProgram, isWebGL2Supported } from './webgl';
-import {
-    ILayerRenderExtends,
-    Layer,
-    HeroRenderer,
-    Sprite
-} from '@motajs/render';
+import { Sprite } from '@motajs/render';
+import { ILayerRenderExtends, Layer, HeroRenderer } from '@user/client-modules';

 /**
 * 最大光源数量，必须设置，且光源数不能超过这个值，这个值决定了会预留多少的缓冲区，因此最好尽可能小，同时游戏过程中不可修改
@ -114,7 +110,7 @@ export function createShadow() {
        Shadow.update(true);
        LayerShadowExtends.shadowList.forEach(v => v.update());
    });
-    hook.on('changingFloor', floorId => {
+    hook.on('changingFloor', () => {
        Shadow.clearBuffer();
        Shadow.update(true);
        // setCanvasFilterByFloorId(floorId);
--- a/packages/legacy-ui/src/preset/index.ts
+++ b/packages/legacy-ui/src/preset/index.ts
@ -12,7 +12,6 @@ export * from './ui';
 export * from './settings';
 export * from './danmaku';
 export * from './fixed';
-export * from './hotkey';
 export * from './keyboard';
 export * from './uiIns';
 export * from './settingIns';
--- a/packages/legacy-ui/src/ui/skillTree.vue
+++ b/packages/legacy-ui/src/ui/skillTree.vue
@ -90,7 +90,7 @@ import { isNil } from 'lodash-es';

 const props = defineProps<IMountedVBind>();

-const skillTree = Mota.require('@user/legacy-plugin-data');
+const skillTree = Mota.require('@user/data-state');

 let canvas: HTMLCanvasElement;
 let ctx: CanvasRenderingContext2D;
--- a/packages/render-core/src/canvas2d.ts
+++ b/packages/render-core/src/canvas2d.ts
@ -1,5 +1,4 @@
 import { EventEmitter } from 'eventemitter3';
-import { logger } from '@motajs/common';

 interface OffscreenCanvasEvent {
    /** 当被动触发resize时（例如core.domStyle.scale变化、窗口大小变化）时触发，使用size函数并不会触发 */
@ -7,16 +6,12 @@ interface OffscreenCanvasEvent {
 }

 export class MotaOffscreenCanvas2D extends EventEmitter<OffscreenCanvasEvent> {
-    static list: Set<MotaOffscreenCanvas2D> = new Set();
-
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D;

    width: number;
    height: number;

-    /** 是否自动跟随样板的core.domStyle.scale进行缩放 */
-    autoScale: boolean = false;
    /** 是否是高清画布 */
    highResolution: boolean = true;
    /** 是否启用抗锯齿 */
@ -27,12 +22,6 @@ export class MotaOffscreenCanvas2D extends EventEmitter<OffscreenCanvasEvent> {
    /** 更新标识符，如果发生变化则说明画布被动清空 */
    symbol: number = 0;

-    private _freezed: boolean = false;
-    /** 当前画布是否被冻结 */
-    get freezed() {
-        return this._freezed;
-    }
-
    private _active: boolean = true;
    get active() {
        return this._active;
@ -46,65 +35,52 @@ export class MotaOffscreenCanvas2D extends EventEmitter<OffscreenCanvasEvent> {
     */
    constructor(alpha: boolean = true, canvas?: HTMLCanvasElement) {
        super();
-        // console.trace();
-
        this.canvas = canvas ?? document.createElement('canvas');
        this.ctx = this.canvas.getContext('2d', { alpha })!;
        this.width = this.canvas.width / devicePixelRatio;
        this.height = this.canvas.height / devicePixelRatio;
+    }

-        MotaOffscreenCanvas2D.list.add(this);
+    /**
+     * 设置画布的缩放比
+     * @param scale 缩放比
+     */
+    setScale(scale: number) {
+        if (scale === this.scale) {
+            this.clear();
+            return;
+        }
+        this.scale = scale;
+        let ratio = this.highResolution ? devicePixelRatio : 1;
+        ratio *= this.scale;
+        this.canvas.width = this.width * ratio;
+        this.canvas.height = this.height * ratio;
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this.ctx.scale(ratio, ratio);
+        this.ctx.imageSmoothingEnabled = this.antiAliasing;
    }

    /**
     * 设置画布的大小
     */
    size(width: number, height: number) {
-        if (this._freezed) {
-            logger.warn(33);
-            return;
-        }
        const w = Math.max(width, 1);
        const h = Math.max(height, 1);
        let ratio = this.highResolution ? devicePixelRatio : 1;
-        const scale = core.domStyle.scale;
-        if (this.autoScale) {
-            ratio *= scale;
-        }
-        this.scale = ratio;
+        ratio *= this.scale;
        this.canvas.width = w * ratio;
        this.canvas.height = h * ratio;
        this.width = w;
-        this.height = height;
+        this.height = h;
        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
        this.ctx.scale(ratio, ratio);
        this.ctx.imageSmoothingEnabled = this.antiAliasing;
-        if (this.canvas.isConnected) {
-            this.canvas.style.width = `${w * scale}px`;
-            this.canvas.style.height = `${h * scale}px`;
-        }
-    }
-
-    /**
-     * 设置当前画布是否跟随样板的 core.domStyle.scale 一同进行缩放
-     */
-    withGameScale(auto: boolean) {
-        if (this._freezed) {
-            logger.warn(33);
-            return;
-        }
-        this.autoScale = auto;
-        this.size(this.width, this.height);
    }

    /**
     * 设置当前画布是否为高清画布
     */
    setHD(hd: boolean) {
-        if (this._freezed) {
-            logger.warn(33);
-            return;
-        }
        this.highResolution = hd;
        this.size(this.width, this.height);
    }
@ -113,10 +89,6 @@ export class MotaOffscreenCanvas2D extends EventEmitter<OffscreenCanvasEvent> {
     * 设置当前画布的抗锯齿设置
     */
    setAntiAliasing(anti: boolean) {
-        if (this._freezed) {
-            logger.warn(33);
-            return;
-        }
        this.antiAliasing = anti;
        this.ctx.imageSmoothingEnabled = anti;
    }
@ -125,56 +97,12 @@ export class MotaOffscreenCanvas2D extends EventEmitter<OffscreenCanvasEvent> {
     * 清空画布
     */
    clear() {
-        if (this._freezed) {
-            logger.warn(33);
-            return;
-        }
        this.ctx.save();
        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.restore();
    }

-    /**
-     * 删除这个画布
-     */
-    delete() {
-        this.canvas.remove();
-        this.ctx.reset();
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this._freezed = true;
-        MotaOffscreenCanvas2D.list.delete(this);
-    }
-
-    /**
-     * 冻结这个画布的属性，之后便不能被修改，同时会从画布列表中删去。
-     */
-    freeze() {
-        this._freezed = true;
-        MotaOffscreenCanvas2D.list.delete(this);
-    }
-
-    /**
-     * 使此画布生效，使用前请务必调用此函数，生效后会跟随游戏的放缩比例更改大小，但会导致不会被垃圾回收
-     */
-    activate() {
-        if (this._active || this._freezed) return;
-        MotaOffscreenCanvas2D.list.add(this);
-        if (this.autoScale) {
-            this.size(this.width, this.height);
-            this.symbol++;
-            this.emit('resize');
-        }
-    }
-
-    /**
-     * 使此画布失效，当这个画布暂时不会被使用时请务必调用此函数，失效后若没有对此画布的引用，那么会自动垃圾回收
-     */
-    deactivate() {
-        if (!this._active || this._freezed) return;
-        MotaOffscreenCanvas2D.list.delete(this);
-    }
-
    /**
     * 复制一个离屏Canvas2D对象，一般用于缓存等操作
     * @param canvas 被复制的MotaOffscreenCanvas2D对象
@ -183,7 +111,6 @@ export class MotaOffscreenCanvas2D extends EventEmitter<OffscreenCanvasEvent> {
    static clone(canvas: MotaOffscreenCanvas2D): MotaOffscreenCanvas2D {
        const newCanvas = new MotaOffscreenCanvas2D();
        newCanvas.setHD(canvas.highResolution);
-        newCanvas.withGameScale(canvas.autoScale);
        newCanvas.size(canvas.width, canvas.height);
        newCanvas.ctx.drawImage(
            canvas.canvas,
@ -192,23 +119,6 @@ export class MotaOffscreenCanvas2D extends EventEmitter<OffscreenCanvasEvent> {
            canvas.width,
            canvas.height
        );
-        newCanvas.freeze();
        return newCanvas;
    }
-
-    static refreshAll(force: boolean = false) {
-        this.list.forEach(v => {
-            if (force || v.autoScale) {
-                v.size(v.width, v.height);
-                v.symbol++;
-                v.emit('resize');
-            }
-        });
-    }
 }
-
-window.addEventListener('resize', () => {
-    requestAnimationFrame(() => {
-        MotaOffscreenCanvas2D.refreshAll();
-    });
-});
--- a/packages/render-core/src/container.ts
+++ b/packages/render-core/src/container.ts
@ -42,6 +42,11 @@ export class Container<E extends EContainerEvent = EContainerEvent>
        });
    }

+    onResize(scale: number): void {
+        this.sortedChildren.forEach(v => v.onResize(scale));
+        super.onResize(scale);
+    }
+
    requestSort() {
        if (!this.needSort) {
            this.needSort = true;
--- a/packages/render-core/src/gl2.ts
+++ b/packages/render-core/src/gl2.ts
@ -184,6 +184,11 @@ export abstract class GL2<E extends EGL2Event = EGL2Event> extends RenderItem<
        this.init();
    }

+    onResize(scale: number): void {
+        this.sizeGL(this.width, this.height);
+        super.onResize(scale);
+    }
+
    setHD(hd: boolean): void {
        super.setHD(hd);
        this.sizeGL(this.width, this.height);
@ -196,7 +201,7 @@ export abstract class GL2<E extends EGL2Event = EGL2Event> extends RenderItem<

    private sizeGL(width: number, height: number) {
        const ratio = this.highResolution ? devicePixelRatio : 1;
-        const scale = ratio * core.domStyle.scale;
+        const scale = ratio * this.cache.scale;
        this.canvas.width = width * scale;
        this.canvas.height = height * scale;
    }
--- a/packages/render-core/src/item.ts
+++ b/packages/render-core/src/item.ts
@ -132,6 +132,14 @@ export interface IRenderTickerSupport {
    hasTicker(id: number): boolean;
 }

+export interface IRenderEvent {
+    /**
+     * 当触发缩放事件时，此函数执行的内容
+     * @param scale 缩放至的缩放比
+     */
+    onResize(scale: number): void;
+}
+
 export interface IRenderVueSupport {
    /**
     * 在 jsx, vue 中当属性改变后触发此函数，用于处理响应式等情况
@ -185,6 +193,10 @@ export interface IRenderTreeRoot {
    hoverElement(element: RenderItem): void;
 }

+interface RenderItemCanvasData {
+    autoScale: boolean;
+}
+
 export interface ERenderItemEvent extends ERenderItemActionEvent {
    beforeRender: [transform: Transform];
    afterRender: [transform: Transform];
@ -213,7 +225,8 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
        IRenderTickerSupport,
        IRenderChildable,
        IRenderVueSupport,
-        ITransformUpdatable
+        ITransformUpdatable,
+        IRenderEvent
 {
    /** 渲染的全局ticker */
    static ticker: Ticker = new Ticker();
@ -332,6 +345,11 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
    readonly transformFallThrough: boolean = false;
    /** 这个渲染元素使用到的所有画布 */
    protected readonly canvases: Set<MotaOffscreenCanvas2D> = new Set();
+    /** 这个渲染元素每个画布的配置信息 */
+    private readonly canvasMap: Map<
+        MotaOffscreenCanvas2D,
+        RenderItemCanvasData
+    > = new Map();
    //#endregion

    //#region 交互事件
@ -371,11 +389,8 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>

        this._transform.bind(this);
        this.cache = this.requireCanvas();
-        this.cache.withGameScale(true);
        if (!enableCache) {
-            this.cache.withGameScale(false);
            this.cache.size(1, 1);
-            this.cache.freeze();
        }
    }

@ -439,10 +454,12 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
    /**
     * 申请一个 `MotaOffscreenCanvas2D`，即申请一个画布
     * @param alpha 是否启用画布的 alpha 通道
+     * @param autoScale 是否自动跟随缩放
     */
-    protected requireCanvas(alpha: boolean = true) {
+    requireCanvas(alpha: boolean = true, autoScale: boolean = false) {
        const canvas = new MotaOffscreenCanvas2D(alpha);
        this.canvases.add(canvas);
+        this.canvasMap.set(canvas, { autoScale });
        return canvas;
    }

@ -450,9 +467,20 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
     * 删除由 `requireCanvas` 申请的画布，当画布不再使用时，可以用该方法删除画布
     * @param canvas 要删除的画布
     */
-    protected deleteCanvas(canvas: MotaOffscreenCanvas2D) {
-        if (!this.canvases.delete(canvas)) return;
-        canvas.delete();
+    deleteCanvas(canvas: MotaOffscreenCanvas2D) {
+        this.canvases.delete(canvas);
+        this.canvasMap.delete(canvas);
+    }
+
+    //#region 事件处理
+
+    onResize(scale: number): void {
+        this.cache.setScale(scale);
+        this.canvases.forEach(v => {
+            if (this.canvasMap.get(v)?.autoScale) {
+                v.setScale(scale);
+            }
+        });
    }

    //#region 修改元素属性
@ -736,7 +764,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
        this.update();
        this.checkRoot();
        this._root?.connect(this);
-        this.canvases.forEach(v => v.activate());
        this._transform.bind(this);
    }

@ -751,7 +778,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
        this._parent = void 0;
        parent.requestSort();
        parent.update();
-        this.canvases.forEach(v => v.deactivate());
        this._transform.bind();
        if (!success) return false;
        this._root?.disconnect(this);
@ -1257,8 +1283,6 @@ export abstract class RenderItem<E extends ERenderItemEvent = ERenderItemEvent>
        this.remove();
        this.emit('destroy');
        this.removeAllListeners();
-        this.cache.delete();
-        this.canvases.forEach(v => v.delete());
        this.canvases.clear();
    }
 }
--- a/packages/render-core/src/render.ts
+++ b/packages/render-core/src/render.ts
@ -42,6 +42,9 @@ export interface MotaRendererConfig {
 export class MotaRenderer extends Container implements IRenderTreeRoot {
    static list: Map<string, MotaRenderer> = new Map();

+    /** 缩放比 */
+    private scale: number = 1;
+
    /** 所有连接到此根元素的渲染元素的 id 到元素自身的映射 */
    protected idMap: Map<string, RenderItem> = new Map();

@ -79,7 +82,6 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
        }
        this.target = new MotaOffscreenCanvas2D(config.alpha ?? true, canvas);
        this.size(config.width, config.height);
-        this.target.withGameScale(true);
        this.target.setAntiAliasing(false);

        this.setAnchor(0.5, 0.5);
@ -98,6 +100,31 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
        this.listen();
    }

+    /**
+     * 设置这个渲染器的缩放比
+     * @param scale 缩放比
+     */
+    setScale(scale: number) {
+        this.scale = scale;
+        this.onResize(scale);
+    }
+
+    /**
+     * 获取这个渲染器的缩放比
+     */
+    getScale() {
+        return this.scale;
+    }
+
+    onResize(scale: number): void {
+        this.target.setScale(scale);
+        const width = this.target.width * scale;
+        const height = this.target.height * scale;
+        this.target.canvas.style.width = `${width}px`;
+        this.target.canvas.style.height = `${height}px`;
+        super.onResize(scale);
+    }
+
    private getMountCanvas(canvas: string | HTMLCanvasElement) {
        if (typeof canvas === 'string') {
            return document.querySelector(canvas) as HTMLCanvasElement;
@ -576,7 +603,6 @@ export class MotaRenderer extends Container implements IRenderTreeRoot {
    destroy() {
        super.destroy();
        MotaRenderer.list.delete(this.id);
-        this.target.delete();
        this.abort?.abort();
    }

--- a/packages/render-core/src/utils.ts
+++ b/packages/render-core/src/utils.ts
@ -1,6 +1,4 @@
 import { TimingFn } from 'mutate-animate';
-// import { RenderAdapter } from './adapter';
-// import { FloorViewport } from './preset/viewport';
 import { JSX } from 'vue/jsx-runtime';
 import { DefineComponent, DefineSetupFnComponent } from 'vue';
 import { MotaOffscreenCanvas2D } from './canvas2d';
@ -14,10 +12,10 @@ export type Props<
 > = T extends keyof JSX.IntrinsicElements
    ? JSX.IntrinsicElements[T]
    : T extends DefineSetupFnComponent<any>
-      ? InstanceType<T>['$props'] & InstanceType<T>['$emits']
-      : T extends DefineComponent
-        ? InstanceType<T>['$props'] & InstanceType<T>['$emits']
-        : unknown;
+    ? InstanceType<T>['$props'] & InstanceType<T>['$emits']
+    : T extends DefineComponent
+    ? InstanceType<T>['$props'] & InstanceType<T>['$emits']
+    : unknown;

 export type ElementLocator = [
    x?: number,
--- a/packages/render-elements/src/index.ts
+++ b/packages/render-elements/src/index.ts
@ -1,24 +1,3 @@
-import { createCache } from './cache';
-import { createFrame } from './frame';
-import { createLayer } from './layer';
-import { createViewport } from './viewport';
-
-export function create() {
-    createCache();
-    createFrame();
-    createLayer();
-    createViewport();
-}
-
-export * from './animate';
-export * from './block';
-export * from './cache';
-export * from './camera';
-export * from './frame';
 export * from './graphics';
-export * from './hero';
-export * from './layer';
 export * from './misc';
 export * from './types';
-export * from './utils';
-export * from './viewport';