mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-04-04 19:07:06 +08:00
1407 lines
44 KiB
TypeScript
1407 lines
44 KiB
TypeScript
import { MotaOffscreenCanvas2D } from '@/core/fx/canvas2d';
|
||
import { Container } from '../container';
|
||
import { Sprite } from '../sprite';
|
||
import { TimingFn } from 'mutate-animate';
|
||
import { IAnimateFrame, renderEmits, RenderItem } from '../item';
|
||
import { logger } from '@/core/common/logger';
|
||
import { RenderableData, texture } from '../cache';
|
||
import { glMatrix } from 'gl-matrix';
|
||
import { BlockCacher } from './block';
|
||
import { Transform } from '../transform';
|
||
import { LayerFloorBinder, LayerGroupFloorBinder } from './floor';
|
||
|
||
export interface ILayerGroupRenderExtends {
|
||
/** 拓展的唯一标识符 */
|
||
readonly id: string;
|
||
|
||
/**
|
||
* 当拓展被激活时执行的函数（一般就是拓展加载至目标LayerGroup实例时立刻执行）
|
||
* @param group 目标LayerGroup实例
|
||
*/
|
||
awake?(group: LayerGroup): void;
|
||
|
||
/**
|
||
* 当一个Layer层级被添加时执行的函数
|
||
* @param group 目标LayerGroup实例
|
||
* @param layer 添加的Layer层实例
|
||
*/
|
||
onLayerAdd?(group: LayerGroup, layer: Layer): void;
|
||
|
||
/**
|
||
* 当一个Layer层级被移除时执行的函数
|
||
* @param group 目标LayerGroup实例
|
||
* @param layer 移除的Layer层实例
|
||
*/
|
||
onLayerRemove?(group: LayerGroup, layer: Layer): void;
|
||
|
||
/**
|
||
* 当一个Layer层级从显示到隐藏的状态切换时执行的函数
|
||
* @param group 目标LayerGroup实例
|
||
* @param layer 隐藏的Layer层实例
|
||
*/
|
||
onLayerHide?(group: LayerGroup, layer: Layer): void;
|
||
|
||
/**
|
||
* 当一个Layer层级从隐藏到显示状态切换时执行的函数
|
||
* @param group 目标LayerGroup实例
|
||
* @param layer 显示的Layer层实例
|
||
*/
|
||
onLayerShow?(group: LayerGroup, layer: Layer): void;
|
||
|
||
/**
|
||
* 当执行 {@link LayerGroup.emptyLayer} 时执行的函数，即清空所有挂载的Layer时执行的函数
|
||
* @param group 目标LayerGroup实例
|
||
*/
|
||
onEmptyLayer?(group: LayerGroup): void;
|
||
|
||
/**
|
||
* 当帧动画更新时执行的函数，例如从第一帧变成第二帧时
|
||
* @param group 目标LayerGroup实例
|
||
* @param frame 当前帧数
|
||
*/
|
||
onFrameUpdate?(group: LayerGroup, frame: number): void;
|
||
|
||
/**
|
||
* 在渲染之前执行的函数
|
||
* @param group 目标LayerGroup实例
|
||
*/
|
||
onBeforeRender?(group: LayerGroup): void;
|
||
|
||
/**
|
||
* 在渲染之后执行的函数
|
||
* @param group 目标LayerGroup实例
|
||
*/
|
||
onAfterRender?(group: LayerGroup): void;
|
||
|
||
/**
|
||
* 当拓展被取消挂载时执行的函数（LayerGroup被销毁，拓展被移除等）
|
||
* @param group 目标LayerGroup实例
|
||
*/
|
||
onDestroy?(group: LayerGroup): void;
|
||
}
|
||
|
||
export type FloorLayer = 'bg' | 'bg2' | 'event' | 'fg' | 'fg2';
|
||
|
||
export class LayerGroup extends Container implements IAnimateFrame {
|
||
/** 地图组列表 */
|
||
// static list: Set<LayerGroup> = new Set();
|
||
|
||
cellSize: number = 32;
|
||
blockSize: number = core._WIDTH_;
|
||
|
||
/** 当前楼层 */
|
||
floorId?: FloorIds;
|
||
/** 是否绑定了当前层 */
|
||
bindThisFloor: boolean = false;
|
||
/** 伤害显示层 */
|
||
// damage?: Damage;
|
||
/** 地图显示层 */
|
||
layers: Map<FloorLayer, Layer> = new Map();
|
||
|
||
private needRender?: NeedRenderData;
|
||
private extend: Map<string, ILayerGroupRenderExtends> = new Map();
|
||
|
||
constructor() {
|
||
super('static', false);
|
||
|
||
this.setHD(true);
|
||
this.setAntiAliasing(false);
|
||
this.size(core._PX_, core._PY_);
|
||
|
||
this.on('afterRender', () => {
|
||
this.releaseNeedRender();
|
||
});
|
||
|
||
renderEmits.addFramer(this);
|
||
|
||
const binder = new LayerGroupFloorBinder();
|
||
this.extends(binder);
|
||
binder.bindThis();
|
||
}
|
||
|
||
/**
|
||
* 添加渲染拓展，可以将渲染拓展理解为一类插件，通过指定的函数在对应时刻执行一些函数，
|
||
* 来达到执行自己想要的功能的效果。例如样板自带的勇士渲染、伤害渲染等都由此实现。
|
||
* 具体能干什么参考 {@link ILayerGroupRenderExtends}
|
||
* @param ex 渲染拓展对象
|
||
*/
|
||
extends(ex: ILayerGroupRenderExtends) {
|
||
this.extend.set(ex.id, ex);
|
||
ex.awake?.(this);
|
||
}
|
||
|
||
/**
|
||
* 移除一个渲染拓展
|
||
* @param id 要移除的拓展
|
||
*/
|
||
removeExtends(id: string) {
|
||
const ex = this.extend.get(id);
|
||
if (!ex) return;
|
||
this.extend.delete(id);
|
||
ex.onDestroy?.(this);
|
||
}
|
||
|
||
/**
|
||
* 获取一个已装载的拓展
|
||
* @param id 拓展id
|
||
*/
|
||
getExtends(id: string) {
|
||
return this.extend.get(id);
|
||
}
|
||
|
||
/**
|
||
* 设置渲染分块大小
|
||
* @param size 分块大小
|
||
*/
|
||
setBlockSize(size: number) {
|
||
this.blockSize = size;
|
||
this.layers.forEach(v => {
|
||
v.block.setBlockSize(size);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 设置每个图块的大小
|
||
* @param size 每个图块的大小
|
||
*/
|
||
setCellSize(size: number) {
|
||
this.cellSize = size;
|
||
}
|
||
|
||
/**
|
||
* 清空所有层
|
||
*/
|
||
emptyLayer() {
|
||
this.removeChild(...this.layers.values());
|
||
this.layers.forEach(v => v.destroy());
|
||
this.layers.clear();
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onEmptyLayer?.(this);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 添加显示层
|
||
* @param layer 显示层
|
||
*/
|
||
addLayer(layer: FloorLayer) {
|
||
const l = new Layer();
|
||
l.layer = layer;
|
||
if (l.layer) this.layers.set(l.layer, l);
|
||
this.appendChild(l);
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onLayerAdd?.(this, l);
|
||
}
|
||
|
||
return l;
|
||
}
|
||
|
||
/**
|
||
* 移除指定层
|
||
* @param layer 要移除的层，可以是Layer实例，也可以是字符串
|
||
*/
|
||
removeLayer(layer: FloorLayer | Layer) {
|
||
let ins: Layer | undefined;
|
||
if (typeof layer === 'string') {
|
||
const la = this.layers.get(layer);
|
||
if (!la) return;
|
||
this.removeChild(la);
|
||
this.layers.delete(layer);
|
||
la.destroy();
|
||
ins = la;
|
||
} else {
|
||
const arr = [...this.layers];
|
||
const la = arr.find(v => v[1] === layer)?.[0];
|
||
if (la && this.layers.delete(la)) {
|
||
this.removeChild(layer);
|
||
layer.destroy();
|
||
ins = layer;
|
||
}
|
||
}
|
||
if (ins) {
|
||
for (const ex of this.extend.values()) {
|
||
ex.onLayerRemove?.(this, ins);
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取一个地图层实例，例如获取背景层等
|
||
* @param layer 地图层
|
||
*/
|
||
getLayer(layer: FloorLayer) {
|
||
return this.layers.get(layer);
|
||
}
|
||
|
||
/**
|
||
* 隐藏某个层
|
||
* @param layer 要隐藏的层
|
||
*/
|
||
hideLayer(layer: FloorLayer) {
|
||
const la = this.getLayer(layer);
|
||
if (!la) return;
|
||
la.hide();
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onLayerHide?.(this, la);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示某个层
|
||
* @param layer 要显示的层
|
||
*/
|
||
showLayer(layer: FloorLayer) {
|
||
const la = this.getLayer(layer);
|
||
if (!la) return;
|
||
la.show();
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onLayerShow?.(this, la);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 缓存计算应该渲染的块
|
||
* @param transform 变换矩阵
|
||
* @param blockData 分块信息
|
||
*/
|
||
cacheNeedRender(transform: Transform, block: BlockCacher<any>) {
|
||
return (
|
||
this.needRender ??
|
||
(this.needRender = calNeedRenderOf(transform, this.cellSize, block))
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 释放应该渲染块缓存
|
||
*/
|
||
releaseNeedRender() {
|
||
this.needRender = void 0;
|
||
}
|
||
|
||
/**
|
||
* 更新动画帧
|
||
*/
|
||
updateFrameAnimate() {
|
||
this.update(this);
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onFrameUpdate?.(this, RenderItem.animatedFrame % 4);
|
||
}
|
||
}
|
||
|
||
destroy(): void {
|
||
for (const ex of this.extend.values()) {
|
||
ex.onDestroy?.(this);
|
||
}
|
||
super.destroy();
|
||
renderEmits.removeFramer(this);
|
||
}
|
||
}
|
||
|
||
export function calNeedRenderOf(
|
||
transform: Transform,
|
||
cell: number,
|
||
block: BlockCacher<any>
|
||
): NeedRenderData {
|
||
const w = (core._WIDTH_ * cell) / 2;
|
||
const h = (core._HEIGHT_ * cell) / 2;
|
||
const size = block.blockSize;
|
||
|
||
// -1是因为宽度是core._PX_，从0开始的话，末尾索引就是core._PX_ - 1
|
||
const [x1, y1] = Transform.untransformed(transform, -w, -h);
|
||
const [x2, y2] = Transform.untransformed(transform, w - 1, -h);
|
||
const [x3, y3] = Transform.untransformed(transform, w - 1, h - 1);
|
||
const [x4, y4] = Transform.untransformed(transform, -w, h - 1);
|
||
|
||
const res: Set<number> = new Set();
|
||
/** 一个纵坐标对应的所有横坐标，用于填充 */
|
||
const xyMap: Map<number, number[]> = new Map();
|
||
|
||
const pushXY = (x: number, y: number) => {
|
||
let arr = xyMap.get(y);
|
||
if (!arr) {
|
||
arr = [];
|
||
xyMap.set(y, arr);
|
||
}
|
||
arr.push(x);
|
||
return arr;
|
||
};
|
||
|
||
[
|
||
[x1, y1, x2, y2],
|
||
[x2, y2, x3, y3],
|
||
[x3, y3, x4, y4],
|
||
[x4, y4, x1, y1]
|
||
].forEach(([fx0, fy0, tx0, ty0]) => {
|
||
const fx = Math.floor(fx0 / cell);
|
||
const fy = Math.floor(fy0 / cell);
|
||
const tx = Math.floor(tx0 / cell);
|
||
const ty = Math.floor(ty0 / cell);
|
||
const dx = tx - fx;
|
||
const dy = ty - fy;
|
||
const k = dy / dx;
|
||
|
||
// 斜率无限的时候，竖直
|
||
if (!isFinite(k)) {
|
||
const min = k < 0 ? ty : fy;
|
||
const max = k < 0 ? fy : ty;
|
||
const [x, y] = block.getBlockXY(fx, min);
|
||
const [, ey] = block.getBlockXY(fx, max);
|
||
for (let i = y; i <= ey; i++) {
|
||
pushXY(x, i);
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
const [fbx, fby] = block.getBlockXY(fx, fy);
|
||
|
||
// 当斜率为0时
|
||
if (glMatrix.equals(k, 0)) {
|
||
const [ex] = block.getBlockXY(tx, fy);
|
||
pushXY(fby, fbx).push(ex);
|
||
return;
|
||
}
|
||
|
||
// 否则使用 Bresenham 直线算法
|
||
if (Math.abs(k) >= 1) {
|
||
// 斜率大于一，y方向递增
|
||
const d = Math.sign(dy) * size;
|
||
const f = fby * size;
|
||
const dir = dy > 0;
|
||
|
||
const ex = Math.floor(tx / size);
|
||
const ey = Math.floor(ty / size);
|
||
pushXY(ex, ey);
|
||
|
||
let now = f;
|
||
let last = fbx;
|
||
let ny = fby;
|
||
do {
|
||
const bx = Math.floor((fx + (now - fy) / k) / size);
|
||
pushXY(bx, ny);
|
||
if (bx !== last) {
|
||
if (dir) pushXY(bx, ny - Math.sign(dy));
|
||
else pushXY(last, ny);
|
||
}
|
||
|
||
last = bx;
|
||
ny += Math.sign(dy);
|
||
now += d;
|
||
} while (dir ? ny <= ey : ny >= ey);
|
||
} else {
|
||
// 斜率小于一，x方向递增
|
||
const d = Math.sign(dx) * size;
|
||
const f = fbx * size;
|
||
const dir = dx > 0;
|
||
|
||
const ex = Math.floor(tx / size);
|
||
const ey = Math.floor(ty / size);
|
||
pushXY(ex, ey);
|
||
|
||
let now = f;
|
||
let last = fby;
|
||
let nx = fbx;
|
||
do {
|
||
const by = Math.floor((fy + k * (now - fx)) / size);
|
||
if (by !== last) {
|
||
if (dir) pushXY(nx - Math.sign(dx), by);
|
||
else pushXY(nx, last);
|
||
}
|
||
pushXY(nx, by);
|
||
last = by;
|
||
nx += Math.sign(dx);
|
||
now += d;
|
||
} while (dir ? nx <= ex : nx >= ex);
|
||
}
|
||
});
|
||
|
||
// 然后进行填充
|
||
const { width: bw, height: bh } = block.blockData;
|
||
const back: [number, number][] = [];
|
||
xyMap.forEach((x, y) => {
|
||
if (x.length === 1) {
|
||
const index = y * bw + x[0];
|
||
|
||
if (!back.some(v => v[0] === x[0] && v[1] === y))
|
||
back.push([x[0], y]);
|
||
if (index < 0 || index >= bw * bh) return;
|
||
res.add(index);
|
||
}
|
||
const max = Math.max(...x);
|
||
const min = Math.min(...x);
|
||
|
||
for (let i = min; i <= max; i++) {
|
||
const index = y * bw + i;
|
||
|
||
if (!back.some(v => v[0] === i && v[1] === y)) back.push([i, y]);
|
||
if (index < 0 || index >= bw * bh) continue;
|
||
res.add(index);
|
||
}
|
||
});
|
||
|
||
return { res, back };
|
||
}
|
||
|
||
export interface ILayerRenderExtends {
|
||
/** 拓展的唯一标识符 */
|
||
readonly id: string;
|
||
|
||
/**
|
||
* 当拓展被激活时执行的函数（一般就是拓展加载至目标Layer实例时立刻执行）
|
||
* @param layer 目标Layer实例
|
||
*/
|
||
awake?(layer: Layer): void;
|
||
|
||
/**
|
||
* 当楼层的背景图块被设置时执行的函数
|
||
* @param layer 目标Layer实例
|
||
* @param background 设置为的背景图块数字
|
||
*/
|
||
onBackgroundSet?(layer: Layer, background: AllNumbers): void;
|
||
|
||
/**
|
||
* 当背景图块图片被生成时执行的函数
|
||
* @param layer 目标Layer实例
|
||
* @param images 生成出的背景图块的单个分块图像，数组是因为背景图块可能是多帧图块
|
||
*/
|
||
onBackgroundGenerated?(layer: Layer, images: HTMLCanvasElement[]): void;
|
||
|
||
/**
|
||
* 当修改渲染数据时执行的函数，参见 {@link Layer.putRenderData}
|
||
* @param layer 目标Layer实例
|
||
* @param data 扁平化的数据信息
|
||
* @param width 数据宽度
|
||
* @param x 数据左上角横坐标
|
||
* @param y 数据左上角纵坐标
|
||
* @param calAutotile 是否重新计算自动元件的连接情况
|
||
*/
|
||
onDataPut?(
|
||
layer: Layer,
|
||
data: number[],
|
||
width: number,
|
||
x: number,
|
||
y: number,
|
||
calAutotile: boolean
|
||
): void;
|
||
|
||
/**
|
||
* 当更新某个区域内的大怪物renderable信息时执行的函数
|
||
* @param layer 目标Layer实例
|
||
* @param x 左上角横坐标
|
||
* @param y 左上角纵坐标
|
||
* @param width 区域宽度
|
||
* @param height 区域高度
|
||
* @param images 最终的大怪物renderable信息，等同于 {@link Layer.bigImages}
|
||
*/
|
||
onBigImagesUpdate?(
|
||
layer: Layer,
|
||
x: number,
|
||
y: number,
|
||
width: number,
|
||
height: number,
|
||
images: Map<number, LayerMovingRenderable>
|
||
): void;
|
||
|
||
/**
|
||
* 当计算完成区域内自动元件连接信息时执行的函数
|
||
* @param layer 目标Layer实例
|
||
* @param x 左上角横坐标
|
||
* @param y 左上角纵坐标
|
||
* @param width 区域宽度
|
||
* @param height 区域高度
|
||
* @param autotiles 计算出的自动元件连接信息，等同于 {@link Layer.autotiles}
|
||
*/
|
||
onAutotilesCaled?(
|
||
layer: Layer,
|
||
x: number,
|
||
y: number,
|
||
width: number,
|
||
height: number,
|
||
autotiles: Record<number, number>
|
||
): void;
|
||
|
||
/**
|
||
* 当地图大小修改时执行的函数
|
||
* @param layer 目标Layer实例
|
||
* @param width 地图宽度
|
||
* @param height 地图高度
|
||
*/
|
||
onMapResize?(layer: Layer, width: number, height: number): void;
|
||
|
||
/**
|
||
* 当更新指定区域的分块缓存时执行的函数
|
||
* @param layer 目标Layer实例
|
||
* @param blocks 更新区域内包含的分块索引
|
||
* @param x 区域的图格左上角横坐标
|
||
* @param y 区域的图格右上角横坐标
|
||
* @param width 区域的图格宽度
|
||
* @param height 区域的图格高度
|
||
*/
|
||
onBlocksUpdate?(
|
||
layer: Layer,
|
||
blocks: Set<number>,
|
||
x: number,
|
||
y: number,
|
||
width: number,
|
||
height: number
|
||
): void;
|
||
|
||
/**
|
||
* 当更新移动层的渲染信息是执行的函数
|
||
* @param layer 目标Layer实例
|
||
* @param renderable 移动层的渲染信息（包含大怪物），未排序
|
||
*/
|
||
onMovingUpdate?(layer: Layer, renderable: LayerMovingRenderable[]): void;
|
||
|
||
/**
|
||
* 在地图渲染之前执行的函数
|
||
* @param layer 目标Layer实例
|
||
* @param transform 渲染的变换矩阵
|
||
* @param need 需要渲染的分块信息
|
||
*/
|
||
onBeforeRender?(
|
||
layer: Layer,
|
||
transform: Transform,
|
||
need: NeedRenderData
|
||
): void;
|
||
|
||
/**
|
||
* 在地图渲染之后执行的函数
|
||
* @param layer 目标Layer实例
|
||
* @param transform 渲染的变换矩阵
|
||
* @param need 需要渲染的分块信息
|
||
*/
|
||
onAfterRender?(
|
||
layer: Layer,
|
||
transform: Transform,
|
||
need: NeedRenderData
|
||
): void;
|
||
|
||
/**
|
||
* 当拓展被取消挂载时执行的函数（Layer被销毁，拓展被移除等）
|
||
* @param layer 目标Layer实例
|
||
*/
|
||
onDestroy?(layer: Layer): void;
|
||
}
|
||
|
||
interface LayerCacheItem {
|
||
symbol: number;
|
||
canvas: MotaOffscreenCanvas2D;
|
||
}
|
||
|
||
export interface LayerMovingRenderable extends RenderableData {
|
||
zIndex: number;
|
||
x: number;
|
||
y: number;
|
||
}
|
||
|
||
interface NeedRenderData {
|
||
/** 需要渲染的分块索引 */
|
||
res: Set<number>;
|
||
/** 需要渲染的背景的左上角横纵坐标，因为背景是可能渲染在地图之外的，所以不能使用分块索引的形式存储 */
|
||
back: [x: number, y: number][];
|
||
}
|
||
|
||
export class Layer extends Container {
|
||
// 一些会用到的常量
|
||
static readonly FRAME_0 = 1;
|
||
static readonly FRAME_1 = 2;
|
||
static readonly FRAME_2 = 4;
|
||
static readonly FRAME_3 = 8;
|
||
static readonly FRAME_ALL = 15;
|
||
|
||
/** 静态层，包含除大怪物及正在移动的内容外的内容 */
|
||
protected staticMap: MotaOffscreenCanvas2D = new MotaOffscreenCanvas2D();
|
||
/** 移动层，包含大怪物及正在移动的内容 */
|
||
protected movingMap: MotaOffscreenCanvas2D = new MotaOffscreenCanvas2D();
|
||
/** 背景图层 */
|
||
protected backMap: MotaOffscreenCanvas2D = new MotaOffscreenCanvas2D();
|
||
|
||
/** 最终渲染至的Sprite */
|
||
main: Sprite = new Sprite('static', false);
|
||
|
||
/** 渲染的层 */
|
||
layer?: FloorLayer;
|
||
// todo: renderable分块存储，优化循环绘制性能
|
||
/** 渲染数据 */
|
||
renderData: number[] = [];
|
||
/** 自动元件的连接信息，键表示图块在渲染数据中的索引，值表示连接信息，是个8位二进制 */
|
||
autotiles: Record<number, number> = {};
|
||
/** 楼层宽度 */
|
||
mapWidth: number = 0;
|
||
/** 楼层高度 */
|
||
mapHeight: number = 0;
|
||
/** 每个图块的大小 */
|
||
cellSize: number = 32;
|
||
|
||
/** 背景图块 */
|
||
background: AllNumbers = 0;
|
||
/** 背景图块画布 */
|
||
backImage: HTMLCanvasElement[] = [];
|
||
|
||
/** 分块信息 */
|
||
block: BlockCacher<LayerCacheItem> = new BlockCacher(0, 0, core._WIDTH_, 4);
|
||
|
||
/** 大怪物渲染信息 */
|
||
bigImages: Map<number, LayerMovingRenderable> = new Map();
|
||
// todo: 是否需要桶排？
|
||
/** 移动层的渲染信息 */
|
||
movingRenderable: LayerMovingRenderable[] = [];
|
||
/** 下一此渲染时是否需要更新移动层的渲染信息 */
|
||
needUpdateMoving: boolean = false;
|
||
|
||
private extend: Map<string, ILayerRenderExtends> = new Map();
|
||
/** 正在移动的图块的渲染信息 */
|
||
private moving: Set<LayerMovingRenderable> = new Set();
|
||
|
||
constructor() {
|
||
super('absolute', false);
|
||
|
||
// this.setHD(false);
|
||
this.setAntiAliasing(false);
|
||
this.size(core._PX_, core._PY_);
|
||
|
||
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);
|
||
this.main.size(core._PX_, core._PY_);
|
||
|
||
this.appendChild(this.main);
|
||
this.main.setRenderFn((canvas, transform) => {
|
||
const { ctx } = canvas;
|
||
const { width, height } = canvas;
|
||
const need = this.calNeedRender(transform);
|
||
this.renderMap(transform, need);
|
||
ctx.drawImage(this.backMap.canvas, 0, 0, width, height);
|
||
ctx.drawImage(this.staticMap.canvas, 0, 0, width, height);
|
||
ctx.drawImage(this.movingMap.canvas, 0, 0, width, height);
|
||
});
|
||
|
||
this.extends(new LayerFloorBinder());
|
||
}
|
||
|
||
/**
|
||
* 添加渲染拓展，可以将渲染拓展理解为一类插件，通过指定的函数在对应时刻执行一些函数，
|
||
* 来达到执行自己想要的功能的效果。例如样板自带的勇士渲染、伤害渲染等都由此实现。
|
||
* 具体能干什么参考 {@link ILayerRenderExtends}
|
||
* @param ex 渲染拓展对象
|
||
*/
|
||
extends(ex: ILayerRenderExtends) {
|
||
this.extend.set(ex.id, ex);
|
||
ex.awake?.(this);
|
||
}
|
||
|
||
/**
|
||
* 移除一个渲染拓展
|
||
* @param id 要移除的拓展
|
||
*/
|
||
removeExtends(id: string) {
|
||
const ex = this.extend.get(id);
|
||
if (!ex) return;
|
||
this.extend.delete(id);
|
||
ex.onDestroy?.(this);
|
||
}
|
||
|
||
/**
|
||
* 获取一个已装载的拓展
|
||
* @param id 拓展id
|
||
*/
|
||
getExtends(id: string) {
|
||
return this.extend.get(id);
|
||
}
|
||
|
||
/**
|
||
* 判断一个点是否在地图范围内
|
||
* @param x 横坐标
|
||
* @param y 纵坐标
|
||
*/
|
||
isPointOutside(x: number, y: number) {
|
||
return x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight;
|
||
}
|
||
|
||
/**
|
||
* 判断一个矩形是否完全在地图之外
|
||
* @param x 矩形左上角横坐标
|
||
* @param y 矩形左上角纵坐标
|
||
* @param width 矩形长度
|
||
* @param height 矩形高度
|
||
*/
|
||
isRectOutside(x: number, y: number, width: number, height: number) {
|
||
return (
|
||
x >= this.mapWidth ||
|
||
y >= this.mapHeight ||
|
||
x + width < 0 ||
|
||
y + height < 0
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 判断一个矩形是否完全在地图之内
|
||
* @param x 矩形左上角横坐标
|
||
* @param y 矩形左上角纵坐标
|
||
* @param width 矩形长度
|
||
* @param height 矩形高度
|
||
*/
|
||
containsRect(x: number, y: number, width: number, height: number) {
|
||
return (
|
||
x + width <= this.mapWidth &&
|
||
y + height <= this.mapHeight &&
|
||
x >= 0 &&
|
||
y >= 0
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 设置背景图块
|
||
* @param background 背景图块
|
||
*/
|
||
setBackground(background: AllNumbers) {
|
||
this.background = background;
|
||
this.generateBackground();
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onBackgroundSet?.(this, background);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 将当前地图的背景图块绑定为一个地图的背景图块
|
||
* @param floorId 楼层id
|
||
*/
|
||
bindBackground(floorId: FloorIds) {
|
||
const { defaultGround } = core.status.maps[floorId];
|
||
if (defaultGround) {
|
||
this.setBackground(texture.idNumberMap[defaultGround]);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 生成背景图块
|
||
*/
|
||
generateBackground() {
|
||
const num = this.background;
|
||
|
||
const data = texture.getRenderable(num);
|
||
this.backImage = [];
|
||
if (!data) return;
|
||
|
||
const frame = data.frame;
|
||
for (let i = 0; i < frame; i++) {
|
||
const canvas = new MotaOffscreenCanvas2D();
|
||
const temp = new MotaOffscreenCanvas2D();
|
||
const ctx = canvas.ctx;
|
||
const tempCtx = temp.ctx;
|
||
const [sx, sy, w, h] = data.render[i];
|
||
canvas.setHD(false);
|
||
canvas.setAntiAliasing(false);
|
||
canvas.withGameScale(false);
|
||
canvas.size(core._PX_, core._PY_);
|
||
temp.setHD(false);
|
||
temp.setAntiAliasing(false);
|
||
temp.withGameScale(false);
|
||
temp.size(w, h);
|
||
|
||
const img = data.autotile ? data.image[0b11111111] : data.image;
|
||
tempCtx.drawImage(img, sx, sy, w, h, 0, 0, w, h);
|
||
const pattern = ctx.createPattern(temp.canvas, 'repeat');
|
||
if (!pattern) continue;
|
||
ctx.fillStyle = pattern;
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
this.backImage.push(canvas.canvas);
|
||
}
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onBackgroundGenerated?.(this, this.backImage);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 修改地图渲染数据，对于溢出的内容会进行裁剪
|
||
* @param data 要渲染的地图数据
|
||
* @param width 数据的宽度
|
||
* @param x 第一个数据的横坐标，默认是0
|
||
* @param y 第一个数据的纵坐标，默认是0
|
||
*/
|
||
putRenderData(
|
||
data: number[],
|
||
width: number,
|
||
x: number = 0,
|
||
y: number = 0,
|
||
calAutotile: boolean = true
|
||
) {
|
||
if (data.length % width !== 0) {
|
||
logger.warn(
|
||
8,
|
||
`Incomplete render data is put. None will be filled to the lacked data.`
|
||
);
|
||
data.push(...Array(width - (data.length % width)).fill(0));
|
||
}
|
||
const height = Math.round(data.length / width);
|
||
if (!this.containsRect(x, y, width, height)) {
|
||
logger.warn(
|
||
9,
|
||
`Data transfered is partially (or totally) out of range. Overflowed data will be ignored.`
|
||
);
|
||
if (this.isRectOutside(x, y, width, height)) return;
|
||
}
|
||
// 特判特殊情况-全地图更新
|
||
if (
|
||
x === 0 &&
|
||
y === 0 &&
|
||
width === this.mapWidth &&
|
||
height === this.mapHeight
|
||
) {
|
||
// 为了不丢失引用，需要先清空，然后填充，不能直接赋值
|
||
this.renderData.splice(0);
|
||
this.renderData.push(...data);
|
||
} else if (data.length === 1) {
|
||
// 特判单个图块的情况
|
||
const index = x + y * this.mapWidth;
|
||
this.renderData[index] = data[0];
|
||
} else {
|
||
// 限定更新区域
|
||
const startX = Math.max(0, x);
|
||
const startY = Math.max(0, y);
|
||
const endX = Math.min(this.mapWidth, width);
|
||
const endY = Math.min(this.mapHeight, height);
|
||
for (let nx = startX; nx < endX; nx++) {
|
||
for (let ny = startY; ny < endY; ny++) {
|
||
// dx和dy表示数据在传入的data中的位置
|
||
const dx = nx - x;
|
||
const dy = ny - y;
|
||
const index = dx + dy * width;
|
||
const indexData = nx + nx * this.mapWidth;
|
||
this.renderData[indexData] = data[index];
|
||
}
|
||
}
|
||
}
|
||
// todo: 异步优化，到下一帧再更新
|
||
if (calAutotile) this.calAutotiles(x, y, width, height);
|
||
this.updateBlocks(x, y, width, height);
|
||
this.updateBigImages(x, y, width, height);
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onDataPut?.(this, data, width, x, y, calAutotile);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新大怪物的渲染信息
|
||
*/
|
||
updateBigImages(x: number, y: number, width: number, height: number) {
|
||
const ex = x + width;
|
||
const ey = y + height;
|
||
const w = this.mapWidth;
|
||
const data = this.renderData;
|
||
|
||
for (let nx = x; nx < ex; nx++) {
|
||
for (let ny = y; ny < ey; ny++) {
|
||
const index = ny * w + nx;
|
||
this.bigImages.delete(index);
|
||
const num = data[index];
|
||
const renderable = texture.getRenderable(num);
|
||
if (!renderable || !renderable.bigImage) continue;
|
||
this.bigImages.set(index, {
|
||
...renderable,
|
||
x: nx,
|
||
y: ny,
|
||
zIndex: ny
|
||
});
|
||
}
|
||
}
|
||
|
||
this.needUpdateMoving = true;
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onBigImagesUpdate?.(this, x, y, width, height, this.bigImages);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 计算自动元件的连接信息（会丢失autotiles属性的引用）
|
||
*/
|
||
calAutotiles(x: number, y: number, width: number, height: number) {
|
||
const ex = x + width;
|
||
const ey = y + height;
|
||
const data = this.renderData;
|
||
const tile = texture.autotile;
|
||
const map = maps_90f36752_8815_4be8_b32b_d7fad1d0542e;
|
||
|
||
const w = this.mapWidth;
|
||
const h = this.mapHeight;
|
||
|
||
this.autotiles = {};
|
||
|
||
/**
|
||
* 检查连接信息
|
||
* @param id 比较对象的id（就是正在检查周围的那个自动元件，九宫格中心的）
|
||
* @param index1 比较对象
|
||
* @param index2 被比较对象
|
||
* @param replace1 被比较对象相对比较对象应该处理的位数
|
||
* @param replace2 比较对象相对被比较对象应该处理的位数
|
||
*/
|
||
const check = (
|
||
x1: number,
|
||
y1: number,
|
||
x2: number,
|
||
y2: number,
|
||
replace1: number,
|
||
_replace2: number
|
||
) => {
|
||
const index1 = x1 + y1 * w;
|
||
const index2 = x2 + y2 * w;
|
||
this.autotiles[index1] ??= 0;
|
||
this.autotiles[index2] ??= 0;
|
||
// 与地图边缘，视为连接
|
||
if (x2 < 0 || y2 < 0 || x2 >= w || y2 >= h) {
|
||
this.autotiles[index1] |= replace1;
|
||
return;
|
||
}
|
||
const num1 = data[index1] as AllNumbersOf<'autotile'>; // 这个一定是自动元件
|
||
const num2 = data[index2] as AllNumbersOf<'autotile'>;
|
||
// 对于额外连接的情况
|
||
const autoConn = texture.getAutotileConnections(num1);
|
||
if (autoConn?.has(num2)) {
|
||
this.autotiles[index1] |= replace1;
|
||
return;
|
||
}
|
||
const info = map[num2 as Exclude<AllNumbers, 0>];
|
||
if (!info || info.cls !== 'autotile') {
|
||
// 被比较对象不是自动元件
|
||
this.autotiles[index1] &= ~replace1;
|
||
} else {
|
||
const parent2 = tile[num2].parent;
|
||
if (num2 === num1) {
|
||
// 二者一样，视为连接
|
||
this.autotiles[index1] |= replace1;
|
||
} else if (parent2?.has(num1)) {
|
||
// 被比较对象是比较对象的父元件，那么比较对象视为连接
|
||
this.autotiles[index1] |= replace1;
|
||
} else {
|
||
// 上述条件都不满足，那么不连接
|
||
this.autotiles[index1] &= ~replace1;
|
||
}
|
||
}
|
||
};
|
||
|
||
for (let nx = x; nx < ex; nx++) {
|
||
for (let ny = y; ny < ey; ny++) {
|
||
if (nx > w || ny > h) continue;
|
||
const index = nx + ny * w;
|
||
const num = data[index];
|
||
// 特判空气墙与空图块
|
||
if (num === 0 || num === 17 || num >= 10000) continue;
|
||
|
||
const info = map[num as Exclude<AllNumbers, 0>];
|
||
const { cls } = info;
|
||
if (cls !== 'autotile') continue;
|
||
|
||
// 太地狱了这个，看看就好
|
||
// 左上 左 左下
|
||
check(nx, ny, nx - 1, ny - 1, 0b10000000, 0b00001000);
|
||
check(nx, ny, nx - 1, ny, 0b00000001, 0b00010000);
|
||
check(nx, ny, nx - 1, ny + 1, 0b00000010, 0b00100000);
|
||
// 上 右上
|
||
check(nx, ny, nx, ny - 1, 0b01000000, 0b00000100);
|
||
check(nx, ny, nx + 1, ny - 1, 0b00100000, 0b00000010);
|
||
// 右 右下 下
|
||
check(nx, ny, nx + 1, ny, 0b00010000, 0b00000001);
|
||
check(nx, ny, nx + 1, ny + 1, 0b00001000, 0b10000000);
|
||
check(nx, ny, nx, ny + 1, 0b00000100, 0b01000000);
|
||
}
|
||
}
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onAutotilesCaled?.(this, x, y, width, height, this.autotiles);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 设置地图大小，会清空渲染数据（且丢失引用），因此后面应当紧跟 putRenderData，以保证渲染正常进行
|
||
* @param width 地图宽度
|
||
* @param height 地图高度
|
||
*/
|
||
setMapSize(width: number, height: number) {
|
||
this.mapWidth = width;
|
||
this.mapHeight = height;
|
||
this.renderData = Array(width * height).fill(0);
|
||
this.autotiles = {};
|
||
this.block.size(width, height);
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onMapResize?.(this, width, height);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 给定一个矩形，更新其包含的块信息，注意由于自动元件的存在，实际判定范围会大一圈
|
||
* @param x 图格的左上角横坐标
|
||
* @param y 图格的左上角纵坐标
|
||
* @param width 横向有多少个图格
|
||
* @param height 纵向有多少个图格
|
||
*/
|
||
updateBlocks(x: number, y: number, width: number, height: number) {
|
||
const blocks = this.block.updateElementArea(
|
||
x,
|
||
y,
|
||
width,
|
||
height,
|
||
Layer.FRAME_ALL
|
||
);
|
||
|
||
this.update(this);
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onBlocksUpdate?.(this, blocks, x, y, width, height);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 计算在传入的变换矩阵下，应该渲染哪些内容
|
||
* @param transform 变换矩阵
|
||
*/
|
||
calNeedRender(transform: Transform): NeedRenderData {
|
||
if (this.parent instanceof LayerGroup) {
|
||
// 如果处于地图组中，每个地图的渲染区域应该是一样的，因此可以缓存优化
|
||
return this.parent.cacheNeedRender(transform, this.block);
|
||
} else {
|
||
return calNeedRenderOf(transform, this.cellSize, this.block);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 更新移动层的渲染信息
|
||
*/
|
||
updateMovingRenderable() {
|
||
this.movingRenderable = [];
|
||
this.movingRenderable.push(...this.bigImages.values());
|
||
this.movingRenderable.push(...this.moving);
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onMovingUpdate?.(this, this.movingRenderable);
|
||
}
|
||
this.movingRenderable.sort((a, b) => a.zIndex - b.zIndex);
|
||
}
|
||
|
||
/**
|
||
* 渲染当前地图
|
||
*/
|
||
renderMap(transform: Transform, need: NeedRenderData) {
|
||
this.staticMap.clear();
|
||
this.movingMap.clear();
|
||
this.backMap.clear();
|
||
|
||
if (this.needUpdateMoving) this.updateMovingRenderable();
|
||
|
||
for (const ex of this.extend.values()) {
|
||
ex.onBeforeRender?.(this, transform, need);
|
||
}
|
||
|
||
this.renderBack(transform, need);
|
||
this.renderStatic(transform, need);
|
||
this.renderMoving(transform);
|
||
for (const ex of this.extend.values()) {
|
||
ex.onAfterRender?.(this, transform, need);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 渲染背景图
|
||
* @param transform 变换矩阵
|
||
* @param need 需要渲染的块
|
||
*/
|
||
protected renderBack(transform: Transform, need: NeedRenderData) {
|
||
const cell = this.cellSize;
|
||
const frame = (RenderItem.animatedFrame % 4) + 1;
|
||
const blockSize = this.block.blockSize;
|
||
const { back } = need;
|
||
const { ctx } = this.backMap;
|
||
|
||
const mat = transform.mat;
|
||
const [a, b, , c, d, , e, f] = mat;
|
||
ctx.setTransform(a, b, c, d, e, f);
|
||
|
||
if (this.background !== 0) {
|
||
// 画背景图
|
||
const length = this.backImage.length;
|
||
const img = this.backImage[frame % length];
|
||
back.forEach(([x, y]) => {
|
||
const sx = x * blockSize;
|
||
const sy = y * blockSize;
|
||
ctx.drawImage(
|
||
img,
|
||
sx * cell,
|
||
sy * cell,
|
||
blockSize * cell,
|
||
blockSize * cell
|
||
);
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 渲染静态层
|
||
*/
|
||
protected renderStatic(transform: Transform, need: NeedRenderData) {
|
||
const cell = this.cellSize;
|
||
const frame = RenderItem.animatedFrame % 4;
|
||
const { width } = this.block.blockData;
|
||
const blockSize = this.block.blockSize;
|
||
const { ctx } = this.staticMap;
|
||
|
||
ctx.save();
|
||
|
||
const { res: render } = need;
|
||
const [a, b, , c, d, , e, f] = transform.mat;
|
||
ctx.setTransform(a, b, c, d, e, f);
|
||
|
||
render.forEach(v => {
|
||
const x = v % width;
|
||
const y = Math.floor(v / width);
|
||
const sx = x * blockSize;
|
||
const sy = y * blockSize;
|
||
const index = v * 4 + frame;
|
||
|
||
const cache = this.block.cache.get(index);
|
||
if (cache) {
|
||
ctx.drawImage(
|
||
cache.canvas.canvas,
|
||
sx * cell,
|
||
sy * cell,
|
||
blockSize * cell,
|
||
blockSize * cell
|
||
);
|
||
return;
|
||
}
|
||
|
||
const ex = Math.min(sx + blockSize, this.mapWidth);
|
||
const ey = Math.min(sy + blockSize, this.mapHeight);
|
||
|
||
const temp = new MotaOffscreenCanvas2D();
|
||
temp.setAntiAliasing(false);
|
||
temp.setHD(false);
|
||
temp.withGameScale(false);
|
||
temp.size(core._PX_, core._PY_);
|
||
|
||
// 先画到临时画布，用于缓存
|
||
for (let nx = sx; nx < ex; nx++) {
|
||
for (let ny = sy; ny < ey; ny++) {
|
||
const blockIndex = nx + ny * this.mapWidth;
|
||
const num = this.renderData[blockIndex];
|
||
if (num === 0 || num === 17) continue;
|
||
const data = texture.getRenderable(num);
|
||
if (!data || data.bigImage) continue;
|
||
const f = frame % data.frame;
|
||
const i = data.animate === -1 ? f : data.animate;
|
||
const [isx, isy, w, h] = data.render[i];
|
||
const px = (nx - sx) * cell;
|
||
const py = (ny - sy) * cell;
|
||
const { image, autotile } = data;
|
||
if (!autotile) {
|
||
temp.ctx.drawImage(image, isx, isy, w, h, px, py, w, h);
|
||
} else {
|
||
const link = this.autotiles[blockIndex];
|
||
const i = image[link];
|
||
temp.ctx.drawImage(i, isx, isy, w, h, px, py, w, h);
|
||
}
|
||
}
|
||
}
|
||
ctx.drawImage(
|
||
temp.canvas,
|
||
sx * cell,
|
||
sy * cell,
|
||
blockSize * cell,
|
||
blockSize * cell
|
||
);
|
||
this.block.cache.set(index, {
|
||
canvas: temp,
|
||
symbol: temp.symbol
|
||
});
|
||
});
|
||
|
||
ctx.restore();
|
||
}
|
||
|
||
/**
|
||
* 渲染移动/大怪物层
|
||
*/
|
||
protected renderMoving(transform: Transform) {
|
||
const frame = (RenderItem.animatedFrame % 4) + 1;
|
||
const cell = this.cellSize;
|
||
const halfCell = cell / 2;
|
||
const { ctx } = this.movingMap;
|
||
|
||
ctx.save();
|
||
const mat = transform.mat;
|
||
const [a, b, , c, d, , e, f] = mat;
|
||
ctx.setTransform(a, b, c, d, e, f);
|
||
const max1 = Math.max(a, b, c, d) ** 2;
|
||
const max2 = Math.max(core._PX_, core._PY_) * 2;
|
||
const r = (max1 * max2) ** 2;
|
||
|
||
this.movingRenderable.forEach(v => {
|
||
const { x, y, image, render, animate } = v;
|
||
const ff = frame % 4;
|
||
const i = animate === -1 ? ff : animate;
|
||
const [sx, sy, w, h] = render[i];
|
||
const px = x * cell - w / 2 + halfCell;
|
||
const py = y * cell - h + cell;
|
||
const ex = px + w;
|
||
const ey = py + h;
|
||
|
||
if (
|
||
(px + e) ** 2 > r ||
|
||
(py + f) ** 2 > r ||
|
||
(ex + e) ** 2 > r ||
|
||
(ey + f) ** 2 > r
|
||
) {
|
||
return;
|
||
}
|
||
|
||
ctx.drawImage(image, sx, sy, w, h, px, py, w, h);
|
||
});
|
||
|
||
ctx.restore();
|
||
}
|
||
|
||
/**
|
||
* 对图块进行线性插值移动或瞬移\
|
||
* 线性插值移动：就是匀速平移，可以斜向移动\
|
||
* 瞬移：立刻移动到目标点
|
||
* @param index 要移动的图块在渲染数据中的索引位置
|
||
* @param type 线性插值移动或瞬移
|
||
* @param x 目标点横坐标
|
||
* @param y 目标点纵坐标
|
||
* @param time 移动总时长，注意不是每格时长
|
||
*/
|
||
move(
|
||
index: number,
|
||
type: 'linear' | 'swap',
|
||
x: number,
|
||
y: number,
|
||
time?: number
|
||
): Promise<void> {
|
||
const block = this.renderData[index];
|
||
const fx = index % this.width;
|
||
const fy = Math.floor(index / this.width);
|
||
|
||
if (type === 'swap' || time === 0) {
|
||
this.putRenderData([0], 1, fx, fy);
|
||
this.putRenderData([block], 1, x, y);
|
||
return Promise.resolve();
|
||
} else {
|
||
if (!time) return Promise.reject();
|
||
const dx = x - fx;
|
||
const dy = y - fy;
|
||
return this.moveAs(
|
||
index,
|
||
x,
|
||
y,
|
||
progress => {
|
||
return [dx * progress, dy * progress, Math.floor(dy + fy)];
|
||
},
|
||
time
|
||
);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 让图块按照一个函数进行移动
|
||
* @param index 要移动的图块在渲染数据中的索引位置
|
||
* @param type 函数式移动
|
||
* @param fn 移动函数，传入一个完成度（范围0-1），返回一个三元素数组，表示横纵格子坐标，可以是小数。
|
||
* 第三个元素表示图块纵深，一般图块的纵深就是其纵坐标，当地图上有大怪物时，此举可以辅助渲染，
|
||
* 否则可能会导致移动过程中与大怪物的层级关系不正确，比如全在大怪物身后。注意不建议频繁改动这个值，
|
||
* 因为此举会导致层级的重新排序，降低渲染性能。
|
||
* @param time 移动总时长
|
||
* @param relative 是否是相对模式
|
||
*/
|
||
moveAs(
|
||
index: number,
|
||
x: number,
|
||
y: number,
|
||
fn: TimingFn<3>,
|
||
time: number,
|
||
relative: boolean = true
|
||
): Promise<void> {
|
||
const block = this.renderData[index];
|
||
const fx = index % this.width;
|
||
const fy = Math.floor(index / this.width);
|
||
const renderable = texture.getRenderable(block);
|
||
if (!renderable) return Promise.reject();
|
||
|
||
const image = renderable.autotile
|
||
? renderable.image[0]
|
||
: renderable.image;
|
||
|
||
const moving: LayerMovingRenderable = {
|
||
x: fx,
|
||
y: fy,
|
||
zIndex: fy,
|
||
image: image,
|
||
autotile: false,
|
||
frame: renderable.frame,
|
||
bigImage: renderable.bigImage,
|
||
animate: -1,
|
||
render: renderable.render
|
||
};
|
||
this.moving.add(moving);
|
||
|
||
// 删除原始位置的图块
|
||
this.putRenderData([0], 1, fx, fy);
|
||
|
||
let nowZ = fy;
|
||
const startTime = Date.now();
|
||
return new Promise<void>(resolve => {
|
||
this.delegateTicker(
|
||
() => {
|
||
const now = Date.now();
|
||
const progress = (now - startTime) / time;
|
||
const [nx, ny, nz] = fn(progress);
|
||
const tx = relative ? nx + fx : nx;
|
||
const ty = relative ? ny + fy : ny;
|
||
moving.x = tx;
|
||
moving.y = ty;
|
||
moving.zIndex = nz;
|
||
if (nz !== nowZ) {
|
||
this.movingRenderable.sort(
|
||
(a, b) => a.zIndex - b.zIndex
|
||
);
|
||
}
|
||
this.update(this);
|
||
},
|
||
time,
|
||
() => {
|
||
this.putRenderData([block], 1, x, y);
|
||
this.moving.delete(moving);
|
||
resolve();
|
||
}
|
||
);
|
||
});
|
||
}
|
||
|
||
destroy(): void {
|
||
for (const ex of this.extend.values()) {
|
||
ex.onDestroy?.(this);
|
||
}
|
||
super.destroy();
|
||
}
|
||
}
|