fix: 渲染相关问题

packages-user/client-modules/src/render/ui/main.tsx

@@ -35,34 +35,16 @@ import {
     RightStatusBar
 } from './statusBar';
 import { ReplayingStatus } from './toolbar';
-import { getHeroStatusOn } from '@user/data-state';
+import { getHeroStatusOn, state } from '@user/data-state';
 import { hook } from '@user/data-base';
-import { FloorDamageExtends, FloorItemDetail } from '../elements';
 import { FloorChange } from '../legacy/fallback';
 import { mainUIController } from './controller';
-import {
+import { LayerGroup } from '../elements';
-    ILayerGroupRenderExtends,
-    LayerGroupAnimate,
-    FloorViewport,
-    ILayerRenderExtends,
-    HeroRenderer,
-    LayerDoorAnimate,
-    LayerGroup
-} from '../elements';
 import { isNil } from 'lodash-es';
+import { mainMapRenderer } from '../commonIns';
 
 const MainScene = defineComponent(() => {
     //#region 基本定义
-    const layerGroupExtends: ILayerGroupRenderExtends[] = [
-        new FloorDamageExtends(),
-        new FloorItemDetail(),
-        new LayerGroupAnimate(),
-        new FloorViewport()
-    ];
-    const eventExtends: ILayerRenderExtends[] = [
-        new HeroRenderer(),
-        new LayerDoorAnimate()
-    ];
     const mainTextboxProps: Props<typeof Textbox> = {
         text: '',
         hidden: true,
@@ -275,13 +257,11 @@ const MainScene = defineComponent(() => {
                 onMove={moveMap}
                 noanti
             >
-                <layer-group id="layer-main" ex={layerGroupExtends} ref={map}>
+                <map-render
-                    <layer layer="bg" zIndex={10}></layer>
+                    renderer={mainMapRenderer}
-                    <layer layer="bg2" zIndex={20}></layer>
+                    layerState={state.layer}
-                    <layer layer="event" zIndex={30} ex={eventExtends}></layer>
+                    loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]}
-                    <layer layer="fg" zIndex={40}></layer>
+                />
-                    <layer layer="fg2" zIndex={50}></layer>
-                </layer-group>
                 <Textbox id="main-textbox" {...mainTextboxProps}></Textbox>
                 <FloorChange id="floor-change" zIndex={50}></FloorChange>
                 <Tip

packages-user/data-state/src/legacy/move.ts

@@ -12,6 +12,7 @@ import type {
     LayerMovingRenderable
 } from '@user/client-modules';
 import { sleep } from '@motajs/common';
+import { fromDirectionString, state } from '..';
 
 // todo: 转身功能
 
@@ -468,12 +469,10 @@ export class HeroMover extends ObjectMoverBase {
 
     protected async onMoveStart(controller: IMoveController): Promise<void> {
         this.beforeMoveSpeed = this.moveSpeed;
-        const adapter = HeroMover.adapter;
         const viewport = HeroMover.viewport;
-        if (!adapter || !viewport) return;
+        if (!viewport) return;
-        if (!core.isReplaying() || core.status.replay.speed <= 3) {
+        if (!core.isReplaying() || core.status.replay.speed <= 12) {
-            adapter.sync('startAnimate');
+            state.hero.startMove();
-            await adapter.all('readyMove');
         }
         // 这里要检查前面那一格能不能走，不能走则不触发平滑视角，以避免撞墙上视角卡住
         if (!this.ignoreTerrain) {
@@ -495,11 +494,9 @@ export class HeroMover extends ObjectMoverBase {
     protected async onMoveEnd(controller: IMoveController): Promise<void> {
         this.moveSpeed = this.beforeMoveSpeed;
         this.onSetMoveSpeed(this.moveSpeed, controller);
-        const adapter = HeroMover.adapter;
         const viewport = HeroMover.viewport;
-        if (!adapter || !viewport) return;
+        if (!viewport) return;
-        adapter.sync('endAnimate');
+        await state.hero.endMove();
-        await adapter.all('endMove');
         viewport.sync('endMove');
         core.clearContinueAutomaticRoute();
         core.stopAutomaticRoute();
@@ -607,40 +604,43 @@ export class HeroMover extends ObjectMoverBase {
         speed: number,
         _controller: IMoveController
     ): void {
-        const adapter = HeroMover.adapter;
+        this.moveSpeed = speed;
-        if (!adapter) return;
-        adapter.sync('setMoveSpeed', speed);
     }
 
     /**
      * 移动动画
      * @param x 目标横坐标
      * @param y 目标纵坐标
-     * @param showDir 显示方向
+     * @param _showDir 显示方向
      * @param moveDir 移动方向
      */
     private async moveAnimate(
         x: number,
         y: number,
-        showDir: Dir,
+        _showDir: Dir,
         moveDir: Dir2
     ) {
-        const adapter = HeroMover.adapter;
         const viewport = HeroMover.viewport;
-        if (!adapter || !viewport) return;
+        if (!viewport) return;
         const replay = core.status.replay.speed;
         const speed = replay === 24 ? 1 : this.moveSpeed / replay;
         viewport.all('moveTo', x, y, speed * 1.6);
-        adapter.sync('setAnimateDir', showDir);
+        const replaying = core.isReplaying();
-        if (core.isReplaying() && core.status.replay.speed > 3) {
+        if (replaying) {
-            adapter.sync('endAnimate');
+            if (core.status.replay.speed > 12) {
-            await sleep(speed);
+                await state.hero.endMove();
-            await adapter.all('setHeroLoc', x, y);
+                await sleep(speed);
-        } else {
+                state.hero.setPosition(x, y);
-            if (core.isReplaying()) {
+            } else {
-                adapter.sync('startAnimate');
+                state.hero.startMove();
+                await state.hero.move(
+                    fromDirectionString(moveDir),
+                    this.moveSpeed / core.status.replay.speed
+                );
             }
-            await adapter.all('move', moveDir);
+        } else {
+            state.hero.startMove();
+            await state.hero.move(fromDirectionString(moveDir), this.moveSpeed);
         }
     }
 
@@ -711,10 +711,8 @@ loading.once('coreInit', () => {
 loading.once('coreInit', () => {
     if (main.replayChecking || main.mode === 'editor') return;
     const Adapter = Mota.require('@motajs/render').RenderAdapter;
-    const adapter = Adapter.get<HeroRenderer>('hero-adapter');
     const viewport = Adapter.get<FloorViewport>('viewport');
     const layerAdapter = Adapter.get<Layer>('layer');
-    HeroMover.adapter = adapter;
     HeroMover.viewport = viewport;
     BlockMover.adapter = layerAdapter;
 });

public/libs/maps.js

@@ -3144,6 +3144,11 @@ maps.prototype.hideBlock = function (x, y, floorId) {
         0,
         block?.id ?? 0
     );
+    if (floorId === core.status.floorId) {
+        const { layer } = Mota.require('@user/data-state').state;
+        const event = layer.getLayerByAlias('event');
+        event.setBlock(0, x, y);
+    }
 
     // 删除动画，清除地图
     this._removeBlockFromMap(floorId, block);
@@ -3161,12 +3166,17 @@ maps.prototype.hideBlockByIndex = function (index, floorId) {
     this._updateMapArray(floorId, block.x, block.y);
     Mota.require('@user/data-base').hook.emit(
         'setBlock',
-        x,
+        block.x,
-        y,
+        block.y,
         floorId,
         0,
         block?.id ?? 0
     );
+    if (floorId === core.status.floorId) {
+        const { layer } = Mota.require('@user/data-state').state;
+        const event = layer.getLayerByAlias('event');
+        event.setBlock(0, block.x, block.y);
+    }
 };
 
 ////// 一次性隐藏多个block //////
@@ -3239,6 +3249,11 @@ maps.prototype.removeBlockByIndex = function (index, floorId) {
         0,
         block?.id ?? 0
     );
+    if (floorId === core.status.floorId) {
+        const { layer } = Mota.require('@user/data-state').state;
+        const event = layer.getLayerByAlias('event');
+        event.setBlock(0, block.x, block.y);
+    }
 };
 
 ////// 一次性删除多个block //////
@@ -3393,6 +3408,11 @@ maps.prototype.setBlock = function (number, x, y, floorId, noredraw) {
         number,
         originBlock?.id ?? 0
     );
+    if (floorId === core.status.floorId) {
+        const { layer } = Mota.require('@user/data-state').state;
+        const event = layer.getLayerByAlias('event');
+        event.setBlock(number, x, y);
+    }
 };
 
 maps.prototype.animateSetBlock = function (
@@ -3588,12 +3608,17 @@ maps.prototype.replaceBlock = function (fromNumber, toNumber, floorId) {
             this._updateMapArray(floorId, block.x, block.y);
             Mota.require('@user/data-base').hook.emit(
                 'setBlock',
-                x,
+                block.x,
-                y,
+                block.y,
                 floorId,
                 fromNumber,
                 toNumber
             );
+            if (floorId === core.status.floorId) {
+                const { layer } = Mota.require('@user/data-state').state;
+                const event = layer.getLayerByAlias('event');
+                event.setBlock(toNumber, block.x, block.y);
+            }
         }
     }, this);
     if (floorId == core.status.floorId) core.redrawMap();
@@ -3643,6 +3668,11 @@ maps.prototype.setBgFgBlock = function (name, number, x, y, floorId) {
         y,
         floorId
     );
+    if (floorId === core.status.floorId) {
+        const { layer } = Mota.require('@user/data-state').state;
+        const mapLayer = layer.getLayerByAlias(name);
+        mapLayer.setBlock(block.id, x, y);
+    }
 };
 
 ////// 重置地图 //////

public/project/functions.js

@@ -133,6 +133,48 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
             // ---------- 重绘新地图；这一步将会设置core.status.floorId ---------- //
             core.drawMap(floorId);
 
+            // 更新地图状态
+            const { state } = Mota.require('@user/data-state');
+            const bg = core.maps._getBgFgMapArray('bg', floorId);
+            const bg2 = core.maps._getBgFgMapArray('bg2', floorId);
+            const event = core.getMapArray(floorId);
+            const fg = core.maps._getBgFgMapArray('fg', floorId);
+            const fg2 = core.maps._getBgFgMapArray('fg2', floorId);
+            const { width, height } = core.floors[floorId];
+            const bgLayer = state.layer.getLayerByAlias('bg');
+            const bg2Layer = state.layer.getLayerByAlias('bg2');
+            const eventLayer = state.layer.getLayerByAlias('event');
+            const fgLayer = state.layer.getLayerByAlias('fg');
+            const fg2Layer = state.layer.getLayerByAlias('fg2');
+            state.layer.resizeLayer(bgLayer, width, height);
+            state.layer.resizeLayer(bg2Layer, width, height);
+            state.layer.resizeLayer(eventLayer, width, height);
+            state.layer.resizeLayer(fgLayer, width, height);
+            state.layer.resizeLayer(fg2Layer, width, height);
+            if (bg.length > 0) {
+                const array = new Uint32Array(bg.flat());
+                bgLayer.putMapData(array, 0, 0, width);
+            }
+            if (bg2.length > 0) {
+                const array = new Uint32Array(bg2.flat());
+                bg2Layer.putMapData(array, 0, 0, width);
+            }
+            if (event.length > 0) {
+                const array = new Uint32Array(event.flat());
+                eventLayer.putMapData(array, 0, 0, width);
+            }
+            if (fg.length > 0) {
+                const array = new Uint32Array(fg.flat());
+                fgLayer.putMapData(array, 0, 0, width);
+            }
+            if (fg2.length > 0) {
+                const array = new Uint32Array(fg2.flat());
+                fg2Layer.putMapData(array, 0, 0, width);
+            }
+            const back = core.floors[floorId].defaultGround;
+            const id = core.maps.getNumberById(back);
+            state.layer.setBackground(id);
+
             // 设置勇士的位置
             heroLoc.direction = core.turnDirection(heroLoc.direction);
             core.setHeroLoc('x', heroLoc.x);