refactor: 换用新的缩放方案

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

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();
     }
 
     /**

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;

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

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;
 }

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;
 

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';

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

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

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;
     }
 

packages-user/client-modules/src/render/elements/utils.ts

@@ -0,0 +1,14 @@
+import { RenderAdapter } from '@motajs/render-core';
+import { FloorViewport } from './viewport';
+
+export function disableViewport() {
+    const adapter = RenderAdapter.get<FloorViewport>('viewport');
+    if (!adapter) return;
+    adapter.sync('disable');
+}
+
+export function enableViewport() {
+    const adapter = RenderAdapter.get<FloorViewport>('viewport');
+    if (!adapter) return;
+    adapter.sync('enable');
+}

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

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);
     }
 }

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;

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);
         });
     }

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);
     });
 }

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
+});

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[] = [