diff --git a/packages-user/client-modules/src/action/move.ts b/packages-user/client-modules/src/action/move.ts
index 822042c..7e97704 100644
--- 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>;
diff --git a/packages-user/client-modules/src/render/components/textboxTyper.ts b/packages-user/client-modules/src/render/components/textboxTyper.ts
index 7c5ad66..c3ab13e 100644
--- 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();
     }
 
     /**
diff --git a/packages-user/client-modules/src/render/components/tip.tsx b/packages-user/client-modules/src/render/components/tip.tsx
index cbb805f..55e5f59 100644
--- 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;
diff --git a/packages-user/client-modules/src/render/elements/block.ts b/packages-user/client-modules/src/render/elements/block.ts
index cbebdcd..c1820f0 100644
--- 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 {}
 }
diff --git a/packages-user/client-modules/src/render/elements/cache.ts b/packages-user/client-modules/src/render/elements/cache.ts
index 187b699..affd827 100644
--- 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;
 }
diff --git a/packages-user/client-modules/src/render/damage.ts b/packages-user/client-modules/src/render/elements/damage.ts
similarity index 99%
rename from packages-user/client-modules/src/render/damage.ts
rename to packages-user/client-modules/src/render/elements/damage.ts
index ec9a441..fa6374c 100644
--- a/packages-user/client-modules/src/render/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;
 
diff --git a/packages-user/client-modules/src/render/elements/index.ts b/packages-user/client-modules/src/render/elements/index.ts
index ac1be29..b0cf7ce 100644
--- 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';
diff --git a/packages-user/client-modules/src/render/itemDetail.ts b/packages-user/client-modules/src/render/elements/itemDetail.ts
similarity index 97%
rename from packages-user/client-modules/src/render/itemDetail.ts
rename to packages-user/client-modules/src/render/elements/itemDetail.ts
index f52dcc8..5c33aab 100644
--- a/packages-user/client-modules/src/render/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);
diff --git a/packages-user/client-modules/src/render/elements/layer.ts b/packages-user/client-modules/src/render/elements/layer.ts
index d746942..1aaa0d4 100644
--- 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);
diff --git a/packages-user/client-modules/src/render/elements/misc.ts b/packages-user/client-modules/src/render/elements/misc.ts
index 17c8a6e..40767e3 100644
--- 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;
     }
 
diff --git a/packages/render-elements/src/utils.ts b/packages-user/client-modules/src/render/elements/utils.ts
similarity index 100%
rename from packages/render-elements/src/utils.ts
rename to packages-user/client-modules/src/render/elements/utils.ts
diff --git a/packages-user/client-modules/src/render/index.tsx b/packages-user/client-modules/src/render/index.tsx
index 49a0cfe..f137c19 100644
--- 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() {
diff --git a/packages-user/client-modules/src/render/legacy/gameCanvas.ts b/packages-user/client-modules/src/render/legacy/gameCanvas.ts
index 091af03..6fdb840 100644
--- 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);
     }
 }
diff --git a/packages-user/client-modules/src/render/legacy/halo.ts b/packages-user/client-modules/src/render/legacy/halo.ts
index fcffc46..6b4b0d9 100644
--- 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;
diff --git a/packages-user/client-modules/src/render/legacy/portal.ts b/packages-user/client-modules/src/render/legacy/portal.ts
index 8a60eb8..af9133d 100644
--- 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);
         });
     }
diff --git a/packages-user/client-modules/src/render/loopMap.ts b/packages-user/client-modules/src/render/loopMap.ts
index 847b3ac..7f173b1 100644
--- 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);
     });
 }
diff --git a/packages-user/client-modules/src/render/renderer.ts b/packages-user/client-modules/src/render/renderer.ts
new file mode 100644
index 0000000..3c1984f
--- /dev/null
+++ 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
+});
diff --git a/packages-user/client-modules/src/render/ui/main.tsx b/packages-user/client-modules/src/render/ui/main.tsx
index 45adef4..b471347 100644
--- 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[] = [
diff --git a/packages-user/data-state/src/mechanism/misc.ts b/packages-user/data-state/src/mechanism/misc.ts
index 7478189..9fb68a2 100644
--- 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 => {
diff --git a/packages-user/data-state/src/state/hero.ts b/packages-user/data-state/src/state/hero.ts
index 5ac9089..642947b 100644
--- 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 => {
diff --git a/packages-user/data-state/src/state/move.ts b/packages-user/data-state/src/state/move.ts
index ff0bbc1..1ec7765 100644
--- 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) {
diff --git a/packages-user/entry-client/src/create.ts b/packages-user/entry-client/src/create.ts
index 27f63b0..4d15a84 100644
--- 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');
diff --git a/packages-user/legacy-plugin-client/src/boss/palaceBoss.ts b/packages-user/legacy-plugin-client/src/boss/palaceBoss.ts
index 5f45bce..766355e 100644
--- 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();
diff --git a/packages-user/legacy-plugin-client/src/boss/palaceBossProjectile.ts b/packages-user/legacy-plugin-client/src/boss/palaceBossProjectile.ts
index 2e93823..403d9eb 100644
--- 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();
     }
diff --git a/packages-user/legacy-plugin-client/src/boss/towerBoss.ts b/packages-user/legacy-plugin-client/src/boss/towerBoss.ts
index a33a2cd..b04b2ee 100644
--- 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();
diff --git a/packages-user/legacy-plugin-client/src/boss/towerBossProjectile.ts b/packages-user/legacy-plugin-client/src/boss/towerBossProjectile.ts
index 8e98a1e..b23f0bc 100644
--- 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;
     }
 
diff --git a/packages-user/legacy-plugin-client/src/chase/chase.ts b/packages-user/legacy-plugin-client/src/chase/chase.ts
index 0cad83e..b1dc6ae 100644
--- 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();
     }
 }
diff --git a/packages-user/legacy-plugin-client/src/chase/chase1.ts b/packages-user/legacy-plugin-client/src/chase/chase1.ts
index 85f1fb8..0560635 100644
--- 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) {
diff --git a/packages-user/legacy-plugin-data/src/fallback.ts b/packages-user/legacy-plugin-data/src/fallback.ts
index 787993c..ae36dce 100644
--- 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;
diff --git a/packages/legacy-ui/src/fx/shadow.ts b/packages/legacy-ui/src/fx/shadow.ts
index b495367..427da24 100644
--- 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);
diff --git a/packages/legacy-ui/src/preset/index.ts b/packages/legacy-ui/src/preset/index.ts
index 2a89c45..40400c9 100644
--- 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';
diff --git a/packages/legacy-ui/src/ui/skillTree.vue b/packages/legacy-ui/src/ui/skillTree.vue
index 5b165f6..302f0e7 100644
--- 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;
diff --git a/packages/render-core/src/canvas2d.ts b/packages/render-core/src/canvas2d.ts
index 9e7ea0a..c973115 100644
--- 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();
-    });
-});
diff --git a/packages/render-core/src/container.ts b/packages/render-core/src/container.ts
index 5809dd8..d402662 100644
--- 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;
diff --git a/packages/render-core/src/gl2.ts b/packages/render-core/src/gl2.ts
index 794a46b..a0ea302 100644
--- 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;
     }
diff --git a/packages/render-core/src/item.ts b/packages/render-core/src/item.ts
index 5924d8d..44c713e 100644
--- 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();
     }
 }
diff --git a/packages/render-core/src/render.ts b/packages/render-core/src/render.ts
index ef70e98..c6bf273 100644
--- 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();
     }
 
diff --git a/packages/render-core/src/utils.ts b/packages/render-core/src/utils.ts
index d8d8979..54350e8 100644
--- 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,
diff --git a/packages/render-elements/src/index.ts b/packages/render-elements/src/index.ts
index 1361fb6..17db1e8 100644
--- 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';