refactor: 把样板所需的标签定义移动至 client-modules

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

@@ -0,0 +1,278 @@
+import {
+    RenderAdapter,
+    transformCanvas,
+    ERenderItemEvent,
+    RenderItem,
+    Transform,
+    MotaOffscreenCanvas2D
+} from '@motajs/render-core';
+import { HeroRenderer } from './hero';
+import { ILayerGroupRenderExtends, LayerGroup } from './layer';
+
+export class LayerGroupAnimate implements ILayerGroupRenderExtends {
+    static animateList: Set<LayerGroupAnimate> = new Set();
+    id: string = 'animate';
+
+    group!: LayerGroup;
+    hero?: HeroRenderer;
+    animate!: Animate;
+
+    private animation: Set<AnimateData> = new Set();
+
+    /**
+     * 绘制一个跟随勇士的动画
+     * @param name 动画id
+     */
+    async drawHeroAnimate(name: AnimationIds) {
+        const animate = this.animate.animate(name, 0, 0);
+        this.updatePosition(animate);
+        await this.animate.draw(animate);
+        this.animation.delete(animate);
+    }
+
+    private updatePosition(animate: AnimateData) {
+        if (!this.checkHero()) return;
+        if (!this.hero?.renderable) return;
+        const { x, y } = this.hero.renderable;
+        const cell = this.group.cellSize;
+        const half = cell / 2;
+        animate.centerX = x * cell + half;
+        animate.centerY = y * cell + half;
+    }
+
+    private onMoveTick = (x: number, y: number) => {
+        const cell = this.group.cellSize;
+        const half = cell / 2;
+        const ax = x * cell + half;
+        const ay = y * cell + half;
+        this.animation.forEach(v => {
+            v.centerX = ax;
+            v.centerY = ay;
+        });
+    };
+
+    private listen() {
+        if (this.checkHero()) {
+            this.hero!.on('moveTick', this.onMoveTick);
+        }
+    }
+
+    private checkHero() {
+        if (this.hero) return true;
+        const ex = this.group.getLayer('event')?.getExtends('floor-hero');
+        if (ex instanceof HeroRenderer) {
+            this.hero = ex;
+            return true;
+        }
+        return false;
+    }
+
+    awake(group: LayerGroup): void {
+        this.group = group;
+        this.animate = new Animate();
+        this.animate.size(group.width, group.height);
+        this.animate.setHD(true);
+        this.animate.setZIndex(100);
+        group.appendChild(this.animate);
+        LayerGroupAnimate.animateList.add(this);
+        this.listen();
+    }
+
+    onDestroy(_group: LayerGroup): void {
+        if (this.checkHero()) {
+            this.hero!.off('moveTick', this.onMoveTick);
+            LayerGroupAnimate.animateList.delete(this);
+        }
+    }
+}
+
+interface AnimateData {
+    obj: globalThis.Animate;
+    /** 第一帧是全局第几帧 */
+    readonly start: number;
+    /** 当前是第几帧 */
+    index: number;
+    /** 是否需要播放音频 */
+    sound: boolean;
+    centerX: number;
+    centerY: number;
+    onEnd?: () => void;
+    readonly absolute: boolean;
+}
+
+export interface EAnimateEvent extends ERenderItemEvent {}
+
+export class Animate extends RenderItem<EAnimateEvent> {
+    /** 绝对位置的动画 */
+    private absoluteAnimates: Set<AnimateData> = new Set();
+    /** 静态位置的动画 */
+    private staticAnimates: Set<AnimateData> = new Set();
+
+    private delegation: number;
+    private frame: number = 0;
+    private lastTime: number = 0;
+
+    constructor() {
+        super('absolute', false, true);
+
+        this.delegation = this.delegateTicker(time => {
+            if (time - this.lastTime < 50) return;
+            this.lastTime = time;
+            this.frame++;
+            if (
+                this.absoluteAnimates.size > 0 ||
+                this.staticAnimates.size > 0
+            ) {
+                this.update(this);
+            }
+        });
+
+        adapter.add(this);
+    }
+
+    protected render(
+        canvas: MotaOffscreenCanvas2D,
+        transform: Transform
+    ): void {
+        if (
+            this.absoluteAnimates.size === 0 &&
+            this.staticAnimates.size === 0
+        ) {
+            return;
+        }
+        this.drawAnimates(this.absoluteAnimates, canvas);
+        transformCanvas(canvas, transform);
+        this.drawAnimates(this.staticAnimates, canvas);
+    }
+
+    private drawAnimates(
+        data: Set<AnimateData>,
+        canvas: MotaOffscreenCanvas2D
+    ) {
+        if (data.size === 0) return;
+        const { ctx } = canvas;
+        const toDelete = new Set<AnimateData>();
+        data.forEach(v => {
+            const obj = v.obj;
+            const index = v.index;
+            const frame = obj.frames[index];
+            const ratio = obj.ratio;
+            if (!v.sound) {
+                const se = (index % obj.frame) + 1;
+                core.playSound(v.obj.se[se], v.obj.pitch[se]);
+                v.sound = true;
+            }
+            const centerX = v.centerX;
+            const centerY = v.centerY;
+
+            frame.forEach(v => {
+                const img = obj.images[v.index];
+                if (!img) return;
+
+                const realWidth = (img.width * ratio * v.zoom) / 100;
+                const realHeight = (img.height * ratio * v.zoom) / 100;
+                ctx.globalAlpha = v.opacity / 255;
+
+                const cx = centerX + v.x;
+                const cy = centerY + v.y;
+
+                const ix = -realWidth / 2;
+                const iy = -realHeight / 2;
+                const angle = v.angle ? (-v.angle * Math.PI) / 180 : 0;
+
+                ctx.save();
+                ctx.translate(cx, cy);
+                if (v.mirror) {
+                    ctx.scale(-1, 1);
+                }
+                ctx.rotate(angle);
+                ctx.drawImage(img, ix, iy, realWidth, realHeight);
+                ctx.restore();
+            });
+            const now = this.frame - v.start;
+            if (now !== v.index) v.sound = true;
+            v.index = now;
+            if (v.index === v.obj.frame) {
+                toDelete.add(v);
+            }
+        });
+        toDelete.forEach(v => {
+            data.delete(v);
+            v.onEnd?.();
+        });
+    }
+
+    /**
+     * 创建一个可以被执行的动画
+     * @param name 动画名称
+     * @param absolute 是否是绝对定位，绝对定位不会受到transform的影响
+     */
+    animate(
+        name: AnimationIds,
+        x: number,
+        y: number,
+        absolute: boolean = false
+    ) {
+        const animate = core.material.animates[name];
+        const data: AnimateData = {
+            index: 0,
+            start: this.frame,
+            obj: animate,
+            centerX: x,
+            centerY: y,
+            absolute,
+            sound: false
+        };
+        return data;
+    }
+
+    /**
+     * 绘制动画，动画结束时兑现返回的Promise
+     * @param animate 动画信息
+     * @returns
+     */
+    draw(animate: AnimateData): Promise<void> {
+        return new Promise(res => {
+            if (animate.absolute) {
+                this.absoluteAnimates.add(animate);
+            } else {
+                this.staticAnimates.add(animate);
+            }
+            animate.onEnd = () => {
+                res();
+            };
+        });
+    }
+
+    /**
+     * 根据动画名称、坐标、定位绘制动画
+     * @param name 动画名称
+     * @param absolute 是否是绝对定位
+     */
+    drawAnimate(
+        name: AnimationIds,
+        x: number,
+        y: number,
+        absolute: boolean = false
+    ) {
+        return this.draw(this.animate(name, x, y, absolute));
+    }
+
+    destroy(): void {
+        super.destroy();
+        this.removeTicker(this.delegation);
+        adapter.remove(this);
+    }
+}
+
+const adapter = new RenderAdapter<Animate>('animate');
+adapter.receive('drawAnimate', (item, name, x, y, absolute) => {
+    return item.drawAnimate(name, x, y, absolute);
+});
+adapter.receiveGlobal('drawHeroAnimate', name => {
+    const execute: Promise<void>[] = [];
+    LayerGroupAnimate.animateList.forEach(v => {
+        execute.push(v.drawHeroAnimate(name));
+    });
+    return Promise.all(execute);
+});

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

@@ -0,0 +1,311 @@
+import { EventEmitter } from 'eventemitter3';
+import { logger } from '@motajs/common';
+import { MotaOffscreenCanvas2D } from '@motajs/render-core';
+
+interface BlockCacherEvent {
+    split: [];
+}
+
+interface BlockData {
+    /** 横向宽度，包括rest的那一个块 */
+    width: number;
+    /** 纵向宽度，包括rest的那一个块 */
+    height: number;
+    /** 横向最后一个块的宽度 */
+    restWidth: number;
+    /** 纵向最后一个块的高度 */
+    restHeight: number;
+}
+
+export interface IBlockCacheable {
+    /**
+     * 摧毁这个缓存元素
+     */
+    destroy(): void;
+}
+
+/**
+ * 简单分块缓存类，内容包含元素与分块两种，其中元素是最小单元，分块是缓存单元。
+ * 拿楼层举例，假如我将楼层按照13x13划分缓存，那么元素就是每个图块，而分块就是这13x13的缓存分块。
+ * 为方便区分，在相关函数的注释最后，都会有`xx -> yy`的说明，
+ * 其中xx说明传入的数据是元素还是分块的数据，而yy表示其返回值或转换为的值
+ */
+export class BlockCacher<
+    T extends IBlockCacheable
+> extends EventEmitter<BlockCacherEvent> {
+    /** 区域宽度 */
+    width: number;
+    /** 区域高度 */
+    height: number;
+    /** 分块大小 */
+    blockSize: number;
+    /** 分块信息 */
+    blockData: BlockData = {
+        width: 0,
+        height: 0,
+        restWidth: 0,
+        restHeight: 0
+    };
+    /** 缓存深度，例如填4的时候表示每格包含4个缓存 */
+    cacheDepth: number = 1;
+
+    /** 缓存内容，计算公式为 (x + y * width) * depth + deep */
+    cache: Map<number, T> = new Map();
+
+    constructor(
+        width: number,
+        height: number,
+        size: number,
+        depth: number = 1
+    ) {
+        super();
+        this.width = width;
+        this.height = height;
+        this.blockSize = size;
+        this.cacheDepth = depth;
+        this.split();
+    }
+
+    /**
+     * 设置区域大小
+     * @param width 区域宽度
+     * @param height 区域高度
+     */
+    size(width: number, height: number) {
+        this.width = width;
+        this.height = height;
+        this.split();
+    }
+
+    /**
+     * 设置分块大小
+     */
+    setBlockSize(size: number) {
+        this.blockSize = size;
+        this.split();
+    }
+
+    /**
+     * 设置缓存深度，设置后会自动将旧缓存移植到新缓存中，最大值为31
+     * @param depth 缓存深度
+     */
+    setCacheDepth(depth: number) {
+        if (depth > 31) {
+            logger.error(11);
+            return;
+        }
+        const old = this.cache;
+        const before = this.cacheDepth;
+        this.cache = new Map();
+        old.forEach((v, k) => {
+            const index = Math.floor(k / before);
+            const deep = k % before;
+            this.cache.set(index * depth + deep, v);
+        });
+        old.clear();
+        this.cacheDepth = depth;
+    }
+
+    /**
+     * 执行分块
+     */
+    split() {
+        this.blockData = {
+            width: Math.ceil(this.width / this.blockSize),
+            height: Math.ceil(this.height / this.blockSize),
+            restWidth: this.width % this.blockSize,
+            restHeight: this.height % this.blockSize
+        };
+        this.emit('split');
+    }
+
+    /**
+     * 清除指定块的索引（分块->void）
+     * @param index 要清除的缓存索引
+     * @param deep 清除哪些深度的缓存，至多31位二进制数，例如填0b111就是清除前三层的索引
+     */
+    clearCache(index: number, deep: number) {
+        const depth = this.cacheDepth;
+        for (let i = 0; i < depth; i++) {
+            if (deep & (1 << i)) {
+                const nowIndex = index * this.cacheDepth + i;
+                const item = this.cache.get(nowIndex);
+                item?.destroy();
+                this.cache.delete(nowIndex);
+            }
+        }
+    }
+
+    /**
+     * 清空指定索引的缓存，与 {@link clearCache} 不同的是，这里会直接清空对应索引的缓存，而不是指定分块的缓存（元素->void）
+     */
+    clearCacheByIndex(index: number) {
+        const item = this.cache.get(index);
+        item?.destroy();
+        this.cache.delete(index);
+    }
+
+    /**
+     * 清空所有缓存
+     */
+    clearAllCache() {
+        this.cache.forEach(v => v.destroy());
+        this.cache.clear();
+    }
+
+    /**
+     * 根据分块的横纵坐标获取其索引（分块->分块）
+     */
+    getIndex(x: number, y: number) {
+        return x + y * this.blockData.width;
+    }
+
+    /**
+     * 根据元素位置获取分块索引（注意是单个元素的位置，而不是分块的位置）（元素->分块）
+     */
+    getIndexByLoc(x: number, y: number) {
+        return this.getIndex(
+            Math.floor(x / this.blockSize),
+            Math.floor(y / this.blockSize)
+        );
+    }
+
+    /**
+     * 根据块的索引获取其位置（分块->分块）
+     */
+    getBlockXYByIndex(index: number): LocArr {
+        const width = this.blockData.width;
+        return [index % width, Math.floor(index / width)];
+    }
+
+    /**
+     * 获取一个元素位置所在的分块位置（即使它不在任何分块内）（元素->分块）
+     */
+    getBlockXY(x: number, y: number): LocArr {
+        return [Math.floor(x / this.blockSize), Math.floor(y / this.blockSize)];
+    }
+
+    /**
+     * 根据分块坐标与deep获取一个分块的精确索引（分块->分块）
+     */
+    getPreciseIndex(x: number, y: number, deep: number) {
+        return (x + y * this.blockSize) * this.cacheDepth + deep;
+    }
+
+    /**
+     * 根据元素坐标及deep获取元素所在块的精确索引（元素->分块）
+     */
+    getPreciseIndexByLoc(x: number, y: number, deep: number) {
+        return this.getPreciseIndex(...this.getBlockXY(x, y), deep);
+    }
+
+    /**
+     * 更新指定元素区域内的缓存（注意坐标是元素坐标，而非分块坐标）（元素->分块）
+     * @param deep 缓存清除深度，默认全部清空
+     * @returns 更新区域内的所有有关分块索引
+     */
+    updateElementArea(
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+        deep: number = 2 ** 31 - 1
+    ) {
+        const [bx, by] = this.getBlockXY(x, y);
+        const [ex, ey] = this.getBlockXY(x + width - 1, y + height - 1);
+
+        return this.updateArea(bx, by, ex - bx, ey - by, deep);
+    }
+
+    /**
+     * 更新指定分块区域内的缓存（注意坐标是分块坐标，而非元素坐标）（分块->分块）
+     * @param deep 缓存清除深度，默认全部清空
+     * @returns 更新区域内的所有分块索引
+     */
+    updateArea(
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+        deep: number = 2 ** 31 - 1
+    ) {
+        const blocks = this.getIndexOf(x, y, width, height);
+
+        blocks.forEach(v => {
+            this.clearCache(v, deep);
+        });
+        return blocks;
+    }
+
+    /**
+     * 传入分块坐标与范围，获取该区域内包含的所有分块索引（分块->分块）
+     */
+    getIndexOf(x: number, y: number, width: number, height: number) {
+        const res = new Set<number>();
+        const sx = Math.max(x, 0);
+        const sy = Math.max(y, 0);
+        const ex = Math.min(x + width, this.blockData.width);
+        const ey = Math.min(y + height, this.blockData.height);
+
+        for (let nx = sx; nx <= ex; nx++) {
+            for (let ny = sy; ny <= ey; ny++) {
+                const index = this.getIndex(nx, ny);
+                res.add(index);
+            }
+        }
+
+        return res;
+    }
+
+    /**
+     * 传入元素坐标与范围，获取该区域内包含的所有分块索引（元素->分块）
+     */
+    getIndexOfElement(x: number, y: number, width: number, height: number) {
+        const [bx, by] = this.getBlockXY(x, y);
+        const [ex, ey] = this.getBlockXY(x + width, y + height);
+        return this.getIndexOf(bx, by, ex - bx, ey - by);
+    }
+
+    /**
+     * 根据分块索引，获取这个分块所在区域的元素矩形范围（左上角横纵坐标及右下角横纵坐标）（分块->元素）
+     * @param block 分块索引
+     */
+    getRectOfIndex(block: number) {
+        const [x, y] = this.getBlockXYByIndex(block);
+        return this.getRectOfBlockXY(x, y);
+    }
+
+    /**
+     * 根据分块坐标，获取这个分块所在区域的元素矩形范围（左上角横纵坐标及右下角横纵坐标）（分块->元素）
+     * @param x 分块横坐标
+     * @param y 分块纵坐标
+     */
+    getRectOfBlockXY(x: number, y: number) {
+        return [
+            x * this.blockSize,
+            y * this.blockSize,
+            (x + 1) * this.blockSize,
+            (y + 1) * this.blockSize
+        ];
+    }
+
+    /**
+     * 摧毁这个块缓存
+     */
+    destroy() {
+        this.clearAllCache();
+    }
+}
+
+export interface ICanvasCacheItem extends IBlockCacheable {
+    readonly canvas: MotaOffscreenCanvas2D;
+    symbol: number;
+}
+
+export class CanvasCacheItem implements ICanvasCacheItem {
+    constructor(public canvas: MotaOffscreenCanvas2D, public symbol: number) {}
+
+    destroy(): void {
+        this.canvas.delete();
+    }
+}

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

@@ -0,0 +1,560 @@
+import { logger } from '@motajs/common';
+import { MotaOffscreenCanvas2D } from '@motajs/render-core';
+import { SizedCanvasImageSource } from '@motajs/render-elements';
+
+// 经过测试（https://www.measurethat.net/Benchmarks/Show/30741/1/drawimage-img-vs-canvas-vs-bitmap-cropping-fix-loading）
+// 得出结论，ImageBitmap和Canvas的绘制性能不如Image，于是直接画Image就行，所以缓存基本上就是存Image
+
+type ImageMapKeys = Exclude<Cls, 'tileset' | 'autotile'>;
+type ImageMap = Record<ImageMapKeys, HTMLImageElement>;
+
+const i = (img: ImageMapKeys) => {
+    return core.material.images[img];
+};
+
+const imageMap: Partial<ImageMap> = {};
+
+interface AutotileCache {
+    parent?: Set<AllNumbersOf<'autotile'>>;
+    frame: number;
+    cache: Record<string, HTMLCanvasElement>;
+}
+type AutotileCaches = Record<AllNumbersOf<'autotile'>, AutotileCache>;
+
+interface TextureRequire {
+    tileset: Record<string, HTMLImageElement>;
+    material: Record<ImageMapKeys, HTMLImageElement>;
+    autotile: AutotileCaches;
+    images: Record<ImageIds, HTMLImageElement>;
+}
+
+interface RenderableDataBase {
+    /** 图块的总帧数 */
+    frame: number;
+    /** 对应图块属性的动画帧数，-1表示没有设定，0表示第一帧 */
+    animate: number;
+    /** 是否是大怪物 */
+    bigImage: boolean;
+    render: [x: number, y: number, width: number, height: number][];
+}
+
+export interface RenderableData extends RenderableDataBase {
+    image: SizedCanvasImageSource;
+    autotile: false;
+}
+
+export interface AutotileRenderable extends RenderableDataBase {
+    image: Record<string, SizedCanvasImageSource>;
+    autotile: true;
+    bigImage: false;
+}
+
+class TextureCache {
+    tileset!: Record<string, HTMLImageElement>;
+    material: Record<ImageMapKeys, HTMLImageElement>;
+    autotile!: AutotileCaches;
+    images!: Record<ImageIds, HTMLImageElement>;
+
+    idNumberMap!: IdToNumber;
+
+    /** 渲染信息 */
+    renderable: Map<number, RenderableData | AutotileRenderable> = new Map();
+    /** 自动元件额外连接信息，用于对非自身图块进行连接 */
+    autoConn: Map<number, Set<number>> = new Map();
+    /** 行走图朝向绑定 */
+    characterDirection: Record<Dir2, number> = {
+        down: 0,
+        left: 1,
+        right: 2,
+        up: 3,
+        leftup: 1,
+        leftdown: 1,
+        rightup: 2,
+        rightdown: 2
+    };
+    /** 行走图转向顺序 */
+    characterTurn: Dir[] = ['up', 'right', 'down', 'left'];
+    characterTurn2: Dir2[] = ['leftup', 'rightup', 'rightdown', 'leftdown'];
+
+    constructor() {
+        this.material = imageMap as Record<ImageMapKeys, HTMLImageElement>;
+    }
+
+    init() {
+        const map = maps_90f36752_8815_4be8_b32b_d7fad1d0542e;
+        // @ts-expect-error 无法推导
+        this.idNumberMap = {};
+        for (const [key, { id }] of Object.entries(map)) {
+            // @ts-expect-error 无法推导
+            this.idNumberMap[id] = parseInt(key) as AllNumbers;
+        }
+        this.tileset = core.material.images.tilesets;
+        this.autotile = splitAutotiles(this.idNumberMap);
+        this.images = core.material.images.images;
+        this.calRenderable();
+        this.calAutotileConnections();
+    }
+
+    /**
+     * 获取纹理
+     * @param type 纹理类型
+     * @param key 纹理名称
+     */
+    require<T extends keyof TextureRequire, K extends keyof TextureRequire[T]>(
+        type: T,
+        key: K
+    ): TextureRequire[T][K] {
+        return this[type][key];
+    }
+
+    /**
+     * 计算每个图块的可渲染信息
+     */
+    private calRenderable() {
+        const map = maps_90f36752_8815_4be8_b32b_d7fad1d0542e;
+        for (const key of Object.keys(map)) {
+            this.calRenderableByNum(parseInt(key));
+        }
+    }
+
+    /**
+     * 根据图块数字计算出它的渲染信息
+     * @param num 图块数字
+     */
+    calRenderableByNum(
+        num: number
+    ): RenderableData | AutotileRenderable | null {
+        const map = maps_90f36752_8815_4be8_b32b_d7fad1d0542e;
+        const enemys = enemys_fcae963b_31c9_42b4_b48c_bb48d09f3f80;
+        const icons = icons_4665ee12_3a1f_44a4_bea3_0fccba634dc1;
+
+        /** 特判空图块与空气墙 */
+        if (num === 0 || num === 17) return null;
+
+        // 额外素材
+        if (num >= 10000) {
+            const offset = core.getTilesetOffset(num);
+            if (!offset) return null;
+            const { image, x, y } = offset;
+            const data: RenderableData = {
+                image: this.tileset[image],
+                frame: 1,
+                render: [[x * 32, y * 32, 32, 32]],
+                animate: 0,
+                autotile: false,
+                bigImage: false
+            };
+            this.renderable.set(num, data);
+            return data;
+        }
+
+        const data = map[num as Exclude<AllNumbers, 0>];
+        // 地狱般的分支if
+        if (data) {
+            let { faceIds, bigImage } = data;
+            const { cls, id, animate } = data;
+            if (cls === 'enemys' || cls === 'enemy48') {
+                // 怪物需要特殊处理，因为它的大怪物信息不在 maps 里面
+                ({ bigImage, faceIds } = enemys[id as EnemyIds]);
+            }
+            if (bigImage) {
+                const image = core.material.images.images[bigImage];
+                if (!image) {
+                    logger.warn(10, id);
+                    return null;
+                }
+                let line = 0;
+                if (faceIds) {
+                    const arr = ['down', 'left', 'right', 'up'];
+                    for (let i = 0; i < arr.length; i++) {
+                        if (faceIds[arr[i] as Dir] === id) {
+                            line = i;
+                            break;
+                        }
+                    }
+                }
+                const totalLines = image.width / image.height >= 2 ? 1 : 4;
+                const w = Math.round(image.width / 4);
+                const h = Math.round(image.height / totalLines);
+                const y = h * line;
+                const data: RenderableData = {
+                    image,
+                    frame: 4,
+                    render: [
+                        [0, y, w, h],
+                        [w, y, w, h],
+                        [w * 2, y, w, h],
+                        [w * 3, y, w, h]
+                    ],
+                    animate: (animate ?? 0) - 1,
+                    autotile: false,
+                    bigImage: true
+                };
+                this.renderable.set(num, data);
+                return data;
+            }
+            // enemy48和npc48都应该视为大怪物
+            if (cls === 'enemy48' || cls === 'npc48') {
+                const img = core.material.images[cls];
+                if (!img) return null;
+                // @ts-expect-error 无法推导
+                const line = icons[cls][id];
+                const w = 32;
+                const h = 48;
+                const y = h * line;
+                const data: RenderableData = {
+                    image: img,
+                    frame: 4,
+                    render: [
+                        [0, y, w, h],
+                        [w, y, w, h],
+                        [w * 2, y, w, h],
+                        [w * 3, y, w, h]
+                    ],
+                    animate: (animate ?? 0) - 1,
+                    autotile: false,
+                    bigImage: true
+                };
+                this.renderable.set(num, data);
+                return data;
+            }
+            // 自动元件
+            if (cls === 'autotile') {
+                if (!this.autotile) return null;
+                const auto = this.autotile[num as AllNumbersOf<'autotile'>];
+                const cell = 32;
+                const render: [number, number, number, number][] = [];
+                if (auto.frame >= 1) {
+                    render.push([0, 0, cell, cell]);
+                }
+                if (auto.frame >= 3) {
+                    render.push(
+                        [cell, 0, cell, cell],
+                        [cell * 2, 0, cell, cell]
+                    );
+                }
+                if (auto.frame >= 4) {
+                    render.push([cell * 3, 0, cell, cell]);
+                }
+                const data: AutotileRenderable = {
+                    image: auto.cache,
+                    frame: auto.frame,
+                    render,
+                    autotile: true,
+                    bigImage: false,
+                    animate: (animate ?? 0) - 1
+                };
+                this.renderable.set(num, data);
+                return data;
+            } else {
+                const image =
+                    core.material.images[
+                        cls as Exclude<Cls, 'tileset' | 'autotile'>
+                    ];
+                if (!image) return null;
+                const frame = core.getAnimateFrames(cls);
+                const cell = 32;
+                // @ts-expect-error 无法推导
+                const offset = (icons[cls][id] as number) * cell;
+                const render: [number, number, number, number][] = [
+                    [0, offset, cell, cell]
+                ];
+                if (frame === 2) {
+                    render.push([cell, offset, cell, cell]);
+                }
+                if (frame === 4) {
+                    render.push(
+                        [cell, offset, cell, cell],
+                        [cell * 2, offset, cell, cell],
+                        [cell * 3, offset, cell, cell]
+                    );
+                }
+                const data: RenderableData = {
+                    image,
+                    frame: frame,
+                    render,
+                    autotile: false,
+                    bigImage: false,
+                    animate: (animate ?? 0) - 1
+                };
+                this.renderable.set(num, data);
+                return data;
+            }
+        } else {
+            logger.warn(11, num.toString());
+            return null;
+        }
+    }
+
+    /**
+     * 获取一个图块的渲染信息，自动元件会特别标明autotile属性
+     * @param num 图块数字
+     */
+    getRenderable(num: number) {
+        return this.renderable.get(num) ?? this.calRenderableByNum(num);
+    }
+
+    /**
+     * 计算自动元件的额外连接
+     */
+    private calAutotileConnections() {
+        const icons = icons_4665ee12_3a1f_44a4_bea3_0fccba634dc1;
+        const maps = maps_90f36752_8815_4be8_b32b_d7fad1d0542e;
+
+        Object.keys(icons.autotile).forEach(v => {
+            const num = this.idNumberMap[v as AllIdsOf<'autotile'>];
+            const data = maps[num];
+            const { autotileConnection } = data;
+            if (!autotileConnection) return;
+            const list = new Set<AllNumbers>();
+            autotileConnection.forEach(v => {
+                if (typeof v === 'number') {
+                    list.add(v);
+                } else {
+                    list.add(this.idNumberMap[v]);
+                }
+            });
+            this.autoConn.set(num, list);
+        });
+    }
+
+    /**
+     * 获取自动元件的额外连接情况
+     * @param num 自动元件的图块数字
+     */
+    getAutotileConnections(num: number) {
+        return this.autoConn.get(num);
+    }
+}
+
+export const texture = new TextureCache();
+
+// 3x4 与 2x3 的自动元件信息
+// 将自动元件按 16x16 切分后，数组分别表示 左上 右上 右下 左下 所在图块位置
+const bigAutotile: Record<number, [number, number, number, number]> = {};
+const smallAutotile: Record<number, [number, number, number, number]> = {};
+
+function getAutotileIndices() {
+    // 应当从 0 - 255 进行枚举
+    // 二进制从高位到低位依次是 左上 上 右上 右 右下 下 左下 左
+    // 有兴趣可以研究下这个算法
+    const get = (
+        target: Record<number, [number, number, number, number]>,
+        mode: 1 | 2
+    ) => {
+        const h = mode === 1 ? 4 : 2;
+        const v = mode === 1 ? 24 : 8;
+        const luo = mode === 1 ? 12 : 8; // leftup origin
+        const ruo = mode === 1 ? 17 : 11; // rightup origin
+        const ldo = mode === 1 ? 42 : 20; // leftdown origin
+        const rdo = mode === 1 ? 47 : 23; // rightdown origin
+        const luc = mode === 1 ? 4 : 2; // leftup corner
+        const ruc = mode === 1 ? 5 : 3; // rightup corner
+        const rdc = mode === 1 ? 11 : 7; // rightdown corner
+        const ldc = mode === 1 ? 10 : 6; // leftdown corner
+
+        for (let i = 0; i <= 0b11111111; i++) {
+            let lu = luo; // leftup
+            let ru = ruo; // rightup
+            let ld = ldo; // leftdown
+            let rd = rdo; // rightdown
+
+            // 先看四个方向，最后看斜角方向
+            if (i & 0b00000001) {
+                lu += h;
+                ld += h;
+                if (i & 0b00010000) {
+                    ru += h / 2;
+                    rd += h / 2;
+                }
+            }
+            if (i & 0b00000100) {
+                ld -= v;
+                rd -= v;
+                if (i & 0b01000000) {
+                    lu -= v / 2;
+                    ru -= v / 2;
+                }
+            }
+            if (i & 0b00010000) {
+                ru -= h;
+                rd -= h;
+                if (i & 0b00000001) {
+                    lu -= h / 2;
+                    ld -= h / 2;
+                }
+            }
+            if (i & 0b01000000) {
+                lu += v;
+                ru += v;
+                if (i & 0b00000100) {
+                    ld += v / 2;
+                    rd += v / 2;
+                }
+            }
+            // 斜角
+            if ((i & 0b11000001) === 0b01000001) {
+                lu = luc;
+            }
+            if ((i & 0b01110000) === 0b01010000) {
+                ru = ruc;
+            }
+            if ((i & 0b00011100) === 0b00010100) {
+                rd = rdc;
+            }
+            if ((i & 0b00000111) === 0b00000101) {
+                ld = ldc;
+            }
+            target[i] = [lu, ru, rd, ld];
+        }
+    };
+
+    get(bigAutotile, 1);
+    get(smallAutotile, 2);
+}
+getAutotileIndices();
+
+function getRepeatMap() {
+    // 实际上3x4与2x3的重复映射是一致的，因此只需要计算一个就行了
+    // 这里使用2x3的进行计算
+    const calculated: Record<string, number> = {};
+    const repeatMap: Record<number, number> = {};
+    for (const [num, [lu, ru, rd, ld]] of Object.entries(smallAutotile)) {
+        const n = lu + ru * 24 + rd * 24 ** 2 + ld * 24 ** 3;
+        calculated[num] = n;
+        for (const [num2, n2] of Object.entries(calculated)) {
+            if (n2 === n) {
+                repeatMap[Number(num)] = Number(num2);
+                break;
+            }
+        }
+    }
+
+    return repeatMap;
+}
+
+function splitAutotiles(map: IdToNumber): AutotileCaches {
+    const cache: Partial<AutotileCaches> = {};
+    /** 重复映射，由于自动元件只有48种，其余的208种是重复的，因此需要获取重复映射 */
+    const repeatMap: Record<number, number> = getRepeatMap();
+    /** 每个自动元件左上角32*32的内容，用于判断父子关系 */
+    const masterMap: Partial<Record<AllNumbersOf<'autotile'>, string>> = {};
+
+    for (const [key, img] of Object.entries(core.material.images.autotile)) {
+        const auto = map[key as AllIdsOf<'autotile'>];
+
+        // 判断自动元件类型
+        let mode: 1 | 2 = 1;
+        let frame = 1;
+        if (img.width === 384) {
+            frame = 4;
+        } else if (img.width === 192) {
+            mode = 2;
+            frame = 3;
+        } else if (img.width === 64) {
+            mode = 2;
+        }
+
+        cache[auto] = {
+            frame,
+            cache: {}
+        };
+
+        // 父子关系，截取本图块的左上角存入map
+        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++) {
+            const re = repeatMap[i];
+            if (re) {
+                const cached = cache[auto]!.cache[re];
+                if (cached) {
+                    cache[auto]!.cache[i] = cached;
+                    continue;
+                }
+            }
+
+            const data = (mode === 1 ? bigAutotile : smallAutotile)[i];
+            const row = mode === 1 ? 6 : 4;
+            const info: [number, number][] = data.map(v => [
+                (v % row) * 16,
+                Math.floor(v / row) * 16
+            ]);
+
+            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;
+                const sx1 = info[0][0] + (i * row * 32) / 2;
+                const sx2 = info[1][0] + (i * row * 32) / 2;
+                const sx3 = info[2][0] + (i * row * 32) / 2;
+                const sx4 = info[3][0] + (i * row * 32) / 2;
+                const sy1 = info[0][1];
+                const sy2 = info[1][1];
+                const sy3 = info[2][1];
+                const sy4 = info[3][1];
+
+                ctx.drawImage(img, sx1, sy1, 16, 16, dx, 0, 16, 16);
+                ctx.drawImage(img, sx2, sy2, 16, 16, dx + 16, 0, 16, 16);
+                ctx.drawImage(img, sx3, sy3, 16, 16, dx + 16, 16, 16, 16);
+                ctx.drawImage(img, sx4, sy4, 16, 16, dx, 16, 16, 16);
+            }
+            cache[auto]!.cache[i] = canvas.canvas;
+        }
+    }
+
+    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)) {
+        const auto = map[key as AllIdsOf<'autotile'>];
+
+        // 只针对3*4的图块进行，截取第一行中间的，然后判断
+        judge.clear();
+        judge.ctx.drawImage(img, 32, 0, 32, 32, 0, 0, 32, 32);
+        const data = judge.canvas.toDataURL('image/png');
+
+        for (const [key, data2] of Object.entries(masterMap)) {
+            const auto2 = map[key as AllIdsOf<'autotile'>];
+
+            if (data === data2) {
+                cache[auto]!.parent ??= new Set();
+                cache[auto]!.parent!.add(auto2);
+            }
+        }
+    }
+    judge.delete();
+
+    return cache as AutotileCaches;
+}
+
+export function createCache() {
+    const { loading } = Mota.require('@user/data-base');
+    loading.once('loaded', () => {
+        [
+            'enemys',
+            'enemy48',
+            'npcs',
+            'npc48',
+            'terrains',
+            'items',
+            'animates'
+        ].forEach(v => (imageMap[v as ImageMapKeys] = i(v as ImageMapKeys)));
+        texture.init();
+    });
+}

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

@@ -0,0 +1,624 @@
+import { Animation, TimingFn, Transition } from 'mutate-animate';
+import { RenderItem, Transform } from '@motajs/render-core';
+import { logger } from '@motajs/common';
+import EventEmitter from 'eventemitter3';
+
+export interface ICameraTranslate {
+    readonly type: 'translate';
+    readonly from: Camera;
+    x: number;
+    y: number;
+}
+
+export interface ICameraRotate {
+    readonly type: 'rotate';
+    readonly from: Camera;
+    /** 旋转角，单位弧度 */
+    angle: number;
+}
+
+export interface ICameraScale {
+    readonly type: 'scale';
+    readonly from: Camera;
+    x: number;
+    y: number;
+}
+
+type CameraOperation = ICameraTranslate | ICameraScale | ICameraRotate;
+
+interface CameraEvent {
+    destroy: [];
+}
+
+export class Camera extends EventEmitter<CameraEvent> {
+    /** 当前绑定的渲染元素 */
+    readonly binded: RenderItem;
+    /** 目标变换矩阵，默认与 `this.binded.transform` 同引用 */
+    transform: Transform;
+
+    /** 委托ticker的id */
+    private delegation: number;
+    /** 所有的动画id */
+    private animationIds: Set<number> = new Set();
+
+    /** 是否需要更新视角 */
+    private needUpdate: boolean = false;
+    /** 是否启用摄像机 */
+    private enabled: boolean = true;
+
+    /** 变换操作列表，因为矩阵乘法跟顺序有关，因此需要把各个操作拆分成列表进行 */
+    protected operation: CameraOperation[] = [];
+
+    /** 渲染元素到摄像机的映射 */
+    private static cameraMap: Map<RenderItem, Camera> = new Map();
+
+    /**
+     * 获取一个渲染元素的摄像机，如果不存在则为它创建一个并返回。注意使用`new Camera`创建的摄像机不在此列
+     * @param item 渲染元素
+     */
+    static for(item: RenderItem) {
+        const camera = this.cameraMap.get(item);
+        if (!camera) {
+            const ca = new Camera(item);
+            this.cameraMap.set(item, ca);
+            return ca;
+        } else {
+            return camera;
+        }
+    }
+
+    constructor(item: RenderItem) {
+        super();
+
+        this.binded = item;
+
+        this.delegation = item.delegateTicker(() => this.tick());
+        this.transform = item.transform;
+
+        item.on('destroy', () => {
+            this.destroy();
+        });
+
+        const ca = Camera.cameraMap.get(item);
+        if (ca && ca.enabled) {
+            logger.warn(22);
+        }
+    }
+
+    private tick = () => {
+        if (!this.needUpdate || !this.enabled) return;
+        const trans = this.transform;
+        trans.reset();
+        for (const o of this.operation) {
+            if (o.type === 'translate') {
+                trans.translate(-o.x, -o.y);
+            } else if (o.type === 'rotate') {
+                trans.rotate(o.angle);
+            } else {
+                trans.scale(o.x, o.y);
+            }
+        }
+        this.binded.update(this.binded);
+        this.needUpdate = false;
+    };
+
+    /**
+     * 禁用这个摄像机
+     */
+    disable() {
+        this.enabled = false;
+    }
+
+    /**
+     * 启用这个摄像机
+     */
+    enable() {
+        this.enabled = true;
+    }
+
+    /**
+     * 在下一帧进行强制更新
+     */
+    requestUpdate() {
+        this.needUpdate = true;
+    }
+
+    /**
+     * 移除一个变换操作
+     * @param operation 要移除的操作
+     */
+    removeOperation(operation: CameraOperation) {
+        const index = this.operation.indexOf(operation);
+        if (index === -1) return;
+        this.operation.splice(index, 1);
+    }
+
+    /**
+     * 清空变换操作列表
+     */
+    clearOperation() {
+        this.operation.splice(0);
+    }
+
+    /**
+     * 添加一个平移操作
+     * @returns 添加的平移变换操作
+     */
+    addTranslate(): ICameraTranslate {
+        const item: ICameraTranslate = {
+            type: 'translate',
+            x: 0,
+            y: 0,
+            from: this
+        };
+        this.operation.push(item);
+        return item;
+    }
+
+    /**
+     * 添加一个旋转操作
+     * @returns 添加的旋转变换操作
+     */
+    addRotate(): ICameraRotate {
+        const item: ICameraRotate = {
+            type: 'rotate',
+            angle: 0,
+            from: this
+        };
+        this.operation.push(item);
+        return item;
+    }
+
+    /**
+     * 添加一个放缩操作
+     * @returns 添加的放缩变换操作
+     */
+    addScale(): ICameraScale {
+        const item: ICameraScale = {
+            type: 'scale',
+            x: 1,
+            y: 1,
+            from: this
+        };
+        this.operation.push(item);
+        return item;
+    }
+
+    /**
+     * 施加动画
+     * @param time 动画时长
+     * @param update 每帧的更新函数
+     */
+    applyAnimation(time: number, update: () => void) {
+        const delegation = this.binded.delegateTicker(
+            () => {
+                update();
+                this.needUpdate = true;
+            },
+            time,
+            () => {
+                update();
+                this.needUpdate = true;
+                this.animationIds.delete(delegation);
+            }
+        );
+        this.animationIds.add(delegation);
+    }
+
+    /**
+     * 为一个平移操作实施动画
+     * @param operation 平移操作
+     * @param animate 动画实例
+     * @param time 动画时长
+     */
+    applyTranslateAnimation(
+        operation: ICameraTranslate,
+        animate: Animation,
+        time: number
+    ) {
+        if (operation.from !== this) {
+            logger.warn(20);
+            return;
+        }
+
+        const update = () => {
+            operation.x = animate.x;
+            operation.y = animate.y;
+        };
+
+        this.applyAnimation(time, update);
+    }
+
+    /**
+     * 为一个旋转操作实施动画
+     * @param operation 旋转操作
+     * @param animate 动画实例
+     * @param time 动画时长
+     */
+    applyRotateAnimation(
+        operation: ICameraRotate,
+        animate: Animation,
+        time: number
+    ) {
+        if (operation.from !== this) {
+            logger.warn(20);
+            return;
+        }
+
+        const update = () => {
+            operation.angle = animate.angle;
+        };
+
+        this.applyAnimation(time, update);
+    }
+
+    /**
+     * 为一个缩放操作实施动画
+     * @param operation 缩放操作
+     * @param animate 动画实例
+     * @param time 动画时长
+     */
+    applyScaleAnimation(
+        operation: ICameraScale,
+        animate: Animation,
+        time: number
+    ) {
+        if (operation.from !== this) {
+            logger.warn(20);
+            return;
+        }
+
+        const update = () => {
+            operation.x = animate.size;
+            operation.y = animate.size;
+        };
+
+        this.applyAnimation(time, update);
+    }
+
+    /**
+     * 为一个平移操作实施渐变，使用渐变的 x,y 值，即`transition.value.x`与`transition.value.y`
+     * @param operation 平移操作
+     * @param animate 渐变实例
+     * @param time 渐变时长
+     */
+    applyTranslateTransition(
+        operation: ICameraTranslate,
+        animate: Transition,
+        time: number
+    ) {
+        if (operation.from !== this) {
+            logger.warn(21);
+            return;
+        }
+
+        const update = () => {
+            operation.x = animate.value.x;
+            operation.y = animate.value.y;
+        };
+
+        this.applyAnimation(time, update);
+    }
+
+    /**
+     * 为一个旋转操作实施渐变，使用渐变的 angle 值，即`transition.value.angle`
+     * @param operation 旋转操作
+     * @param animate 渐变实例
+     * @param time 渐变时长
+     */
+    applyRotateTransition(
+        operation: ICameraRotate,
+        animate: Transition,
+        time: number
+    ) {
+        if (operation.from !== this) {
+            logger.warn(21);
+            return;
+        }
+
+        const update = () => {
+            operation.angle = animate.value.angle;
+        };
+
+        this.applyAnimation(time, update);
+    }
+
+    /**
+     * 为一个缩放操作实施渐变，使用渐变的 size 值，即`transition.value.size`
+     * @param operation 缩放操作
+     * @param animate 渐变实例
+     * @param time 渐变时长
+     */
+    applyScaleTransition(
+        operation: ICameraScale,
+        animate: Transition,
+        time: number
+    ) {
+        if (operation.from !== this) {
+            logger.warn(21);
+            return;
+        }
+
+        const update = () => {
+            operation.x = animate.value.size;
+            operation.y = animate.value.size;
+        };
+
+        this.applyAnimation(time, update);
+    }
+
+    /**
+     * 停止所有动画
+     */
+    stopAllAnimates() {
+        this.animationIds.forEach(v => this.binded.removeTicker(v));
+    }
+
+    /**
+     * 摧毁这个摄像机，当绑定元素被摧毁之后摄像机会一并摧毁，如果这个摄像机不使用了，一定要将它摧毁
+     */
+    destroy() {
+        this.binded.removeTicker(this.delegation);
+        this.animationIds.forEach(v => this.binded.removeTicker(v));
+        Camera.cameraMap.delete(this.binded);
+        this.emit('destroy');
+    }
+}
+
+interface CameraAnimationBase {
+    type: string;
+    time: number;
+    start: number;
+}
+
+export interface TranslateAnimation extends CameraAnimationBase {
+    type: 'translate';
+    timing: TimingFn;
+    x: number;
+    y: number;
+}
+
+export interface TranslateAsAnimation extends CameraAnimationBase {
+    type: 'translateAs';
+    timing: TimingFn<2>;
+    time: number;
+}
+
+export interface RotateAnimation extends CameraAnimationBase {
+    type: 'rotate';
+    timing: TimingFn;
+    angle: number;
+    time: number;
+}
+
+export interface ScaleAnimation extends CameraAnimationBase {
+    type: 'scale';
+    timing: TimingFn;
+    scale: number;
+    time: number;
+}
+
+export type CameraAnimationData =
+    | TranslateAnimation
+    | TranslateAsAnimation
+    | RotateAnimation
+    | ScaleAnimation;
+
+export interface CameraAnimationExecution {
+    data: CameraAnimationData[];
+    animation: Animation;
+}
+
+interface CameraAnimationEvent {
+    animate: [
+        operation: CameraOperation,
+        execution: CameraAnimationExecution,
+        item: CameraAnimationData
+    ];
+}
+
+export class CameraAnimation extends EventEmitter<CameraAnimationEvent> {
+    camera: Camera;
+
+    /** 动画开始时刻 */
+    private startTime: number = 0;
+    /** 动画结束时刻 */
+    private endTime: number = 0;
+    /** 委托ticker的id */
+    private delegation: number;
+    /** 动画是否开始 */
+    private started: boolean = false;
+
+    /** 每个摄像机操作的动画映射 */
+    private animateMap: Map<CameraOperation, CameraAnimationExecution> =
+        new Map();
+
+    constructor(camera: Camera) {
+        super();
+
+        this.camera = camera;
+        this.delegation = camera.binded.delegateTicker(this.tick);
+    }
+
+    private tick = () => {
+        if (!this.started) return;
+        const now = Date.now();
+        const time = now - this.startTime;
+        if (now - this.startTime > this.endTime + 50) {
+            this.destroy();
+            return;
+        }
+        this.animateMap.forEach((exe, ope) => {
+            const data = exe.data;
+            if (data.length === 0) return;
+            const item = data[0];
+            if (item.start < time) {
+                this.executeAnimate(exe, item);
+                data.shift();
+                this.emit('animate', ope, exe, item);
+            }
+        });
+        this.camera.requestUpdate();
+    };
+
+    private executeAnimate(
+        execution: CameraAnimationExecution,
+        animate: CameraAnimationData
+    ) {
+        if (animate.type === 'translateAs') {
+            const ani = this.ensureAnimate(execution);
+            ani.time(animate.time).moveAs(animate.timing);
+        } else if (animate.type === 'translate') {
+            const ani = this.ensureAnimate(execution);
+            const { x, y, time, timing } = animate;
+            ani.mode(timing).time(time).move(x, y);
+        } else if (animate.type === 'rotate') {
+            const ani = this.ensureAnimate(execution);
+            const { angle, time, timing } = animate;
+            ani.mode(timing).time(time).rotate(angle);
+        } else {
+            const ani = this.ensureAnimate(execution);
+            const { scale, time, timing } = animate;
+            ani.mode(timing).time(time).scale(scale);
+        }
+    }
+
+    private ensureAnimate(execution: CameraAnimationExecution) {
+        if (execution.animation) return execution.animation;
+        const ani = new Animation();
+        execution.animation = ani;
+        return ani;
+    }
+
+    private ensureOperation(operation: CameraOperation) {
+        if (!this.animateMap.has(operation)) {
+            const data: CameraAnimationExecution = {
+                data: [],
+                animation: new Animation()
+            };
+            this.animateMap.set(operation, data);
+            return data;
+        } else {
+            return this.animateMap.get(operation)!;
+        }
+    }
+
+    /**
+     * 添加一个平移动画
+     * @param operation 摄像机操作对象
+     * @param x 目标横坐标
+     * @param y 目标纵坐标
+     * @param time 动画时长
+     * @param start 动画开始时间
+     * @param timing 动画的缓动函数
+     */
+    translate(
+        operation: ICameraTranslate,
+        x: number,
+        y: number,
+        time: number,
+        start: number,
+        timing: TimingFn
+    ) {
+        const exe = this.ensureOperation(operation);
+        const data: TranslateAnimation = {
+            type: 'translate',
+            timing,
+            x: x * 32,
+            y: y * 32,
+            time,
+            start
+        };
+        exe.data.push(data);
+    }
+
+    /**
+     * 添加一个旋转动画
+     * @param operation 摄像机操作
+     * @param angle 目标旋转弧度，单位弧度
+     * @param time 动画时长
+     * @param start 动画开始时间
+     * @param timing 动画的缓动函数
+     */
+    rotate(
+        operation: ICameraRotate,
+        angle: number,
+        time: number,
+        start: number,
+        timing: TimingFn
+    ) {
+        const exe = this.ensureOperation(operation);
+        const data: RotateAnimation = {
+            type: 'rotate',
+            timing,
+            angle,
+            time,
+            start
+        };
+        exe.data.push(data);
+    }
+
+    /**
+     * 添加一个缩放动画
+     * @param operation 摄像机操作
+     * @param scale 目标缩放倍率
+     * @param time 动画时长
+     * @param start 动画开始时间
+     * @param timing 动画的缓动函数
+     */
+    scale(
+        operation: ICameraScale,
+        scale: number,
+        time: number,
+        start: number,
+        timing: TimingFn
+    ) {
+        const exe = this.ensureOperation(operation);
+        const data: ScaleAnimation = {
+            type: 'scale',
+            timing,
+            scale,
+            time,
+            start
+        };
+        exe.data.push(data);
+    }
+
+    /**
+     * 开始执行这个动画
+     */
+    start() {
+        if (this.started) return;
+        this.startTime = Date.now();
+        this.started = true;
+        let endTime = 0;
+        this.animateMap.forEach((exe, ope) => {
+            const data = exe.data;
+            data.sort((a, b) => a.start - b.start);
+            const end = data.at(-1);
+            if (!end) return;
+            const t = end.start + end.time;
+            if (t > endTime) endTime = t;
+            const cam = this.camera;
+
+            if (ope.type === 'translate') {
+                cam.applyTranslateAnimation(ope, exe.animation, t + 100);
+            } else if (ope.type === 'rotate') {
+                cam.applyRotateAnimation(ope, exe.animation, t + 100);
+            } else {
+                cam.applyScaleAnimation(ope, exe.animation, t + 100);
+            }
+        });
+        this.endTime = endTime + this.startTime;
+        this.tick();
+    }
+
+    destroy() {
+        this.camera.binded.removeTicker(this.delegation);
+        this.camera.stopAllAnimates();
+        this.animateMap.forEach(v => {
+            v.animation.ticker.destroy();
+        });
+        this.animateMap.clear();
+    }
+}

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

@@ -0,0 +1,54 @@
+import EventEmitter from 'eventemitter3';
+import { RenderItem } from '@motajs/render-core';
+
+export interface IAnimateFrame {
+    updateFrameAnimate(frame: number, time: number): void;
+}
+
+interface RenderEvent {
+    animateFrame: [frame: number, time: number];
+}
+
+class RenderEmits extends EventEmitter<RenderEvent> {
+    private framer: Set<IAnimateFrame> = new Set();
+
+    /**
+     * 添加一个可更新帧动画的对象
+     */
+    addFramer(framer: IAnimateFrame) {
+        this.framer.add(framer);
+    }
+
+    /**
+     * 移除一个可更新帧动画的对象
+     */
+    removeFramer(framer: IAnimateFrame) {
+        this.framer.delete(framer);
+    }
+
+    /**
+     * 更新所有帧动画
+     * @param frame 帧数
+     * @param time 帧动画时刻
+     */
+    emitAnimateFrame(frame: number, time: number) {
+        this.framer.forEach(v => v.updateFrameAnimate(frame, time));
+        this.emit('animateFrame', frame, time);
+    }
+}
+
+export const renderEmits = new RenderEmits();
+
+export function createFrame() {
+    Mota.require('@user/data-base').hook.once('reset', () => {
+        let lastTime = 0;
+        RenderItem.ticker.add(time => {
+            if (!core.isPlaying()) return;
+            if (time - lastTime > core.values.animateSpeed) {
+                RenderItem.animatedFrame++;
+                lastTime = time;
+                renderEmits.emitAnimateFrame(RenderItem.animatedFrame, time);
+            }
+        });
+    });
+}

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

@@ -0,0 +1,477 @@
+import { RenderAdapter } from '@motajs/render-core';
+import { logger } from '@motajs/common';
+import { ILayerRenderExtends, Layer, LayerMovingRenderable } from './layer';
+import { SizedCanvasImageSource } from '@motajs/render-elements';
+import EventEmitter from 'eventemitter3';
+import { texture } from './cache';
+import { TimingFn } from 'mutate-animate';
+import { isNil } from 'lodash-es';
+
+// type HeroMovingStatus = 'stop' | 'moving' | 'moving-as';
+// export const enum HeroMovingStatus {}
+
+interface HeroRenderEvent {
+    stepEnd: [];
+    moveTick: [x: number, y: number];
+    append: [renderable: LayerMovingRenderable[]];
+}
+
+export class HeroRenderer
+    extends EventEmitter<HeroRenderEvent>
+    implements ILayerRenderExtends
+{
+    id: string = 'floor-hero';
+
+    /** 勇士的图片资源 */
+    image?: SizedCanvasImageSource;
+    cellWidth?: number;
+    cellHeight?: number;
+
+    /** 勇士的渲染信息 */
+    renderable?: LayerMovingRenderable;
+    layer!: Layer;
+
+    /** 当前移动帧数 */
+    movingFrame: number = 0;
+    /** 是否正在移动 */
+    moving: boolean = false;
+    /** 是否正在播放动画，与移动分开以实现原地踏步 */
+    animate: boolean = false;
+
+    /** 勇士移动速度 */
+    speed: number = 100;
+    /** 勇士移动的真正速度，经过录像修正 */
+    realSpeed: number = 100;
+
+    /** 当前的移动方向 */
+    moveDir: Dir2 = 'down';
+    /** 当前移动的勇士显示方向 */
+    showDir: Dir = 'down';
+    /** 帧动画是否反向播放，例如后退时就应该设为true */
+    animateReverse: boolean = false;
+
+    /** 勇士移动定时器id */
+    private moveId: number = -1;
+    /** 上一次帧数切换的时间 */
+    private lastFrameTime: number = 0;
+    /** 上一步走到格子上的时间 */
+    private lastStepTime: number = 0;
+    /** 执行当前步移动的Promise */
+    private moveDetached?: Promise<void>;
+    /** endMove的Promise */
+    private moveEnding?: Promise<void>;
+    /**
+     * 这一步的移动方向，与{@link moveDir}不同的是，在这一步走完之前，它都不会变，
+     * 当这一步走完之后，才会将其设置为{@link moveDir}的值
+     */
+    stepDir: Dir2 = 'down';
+    /** 每步的格子增量 */
+    private stepDelta: Loc = { x: 0, y: 1 };
+
+    /**
+     * 设置勇士所用的图片资源
+     * @param image 图片资源
+     */
+    setImage(image: SizedCanvasImageSource) {
+        this.image = image;
+        this.split();
+        this.resetRenderable(true);
+        this.layer.requestUpdateMoving();
+    }
+
+    /**
+     * 设置移动的移动速度
+     * @param speed 移动速度
+     */
+    setMoveSpeed(speed: number) {
+        this.speed = speed;
+        this.fixMoveSpeed();
+    }
+
+    /**
+     * 分割勇士图像，生成renderable信息
+     */
+    split() {
+        this.cellWidth = this.image!.width / 4;
+        this.cellHeight = this.image!.height / 4;
+        this.generateRenderable();
+    }
+
+    /**
+     * 生成渲染信息
+     */
+    generateRenderable() {
+        if (!this.image) return;
+        this.renderable = {
+            image: this.image,
+            frame: 4,
+            x: core.status.hero.loc.x,
+            y: core.status.hero.loc.y,
+            zIndex: core.status.hero.loc.y,
+            autotile: false,
+            bigImage: true,
+            render: this.getRenderFromDir(this.showDir),
+            animate: 0,
+            alpha: 1
+        };
+    }
+
+    /**
+     * 根据方向获取勇士的裁切信息
+     * @param dir 方向
+     */
+    getRenderFromDir(dir: Dir): [number, number, number, number][] {
+        if (!this.cellWidth || !this.cellHeight) return [];
+        const index = texture.characterDirection[dir];
+        const y = index * this.cellHeight;
+        const res: [number, number, number, number][] = [0, 1, 2, 3].map(v => {
+            return [v * this.cellWidth!, y, this.cellWidth!, this.cellHeight!];
+        });
+        if (this.animateReverse) return res.reverse();
+        else return res;
+    }
+
+    /**
+     * 开始勇士帧动画
+     */
+    startAnimate() {
+        this.animate = true;
+        this.lastFrameTime = Date.now();
+    }
+
+    /**
+     * 结束勇士帧动画
+     */
+    endAnimate() {
+        this.animate = false;
+        this.resetRenderable(false);
+    }
+
+    /**
+     * 设置帧动画是否反向播放
+     * @param reverse 帧动画是否反向播放
+     */
+    setAnimateReversed(reverse: boolean) {
+        this.animateReverse = reverse;
+        this.resetRenderable(true);
+    }
+
+    /**
+     * 设置勇士的动画显示朝向
+     * @param dir 显示朝向
+     */
+    setAnimateDir(dir: Dir) {
+        if (dir !== this.showDir) {
+            this.showDir = dir;
+            this.resetRenderable(true);
+        }
+    }
+
+    /**
+     * 重置renderable状态，恢复至第一帧状态
+     * @param getInfo 是否重新获取渲染信息
+     */
+    resetRenderable(getInfo: boolean) {
+        this.movingFrame = 0;
+
+        if (this.renderable) {
+            this.renderable.animate = 0;
+            if (getInfo) {
+                this.renderable.render = this.getRenderFromDir(this.showDir);
+            }
+        }
+        this.layer.update(this.layer);
+    }
+
+    /**
+     * 勇士帧动画定时器
+     */
+    private animateTick(time: number) {
+        if (!this.animate) return;
+        if (time - this.lastFrameTime > this.speed) {
+            this.lastFrameTime = time;
+            this.movingFrame++;
+            this.movingFrame %= 4;
+            if (this.renderable) this.renderable.animate = this.movingFrame;
+        }
+        this.layer.update(this.layer);
+    }
+
+    /**
+     * 勇士移动定时器
+     */
+    private moveTick(time: number) {
+        if (!this.renderable) return;
+
+        if (this.moving) {
+            const progress = (time - this.lastStepTime) / this.realSpeed;
+
+            const { x: dx, y: dy } = this.stepDelta;
+            const { x, y } = core.status.hero.loc;
+            if (progress >= 1) {
+                this.renderable.x = x + dx;
+                this.renderable.y = y + dy;
+                this.fixMoveSpeed();
+                this.emit('stepEnd');
+            } else {
+                const rx = dx * progress + x;
+                const ry = dy * progress + y;
+                this.renderable.x = rx;
+                this.renderable.y = ry;
+            }
+            this.layer.update(this.layer);
+        }
+        this.emit('moveTick', this.renderable.x, this.renderable.y);
+    }
+
+    /**
+     * 进行下一步的移动准备，设置移动信息
+     */
+    private step() {
+        this.stepDir = this.moveDir;
+        this.lastStepTime = Date.now();
+        this.stepDelta = core.utils.scan2[this.stepDir];
+        this.turn(this.stepDir);
+    }
+
+    private fixMoveSpeed() {
+        if (!core.isReplaying()) {
+            this.realSpeed = this.speed;
+        } else {
+            const replay = core.status.replay.speed;
+            this.realSpeed = replay === 24 ? 1 : this.speed / replay;
+        }
+    }
+
+    /**
+     * 准备开始移动
+     */
+    readyMove() {
+        this.moving = true;
+        this.fixMoveSpeed();
+    }
+
+    /**
+     * 移动勇士
+     */
+    move(dir: Dir2): Promise<void> {
+        if (!this.moving) {
+            logger.error(12);
+            return Promise.reject(
+                'Cannot moving hero while hero not in moving!'
+            );
+        }
+
+        this.moveDir = dir;
+        if (this.moveDetached) {
+            return this.moveDetached;
+        } else {
+            this.step();
+            this.moveDetached = new Promise(res => {
+                this.once('stepEnd', () => {
+                    this.moveDetached = void 0;
+                    res();
+                });
+            });
+            return this.moveDetached;
+        }
+    }
+
+    /**
+     * 结束勇士的移动过程
+     */
+    endMove(): Promise<void> {
+        if (!this.moving) return Promise.resolve();
+        if (this.moveEnding) return this.moveEnding;
+        else {
+            const promise = new Promise<void>(resolve => {
+                this.once('stepEnd', () => {
+                    this.moveEnding = void 0;
+                    this.moving = false;
+                    const { x, y } = core.status.hero.loc;
+                    this.setHeroLoc(x, y);
+                    this.render();
+                    resolve();
+                });
+            });
+            return (this.moveEnding = promise);
+        }
+    }
+
+    /**
+     * 勇士转向，不填表示顺时针转一个方向
+     * @param dir 移动方向
+     */
+    turn(dir?: Dir2): void {
+        if (!dir) {
+            const index = texture.characterTurn2.indexOf(this.stepDir);
+            if (index === -1) {
+                const length = texture.characterTurn.length;
+                const index = texture.characterTurn.indexOf(
+                    this.stepDir as Dir
+                );
+                const next = texture.characterTurn[index % length];
+                return this.turn(next);
+            } else {
+                return this.turn(texture.characterTurn[index]);
+            }
+        }
+        this.moveDir = dir;
+        this.stepDir = dir;
+
+        if (!this.renderable) return;
+        this.renderable.render = this.getRenderFromDir(this.showDir);
+        this.layer.update(this.layer);
+    }
+
+    /**
+     * 设置勇士的坐标
+     * @param x 横坐标
+     * @param y 纵坐标
+     */
+    setHeroLoc(x?: number, y?: number) {
+        if (!this.renderable) return;
+        if (!isNil(x)) {
+            this.renderable.x = x;
+        }
+        if (!isNil(y)) {
+            this.renderable.y = y;
+        }
+        this.emit('moveTick', this.renderable.x, this.renderable.y);
+        this.layer.update(this.layer);
+    }
+
+    /**
+     * 按照指定函数移动勇士
+     * @param x 目标横坐标
+     * @param y 目标纵坐标
+     * @param time 移动时间
+     * @param fn 移动函数，传入一个完成度（范围0-1），返回一个三元素数组，表示横纵格子坐标，可以是小数。
+     *           第三个元素表示图块纵深，一般图块的纵深就是其纵坐标，当地图上有大怪物时，此举可以辅助渲染，
+     *           否则可能会导致移动过程中与大怪物的层级关系不正确，比如全在大怪物身后。注意不建议频繁改动这个值，
+     *           因为此举会导致层级的重新排序，降低渲染性能。
+     */
+    moveAs(x: number, y: number, time: number, fn: TimingFn<3>): Promise<void> {
+        if (!this.moving) return Promise.resolve();
+        if (!this.renderable) return Promise.resolve();
+        const nowZIndex = fn(0)[2];
+        const startTime = Date.now();
+        return new Promise(res => {
+            this.layer.delegateTicker(
+                () => {
+                    if (!this.renderable) return;
+                    const now = Date.now();
+                    const progress = (now - startTime) / time;
+                    const [nx, ny, nz] = fn(progress);
+                    this.renderable.x = nx;
+                    this.renderable.y = ny;
+                    this.renderable.zIndex = nz;
+                    if (nz !== nowZIndex) {
+                        this.layer.sortMovingRenderable();
+                    }
+                    this.emit('moveTick', this.renderable.x, this.renderable.y);
+                    this.layer.update(this.layer);
+                },
+                time,
+                () => {
+                    this.moving = false;
+                    if (!this.renderable) return res();
+                    this.renderable.x = x;
+                    this.renderable.y = y;
+                    this.emit('moveTick', this.renderable.x, this.renderable.y);
+                    this.layer.update(this.layer);
+                    res();
+                }
+            );
+        });
+    }
+
+    /**
+     * 渲染勇士
+     */
+    render() {
+        if (!this.renderable) return;
+        if (!this.animate) {
+            this.renderable.animate = 0;
+        } else {
+            this.renderable.animate = this.movingFrame;
+        }
+        this.layer.update(this.layer);
+    }
+
+    awake(layer: Layer): void {
+        this.layer = layer;
+        adapter.add(this);
+        this.moveId = layer.delegateTicker(() => {
+            const time = Date.now();
+            this.animateTick(time);
+            this.moveTick(time);
+        });
+    }
+
+    onDestroy(layer: Layer): void {
+        adapter.remove(this);
+        layer.removeTicker(this.moveId);
+    }
+
+    onMovingUpdate(_layer: Layer, renderable: LayerMovingRenderable[]): void {
+        if (this.renderable) {
+            renderable.push(this.renderable);
+            this.emit('append', renderable);
+        }
+    }
+}
+
+const adapter = new RenderAdapter<HeroRenderer>('hero-adapter');
+adapter.receive('readyMove', item => {
+    item.readyMove();
+    return Promise.resolve();
+});
+adapter.receive('move', (item, dir: Dir) => {
+    return item.move(dir);
+});
+adapter.receive('endMove', item => {
+    return item.endMove();
+});
+adapter.receive(
+    'moveAs',
+    (item, x: number, y: number, time: number, fn: TimingFn<3>) => {
+        return item.moveAs(x, y, time, fn);
+    }
+);
+adapter.receive('setHeroLoc', (item, x?: number, y?: number) => {
+    item.setHeroLoc(x, y);
+    return Promise.resolve();
+});
+adapter.receive('turn', (item, dir: Dir2) => {
+    item.turn(dir);
+    return Promise.resolve();
+});
+
+// 同步适配函数，这些函数用于同步设置信息等
+adapter.receiveSync('setImage', (item, image: SizedCanvasImageSource) => {
+    item.setImage(image);
+});
+adapter.receiveSync('setMoveSpeed', (item, speed: number) => {
+    item.setMoveSpeed(speed);
+});
+adapter.receiveSync('setAnimateReversed', (item, reverse: boolean) => {
+    item.setAnimateReversed(reverse);
+});
+adapter.receiveSync('startAnimate', item => {
+    item.startAnimate();
+});
+adapter.receiveSync('endAnimate', item => {
+    item.endAnimate();
+});
+adapter.receiveSync('setAnimateDir', (item, dir: Dir) => {
+    item.setAnimateDir(dir);
+});
+
+// 不分同步fallback，用于适配现在的样板，之后会删除
+adapter.receiveSync('setHeroLoc', (item, x?: number, y?: number) => {
+    item.setHeroLoc(x, y);
+});
+adapter.receiveSync('turn', (item, dir: Dir2) => {
+    item.turn(dir);
+});

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

@@ -0,0 +1,77 @@
+import { standardElementNoCache, tagMap } from '@motajs/render-vue';
+import { createCache } from './cache';
+import { createFrame } from './frame';
+import { createLayer, Layer, LayerGroup } from './layer';
+import { createViewport } from './viewport';
+import { Icon, Winskin } from './misc';
+import { Animate } from './animate';
+
+export function createElements() {
+    createCache();
+    createFrame();
+    createLayer();
+    createViewport();
+
+    // ----- 注册标签
+
+    tagMap.register('winskin', (_0, _1, props) => {
+        if (!props)
+            return new Winskin(core.material.images.images['winskin.png']);
+        else {
+            const {
+                image = core.material.images.images['winskin.png'],
+                type = 'static'
+            } = props;
+            return new Winskin(image, type);
+        }
+    });
+    tagMap.register('layer', (_0, _1, props) => {
+        if (!props) return new Layer();
+        else {
+            const { ex } = props;
+            const l = new Layer();
+
+            if (ex) {
+                (ex as any[]).forEach(v => {
+                    l.extends(v);
+                });
+            }
+
+            return l;
+        }
+    });
+    tagMap.register('layer-group', (_0, _1, props) => {
+        if (!props) return new LayerGroup();
+        else {
+            const { ex, layers } = props;
+            const l = new LayerGroup();
+
+            if (ex) {
+                (ex as any[]).forEach(v => {
+                    l.extends(v);
+                });
+            }
+            if (layers) {
+                (layers as any[]).forEach(v => {
+                    l.addLayer(v);
+                });
+            }
+
+            return l;
+        }
+    });
+    tagMap.register('animation', (_0, _1, _props) => {
+        return new Animate();
+    });
+    tagMap.register('icon', standardElementNoCache(Icon));
+}
+
+export * from './animate';
+export * from './block';
+export * from './cache';
+export * from './camera';
+export * from './frame';
+export * from './hero';
+export * from './layer';
+export * from './misc';
+export * from './viewport';

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

@@ -0,0 +1,331 @@
+import { logger } from '@motajs/common';
+import {
+    ERenderItemEvent,
+    RenderItem,
+    RenderItemPosition,
+    MotaOffscreenCanvas2D,
+    Transform
+} from '@motajs/render-core';
+import { SizedCanvasImageSource } from '@motajs/render-elements';
+import { isNil } from 'lodash-es';
+import { RenderableData, AutotileRenderable, texture } from './cache';
+import { IAnimateFrame, renderEmits } from './frame';
+
+export interface EIconEvent extends ERenderItemEvent {}
+
+export class Icon extends RenderItem<EIconEvent> implements IAnimateFrame {
+    /** 图标id */
+    icon: AllNumbers = 0;
+    /** 帧数 */
+    frame: number = 0;
+    /** 是否启用动画 */
+    animate: boolean = false;
+    /** 图标的渲染信息 */
+    private renderable?: RenderableData | AutotileRenderable;
+
+    private pendingIcon?: AllNumbers;
+
+    constructor(type: RenderItemPosition, cache?: boolean, fall?: boolean) {
+        super(type, cache, fall);
+        this.setAntiAliasing(false);
+        this.setHD(false);
+    }
+
+    protected render(
+        canvas: MotaOffscreenCanvas2D,
+        _transform: Transform
+    ): void {
+        const ctx = canvas.ctx;
+        const renderable = this.renderable;
+        if (!renderable) return;
+        const [x, y, w, h] = renderable.render[0];
+        const cw = this.width;
+        const ch = this.height;
+        const frame = this.animate
+            ? RenderItem.animatedFrame % renderable.frame
+            : this.frame;
+
+        if (!this.animate) {
+            if (renderable.autotile) {
+                ctx.drawImage(renderable.image[0], x, y, w, h, 0, 0, cw, ch);
+            } else {
+                ctx.drawImage(renderable.image, x, y, w, h, 0, 0, cw, ch);
+            }
+        } else {
+            const [x1, y1, w1, h1] = renderable.render[frame];
+            if (renderable.autotile) {
+                const img = renderable.image[0];
+                ctx.drawImage(img, x1, y1, w1, h1, 0, 0, cw, ch);
+            } else {
+                ctx.drawImage(renderable.image, x1, y1, w1, h1, 0, 0, cw, ch);
+            }
+        }
+    }
+
+    /**
+     * 设置图标
+     * @param id 图标id
+     */
+    setIcon(id: AllIds | AllNumbers) {
+        if (id === 0) {
+            this.renderable = void 0;
+            return;
+        }
+        const num = typeof id === 'number' ? id : texture.idNumberMap[id];
+
+        const { loading } = Mota.require('@user/data-base');
+        if (loading.loaded) {
+            this.setIconRenderable(num);
+        } else {
+            if (isNil(this.pendingIcon)) {
+                loading.once('loaded', () => {
+                    this.setIconRenderable(this.pendingIcon ?? 0);
+                    delete this.pendingIcon;
+                });
+            }
+            this.pendingIcon = num;
+        }
+    }
+
+    private setIconRenderable(num: AllNumbers) {
+        const renderable = texture.getRenderable(num);
+
+        if (!renderable) {
+            logger.warn(43, num.toString());
+            return;
+        } else {
+            this.icon = num;
+            this.renderable = renderable;
+            this.frame = renderable.frame;
+        }
+        this.update();
+    }
+
+    /**
+     * 更新动画帧
+     */
+    updateFrameAnimate(): void {
+        if (this.animate) this.update(this);
+    }
+
+    destroy(): void {
+        renderEmits.removeFramer(this);
+        super.destroy();
+    }
+
+    protected handleProps(
+        key: string,
+        _prevValue: any,
+        nextValue: any
+    ): boolean {
+        switch (key) {
+            case 'icon':
+                this.setIcon(nextValue);
+                return true;
+            case 'animate':
+                if (!this.assertType(nextValue, 'boolean', key)) return false;
+                this.animate = nextValue;
+                if (nextValue) renderEmits.addFramer(this);
+                else renderEmits.removeFramer(this);
+                this.update();
+                return true;
+            case 'frame':
+                if (!this.assertType(nextValue, 'number', key)) return false;
+                this.frame = nextValue;
+                this.update();
+                return true;
+        }
+        return false;
+    }
+}
+
+interface WinskinPatterns {
+    top: CanvasPattern;
+    left: CanvasPattern;
+    bottom: CanvasPattern;
+    right: CanvasPattern;
+}
+
+export interface EWinskinEvent extends ERenderItemEvent {}
+
+export class Winskin extends RenderItem<EWinskinEvent> {
+    image: SizedCanvasImageSource;
+    /** 边框宽度，32表示原始宽度 */
+    borderSize: number = 32;
+    /** 图片名称 */
+    imageName?: string;
+
+    private pendingImage?: ImageIds;
+    private patternCache?: WinskinPatterns;
+    private patternTransform: DOMMatrix;
+
+    private static patternMap: Map<string, WinskinPatterns> = new Map();
+
+    constructor(
+        image: SizedCanvasImageSource,
+        type: RenderItemPosition = 'static'
+    ) {
+        super(type, false, false);
+        this.image = image;
+        this.setAntiAliasing(false);
+
+        if (window.DOMMatrix) {
+            this.patternTransform = new DOMMatrix();
+        } else if (window.WebKitCSSMatrix) {
+            this.patternTransform = new WebKitCSSMatrix();
+        } else {
+            this.patternTransform = new SVGMatrix();
+        }
+    }
+
+    private generatePattern() {
+        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;
+        ctx.drawImage(img, 144, 0, 32, 16, 0, 0, 32, 16);
+        const topPattern = ctx.createPattern(pattern.canvas, 'repeat');
+        ctx.clearRect(0, 0, 32, 16);
+        ctx.drawImage(img, 144, 48, 32, 16, 0, 0, 32, 16);
+        const bottomPattern = ctx.createPattern(pattern.canvas, 'repeat');
+        ctx.clearRect(0, 0, 32, 16);
+        pattern.size(16, 32);
+        ctx.drawImage(img, 128, 16, 16, 32, 0, 0, 16, 32);
+        const leftPattern = ctx.createPattern(pattern.canvas, 'repeat');
+        ctx.clearRect(0, 0, 16, 32);
+        ctx.drawImage(img, 176, 16, 16, 32, 0, 0, 16, 32);
+        const rightPattern = ctx.createPattern(pattern.canvas, 'repeat');
+        if (!topPattern || !bottomPattern || !leftPattern || !rightPattern) {
+            return null;
+        }
+        const winskinPattern: WinskinPatterns = {
+            top: topPattern,
+            bottom: bottomPattern,
+            left: leftPattern,
+            right: rightPattern
+        };
+        if (this.imageName) {
+            Winskin.patternMap.set(this.imageName, winskinPattern);
+        }
+        this.patternCache = winskinPattern;
+        this.deleteCanvas(pattern);
+        return winskinPattern;
+    }
+
+    private getPattern() {
+        if (!this.imageName) {
+            if (this.patternCache) return this.patternCache;
+            return this.generatePattern();
+        } else {
+            const pattern = Winskin.patternMap.get(this.imageName);
+            if (pattern) return pattern;
+            return this.generatePattern();
+        }
+    }
+
+    protected render(
+        canvas: MotaOffscreenCanvas2D,
+        _transform: Transform
+    ): void {
+        const ctx = canvas.ctx;
+        const img = this.image;
+        const w = this.width;
+        const h = this.height;
+        const pad = this.borderSize / 2;
+        // 背景
+        ctx.drawImage(img, 0, 0, 128, 128, 2, 2, w - 4, h - 4);
+        const pattern = this.getPattern();
+        if (!pattern) return;
+        const { top, left, right, bottom } = pattern;
+        top.setTransform(this.patternTransform);
+        left.setTransform(this.patternTransform);
+        right.setTransform(this.patternTransform);
+        bottom.setTransform(this.patternTransform);
+        // 上下左右边框
+        ctx.save();
+        ctx.fillStyle = top;
+        ctx.translate(pad, 0);
+        ctx.fillRect(0, 0, w - pad * 2, pad);
+        ctx.fillStyle = bottom;
+        ctx.translate(0, h - pad);
+        ctx.fillRect(0, 0, w - pad * 2, pad);
+        ctx.fillStyle = left;
+        ctx.translate(-pad, pad * 2 - h);
+        ctx.fillRect(0, 0, pad, h - pad * 2);
+        ctx.fillStyle = right;
+        ctx.translate(w - pad, 0);
+        ctx.fillRect(0, 0, pad, h - pad * 2);
+        ctx.restore();
+        // 四个角的边框
+        ctx.drawImage(img, 128, 0, 16, 16, 0, 0, pad, pad);
+        ctx.drawImage(img, 176, 0, 16, 16, w - pad, 0, pad, pad);
+        ctx.drawImage(img, 128, 48, 16, 16, 0, h - pad, pad, pad);
+        ctx.drawImage(img, 176, 48, 16, 16, w - pad, h - pad, pad, pad);
+    }
+
+    /**
+     * 设置winskin图片
+     * @param image winskin图片
+     */
+    setImage(image: SizedCanvasImageSource) {
+        this.image = image;
+        this.patternCache = void 0;
+        this.update();
+    }
+
+    /**
+     * 通过图片名称设置winskin
+     * @param name 图片名称
+     */
+    setImageByName(name: ImageIds) {
+        const { loading } = Mota.require('@user/data-base');
+        if (loading.loaded) {
+            const image = core.material.images.images[name];
+            this.setImage(image);
+        } else {
+            if (isNil(this.pendingImage)) {
+                loading.once('loaded', () => {
+                    const id = this.pendingImage;
+                    if (!id) return;
+                    const image = core.material.images.images[id];
+                    this.setImage(image);
+                    delete this.pendingImage;
+                });
+            }
+            this.pendingImage = name;
+        }
+        this.imageName = name;
+    }
+
+    /**
+     * 设置边框大小
+     * @param size 边框大小
+     */
+    setBorderSize(size: number) {
+        this.borderSize = size;
+        this.patternTransform.a = size / 32;
+        this.patternTransform.d = size / 32;
+        this.update();
+    }
+
+    protected handleProps(
+        key: string,
+        _prevValue: any,
+        nextValue: any
+    ): boolean {
+        switch (key) {
+            case 'image':
+                if (!this.assertType(nextValue, 'string', key)) return false;
+                this.setImageByName(nextValue);
+                return true;
+            case 'borderSize':
+                if (!this.assertType(nextValue, 'number', key)) return false;
+                this.setBorderSize(nextValue);
+                return true;
+        }
+        return false;
+    }
+}

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

@@ -0,0 +1,354 @@
+import { RenderAdapter } from '@motajs/render-core';
+import { HeroRenderer } from './hero';
+import { ILayerGroupRenderExtends, LayerGroup } from './layer';
+import { LayerGroupFloorBinder } from './layer';
+import { hyper, TimingFn } from 'mutate-animate';
+
+export class FloorViewport implements ILayerGroupRenderExtends {
+    id: string = 'viewport';
+
+    group!: LayerGroup;
+    hero?: HeroRenderer;
+    binder?: LayerGroupFloorBinder;
+
+    /** 是否启用视角控制拓展 */
+    enabled: boolean = true;
+    /** 是否自动限定视角范围至地图范围 */
+    boundX: boolean = true;
+    boundY: boolean = true;
+
+    /** 渐变的速率曲线 */
+    transitionFn: TimingFn = hyper('sin', 'out');
+    /** 瞬移的速率曲线 */
+    mutateFn: TimingFn = hyper('sin', 'out');
+
+    /** 突变时的渐变时长 */
+    transitionTime: number = 600;
+
+    /** 当前视角位置 */
+    private nx: number = 0;
+    private ny: number = 0;
+    /** 移动时的偏移位置 */
+    private ox: number = 0;
+    private oy: number = 0;
+    /** 移动时的偏移最大值 */
+    private maxOffset: number = 1;
+
+    /** 委托ticker */
+    private delegation: number = -1;
+    /** 渐变委托ticker */
+    private transition: number = -1;
+    /** 移动委托ticker */
+    private moving: number = -1;
+    /** 是否在渐变过程中 */
+    private inTransition: boolean = false;
+    /** 是否在移动过程中 */
+    private inMoving: boolean = false;
+
+    /** 移动的监听函数 */
+    private movingFramer?: () => void;
+
+    /**
+     * 禁用自动视角控制
+     */
+    disable() {
+        this.enabled = false;
+    }
+
+    /**
+     * 启用自动视角控制
+     */
+    enable() {
+        this.enabled = true;
+        const { x, y } = core.status.hero.loc;
+        const { x: nx, y: ny } = this.group.camera;
+        const halfWidth = core._PX_ / 2;
+        const halfHeight = core._PY_ / 2;
+        const cell = this.group.cellSize;
+        const half = cell / 2;
+        this.applyPosition(
+            -(nx - halfWidth + half) / this.group.cellSize,
+            -(ny - halfHeight + half) / this.group.cellSize
+        );
+        this.mutateTo(x, y);
+    }
+
+    /**
+     * 设置是否自动限定视角范围至地图范围
+     * @param boundX 是否自动限定水平视角范围
+     * @param boundY 是否自动限定竖直视角范围
+     */
+    setAutoBound(boundX: boolean = this.boundX, boundY: boolean = this.boundY) {
+        this.boundX = boundX;
+        this.boundY = boundY;
+        this.group.requestBeforeFrame(() => {
+            this.setPosition(this.nx, this.ny);
+        });
+    }
+
+    /**
+     * 传入视角的目标位置，将其限定在地图范围内后返回
+     * @param x 图格横坐标
+     * @param y 图格纵坐标
+     */
+    getBoundedPosition(x: number, y: number) {
+        if (!this.checkDependency()) return { x, y };
+        if (!this.boundX && !this.boundY) return { x, y };
+        const width = core._WIDTH_;
+        const height = core._HEIGHT_;
+        const minX = (width - 1) / 2;
+        const minY = (height - 1) / 2;
+        const floor = core.status.maps[this.binder!.getFloor()];
+        const maxX = floor.width - minX - 1;
+        const maxY = floor.height - minY - 1;
+
+        return {
+            x: this.boundX ? core.clamp(x, minX, maxX) : x,
+            y: this.boundY ? core.clamp(y, minY, maxY) : y
+        };
+    }
+
+    /**
+     * 设置视角位置
+     * @param x 目标图格横坐标
+     * @param y 目标图格纵坐标
+     */
+    setPosition(x: number, y: number) {
+        if (!this.enabled) return;
+        const { x: nx, y: ny } = this.getBoundedPosition(x, y);
+        this.group.removeTicker(this.transition, false);
+        this.applyPosition(nx, ny);
+    }
+
+    /**
+     * 开始移动
+     */
+    startMove() {
+        if (this.inMoving) return;
+        this.inMoving = true;
+        this.createMoveTransition();
+    }
+
+    /**
+     * 结束移动
+     */
+    endMove() {
+        this.inMoving = false;
+    }
+
+    /**
+     * 当勇士通过移动改变至指定位置时移动视角
+     * @param x 目标图格横坐标
+     * @param y 目标图格纵坐标
+     */
+    moveTo(x: number, y: number, time: number = 200) {
+        if (!this.enabled) return;
+        const { x: nx, y: ny } = this.getBoundedPosition(x, y);
+        if (this.inTransition) {
+            const distance = Math.hypot(this.nx - nx, this.ny - ny);
+            const t = core.clamp(distance * time, time, time * 3);
+            this.createTransition(nx, ny, t, this.transitionFn);
+        }
+    }
+
+    private createMoveTransition() {
+        if (!this.checkDependency()) return;
+        let xTarget: number = 0;
+        let yTarget: number = 0;
+        let xStart: number = this.ox;
+        let yStart: number = this.oy;
+        let xStartTime: number = Date.now();
+        let yStartTime: number = Date.now();
+        let ending: boolean = false;
+        // 这个数等于 sinh(2)，用这个数的话，可以正好在刚开始移动的时候达到1的斜率，效果会比较好
+        const transitionTime = this.hero!.speed * 3.626860407847019;
+
+        const setTargetX = (x: number, time: number) => {
+            if (x === xTarget) return;
+            xTarget = x;
+            xStartTime = time;
+            xStart = this.ox;
+        };
+        const setTargetY = (y: number, time: number) => {
+            if (y === yTarget) return;
+            yTarget = y;
+            yStart = this.oy;
+            yStartTime = time;
+        };
+
+        if (this.movingFramer) {
+            this.hero!.off('moveTick', this.movingFramer);
+        }
+        this.movingFramer = () => {
+            if (this.inTransition) return;
+            const now = Date.now();
+            if (!this.inMoving && !ending) {
+                setTargetX(0, now);
+                setTargetY(0, now);
+                ending = true;
+            }
+            if (!ending) {
+                const dir = this.hero!.stepDir;
+                const { x, y } = core.utils.scan2[dir];
+                setTargetX(-x * this.maxOffset, now);
+                setTargetY(-y * this.maxOffset, now);
+            }
+
+            if (!this.hero!.renderable) return;
+
+            const { x, y } = this.hero!.renderable;
+            const { x: nx, y: ny } = this.getBoundedPosition(x, y);
+            this.applyPosition(nx, ny);
+
+            if (ending) {
+                if (this.ox === xTarget && this.oy == yTarget) {
+                    this.hero!.off('moveTick', this.movingFramer);
+                    return;
+                }
+            }
+            // todo: 效果太差了，需要优化
+            return;
+            if (this.ox !== xTarget) {
+                const time = transitionTime * Math.abs(xStart - xTarget);
+                const progress = (now - xStartTime) / time;
+                if (progress > 1) {
+                    this.ox = xTarget;
+                } else {
+                    const p = this.transitionFn(progress);
+                    this.ox = (xTarget - xStart) * p + xStart;
+                }
+            }
+            if (this.oy !== yTarget) {
+                const time = transitionTime * Math.abs(yStart - yTarget);
+                const progress = (now - yStartTime) / time;
+                if (progress > 1) {
+                    this.oy = yTarget;
+                } else {
+                    const p = this.transitionFn(progress);
+                    this.oy = (yTarget - yStart) * p + yStart;
+                }
+            }
+        };
+        this.hero!.on('moveTick', this.movingFramer);
+    }
+
+    /**
+     * 当勇士位置突变至指定位置时移动视角
+     * @param x 目标图格横坐标
+     * @param y 目标图格纵坐标
+     */
+    mutateTo(x: number, y: number, time: number = this.transitionTime) {
+        if (!this.enabled) return;
+        const { x: nx, y: ny } = this.getBoundedPosition(x, y);
+        this.createTransition(nx, ny, time, this.mutateFn);
+    }
+
+    private createTransition(x: number, y: number, time: number, fn: TimingFn) {
+        const start = Date.now();
+        const end = start + time;
+        const sx = this.nx;
+        const sy = this.ny;
+        const dx = x - sx;
+        const dy = y - sy;
+
+        this.inTransition = true;
+        this.group.removeTicker(this.transition, false);
+        this.transition = this.group.delegateTicker(
+            () => {
+                const now = Date.now();
+                if (now >= end) {
+                    this.group.removeTicker(this.transition, true);
+                    return;
+                }
+                const progress = fn((now - start) / time);
+                const tx = dx * progress;
+                const ty = dy * progress;
+                this.applyPosition(tx + sx, ty + sy);
+            },
+            time,
+            () => {
+                this.applyPosition(x, y);
+                this.inTransition = false;
+            }
+        );
+    }
+
+    private applyPosition(x: number, y: number) {
+        if (!this.enabled) return;
+        if (x === this.nx && y === this.ny) return;
+        const halfWidth = core._PX_ / 2;
+        const halfHeight = core._PY_ / 2;
+        const cell = this.group.cellSize;
+        const half = cell / 2;
+        this.nx = x;
+        this.ny = y;
+        const { x: bx, y: by } = this.getBoundedPosition(x, y);
+        const rx = bx * cell - halfWidth + half;
+        const ry = by * cell - halfHeight + half;
+        core.bigmap.offsetX = rx;
+        core.bigmap.offsetY = ry;
+        this.group.camera.setTranslate(-rx, -ry);
+        this.group.update(this.group);
+    }
+
+    private checkDependency() {
+        if (this.hero && this.binder) return true;
+        const group = this.group;
+        const ex1 = group.getLayer('event')?.getExtends('floor-hero');
+        const ex2 = group.getExtends('floor-binder');
+        if (
+            ex1 instanceof HeroRenderer &&
+            ex2 instanceof LayerGroupFloorBinder
+        ) {
+            this.hero = ex1;
+            this.binder = ex2;
+            return true;
+        }
+        return false;
+    }
+
+    awake(group: LayerGroup): void {
+        this.group = group;
+        adapter.add(this);
+    }
+
+    onDestroy(group: LayerGroup): void {
+        group.removeTicker(this.delegation);
+        group.removeTicker(this.transition);
+        group.removeTicker(this.moving);
+        adapter.remove(this);
+    }
+}
+
+const adapter = new RenderAdapter<FloorViewport>('viewport');
+adapter.receive('mutateTo', (item, x, y, time) => {
+    item.mutateTo(x, y, time);
+    return Promise.resolve();
+});
+adapter.receive('moveTo', (item, x, y, time) => {
+    item.moveTo(x, y, time);
+    return Promise.resolve();
+});
+adapter.receive('setPosition', (item, x, y) => {
+    item.setPosition(x, y);
+    return Promise.resolve();
+});
+adapter.receiveSync('disable', item => {
+    item.disable();
+});
+adapter.receiveSync('enable', item => {
+    item.enable();
+});
+adapter.receiveSync('startMove', item => {
+    item.startMove();
+});
+adapter.receiveSync('endMove', item => {
+    item.endMove();
+});
+
+export function createViewport() {
+    const { hook } = Mota.require('@user/data-base');
+    hook.on('changingFloor', (_, loc) => {
+        adapter.all('setPosition', loc.x, loc.y);
+    });
+}

packages-user/client-modules/src/render/index.tsx

@@ -7,6 +7,7 @@ import { hook } from '@user/data-base';
 import { createItemDetail } from './itemDetail';
 import { createLoopMap } from './loopMap';
 import { createGameCanvas } from './legacy/gameCanvas';
+import { createElements } from './elements';
 
 export function createGameRenderer() {
     const main = new MotaRenderer();
@@ -41,8 +42,10 @@ export function createRender() {
     createGameCanvas();
     createItemDetail();
     createLoopMap();
+    createElements();
 }
 
 export * from './components';
 export * from './ui';
 export * from './use';
+export * from './elements';