AncTe/template
1
0
Fork 0
mirror of https://github.com/motajs/template.git synced 2026-04-12 15:11:10 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 渲染相关问题

Browse Source
This commit is contained in:
unanmed 2026-03-02 12:30:46 +08:00
parent bea2725d6a
commit 57108367b2
4 changed files with 109 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {
ILayerGroupRenderExtends,
LayerGroupAnimate,
FloorViewport,
ILayerRenderExtends,
HeroRenderer,
LayerDoorAnimate,
LayerGroup
} from '../elements';
import { 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}>
<layer layer="bg" zIndex={10}></layer>
<layer layer="bg2" zIndex={20}></layer>
<layer layer="event" zIndex={30} ex={eventExtends}></layer>
<layer layer="fg" zIndex={40}></layer>
<layer layer="fg2" zIndex={50}></layer>
</layer-group>
<map-render
renderer={mainMapRenderer}
layerState={state.layer}
loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]}
/>
<Textbox id="main-textbox" {...mainTextboxProps}></Textbox>
<FloorChange id="floor-change" zIndex={50}></FloorChange>
<Tip

52
packages-user/data-state/src/legacy/move.ts
View File

@ -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 (!core.isReplaying() || core.status.replay.speed <= 3) {
adapter.sync('startAnimate');
await adapter.all('readyMove');
if (!viewport) return;
if (!core.isReplaying() || core.status.replay.speed <= 12) {
state.hero.startMove();
}
// 这里要检查前面那一格能不能走，不能走则不触发平滑视角，以避免撞墙上视角卡住
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;
adapter.sync('endAnimate');
await adapter.all('endMove');
if (!viewport) return;
await state.hero.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;
if (!adapter) return;
adapter.sync('setMoveSpeed', speed);
this.moveSpeed = 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);
if (core.isReplaying() && core.status.replay.speed > 3) {
adapter.sync('endAnimate');
await sleep(speed);
await adapter.all('setHeroLoc', x, y);
} else {
if (core.isReplaying()) {
adapter.sync('startAnimate');
const replaying = core.isReplaying();
if (replaying) {
if (core.status.replay.speed > 12) {
await state.hero.endMove();
await sleep(speed);
state.hero.setPosition(x, y);
} else {
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;
});

38
public/libs/maps.js
View File

@ -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,
y,
block.x,
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,
y,
block.x,
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);
}
};
////// 重置地图 //////

42
public/project/functions.js
View File

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