Merge a5ecc45d9b into 820dc5bf4c

packages-user/client-base/src/material/asset.ts

@@ -1,9 +1,10 @@
 import { ITextureComposedData } from '@motajs/render-assets';
 import { IMaterialAsset } from './types';
+import { IDirtyMark } from '@motajs/common';
 
 export class MaterialAsset implements IMaterialAsset {
     /** 标记列表 */
-    private readonly marks: WeakMap<symbol, number> = new WeakMap();
+    private readonly marks: WeakMap<IDirtyMark, number> = new WeakMap();
     /** 脏标记，所有值小于此标记的都视为需要更新 */
     private dirtyFlag: number = 0;
 
@@ -13,22 +14,22 @@ export class MaterialAsset implements IMaterialAsset {
         this.dirtyFlag++;
     }
 
-    mark(): symbol {
-        const symbol = Symbol();
+    mark(): IDirtyMark {
+        const symbol = {};
         this.marks.set(symbol, this.dirtyFlag);
         return symbol;
     }
 
-    unmark(mark: symbol): void {
+    unmark(mark: IDirtyMark): void {
         this.marks.delete(mark);
     }
 
-    dirtySince(mark: symbol): boolean {
+    dirtySince(mark: IDirtyMark): boolean {
         const value = this.marks.get(mark) ?? -1;
         return value < this.dirtyFlag;
     }
 
-    hasMark(symbol: symbol): boolean {
+    hasMark(symbol: IDirtyMark): boolean {
         return this.marks.has(symbol);
     }
 }

packages-user/client-base/src/material/autotile.ts

@@ -71,21 +71,21 @@ export class AutotileProcessor implements IAutotileProcessor {
         // 如果地图高度只有 1
         if (length === width) {
             if (index === 0) {
-                return 0b1100_0111;
+                return 0b1110_1111;
             } else if (index === length - 1) {
-                return 0b0111_1100;
+                return 0b1111_1110;
             } else {
-                return 0b0100_0100;
+                return 0b1110_1110;
             }
         }
         // 如果地图宽度只有 1
         if (width === 1) {
             if (index === 0) {
-                return 0b1111_0001;
+                return 0b1111_1011;
             } else if (index === length - 1) {
-                return 0b0001_1111;
+                return 0b1011_1111;
             } else {
-                return 0b0001_0001;
+                return 0b1011_1011;
             }
         }
 
@@ -96,23 +96,23 @@ export class AutotileProcessor implements IAutotileProcessor {
 
         // 四个角，左上，右上，右下，左下
         if (index === 0) {
-            return 0b1100_0001;
+            return 0b1110_0011;
         } else if (index === width - 1) {
-            return 0b0111_0000;
+            return 0b1111_1000;
         } else if (index === length - 1) {
-            return 0b0001_1100;
+            return 0b0011_1110;
         } else if (index === lastLine) {
-            return 0b0000_0111;
+            return 0b1000_1111;
         }
         // 四条边，上，右，下，左
         else if (index < width) {
-            return 0b0100_0000;
+            return 0b1110_0000;
         } else if (x === width - 1) {
-            return 0b0001_0000;
+            return 0b0011_1000;
         } else if (index > lastLine) {
-            return 0b0000_0100;
+            return 0b0000_1110;
         } else if (x === 0) {
-            return 0b0000_0001;
+            return 0b1000_0011;
         }
         // 不在边缘
         else {
@@ -222,12 +222,13 @@ export class AutotileProcessor implements IAutotileProcessor {
         connection: number
     ): ITextureRenderable | null {
         const { texture } = tile;
-        const size = texture.height === 128 ? 32 : 48;
+        const size = texture.height === 32 * 48 ? 32 : 48;
         const index = distinctConnectionMap.get(connection);
         if (isNil(index)) return null;
+        const { rect } = texture.render();
         return {
             source: texture.source,
-            rect: { x: 0, y: size * index, w: size, h: size }
+            rect: { x: rect.x, y: rect.y + size * index, w: size, h: size }
         };
     }
 

packages-user/client-base/src/material/builder.ts

@@ -3,10 +3,11 @@ import {
     ITexture,
     ITextureComposedData,
     ITextureStreamComposer,
-    TextureMaxRectsStreamComposer
+    TextureMaxRectsStreamComposer,
+    SizedCanvasImageSource
 } from '@motajs/render-assets';
-import { IAssetBuilder } from './types';
-import { logger } from '@motajs/common';
+import { IAssetBuilder, IMaterialGetter, ITrackedAssetData } from './types';
+import { logger, PrivateListDirtyTracker } from '@motajs/common';
 
 export class AssetBuilder implements IAssetBuilder {
     readonly composer: ITextureStreamComposer<void> =
@@ -15,6 +16,18 @@ export class AssetBuilder implements IAssetBuilder {
     private output: ITextureStore | null = null;
     private started: boolean = false;
 
+    private readonly trackedData: TrackedAssetData;
+
+    /** 当前的索引 */
+    private index: number = -1;
+
+    /** 贴图更新的 promise */
+    private pending: Promise<void> = Promise.resolve();
+
+    constructor(readonly materials: IMaterialGetter) {
+        this.trackedData = new TrackedAssetData(materials, this);
+    }
+
     pipe(store: ITextureStore): void {
         if (this.started) {
             logger.warn(76);
@@ -29,29 +42,103 @@ export class AssetBuilder implements IAssetBuilder {
         const data = res[0];
 
         if (this.output) {
-            if (!this.output.getTexture(data.index)) {
+            if (data.index > this.index) {
                 this.output.addTexture(data.index, data.texture);
+                this.index = data.index;
             }
         }
+
+        this.pending = this.pending.then(() =>
+            this.trackedData.updateSource(data.index, data.texture.source)
+        );
+
         return data;
     }
 
+    private async updateSourceList(source: Set<ITextureComposedData>) {
+        for (const data of source) {
+            await this.trackedData.updateSource(
+                data.index,
+                data.texture.source
+            );
+        }
+    }
+
     addTextureList(
         texture: Iterable<ITexture>
     ): Iterable<ITextureComposedData> {
         this.started = true;
         const res = [...this.composer.add(texture)];
+        const toUpdate = new Set<ITextureComposedData>();
         if (this.output) {
-            res.forEach(v => {
-                if (!this.output!.getTexture(v.index)) {
-                    this.output!.addTexture(v.index, v.texture);
+            res.forEach(data => {
+                if (data.index > this.index) {
+                    this.output!.addTexture(data.index, data.texture);
+                    this.index = data.index;
+                    toUpdate.add(data);
+                } else {
+                    toUpdate.add(data);
                 }
             });
         }
+
+        this.pending = this.pending.then(() => this.updateSourceList(toUpdate));
+
         return res;
     }
 
+    tracked(): ITrackedAssetData {
+        return this.trackedData;
+    }
+
     close(): void {
         this.composer.close();
     }
 }
+
+class TrackedAssetData
+    extends PrivateListDirtyTracker<number>
+    implements ITrackedAssetData
+{
+    readonly sourceList: Map<number, ImageBitmap> = new Map();
+    readonly skipRef: Map<SizedCanvasImageSource, number> = new Map();
+
+    private originSourceMap: Map<number, SizedCanvasImageSource> = new Map();
+
+    constructor(
+        readonly materials: IMaterialGetter,
+        readonly builder: AssetBuilder
+    ) {
+        super(0);
+    }
+
+    markDirty(index: number) {
+        this.dirty(index);
+    }
+
+    async updateSource(index: number, source: SizedCanvasImageSource) {
+        const origin = this.originSourceMap.get(index);
+        const prev = this.sourceList.get(index);
+        if (origin) {
+            this.skipRef.delete(origin);
+        }
+        if (prev) {
+            this.skipRef.delete(prev);
+        }
+        if (source instanceof ImageBitmap) {
+            if (this.skipRef.has(source)) return;
+            this.sourceList.set(index, source);
+            this.skipRef.set(source, index);
+        } else {
+            const bitmap = await createImageBitmap(source);
+            this.sourceList.set(index, bitmap);
+            this.skipRef.set(bitmap, index);
+            // 要把源也加到映射中，因为这里的 bitmap 与外部源并不同引用
+            this.skipRef.set(source, index);
+            this.originSourceMap.set(index, source);
+        }
+        this.dirty(index);
+    }
+
+    close(): void {}
+}

packages-user/client-base/src/material/fallback.ts

@@ -36,7 +36,7 @@ function addAutotile(set: Set<number>, map?: readonly (readonly number[])[]) {
     map.forEach(line => {
         line.forEach(v => {
             const id = core.maps.blocksInfo[v as keyof NumberToId];
-            if (id.cls === 'autotile') set.add(v);
+            if (id?.cls === 'autotile') set.add(v);
         });
     });
 }
@@ -118,7 +118,8 @@ export function fallbackLoad() {
         addAutotile(autotileSet, floor.fg2map);
     });
 
-    materials.cacheTilesetList(tilesetSet.union(autotileSet));
-
     materials.buildAssets();
+
+    materials.cacheAutotileList(autotileSet);
+    materials.cacheTilesetList(tilesetSet);
 }

packages-user/client-base/src/material/manager.ts

@@ -19,16 +19,22 @@ import {
     BlockCls,
     IBigImageReturn,
     IAssetBuilder,
-    IMaterialAsset,
-    IMaterialFramedData
+    IMaterialFramedData,
+    ITrackedAssetData
 } from './types';
 import { logger } from '@motajs/common';
 import { getClsByString, getTextureFrame } from './utils';
 import { isNil } from 'lodash-es';
 import { AssetBuilder } from './builder';
-import { MaterialAsset } from './asset';
 import { AutotileProcessor } from './autotile';
 
+interface TilesetCache {
+    /** 是否已经在贴图库中存在 */
+    readonly existed: boolean;
+    /** 贴图对象 */
+    readonly texture: ITexture;
+}
+
 export class MaterialManager implements IMaterialManager {
     readonly tileStore: ITextureStore = new TextureStore();
     readonly tilesetStore: ITextureStore = new TextureStore();
@@ -40,16 +46,18 @@ export class MaterialManager implements IMaterialManager {
     readonly autotileSource: Map<number, SizedCanvasImageSource> = new Map();
 
     /** 图集信息存储 */
-    readonly assetDataStore: Map<number, IMaterialAsset> = new Map();
+    readonly assetDataStore: Map<number, ITextureComposedData> = new Map();
     /** 贴图到图集索引的映射 */
     readonly assetMap: Map<ITexture, number> = new Map();
+    /** 带有脏标记追踪的图集对象 */
+    readonly trackedAsset: ITrackedAssetData;
 
     /** 大怪物数据 */
     readonly bigImageData: Map<number, IMaterialFramedData> = new Map();
     /** tileset 中 `Math.floor(id / 10000) + 1` 映射到 tileset 对应索引的映射，用于处理图块超出 10000 的 tileset */
     readonly tilesetOffsetMap: Map<number, number> = new Map();
     /** 图集打包器 */
-    readonly assetBuilder: IAssetBuilder = new AssetBuilder();
+    readonly assetBuilder: IAssetBuilder;
 
     /** 图块 id 到图块数字的映射 */
     readonly idNumMap: Map<string, number> = new Map();
@@ -73,7 +81,9 @@ export class MaterialManager implements IMaterialManager {
     private built: boolean = false;
 
     constructor() {
+        this.assetBuilder = new AssetBuilder(this);
         this.assetBuilder.pipe(this.assetStore);
+        this.trackedAsset = this.assetBuilder.tracked();
     }
 
     /**
@@ -268,9 +278,9 @@ export class MaterialManager implements IMaterialManager {
         return this.imageStore.fromAlias(alias);
     }
 
-    private getTilesetOwnTexture(identifier: number) {
+    private getTilesetOwnTexture(identifier: number): TilesetCache | null {
         const texture = this.tileStore.getTexture(identifier);
-        if (texture) return texture;
+        if (texture) return { existed: true, texture };
         // 如果 tileset 不存在，那么执行缓存操作
         const offset = Math.floor(identifier / 10000);
         const index = this.tilesetOffsetMap.get(offset - 1);
@@ -290,7 +300,7 @@ export class MaterialManager implements IMaterialManager {
         const y = Math.floor(rest / tileWidth);
         const newTexture = new Texture(tileset.source);
         newTexture.clip(x * 32, y * 32, 32, 32);
-        return newTexture;
+        return { existed: false, texture: newTexture };
     }
 
     /**
@@ -298,17 +308,13 @@ export class MaterialManager implements IMaterialManager {
      * @param data 图集数据
      */
     private checkAssetDirty(data: ITextureComposedData) {
+        if (!this.built) return;
         const asset = this.assetDataStore.get(data.index);
-        if (asset) {
-            // 如果不是新图集，需要标记为脏
-            asset.dirty();
-        } else {
+        if (!asset) {
             // 如果有新图集，需要添加
             const alias = `asset-${data.index}`;
-            const newAsset = new MaterialAsset(data);
-            newAsset.dirty();
             this.assetStore.alias(data.index, alias);
-            this.assetDataStore.set(data.index, newAsset);
+            this.assetDataStore.set(data.index, data);
         }
     }
 
@@ -335,14 +341,16 @@ export class MaterialManager implements IMaterialManager {
     cacheTileset(identifier: number): ITexture | null {
         const newTexture = this.getTilesetOwnTexture(identifier);
         if (!newTexture) return null;
+        const { existed, texture } = newTexture;
+        if (existed) return texture;
         // 缓存贴图
-        this.tileStore.addTexture(identifier, newTexture);
+        this.tileStore.addTexture(identifier, texture);
         this.idNumMap.set(`X${identifier}`, identifier);
         this.numIdMap.set(identifier, `X${identifier}`);
-        const data = this.assetBuilder.addTexture(newTexture);
-        newTexture.toAsset(data);
+        const data = this.assetBuilder.addTexture(texture);
+        texture.toAsset(data);
         this.checkAssetDirty(data);
-        return newTexture;
+        return texture;
     }
 
     cacheTilesetList(
@@ -354,8 +362,10 @@ export class MaterialManager implements IMaterialManager {
         arr.forEach(v => {
             const newTexture = this.getTilesetOwnTexture(v);
             if (!newTexture) return;
-            toAdd.push(newTexture);
-            this.tileStore.addTexture(v, newTexture);
+            const { existed, texture } = newTexture;
+            if (existed) return;
+            toAdd.push(texture);
+            this.tileStore.addTexture(v, texture);
             this.idNumMap.set(`X${v}`, v);
             this.numIdMap.set(v, `X${v}`);
         });
@@ -429,7 +439,7 @@ export class MaterialManager implements IMaterialManager {
         arr.forEach(v => {
             const alias = `asset-${v.index}`;
             this.assetStore.alias(v.index, alias);
-            this.assetDataStore.set(v.index, new MaterialAsset(v));
+            this.assetDataStore.set(v.index, v);
             const data: IMaterialAssetData = {
                 data: v,
                 identifier: v.index,
@@ -444,11 +454,11 @@ export class MaterialManager implements IMaterialManager {
         return res;
     }
 
-    getAsset(identifier: number): IMaterialAsset | null {
+    getAsset(identifier: number): ITextureComposedData | null {
         return this.assetDataStore.get(identifier) ?? null;
     }
 
-    getAssetByAlias(alias: string): IMaterialAsset | null {
+    getAssetByAlias(alias: string): ITextureComposedData | null {
         const id = this.assetStore.identifierOf(alias);
         if (isNil(id)) return null;
         return this.assetDataStore.get(id) ?? null;

packages-user/client-base/src/material/types.ts

@@ -234,7 +234,7 @@ export interface IMaterialGetter {
      * 根据标识符获取图集信息
      * @param identifier 图集的标识符
      */
-    getAsset(identifier: number): IMaterialAsset | null;
+    getAsset(identifier: number): ITextureComposedData | null;
 
     /**
      * 根据额外素材索引获取额外素材
@@ -272,7 +272,7 @@ export interface IMaterialAliasGetter {
      * 根据别名获取图集信息
      * @param alias 图集的别名
      */
-    getAssetByAlias(alias: string): IMaterialAsset | null;
+    getAssetByAlias(alias: string): ITextureComposedData | null;
 
     /**
      * 根据图块别名获取图块类型
@@ -302,7 +302,9 @@ export interface IMaterialManager
     readonly bigImageStore: ITextureStore;
 
     /** 图集信息存储 */
-    readonly assetDataStore: Iterable<[number, IMaterialAsset]>;
+    readonly assetDataStore: Iterable<[number, ITextureComposedData]>;
+    /** 带有脏标记追踪的图集信息 */
+    readonly trackedAsset: ITrackedAssetData;
 
     /** 图块类型映射 */
     readonly clsMap: Map<number, BlockCls>;
@@ -465,8 +467,30 @@ export interface IAssetBuilder {
      */
     addTextureList(texture: Iterable<ITexture>): Iterable<ITextureComposedData>;
 
+    /**
+     * 获取可追踪贴图对象
+     */
+    tracked(): ITrackedAssetData;
+
     /**
      * 结束此打包器
      */
     close(): void;
 }
+
+export interface ITrackedAssetData extends IDirtyTracker<Set<number>> {
+    /** 图像源列表 */
+    readonly sourceList: Map<number, ImageBitmap>;
+    /**
+     * 贴图引用跳接，`ImageBitmap` 的传递性能远好于其他类型，而贴图图集为了能够动态增加内容会使用画布类型，
+     * 因此需要把贴图生成为额外的 `ImageBitmap`，并提供引用跳接映射。值代表在 `sourceList` 中的索引。
+     */
+    readonly skipRef: Map<SizedCanvasImageSource, number>;
+    /** 贴图数据 */
+    readonly materials: IMaterialGetter;
+
+    /**
+     * 取消使用此图集，释放相关资源
+     */
+    close(): void;
+}

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

@@ -8,6 +8,7 @@ import { Animate } from './animate';
 import { createItemDetail } from './itemDetail';
 import { logger } from '@motajs/common';
 import { MapRender } from '../map/element';
+import { state } from '@user/data-state';
 
 export function createElements() {
     createCache();
@@ -71,14 +72,14 @@ export function createElements() {
     tagMap.register('map-render', (_0, _1, props) => {
         if (!props) {
             logger.error(42);
-            return new MapRender([]);
+            return new MapRender(state.layer);
         }
-        const { layerList } = props;
-        if (!layerList) {
+        const { layerState } = props;
+        if (!layerState) {
             logger.error(42);
-            return new MapRender([]);
+            return new MapRender(state.layer);
         }
-        return new MapRender(layerList);
+        return new MapRender(layerState);
     });
 }
 

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

@@ -1,5 +1,5 @@
 import { BaseProps, TagDefine } from '@motajs/render-vue';
-import { Transform } from '@motajs/render-core';
+import { ERenderItemEvent, Transform } from '@motajs/render-core';
 import { CanvasStyle } from '@motajs/render-assets';
 import {
     ILayerGroupRenderExtends,
@@ -11,7 +11,7 @@ import {
 import { EAnimateEvent } from './animate';
 import { EIconEvent, EWinskinEvent } from './misc';
 import { IEnemyCollection } from '@motajs/types';
-import { IRenderLayerData } from '../map/element';
+import { ILayerState } from '@user/data-state';
 
 export interface AnimateProps extends BaseProps {}
 
@@ -62,7 +62,7 @@ export interface LayerProps extends BaseProps {
 }
 
 export interface MapRenderProps extends BaseProps {
-    layerList: IRenderLayerData;
+    layerState: ILayerState;
 }
 
 declare module 'vue/jsx-runtime' {
@@ -73,6 +73,7 @@ declare module 'vue/jsx-runtime' {
             animation: TagDefine<AnimateProps, EAnimateEvent>;
             icon: TagDefine<IconProps, EIconEvent>;
             winskin: TagDefine<WinskinProps, EWinskinEvent>;
+            'map-render': TagDefine<MapRenderProps, ERenderItemEvent>;
         }
     }
 }

packages-user/client-modules/src/render/map/asset.ts

@@ -1,31 +0,0 @@
-import { SizedCanvasImageSource } from '@motajs/render-assets';
-import {
-    IMaterialGetter,
-    IMaterialManager,
-    materials
-} from '@user/client-base';
-import { IMapAssetData, IMapAssetManager } from './types';
-import { PrivateListDirtyTracker } from '@motajs/common';
-
-export class MapAssetManager implements IMapAssetManager {
-    materials: IMaterialManager = materials;
-
-    generateAsset(): IMapAssetData {
-        const data = new MapAssetData();
-
-        return data;
-    }
-}
-
-class MapAssetData
-    extends PrivateListDirtyTracker<number>
-    implements IMapAssetData
-{
-    sourceList: ImageBitmap[] = [];
-    skipRef: Map<SizedCanvasImageSource, number> = new Map();
-    materials: IMaterialGetter = materials;
-
-    constructor() {
-        super(0);
-    }
-}

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

@@ -12,8 +12,8 @@ export class BlockSplitter<T> implements IBlockSplitter<T> {
     blockHeight: number = 0;
     dataWidth: number = 0;
     dataHeight: number = 0;
-    width: number = 0;
-    height: number = 0;
+    width: number = 1;
+    height: number = 1;
 
     /** 分块映射 */
     readonly blockMap: Map<number, IBlockData<T>> = new Map();
@@ -33,7 +33,7 @@ export class BlockSplitter<T> implements IBlockSplitter<T> {
      * @param y 分块纵坐标
      */
     private checkLocRange(x: number, y: number) {
-        return x > 0 && y > 0 && x < this.width && y < this.height;
+        return x >= 0 && y >= 0 && x < this.width && y < this.height;
     }
 
     getBlockByLoc(x: number, y: number): IBlockData<T> | null {
@@ -221,10 +221,10 @@ export class BlockSplitter<T> implements IBlockSplitter<T> {
     }
 
     configSplitter(config: IBlockSplitterConfig): void {
+        this.splitDataWidth = config.dataWidth;
+        this.splitDataHeight = config.dataHeight;
         this.splitBlockWidth = config.blockWidth;
         this.splitBlockHeight = config.blockHeight;
-        this.splitDataWidth = config.dataWidth;
-        this.splitBlockHeight = config.dataHeight;
     }
 
     private mapBlock(
@@ -252,6 +252,10 @@ export class BlockSplitter<T> implements IBlockSplitter<T> {
 
     splitBlocks(mapFn: (block: IBlockInfo) => T): void {
         this.blockMap.clear();
+        this.blockWidth = this.splitBlockWidth;
+        this.blockHeight = this.splitBlockHeight;
+        this.dataWidth = this.splitDataWidth;
+        this.dataHeight = this.splitDataHeight;
         const restX = this.splitDataWidth % this.splitBlockWidth;
         const restY = this.splitDataHeight % this.splitBlockHeight;
         const width = Math.floor(this.splitDataWidth / this.splitBlockWidth);

packages-user/client-modules/src/render/map/constant.ts

@@ -0,0 +1,2 @@
+/** 单个图块的实例化数据数量 */
+export const INSTANCED_COUNT = 4 + 4 + 4 + 4;

packages-user/client-modules/src/render/map/element.ts

@@ -3,20 +3,13 @@ import {
     RenderItem,
     Transform
 } from '@motajs/render-core';
-import { IMapLayer } from '@user/data-state';
-import { IMapRenderer } from './types';
+import { ILayerState, state } from '@user/data-state';
+import { IMapRenderer, IMapRendererHooks } from './types';
 import { MapRenderer } from './renderer';
 import { materials } from '@user/client-base';
 import { ElementNamespace, ComponentInternalInstance } from 'vue';
-
-export interface IRenderLayerData {
-    /** 图层对象 */
-    readonly layer: IMapLayer;
-    /** 图层纵深 */
-    readonly zIndex: number;
-    /** 图层别名 */
-    readonly alias?: string;
-}
+import { CELL_HEIGHT, CELL_WIDTH, MAP_HEIGHT, MAP_WIDTH } from '../shared';
+import { IHookController } from '@motajs/common';
 
 export class MapRender extends RenderItem {
     /** 地图渲染器 */
@@ -29,32 +22,31 @@ export class MapRender extends RenderItem {
     /** 画布上下文 */
     readonly gl: WebGL2RenderingContext;
 
-    constructor(layerList: Iterable<IRenderLayerData>) {
+    private rendererHook: IHookController<IMapRendererHooks>;
+
+    constructor(readonly layerState: ILayerState) {
         super('static');
 
         this.canvas = document.createElement('canvas');
         const gl = this.canvas.getContext('webgl2')!;
         this.gl = gl;
 
-        this.renderer = new MapRenderer(materials, this.gl, this.camera);
-        for (const layer of layerList) {
-            this.renderer.addLayer(layer.layer, layer.alias);
-            this.renderer.setZIndex(layer.layer, layer.zIndex);
-        }
-    }
+        this.renderer = new MapRenderer(
+            materials,
+            this.gl,
+            this.camera,
+            state.layer
+        );
+        this.renderer.setLayerState(layerState);
+        this.renderer.useAsset(materials.trackedAsset);
+        this.rendererHook = this.renderer.addHook(new RendererUpdateHook(this));
+        this.rendererHook.load();
+        this.renderer.setCellSize(CELL_WIDTH, CELL_HEIGHT);
+        this.renderer.setRenderSize(MAP_WIDTH, MAP_HEIGHT);
 
-    /**
-     * 更新图层列表
-     * @param layerList 图层列表
-     */
-    updateLayerList(layerList: Iterable<IRenderLayerData>) {
-        this.renderer
-            .getSortedLayer()
-            .forEach(v => this.renderer.removeLayer(v));
-        for (const layer of layerList) {
-            this.renderer.addLayer(layer.layer, layer.alias);
-            this.renderer.setZIndex(layer.layer, layer.zIndex);
-        }
+        this.delegateTicker(time => this.renderer.tick(time));
+
+        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
     }
 
     private sizeGL(width: number, height: number) {
@@ -86,13 +78,7 @@ export class MapRender extends RenderItem {
         console.time('map-element-render');
         this.renderer.render(this.gl);
 
-        canvas.ctx.drawImage(
-            this.canvas,
-            0,
-            0,
-            this.canvas.width,
-            this.canvas.height
-        );
+        canvas.ctx.drawImage(this.canvas, 0, 0, canvas.width, canvas.height);
         console.timeEnd('map-element-render');
     }
 
@@ -104,11 +90,19 @@ export class MapRender extends RenderItem {
         parentComponent?: ComponentInternalInstance | null
     ): void {
         switch (key) {
-            case 'layerList': {
-                this.updateLayerList(nextValue);
+            case 'layerState': {
+                this.renderer.setLayerState(nextValue);
                 break;
             }
         }
         super.patchProp(key, prevValue, nextValue, namespace, parentComponent);
     }
 }
+
+class RendererUpdateHook implements Partial<IMapRendererHooks> {
+    constructor(readonly element: MapRender) {}
+
+    onUpdate(): void {
+        this.element.update();
+    }
+}

packages-user/client-modules/src/render/map/shader/back.frag

@@ -1,5 +1,6 @@
 #version 300 es
 precision highp float;
+precision highp sampler2DArray;
 
 in vec3 v_texCoord;
 out vec4 outColor;

packages-user/client-modules/src/render/map/shader/back.vert

@@ -1,8 +1,8 @@
 #version 300 es
 precision highp float;
 
-in vec2 a_position;
-in vec2 a_texCoord;
+layout(location = 0) in vec2 a_position;
+layout(location = 1) in vec2 a_texCoord;
 
 out vec3 v_texCoord;
 
@@ -10,9 +10,7 @@ uniform float u_nowFrame;
 uniform mat3 u_transform;
 
 void main() {
-    // 背景图永远是全图都画，因此变换矩阵应该作用于纹理坐标
-    vec3 texCoord = vec3(a_texCoord, 1.0);
-    vec3 transformed = u_transform * texCoord;
-    v_texCoord = vec3(transformed.xy, u_nowFrame);
-    gl_Position = vec4(a_position, 0.0, 1.0);
+    vec3 transformed = u_transform * vec3(a_position, 1.0);
+    v_texCoord = vec3(a_texCoord, u_nowFrame);
+    gl_Position = vec4(transformed.xy, 0.95, 1.0);
 }

packages-user/client-modules/src/render/map/shader/map.frag

@@ -1,6 +1,6 @@
 #version 300 es
 precision highp float;
-precision mediump uint;
+precision highp sampler2DArray;
 
 in vec4 v_texCoord;
 
@@ -11,4 +11,5 @@ uniform sampler2DArray u_sampler;
 void main() {
     vec4 texColor = texture(u_sampler, v_texCoord.xyz);
     outColor = vec4(texColor.rgb, texColor.a * v_texCoord.a);
+    // outColor = vec4(texColor.a * 0.001, v_texCoord.x * 6.0, v_texCoord.y * 0.0, v_texCoord.a);
 }

packages-user/client-modules/src/render/map/shader/map.vert

@@ -1,26 +1,36 @@
 #version 300 es
 precision highp float;
-precision mediump uint;
+precision mediump int;
 
-in vec3 a_position;
-in vec3 a_texCoord;
-// x: 最大帧数，y: 偏移池索引，实例化绘制传入
-in ivec2 a_offsetData;
-// 不透明度，用于前景层虚化
-in float a_alpha;
+// 顶点坐标
+layout(location = 0) in vec4 a_position;
+// 实例化数据
+// 图块坐标
+layout(location = 1) in vec4 a_tilePos;
+// 贴图坐标
+layout(location = 2) in vec4 a_texCoord;
+// x: 纵深，y: 不透明度
+layout(location = 3) in vec4 a_tileData;
+// x: 当前帧数，负数表示使用 u_nowFrame，y: 最大帧数，z: 偏移池索引，w: 纹理数组索引
+layout(location = 4) in vec4 a_texData;
 
 // x,y,z: 纹理坐标，w: 不透明度
 out vec4 v_texCoord;
 
-uniform vec2 u_offsetPool[$1];
-uniform uint u_nowFrame;
+uniform float u_offsetPool[$1];
+uniform float u_nowFrame;
 uniform mat3 u_transform;
 
 void main() {
+    // 坐标
+    vec2 pos = a_position.xy * a_tilePos.zw + a_tilePos.xy;
+    vec2 texCoord = a_position.zw * a_texCoord.zw + a_texCoord.xy;
     // 偏移量
-    uint offset = mod(u_nowFrame, a_offsetData.x);
-    float fOffset = float(offset);
-    // 贴图坐标
-    v_texCoord = vec4(a_texCoord.xy + u_offsetPool[a_offsetData.y] * fOffset, a_texCoord.z, a_alpha);
-    gl_Position = vec4(u_transform * a_position, 1.0);
+    float offset = a_texData.x < 0.0 ? mod(u_nowFrame, a_texData.y) : a_texData.x;
+    int offsetIndex = int(a_texData.z);
+    // 贴图偏移
+    texCoord.x += u_offsetPool[offsetIndex] * offset;
+    v_texCoord = vec4(texCoord.xy, a_texData.w, a_tileData.y);
+    vec3 transformed = u_transform * vec3(pos.xy, 1.0);
+    gl_Position = vec4(transformed.xy, a_tileData.x, 1.0);
 }

packages-user/client-modules/src/render/map/types.ts

@@ -1,16 +1,19 @@
-import { IDirtyTracker } from '@motajs/common';
 import {
-    ITextureRenderable,
-    SizedCanvasImageSource
-} from '@motajs/render-assets';
+    IDirtyMark,
+    IDirtyTracker,
+    IHookable,
+    IHookBase,
+    IHookController
+} from '@motajs/common';
+import { ITextureRenderable } from '@motajs/render-assets';
 import { Transform } from '@motajs/render-core';
 import {
     IAutotileProcessor,
     IMaterialFramedData,
-    IMaterialGetter,
-    IMaterialManager
+    IMaterialManager,
+    ITrackedAssetData
 } from '@user/client-base';
-import { IMapLayer } from '@user/data-state';
+import { ILayerState, IMapLayer } from '@user/data-state';
 import { TimingFn } from 'mutate-animate';
 
 export const enum MapBackgroundRepeat {
@@ -45,18 +48,6 @@ export const enum MapTileAlign {
     End
 }
 
-export interface IMapAssetData extends IDirtyTracker<Set<number>> {
-    /** 图像源列表 */
-    readonly sourceList: ImageBitmap[];
-    /**
-     * 贴图引用跳接，`ImageBitmap` 的传递性能远好于其他类型，而贴图图集为了能够动态增加内容会使用画布类型，
-     * 因此需要把贴图生成为额外的 `ImageBitmap`，并提供引用跳接映射。值代表在 `sourceList` 中的索引。
-     */
-    readonly skipRef: Map<SizedCanvasImageSource, number>;
-    /** 贴图数据 */
-    readonly materials: IMaterialGetter;
-}
-
 export interface IMapBackgroundConfig {
     /** 是否使用图片大小作为背景图渲染大小，如果是 `false`，则使用 `renderWidth` `renderHeight` 作为渲染大小 */
     readonly useImageSize: boolean;
@@ -87,16 +78,6 @@ export interface IMapRenderConfig {
     readonly frameSpeed: number;
 }
 
-export interface IMapAssetManager {
-    /** 素材管理对象 */
-    readonly materials: IMaterialManager;
-
-    /**
-     * 生成地图渲染图集数据
-     */
-    generateAsset(): IMapAssetData;
-}
-
 export interface IContextData {
     /** 图块程序 */
     readonly tileProgram: WebGLProgram;
@@ -126,22 +107,22 @@ export interface IContextData {
     readonly backNowFrameLocation: WebGLUniformLocation;
     /** 顶点数组输入 */
     readonly vertexAttribLocation: number;
-    /** 纹理坐标输入输入 */
-    readonly texCoordAttribLocation: number;
-    /** 偏移数组输入 */
-    readonly offsetAttribLocation: number;
-    /** 不透明度数组输入 */
-    readonly alphaAttribLocation: number;
+    /** 图块坐标输入 */
+    readonly insTilePosAttribLocation: number;
+    /** 图块纹理坐标输入 */
+    readonly insTexCoordAttribLocation: number;
+    /** 图块数据输入 */
+    readonly insTileDataAttribLocation: number;
+    /** 图块当前帧数输入 */
+    readonly insTexDataAttribLocation: number;
     /** 背景顶点数组输入 */
     readonly backVertexAttribLocation: number;
     /** 背景纹理数组输入 */
     readonly backTexCoordAttribLocation: number;
     /** 顶点数组 */
     readonly vertexBuffer: WebGLBuffer;
-    /** 偏移数组 */
-    readonly offsetBuffer: WebGLBuffer;
-    /** 不透明度数组 */
-    readonly alphaBuffer: WebGLBuffer;
+    /** 实例化数据数组 */
+    readonly instancedBuffer: WebGLBuffer;
     /** 背景顶点数组 */
     readonly backgroundVertexBuffer: WebGLBuffer;
     /** 图块纹理对象 */
@@ -167,9 +148,9 @@ export interface IContextData {
     backgroundDepth: number;
 
     /** 图块纹理的脏标记 */
-    tileTextureMark: symbol;
+    tileTextureMark: IDirtyMark;
     /** 顶点数组的脏标记 */
-    vertexMark: symbol;
+    vertexMark: IDirtyMark;
 }
 
 export interface IMovingBlock {
@@ -246,7 +227,14 @@ export interface IMovingBlock {
     destroy(): void;
 }
 
-export interface IMapRenderer {
+export interface IMapRendererHooks extends IHookBase {
+    /**
+     * 当需要更新画面时执行
+     */
+    onUpdate(controller: IHookController<this>): void;
+}
+
+export interface IMapRenderer extends IHookable<IMapRendererHooks> {
     /** 地图渲染器使用的资源管理器 */
     readonly manager: IMaterialManager;
     /** 画布渲染上下文 */
@@ -260,6 +248,8 @@ export interface IMapRenderer {
     readonly viewport: IMapViewportController;
     /** 顶点数组生成器 */
     readonly vertex: IMapVertexGenerator;
+    /** 使用的地图状态对象 */
+    readonly layerState: ILayerState;
 
     /** 地图宽度 */
     readonly mapWidth: number;
@@ -275,12 +265,16 @@ export interface IMapRenderer {
     readonly cellWidth: number;
     /** 每个格子的高度 */
     readonly cellHeight: number;
+    /** 图集宽度 */
+    readonly assetWidth: number;
+    /** 图集高度 */
+    readonly assetHeight: number;
 
     /**
      * 使用指定图集对象
      * @param asset 要使用的缓存对象
      */
-    useAsset(asset: IMapAssetData): void;
+    useAsset(asset: ITrackedAssetData): void;
 
     /**
      * 摧毁此地图渲染器，表示当前渲染器不会再被使用到
@@ -294,17 +288,10 @@ export interface IMapRenderer {
     render(gl: WebGL2RenderingContext): void;
 
     /**
-     * 添加地图图层
-     * @param layer 地图图层
-     * @param identifier 图层的标识符，可以用于 {@link getLayer} 获取图层
+     * 设置渲染器使用的地图状态
+     * @param layerState 地图状态
      */
-    addLayer(layer: IMapLayer, identifier?: string): void;
-
-    /**
-     * 移除指定图层
-     * @param layer 要移除的图层
-     */
-    removeLayer(layer: IMapLayer): void;
+    setLayerState(layerState: ILayerState): void;
 
     /**
      * 根据标识符获取图层
@@ -323,19 +310,6 @@ export interface IMapRenderer {
      */
     getSortedLayer(): IMapLayer[];
 
-    /**
-     * 设置当前渲染器中指定图层的纵深
-     * @param layer 要设置的图层
-     * @param zIndex 目标纵深
-     */
-    setZIndex(layer: IMapLayer, zIndex: number): void;
-
-    /**
-     * 获取指定图层的纵深
-     * @param layer 要获取的图层
-     */
-    getZIndex(layer: IMapLayer): number | undefined;
-
     /**
      * 获取指定图层排序后的索引位置
      * @param layer 要获取的图层
@@ -379,9 +353,9 @@ export interface IMapRenderer {
     configRendering(config: Partial<IMapRenderConfig>): void;
 
     /**
-     * 设置渲染的宽高，单位格子。例如填 13 就表示渲染宽度或高度是 13 个格子。
-     * @param width 渲染的格子宽度
-     * @param height 渲染的格子高度
+     * 设置渲染的宽高，单位像素
+     * @param width 渲染的像素宽度
+     * @param height 渲染的像素高度
      */
     setRenderSize(width: number, height: number): void;
 
@@ -402,11 +376,6 @@ export interface IMapRenderer {
      */
     setCellSize(width: number, height: number): void;
 
-    /**
-     * 获取变换矩阵
-     */
-    getTransform(): Transform;
-
     /**
      * 添加一个移动图块
      * @param layer 图块所属的图层
@@ -459,28 +428,25 @@ export interface IMapRenderer {
     setTileAlpha(layer: IMapLayer, alpha: number, x: number, y: number): void;
 
     /**
-     * 结束此渲染器的使用，释放所有相关资源
+     * 进行一帧更新
+     * @param timestamp 时间戳
      */
-    close(): void;
+    tick(timestamp: number): void;
 }
 
 export interface IMapVertexArray {
     /**
-     * 地图渲染顶点数组，结构是一个三维张量 `[B, L, T]`，其中 `B` 代表分块，`L` 代表图层，`T` 代表图块，并按照结构顺序平铺存储。
-     * 每个顶点包含两个数据，顶点的 `x,y,z` 坐标，顶点的贴图坐标 `x,y,z`。
+     * 地图渲染实例化数组，结构是一个三维张量 `[B, L, T]`，其中 `B` 代表分块，`L` 代表图层，`T` 代表图块，并按照结构顺序平铺存储。
      *
      * 语义解释就是，最内层存储图块，再外面一层存储图层，最外层存储分块。这样的话可以一次性将一个分块的所有图层渲染完毕。
+     *
+     * 依次存储 a_tilePos, a_texCoord, a_tileData, a_texData
      */
-    readonly tileVertex: Float32Array;
+    readonly tileInstanced: Float32Array;
 
-    /** 每个图块的偏移数据，使用实例化绘制，第一项表示这个图块的总帧数，第二项表示每帧的偏移量 */
-    readonly tileOffset: Int16Array;
-    /** 每个图块的不透明度，用于实现前景层虚化效果 */
-    readonly tileAlpha: Float32Array;
-
-    /** 动态内容顶点起始索引 */
+    /** 动态内容的起始索引，以实例为单位 */
     readonly dynamicStart: number;
-    /** 动态内容顶点数量 */
+    /** 动态内容的数量，以实例为单位 */
     readonly dynamicCount: number;
 }
 
@@ -717,21 +683,13 @@ export interface IBlockSplitter<T> extends IBlockSplitterConfig {
 }
 
 export interface IMapVertexData {
-    /** 这个分块的顶点数组 */
-    readonly vertexArray: Float32Array;
-    /** 这个分块的偏移数组 */
-    readonly offsetArray: Int16Array;
-    /** 这个分块的不透明度数组 */
-    readonly alphaArray: Float32Array;
+    /** 这个分块的实例化数据数组 */
+    readonly instancedArray: Float32Array;
 }
 
 export interface IIndexedMapVertexData extends IMapVertexData {
-    /** 这个分块的顶点数组的起始索引 */
-    readonly vertexStart: number;
-    /** 这个分块的偏移数组的起始索引 */
-    readonly offsetStart: number;
-    /** 这个分块的不透明度数组的起始索引 */
-    readonly alphaStart: number;
+    /** 这个分块的实例化数据的起始索引 */
+    readonly instancedStart: number;
 }
 
 export interface ILayerDirtyData {
@@ -764,6 +722,11 @@ export interface IMapVertexBlock extends IMapVertexData {
      */
     render(): void;
 
+    /**
+     * 取消数据脏标记
+     */
+    updated(): void;
+
     /**
      * 标记指定区域为脏，需要更新
      * @param layer 图层对象
@@ -787,22 +750,10 @@ export interface IMapVertexBlock extends IMapVertexData {
     getDirtyArea(layer: IMapLayer): Readonly<ILayerDirtyData> | null;
 
     /**
-     * 获取指定图层的顶点数组，是对内部存储的直接引用
+     * 获取指定图层的实例化数据数组，是对内部存储的直接引用
      * @param layer 图层对象
      */
-    getLayerVertex(layer: IMapLayer): Float32Array | null;
-
-    /**
-     * 获取指定图层的偏移数组，是对内部存储的直接引用
-     * @param layer 图层对象
-     */
-    getLayerOffset(layer: IMapLayer): Int16Array | null;
-
-    /**
-     * 获取指定图层的不透明度数组，是对内部存储的直接引用
-     * @param layer 图层对象
-     */
-    getLayerAlpha(layer: IMapLayer): Float32Array | null;
+    getLayerInstanced(layer: IMapLayer): Float32Array | null;
 
     /**
      * 获取指定图层的所有顶点数组数据，是对内部存储的直接引用
@@ -820,6 +771,9 @@ export interface IMapBlockUpdateObject {
     readonly y: number;
 }
 
+/**
+ * 脏标记表示顶点数组的长度是否发生变化
+ */
 export interface IMapVertexGenerator extends IDirtyTracker<boolean> {
     /** 地图渲染器 */
     readonly renderer: IMapRenderer;

packages-user/client-modules/src/render/map/vertex.ts

@@ -1,4 +1,4 @@
-import { IMapLayer, IMapLayerData } from '@user/data-state';
+import { IMapLayer } from '@user/data-state';
 import {
     IBlockData,
     IBlockSplitter,
@@ -22,8 +22,7 @@ import { BlockSplitter } from './block';
 import { clamp, isNil } from 'lodash-es';
 import { BlockCls, IMaterialFramedData } from '@user/client-base';
 import { IRect, SizedCanvasImageSource } from '@motajs/render-assets';
-
-// todo: 潜在优化点：顶点数组的 z 坐标以及纹理的 z 坐标可以换为实例化绘制
+import { INSTANCED_COUNT } from './constant';
 
 export interface IMapDataGetter {
     /** 图块缩小行为，即图块比格子大时应该如何处理 */
@@ -37,12 +36,6 @@ export interface IMapDataGetter {
     /** 图块大小与格子大小判断方式 */
     readonly tileTestMode: MapTileSizeTestMode;
 
-    /**
-     * 获取指定图层的图块信息，是对内部存储的直接引用
-     * @param layer 地图图层
-     */
-    getMapLayerData(layer: IMapLayer): Readonly<IMapLayerData> | null;
-
     /**
      * 根据图集的图像源获取其索引
      * @param source 图像源
@@ -79,20 +72,9 @@ interface BlockIndex extends IndexedBlockMapPos {
     readonly mapIndex: number;
 }
 
-interface TilePosition {
-    /** 左边缘位置 */
-    readonly left: number;
-    /** 上边缘位置 */
-    readonly top: number;
-    /** 右边缘位置 */
-    readonly right: number;
-    /** 下边缘位置 */
-    readonly bottom: number;
-}
-
 const enum VertexUpdate {
-    /** 更新顶点信息 */
-    Vertex = 0b01,
+    /** 更新顶点位置信息 */
+    Position = 0b01,
     /** 更新贴图信息 */
     Texture = 0b10,
     /** 全部更新 */
@@ -112,29 +94,19 @@ export class MapVertexGenerator
 
     /** 空顶点数组，因为空顶点很常用，所以直接定义一个全局常量 */
     private static readonly EMPTY_VETREX: Float32Array = new Float32Array(
-        6 * 6
+        INSTANCED_COUNT
     );
 
     readonly block: IBlockSplitter<MapVertexBlock>;
 
-    /** 顶点数组 */
-    private vertexArray: Float32Array = new Float32Array();
     /** 偏移数组 */
-    private offsetArray: Int16Array = new Int16Array();
-    /** 不透明度数组 */
-    private alphaArray: Float32Array = new Float32Array();
-    /** 动态内容顶点数组 */
-    private dynamicVertexArray: Float32Array = new Float32Array();
+    private instancedArray: Float32Array = new Float32Array();
     /** 动态内容偏移数组 */
-    private dynamicOffsetArray: Int16Array = new Int16Array();
-    /** 动态内容不透明度数组 */
-    private dynamicAlphaArray: Float32Array = new Float32Array();
+    private dynamicInstancedArray: Float32Array = new Float32Array();
 
     /** 图层列表 */
     private layers: IMapLayer[] = [];
 
-    /** 对应分块的顶点数组 */
-    private blockList: Map<number, IMapVertexBlock> = new Map();
     /** 分块宽度 */
     private blockWidth: number = MAP_BLOCK_WIDTH;
     /** 分块高度 */
@@ -163,6 +135,7 @@ export class MapVertexGenerator
         readonly data: IContextData
     ) {
         super();
+        this.resizeMap();
         this.block = new BlockSplitter();
     }
 
@@ -175,23 +148,13 @@ export class MapVertexGenerator
         const area = this.renderer.mapWidth * this.renderer.mapHeight;
         const staticCount = area * this.renderer.layerCount;
         const count = staticCount + this.dynamicLength;
-        const vertexSize = count * 6 * 6;
-        const offsetSize = count * 2;
-        const alphaSize = count;
-        this.vertexArray = new Float32Array(vertexSize);
-        this.offsetArray = new Int16Array(offsetSize);
-        this.alphaArray = new Float32Array(alphaSize);
-        this.alphaArray.fill(1);
+        const offsetSize = count * INSTANCED_COUNT;
+        this.instancedArray = new Float32Array(offsetSize);
         this.staticLength = staticCount;
-        this.dynamicVertexArray = this.vertexArray.subarray(
-            staticCount * 6 * 6,
-            count * 6 * 6
+        this.dynamicInstancedArray = this.instancedArray.subarray(
+            staticCount * INSTANCED_COUNT,
+            count * INSTANCED_COUNT
         );
-        this.dynamicOffsetArray = this.offsetArray.subarray(
-            staticCount * 2,
-            count * 2
-        );
-        this.dynamicAlphaArray = this.alphaArray.subarray(staticCount, count);
     }
 
     private splitBlock() {
@@ -206,19 +169,16 @@ export class MapVertexGenerator
         const lastCount = (this.mapHeight % this.blockHeight) * this.blockWidth;
         const bh = Math.floor(this.mapHeight / this.blockHeight);
         const lastStart = bh * lineCount;
-        const layerCount = this.renderer.layerCount;
         this.block.splitBlocks(block => {
             // 最后一行的算法与其他行不同
             const startIndex =
                 block.height < this.blockHeight
                     ? lastStart + lastCount * block.x
                     : lineCount * block.y + blockCount * block.x;
-            const count = block.width * block.height * layerCount;
+            const count = block.width * block.height;
 
             const origin: IMapVertexData = {
-                vertexArray: this.vertexArray,
-                offsetArray: this.offsetArray,
-                alphaArray: this.alphaArray
+                instancedArray: this.instancedArray
             };
             const data = new MapVertexBlock(
                 this.renderer,
@@ -245,22 +205,18 @@ export class MapVertexGenerator
             this.mapHeight !== this.renderer.mapHeight
         ) {
             this.needRebuild = true;
+            this.mapWidth = this.renderer.mapWidth;
+            this.mapHeight = this.renderer.mapHeight;
         }
     }
 
     expandMoving(targetSize: number): void {
-        const beforeVertex = this.vertexArray;
-        const beforeOffset = this.offsetArray;
-        const beforeAlpha = this.alphaArray;
+        const beforeOffset = this.instancedArray;
         this.dynamicLength = targetSize;
         this.mallocVertexArray();
-        this.vertexArray.set(beforeVertex);
-        this.offsetArray.set(beforeOffset);
-        this.alphaArray.set(beforeAlpha);
+        this.instancedArray.set(beforeOffset);
         const array: IMapVertexData = {
-            vertexArray: this.vertexArray,
-            offsetArray: this.offsetArray,
-            alphaArray: this.alphaArray
+            instancedArray: this.instancedArray
         };
         // 重建一下对应分块就行了，不需要重新分块
         for (const block of this.block.iterateBlocks()) {
@@ -269,42 +225,25 @@ export class MapVertexGenerator
     }
 
     reduceMoving(targetSize: number, indexMap: Map<number, number>): void {
-        const beforeVertexLength = this.vertexArray.length;
-        const beforeOffsetLength = this.offsetArray.length;
-        const beforeAlphaLength = this.alphaArray.length;
+        const beforeOffsetLength = this.instancedArray.length;
         const deltaLength = this.dynamicLength - targetSize;
         this.dynamicLength = targetSize;
-        this.vertexArray = this.vertexArray.subarray(
+        this.instancedArray = this.instancedArray.subarray(
             0,
-            beforeVertexLength - deltaLength * 6 * 6
-        );
-        this.offsetArray = this.offsetArray.subarray(
-            0,
-            beforeOffsetLength - deltaLength * 2
-        );
-        this.alphaArray = this.alphaArray.subarray(
-            0,
-            beforeAlphaLength - deltaLength
+            beforeOffsetLength - deltaLength * INSTANCED_COUNT
         );
         indexMap.forEach((target, from) => {
             const next = from + 1;
-            this.dynamicVertexArray.copyWithin(
-                target * 6 * 6,
-                from * 6 * 6,
-                next * 6 * 6
+            this.dynamicInstancedArray.copyWithin(
+                target * INSTANCED_COUNT,
+                from * INSTANCED_COUNT,
+                next * INSTANCED_COUNT
             );
-            this.dynamicOffsetArray.copyWithin(target * 2, from * 2, next * 2);
-            this.dynamicAlphaArray[target] = this.dynamicAlphaArray[from];
         });
-        this.dynamicVertexArray = this.dynamicVertexArray.subarray(
+        this.dynamicInstancedArray = this.dynamicInstancedArray.subarray(
             0,
-            targetSize * 6 * 6
+            targetSize * INSTANCED_COUNT
         );
-        this.dynamicOffsetArray = this.dynamicOffsetArray.subarray(
-            0,
-            targetSize * 2
-        );
-        this.dynamicAlphaArray = this.dynamicAlphaArray.subarray(0, targetSize);
         // 这个不需要重新分配内存，依然共用同一个 ArrayBuffer，因此不需要重新分块
     }
 
@@ -323,6 +262,7 @@ export class MapVertexGenerator
         this.needRebuild = false;
         this.mallocVertexArray();
         this.splitBlock();
+        this.dirty();
     }
 
     //#endregion
@@ -339,7 +279,7 @@ export class MapVertexGenerator
         pos: BlockMapPos,
         width: number,
         height: number
-    ): TilePosition {
+    ): Readonly<IRect> {
         const {
             renderWidth,
             renderHeight,
@@ -362,14 +302,14 @@ export class MapVertexGenerator
         const cw = cwu * 2; // normalized cell width in range [-1, 1]
         const ch = chu * 2; // normalized cell height in range [-1, 1]
         const cl = pos.mapX * cw - 1; // cell left
-        const ct = pos.mapY * ch - 1; // cell top
+        const ct = 1 - pos.mapY * ch; // cell top
         if (mode === MapTileBehavior.FitToSize) {
             // 适应到格子大小
             return {
-                left: cl,
-                top: ct,
-                right: cl + cw,
-                bottom: ct + ch
+                x: cl,
+                y: ct,
+                w: cw,
+                h: ch
             };
         } else {
             // 维持大小，需要判断对齐
@@ -382,26 +322,20 @@ export class MapVertexGenerator
             const th = thu * 2; // normalized texture height in range [-1, 1]
             let left = 0;
             let top = 0;
-            let right = 0;
-            let bottom = 0;
             switch (tileAlignX) {
                 case MapTileAlign.Start: {
                     // 左对齐
                     left = cl;
-                    right = cl + tw;
                     break;
                 }
                 case MapTileAlign.Center: {
                     // 左右居中对齐
-                    const center = cl + cwu;
-                    left = center - twu;
-                    right = center + twu;
+                    left = cl + cwu - twu;
                     break;
                 }
                 case MapTileAlign.End: {
                     // 右对齐
-                    right = cl + cw;
-                    left = right - tw;
+                    left = cl + cw - tw;
                     break;
                 }
             }
@@ -409,23 +343,19 @@ export class MapVertexGenerator
                 case MapTileAlign.Start: {
                     // 上对齐
                     top = ct;
-                    bottom = ct + th;
                     break;
                 }
                 case MapTileAlign.Center: {
                     // 上下居中对齐
-                    const center = ct + chu;
-                    top = center - thu;
-                    bottom = center + thu;
+                    top = ct + chu - thu;
                     break;
                 }
                 case MapTileAlign.End: {
                     // 下对齐
-                    bottom = ct + ch;
-                    top = bottom - th;
+                    top = ct + ch - th;
                 }
             }
-            return { left, top, right, bottom };
+            return { x: left, y: top, w: tw, h: th };
         }
     }
 
@@ -448,69 +378,44 @@ export class MapVertexGenerator
         frames: number,
         update: VertexUpdate
     ) {
-        const { offsetArray, vertexArray } = vertex;
+        const { instancedArray } = vertex;
         // 顶点数组
-        const { renderWidth, renderHeight, layerCount } = this.renderer;
-        const { x, y, w, h } = rect;
-        const vertexStart = index.blockIndex * 6 * 6;
-        if (update & VertexUpdate.Texture) {
-            const texLeft = (x / renderWidth) * 2 - 1;
-            const texTop = (y / renderHeight) * 2 - 1;
-            const texRight = ((x + w) / renderWidth) * 2 - 1;
-            const texBottom = ((y + h) / renderHeight) * 2 - 1;
-            // 六个顶点分别是 左下，右下，左上，左上，右下，右上
-            vertexArray[vertexStart + 3] = texLeft;
-            vertexArray[vertexStart + 4] = texBottom;
-            vertexArray[vertexStart + 5] = assetIndex;
-            vertexArray[vertexStart + 9] = texRight;
-            vertexArray[vertexStart + 10] = texBottom;
-            vertexArray[vertexStart + 11] = assetIndex;
-            vertexArray[vertexStart + 15] = texLeft;
-            vertexArray[vertexStart + 16] = texTop;
-            vertexArray[vertexStart + 17] = assetIndex;
-            vertexArray[vertexStart + 21] = texLeft;
-            vertexArray[vertexStart + 22] = texTop;
-            vertexArray[vertexStart + 23] = assetIndex;
-            vertexArray[vertexStart + 27] = texRight;
-            vertexArray[vertexStart + 28] = texBottom;
-            vertexArray[vertexStart + 29] = assetIndex;
-            vertexArray[vertexStart + 33] = texRight;
-            vertexArray[vertexStart + 34] = texTop;
-            vertexArray[vertexStart + 35] = assetIndex;
-        }
-        if (update & VertexUpdate.Vertex) {
+        const { layerCount, assetWidth, assetHeight } = this.renderer;
+        const { x, y, w: width, h: height } = rect;
+        const startIndex = index.blockIndex * INSTANCED_COUNT;
+        if (update & VertexUpdate.Position) {
             // 如果需要更新顶点坐标
             const layerIndex = this.renderer.getLayerIndex(index.layer);
-            const layerStart = (layerIndex / layerCount) * 2 - 1;
-            const zIndex = layerStart + index.mapY / this.mapHeight;
-            const { left, top, right, bottom } = this.getTilePosition(
-                index,
-                w,
-                h
-            );
-            vertexArray[vertexStart] = left;
-            vertexArray[vertexStart + 1] = bottom;
-            vertexArray[vertexStart + 2] = zIndex;
-            vertexArray[vertexStart + 6] = right;
-            vertexArray[vertexStart + 7] = bottom;
-            vertexArray[vertexStart + 8] = zIndex;
-            vertexArray[vertexStart + 12] = left;
-            vertexArray[vertexStart + 13] = top;
-            vertexArray[vertexStart + 14] = zIndex;
-            vertexArray[vertexStart + 18] = left;
-            vertexArray[vertexStart + 19] = top;
-            vertexArray[vertexStart + 20] = zIndex;
-            vertexArray[vertexStart + 24] = right;
-            vertexArray[vertexStart + 25] = bottom;
-            vertexArray[vertexStart + 26] = zIndex;
-            vertexArray[vertexStart + 30] = right;
-            vertexArray[vertexStart + 31] = top;
-            vertexArray[vertexStart + 32] = zIndex;
+            // 避免 z 坐标是 1 的时候被裁剪，因此范围选择 [-0.9, 0.9]
+            const layerStart = (layerIndex / layerCount) * 1.8 - 0.9;
+            const zIndex = -layerStart - index.mapY / this.mapHeight;
+            const { x, y, w, h } = this.getTilePosition(index, width, height);
+            // 图块位置
+            instancedArray[startIndex] = x;
+            instancedArray[startIndex + 1] = y;
+            instancedArray[startIndex + 2] = w;
+            instancedArray[startIndex + 3] = h;
+            // 图块纵深
+            instancedArray[startIndex + 8] = zIndex;
+        }
+        if (update & VertexUpdate.Texture) {
+            const texX = x / assetWidth;
+            const texY = y / assetHeight;
+            const texWidth = width / assetWidth;
+            const texHeight = height / assetHeight;
+            // 纹理坐标
+            instancedArray[startIndex + 4] = texX;
+            instancedArray[startIndex + 5] = texY;
+            instancedArray[startIndex + 6] = texWidth;
+            instancedArray[startIndex + 7] = texHeight;
+            // 不透明度
+            instancedArray[startIndex + 9] = 1;
+            // 帧数、偏移、纹理索引
+            instancedArray[startIndex + 12] = -1;
+            instancedArray[startIndex + 13] = frames;
+            instancedArray[startIndex + 14] = offsetIndex;
+            instancedArray[startIndex + 15] = assetIndex;
         }
-        // 偏移数组
-        const offsetStart = index.blockIndex * 2;
-        offsetArray[offsetStart] = frames;
-        offsetArray[offsetStart + 1] = offsetIndex;
     }
 
     /**
@@ -615,13 +520,13 @@ export class MapVertexGenerator
 
         if (!tile) {
             // 不存在可渲染对象，认为是空图块
-            vertex.vertexArray.set(
-                MapVertexGenerator.EMPTY_VETREX,
-                index.blockIndex * 6 * 6
-            );
-            const offsetStart = index.blockIndex * 2;
-            vertex.offsetArray[offsetStart] = 0;
-            vertex.offsetArray[offsetStart + 1] = 0;
+            const { instancedArray } = vertex;
+            const instancedStart = index.blockIndex * INSTANCED_COUNT;
+            // 只把坐标改成 0 就可以了，其他的保留
+            instancedArray[instancedStart] = 0;
+            instancedArray[instancedStart + 1] = 0;
+            instancedArray[instancedStart + 2] = 0;
+            instancedArray[instancedStart + 3] = 0;
             return;
         }
 
@@ -680,8 +585,8 @@ export class MapVertexGenerator
         const block = this.block.getBlockByDataLoc(x, y);
         if (!block) return;
         const vertex = block.data.getLayerData(layer);
-        const data = this.renderer.getMapLayerData(layer);
-        if (!vertex || !data) return;
+        const data = layer.getMapRef();
+        if (!vertex) return;
         const { array } = data;
         const dx = x - block.dataX;
         const dy = y - block.dataY;
@@ -738,12 +643,15 @@ export class MapVertexGenerator
         w: number,
         h: number
     ): void {
+        if (!this.renderer.hasLayer(layer)) return;
+        this.checkRebuild();
         // 这里多一圈是因为要更新这一圈的自动元件
         const ax = x - 1;
         const ay = y - 1;
         const areaRight = x + w + 1;
         const areaBottom = y + h + 1;
         const blocks = this.block.iterateBlocksOfDataArea(ax, ay, w + 2, h + 2);
+
         for (const block of blocks) {
             const left = ax - block.dataX;
             const top = ay - block.dataY;
@@ -761,6 +669,7 @@ export class MapVertexGenerator
         if (import.meta.env.DEV) {
             this.checkUpdateCallPerformance('updateBlock');
         }
+        this.checkRebuild();
         this.updateBlockVertex(layer, num, x, y);
     }
 
@@ -769,6 +678,7 @@ export class MapVertexGenerator
         if (import.meta.env.DEV) {
             this.checkUpdateCallPerformance('updateBlockList');
         }
+        this.checkRebuild();
         if (blocks.length > 50) {
             // 对于超出50个的更新操作使用懒更新
             blocks.forEach(v => {
@@ -864,14 +774,15 @@ export class MapVertexGenerator
     }
 
     updateBlockCache(block: Readonly<IBlockData<IMapVertexBlock>>): void {
-        console.time('update-block-cache');
+        if (!block.data.dirty) return;
         const layers = this.renderer.getSortedLayer();
         layers.forEach(layer => {
             const dirty = block.data.getDirtyArea(layer);
             if (!dirty || !dirty.dirty) return;
+            block.data.updated();
             const vertex = block.data.getLayerData(layer);
-            const mapData = this.renderer.getMapLayerData(layer);
-            if (!vertex || !mapData) return;
+            const mapData = layer.getMapRef();
+            if (!vertex) return;
             const { array } = mapData;
             const { dirtyLeft, dirtyTop, dirtyRight, dirtyBottom } = dirty;
             for (let nx = dirtyLeft; nx < dirtyRight; nx++) {
@@ -897,7 +808,6 @@ export class MapVertexGenerator
                 }
             }
         });
-        console.timeEnd('update-block-cache');
     }
 
     //#endregion
@@ -905,10 +815,10 @@ export class MapVertexGenerator
     //#region 图块配置
 
     enableStaticFrameAnimate(layer: IMapLayer, x: number, y: number): void {
-        const data = this.renderer.getMapLayerData(layer);
+        const data = layer.getMapRef();
         const block = this.block.getBlockByDataLoc(x, y);
-        if (!data || !block) return;
-        const vertexArray = block.data.getLayerOffset(layer);
+        if (!block) return;
+        const vertexArray = block.data.getLayerInstanced(layer);
         if (!vertexArray) return;
         const mapIndex = y * this.mapWidth + x;
         const num = data.array[mapIndex];
@@ -917,19 +827,19 @@ export class MapVertexGenerator
         const bx = x - block.dataX;
         const by = y - block.dataY;
         const bIndex = by * block.width + bx;
-        vertexArray[bIndex * 2] = tile.frames;
+        vertexArray[bIndex * INSTANCED_COUNT + 13] = tile.frames;
         block.data.markRenderDirty();
     }
 
     disableStaticFrameAnimate(layer: IMapLayer, x: number, y: number): void {
         const block = this.block.getBlockByDataLoc(x, y);
         if (!block) return;
-        const vertexArray = block.data.getLayerOffset(layer);
+        const vertexArray = block.data.getLayerInstanced(layer);
         if (!vertexArray) return;
         const bx = x - block.dataX;
         const by = y - block.dataY;
         const bIndex = by * block.width + bx;
-        vertexArray[bIndex * 2] = 1;
+        vertexArray[bIndex * INSTANCED_COUNT + 13] = 1;
         block.data.markRenderDirty();
     }
 
@@ -941,12 +851,12 @@ export class MapVertexGenerator
     ): void {
         const block = this.block.getBlockByDataLoc(x, y);
         if (!block) return;
-        const vertexArray = block.data.getLayerAlpha(layer);
+        const vertexArray = block.data.getLayerInstanced(layer);
         if (!vertexArray) return;
         const bx = x - block.dataX;
         const by = y - block.dataY;
         const bIndex = by * block.width + bx;
-        vertexArray[bIndex] = alpha;
+        vertexArray[bIndex * INSTANCED_COUNT + 9] = alpha;
         block.data.markRenderDirty();
     }
 
@@ -958,9 +868,7 @@ export class MapVertexGenerator
         if (!this.renderer.hasMoving(block)) return;
         const { cls, frames, offset, texture } = block.texture;
         const vertex: IMapVertexData = {
-            vertexArray: this.dynamicVertexArray,
-            offsetArray: this.dynamicOffsetArray,
-            alphaArray: this.dynamicAlphaArray
+            instancedArray: this.dynamicInstancedArray
         };
         const index: IndexedBlockMapPos = {
             layer: block.layer,
@@ -974,7 +882,7 @@ export class MapVertexGenerator
             logger.error(40, block.tile.toString());
             return;
         }
-        const update = updateTexture ? VertexUpdate.All : VertexUpdate.Vertex;
+        const update = updateTexture ? VertexUpdate.All : VertexUpdate.Position;
         if (cls === BlockCls.Autotile) {
             // 自动元件使用全部不连接
             const renderable = this.renderer.autotile.renderWithoutCheck(
@@ -1025,32 +933,33 @@ export class MapVertexGenerator
     }
 
     deleteMoving(moving: IMovingBlock): void {
-        this.dynamicVertexArray.set(
+        const instancedStart = moving.index * INSTANCED_COUNT;
+        // 这个需要全部清空了，因为可能会复用
+        this.dynamicInstancedArray.set(
             MapVertexGenerator.EMPTY_VETREX,
-            moving.index * 6 * 6
+            instancedStart
         );
-        const offsetStart = moving.index * 2;
-        this.dynamicOffsetArray[offsetStart] = 0;
-        this.dynamicOffsetArray[offsetStart + 1] = 0;
-        this.dynamicAlphaArray[moving.index] = 0;
         this.dynamicRenderDirty = true;
     }
 
     enableDynamicFrameAnimate(block: IMovingBlock): void {
         if (!this.renderer.hasMoving(block)) return;
-        this.dynamicOffsetArray[block.index * 2] = 1;
+        const instancedStart = block.index * INSTANCED_COUNT;
+        this.dynamicInstancedArray[instancedStart + 13] = 1;
         this.dynamicRenderDirty = true;
     }
 
     disableDynamicFrameAnimate(block: IMovingBlock): void {
         if (!this.renderer.hasMoving(block)) return;
-        this.dynamicOffsetArray[block.index * 2] = block.texture.frames;
+        const instancedStart = block.index * INSTANCED_COUNT;
+        this.dynamicInstancedArray[instancedStart + 13] = block.texture.frames;
         this.dynamicRenderDirty = true;
     }
 
     setDynamicAlpha(block: IMovingBlock, alpha: number): void {
         if (!this.renderer.hasMoving(block)) return;
-        this.dynamicAlphaArray[block.index] = alpha;
+        const instancedStart = block.index * INSTANCED_COUNT;
+        this.dynamicInstancedArray[instancedStart + 9] = alpha;
         this.dynamicRenderDirty = true;
     }
 
@@ -1066,11 +975,9 @@ export class MapVertexGenerator
     getVertexArray(): IMapVertexArray {
         this.checkRebuild();
         return {
-            dynamicStart: this.staticLength * 6,
-            dynamicCount: this.dynamicLength * 6,
-            tileVertex: this.vertexArray,
-            tileOffset: this.offsetArray,
-            tileAlpha: this.alphaArray
+            dynamicStart: this.staticLength,
+            dynamicCount: this.dynamicLength,
+            tileInstanced: this.instancedArray
         };
     }
 
@@ -1080,11 +987,9 @@ export class MapVertexGenerator
 //#region 分块对象
 
 class MapVertexBlock implements IMapVertexBlock {
-    vertexArray!: Float32Array;
-    offsetArray!: Int16Array;
-    alphaArray!: Float32Array;
+    instancedArray!: Float32Array;
 
-    dirty: boolean = false;
+    dirty: boolean = true;
     renderDirty: boolean = true;
 
     private readonly layerDirty: Map<IMapLayer, ILayerDirtyData> = new Map();
@@ -1092,22 +997,21 @@ class MapVertexBlock implements IMapVertexBlock {
     readonly startIndex: number;
     readonly endIndex: number;
     readonly count: number;
+    readonly layerCount: number;
 
-    readonly vertexStart: number;
-    readonly offsetStart: number;
-    readonly alphaStart: number;
+    readonly instancedStart: number;
 
     private readonly indexMap: Map<IMapLayer, number> = new Map();
-    private readonly vertexMap: Map<IMapLayer, Float32Array> = new Map();
-    private readonly offsetMap: Map<IMapLayer, Int16Array> = new Map();
-    private readonly alphaMap: Map<IMapLayer, Float32Array> = new Map();
+    private readonly instancedMap: Map<IMapLayer, Float32Array> = new Map();
 
     /**
      * 创建分块的顶点数组对象，此对象不能动态扩展，如果地图变化，需要全部重建
      * @param renderer 渲染器对象
      * @param originArray 原始顶点数组
      * @param startIndex 起始网格索引
-     * @param count 分块数量
+     * @param count 单个图层的图块数量
+     * @param blockWidth 分块宽度
+     * @param blockHeight 分块高度
      */
     constructor(
         readonly renderer: IMapRenderer,
@@ -1117,17 +1021,13 @@ class MapVertexBlock implements IMapVertexBlock {
         private readonly blockWidth: number,
         private readonly blockHeight: number
     ) {
-        this.startIndex = startIndex;
-        this.endIndex = startIndex + count;
-        this.count = count;
         const layerCount = renderer.layerCount;
-        const vertexStart = startIndex * layerCount * 6 * 6;
-        const offsetStart = startIndex * layerCount * 2;
-        const alphaStart = startIndex * layerCount;
-        this.vertexStart = vertexStart;
-        this.offsetStart = offsetStart;
-        this.alphaStart = alphaStart;
-
+        this.startIndex = startIndex * layerCount;
+        this.endIndex = (startIndex + count) * layerCount;
+        this.count = count;
+        const offsetStart = startIndex * layerCount * INSTANCED_COUNT;
+        this.instancedStart = offsetStart;
+        this.layerCount = layerCount;
         this.rebuild(originArray);
     }
 
@@ -1135,6 +1035,10 @@ class MapVertexBlock implements IMapVertexBlock {
         this.renderDirty = false;
     }
 
+    updated(): void {
+        this.dirty = false;
+    }
+
     markRenderDirty() {
         // todo: 潜在优化点：vertex, offset, alpha 的脏标记分开
         this.renderDirty = true;
@@ -1173,33 +1077,20 @@ class MapVertexBlock implements IMapVertexBlock {
     }
 
     rebuild(originArray: IMapVertexData) {
-        const vertexStart = this.vertexStart;
-        const offsetStart = this.offsetStart;
-        const alphaStart = this.alphaStart;
+        const offsetStart = this.instancedStart;
         const count = this.count;
-        this.vertexArray = originArray.vertexArray.subarray(
-            vertexStart,
-            vertexStart + count * 6 * 6
-        );
-        this.offsetArray = originArray.offsetArray.subarray(
+        this.instancedArray = originArray.instancedArray.subarray(
             offsetStart,
-            offsetStart + count * 2
-        );
-        this.alphaArray = originArray.alphaArray.subarray(
-            alphaStart,
-            alphaStart + count
+            offsetStart + count * INSTANCED_COUNT * this.layerCount
         );
 
         this.renderer.getSortedLayer().forEach((v, i) => {
-            const vs = vertexStart + i * count * 6 * 6;
-            const os = offsetStart + i * count * 2;
-            const as = alphaStart + i * count;
-            const va = this.vertexArray.subarray(vs, vs + count * 6 * 6);
-            const oa = this.offsetArray.subarray(os, os + count * 2);
-            const aa = this.alphaArray.subarray(as, as + count);
-            this.vertexMap.set(v, va);
-            this.offsetMap.set(v, oa);
-            this.alphaMap.set(v, aa);
+            const os = i * count * INSTANCED_COUNT;
+            const oa = this.instancedArray.subarray(
+                os,
+                os + count * INSTANCED_COUNT
+            );
+            this.instancedMap.set(v, oa);
             this.indexMap.set(v, i);
             this.layerDirty.set(v, {
                 dirty: true,
@@ -1209,33 +1100,21 @@ class MapVertexBlock implements IMapVertexBlock {
                 dirtyBottom: this.blockHeight
             });
         });
+        this.dirty = true;
     }
 
-    getLayerVertex(layer: IMapLayer): Float32Array | null {
-        return this.vertexMap.get(layer) ?? null;
-    }
-
-    getLayerOffset(layer: IMapLayer): Int16Array | null {
-        return this.offsetMap.get(layer) ?? null;
-    }
-
-    getLayerAlpha(layer: IMapLayer): Float32Array | null {
-        return this.alphaMap.get(layer) ?? null;
+    getLayerInstanced(layer: IMapLayer): Float32Array | null {
+        return this.instancedMap.get(layer) ?? null;
     }
 
     getLayerData(layer: IMapLayer): IIndexedMapVertexData | null {
-        const vertex = this.vertexMap.get(layer);
-        const offset = this.offsetMap.get(layer);
-        const alpha = this.alphaMap.get(layer);
+        const offset = this.instancedMap.get(layer);
         const index = this.indexMap.get(layer);
-        if (!vertex || !offset || !alpha || isNil(index)) return null;
+        if (!offset || isNil(index)) return null;
         return {
-            vertexArray: vertex,
-            offsetArray: offset,
-            alphaArray: alpha,
-            vertexStart: this.vertexStart + index * this.count * 6 * 6,
-            offsetStart: this.offsetStart + index * this.count * 2,
-            alphaStart: this.alphaStart + index * this.count
+            instancedArray: offset,
+            instancedStart:
+                this.instancedStart + index * this.count * INSTANCED_COUNT
         };
     }
 }

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

@@ -19,20 +19,31 @@ export class MapViewport implements IMapViewportController {
         this.vertex = renderer.vertex;
     }
 
+    private pushBlock(
+        list: IMapRenderArea[],
+        start: IBlockData<IMapVertexBlock>,
+        end: IBlockData<IMapVertexBlock>
+    ) {
+        const startIndex = start.data.startIndex;
+        const endIndex = end.data.endIndex;
+        list.push({
+            startIndex,
+            endIndex,
+            count: endIndex - startIndex
+        });
+    }
+
     getRenderArea(): IMapRenderData {
         const { cellWidth, cellHeight, renderWidth, renderHeight } =
             this.renderer;
         const { blockWidth, blockHeight, width, height } = this.vertex.block;
-        // 减一是因为第一个像素是 0，所以最后一个像素就是宽度减一
-        const r = renderWidth - 1;
-        const b = renderHeight - 1;
         // 其实只需要算左上角和右下角就行了
-        const [left, top] = this.transform.transformed(0, 0);
-        const [right, bottom] = this.transform.transformed(r, b);
-        const cl = left / cellWidth;
-        const ct = top / cellHeight;
-        const cr = right / cellWidth;
-        const cb = bottom / cellHeight;
+        const [left, top] = this.transform.untransformed(-1, -1);
+        const [right, bottom] = this.transform.untransformed(1, 1);
+        const cl = (left * renderWidth) / cellWidth;
+        const ct = (top * renderHeight) / cellHeight;
+        const cr = (right * renderWidth) / cellWidth;
+        const cb = (bottom * renderHeight) / cellHeight;
         const blockLeft = clamp(Math.floor(cl / blockWidth), 0, width - 1);
         const blockRight = clamp(Math.floor(cr / blockWidth), 0, width - 1);
         const blockTop = clamp(Math.floor(ct / blockHeight), 0, height - 1);
@@ -42,24 +53,31 @@ export class MapViewport implements IMapViewportController {
         const updateArea: IMapRenderArea[] = [];
         const blockList: IBlockData<IMapVertexBlock>[] = [];
 
-        // 使用这种方式的话，索引在换行之前都是连续的，方便整合
-        for (let ny = blockTop; ny <= blockBottom; ny++) {
-            const first = this.vertex.block.getBlockByLoc(blockLeft, ny)!;
-            const last = this.vertex.block.getBlockByLoc(blockRight, ny)!;
-            if (first.data.dirty) {
-                blockList.push(first);
+        const widthOne = blockLeft === blockRight;
+        const heightOne = blockTop === blockBottom;
+
+        if (widthOne && heightOne) {
+            // 只能看到一个分块
+            const block = this.vertex.block.getBlockByLoc(blockLeft, blockTop)!;
+            blockList.push(block);
+        } else if (widthOne) {
+            // 看到的区域分块宽度是 1
+            for (let ny = blockTop; ny <= blockBottom; ny++) {
+                const block = this.vertex.block.getBlockByLoc(blockLeft, ny)!;
+                blockList.push(block);
             }
-            if (last.data.dirty) {
-                blockList.push(last);
+        } else if (heightOne) {
+            // 看到的区域分块高度是 1
+            for (let nx = blockLeft; nx <= blockRight; nx++) {
+                const block = this.vertex.block.getBlockByLoc(nx, blockTop)!;
+                blockList.push(block);
             }
-            renderArea.push({
-                startIndex: first.data.startIndex,
-                endIndex: last.data.endIndex,
-                count: last.data.endIndex - first.data.startIndex
-            });
-            for (let nx = blockLeft + 1; nx < blockRight; nx++) {
-                const block = this.vertex.block.getBlockByLoc(nx, ny)!;
-                if (block.data.dirty) {
+        } else {
+            // 看到的区域分块宽高都不是 1
+            // 使用这种方式的话，索引在换行之前都是连续的，方便整合
+            for (let ny = blockTop; ny <= blockBottom; ny++) {
+                for (let nx = blockLeft; nx <= blockRight; nx++) {
+                    const block = this.vertex.block.getBlockByLoc(nx, ny)!;
                     blockList.push(block);
                 }
             }
@@ -68,34 +86,48 @@ export class MapViewport implements IMapViewportController {
         if (blockList.length > 0) {
             if (blockList.length === 1) {
                 const block = blockList[0];
-                updateArea.push(block.data);
+                if (block.data.renderDirty) {
+                    this.pushBlock(updateArea, block, block);
+                }
+                this.pushBlock(renderArea, block, block);
             } else {
-                let continuousStart: IBlockData<IMapVertexBlock> = blockList[0];
-                let continuousLast: IBlockData<IMapVertexBlock> = blockList[0];
+                // 更新区域
+                let updateStart: IBlockData<IMapVertexBlock> = blockList[0];
+                let updateEnd: IBlockData<IMapVertexBlock> = blockList[0];
+                let renderStart: IBlockData<IMapVertexBlock> = blockList[0];
+                let renderEnd: IBlockData<IMapVertexBlock> = blockList[0];
                 for (let i = 1; i < blockList.length; i++) {
                     const block = blockList[i];
-                    if (block.index === continuousLast.index + 1) {
-                        // 连续则合并
-                        continuousLast = block;
+                    const { renderDirty } = block.data;
+                    // 连续则合并
+                    // 渲染区域
+                    if (block.index === renderEnd.index + 1) {
+                        renderEnd = block;
                     } else {
-                        const start = continuousStart.data.startIndex;
-                        const end = continuousLast.data.endIndex;
-                        updateArea.push({
-                            startIndex: start,
-                            endIndex: end,
-                            count: end - start
-                        });
-                        continuousStart = block;
-                        continuousLast = block;
+                        this.pushBlock(renderArea, renderStart, renderEnd);
+                        renderStart = block;
+                        renderEnd = block;
+                    }
+                    // 缓冲区更新区域
+                    if (renderDirty && block.index === updateEnd.index + 1) {
+                        updateEnd = block;
+                    } else {
+                        this.pushBlock(updateArea, updateStart, updateEnd);
+                        updateStart = block;
+                        updateEnd = block;
                     }
                 }
+                this.pushBlock(updateArea, updateStart, updateEnd);
+                this.pushBlock(renderArea, renderStart, renderEnd);
             }
         }
 
+        // todo: 动态内容
+
         return {
             render: renderArea,
             dirty: updateArea,
-            blockList
+            blockList: blockList.filter(v => v.data.dirty)
         };
     }
 

packages-user/client-modules/src/render/shared.ts

@@ -5,6 +5,10 @@ import { Font } from '@motajs/render-style';
 
 //#region 地图
 
+/** 每个格子的默认宽度，现阶段用处不大 */
+export const CELL_WIDTH = 32;
+/** 每个格子的默认高度，现阶段用处不大 */
+export const CELL_HEIGHT = 32;
 /** 每个格子的宽高 */
 export const CELL_SIZE = 32;
 /** 地图格子宽度，此处仅影响画面，可能不影响游戏内的部分逻辑，游戏内逻辑地图大小请在 core.js 中修改 */
@@ -29,10 +33,6 @@ export const DYNAMIC_RESERVE = 16;
  * 调整此值可以调整频率，值越大，越不容易因为数量小于预留数量而减小预留。
  */
 export const MOVING_TOLERANCE = 60;
-/** 每个格子的默认宽度，现阶段用处不大 */
-export const CELL_WIDTH = 32;
-/** 每个格子的默认高度，现阶段用处不大 */
-export const CELL_HEIGHT = 32;
 
 //#region 状态栏
 

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

@@ -1,4 +1,3 @@
-import { LayerShadowExtends } from '../legacy/shadow';
 import {
     Props,
     Font,
@@ -36,44 +35,23 @@ import {
     RightStatusBar
 } from './statusBar';
 import { ReplayingStatus } from './toolbar';
-import { getHeroStatusOn, HeroSkill, NightSpecial } from '@user/data-state';
+import {
+    getHeroStatusOn,
+    HeroSkill,
+    NightSpecial,
+    state
+} from '@user/data-state';
 import { jumpIgnoreFloor } from '@user/legacy-plugin-data';
 import { hook } from '@user/data-base';
-import { FloorDamageExtends, FloorItemDetail } from '../elements';
-import { LayerGroupPortal } from '../legacy/portal';
-import { LayerGroupFilter } from '../legacy/gameCanvas';
-import { LayerGroupHalo } from '../legacy/halo';
 import { FloorChange } from '../legacy/fallback';
-import { PopText } from '../legacy/pop';
 import { mainUIController } from './controller';
-import {
-    ILayerGroupRenderExtends,
-    LayerGroupAnimate,
-    FloorViewport,
-    ILayerRenderExtends,
-    HeroRenderer,
-    LayerDoorAnimate,
-    LayerGroup
-} from '../elements';
+import { LayerGroup } from '../elements';
 import { isNil } from 'lodash-es';
 import { materials } from '@user/client-base';
 
 const MainScene = defineComponent(() => {
     //#region 基本定义
-    const layerGroupExtends: ILayerGroupRenderExtends[] = [
-        new FloorDamageExtends(),
-        new FloorItemDetail(),
-        new LayerGroupFilter(),
-        new LayerGroupPortal(),
-        new LayerGroupHalo(),
-        new LayerGroupAnimate(),
-        new FloorViewport()
-    ];
-    const eventExtends: ILayerRenderExtends[] = [
-        new HeroRenderer(),
-        new LayerDoorAnimate(),
-        new LayerShadowExtends()
-    ];
+
     const mainTextboxProps: Props<typeof Textbox> = {
         text: '',
         hidden: true,
@@ -272,7 +250,7 @@ const MainScene = defineComponent(() => {
         const tileset = materials.getAsset(0);
         if (!tileset) return;
         canvas.ctx.drawImage(
-            tileset.data.texture.source,
+            tileset.texture.source,
             0,
             0,
             canvas.width,
@@ -283,6 +261,7 @@ const MainScene = defineComponent(() => {
     return () => (
         <container id="main-scene" width={MAIN_WIDTH} height={MAIN_HEIGHT}>
             <sprite
+                hidden
                 render={testRender}
                 loc={[180, 0, 480, 480]}
                 zIndex={1000}
@@ -304,14 +283,10 @@ const MainScene = defineComponent(() => {
                 onDown={downMap}
                 onMove={moveMap}
             >
-                <layer-group id="layer-main" ex={layerGroupExtends} ref={map}>
-                    <layer layer="bg" zIndex={10}></layer>
-                    <layer layer="bg2" zIndex={20}></layer>
-                    <layer layer="event" zIndex={30} ex={eventExtends}></layer>
-                    <layer layer="fg" zIndex={40}></layer>
-                    <layer layer="fg2" zIndex={50}></layer>
-                    <PopText id="pop-main" zIndex={80}></PopText>
-                </layer-group>
+                <map-render
+                    layerState={state.layer}
+                    loc={[0, 0, MAP_WIDTH, MAP_HEIGHT]}
+                />
                 <Textbox id="main-textbox" {...mainTextboxProps}></Textbox>
                 <FloorChange id="floor-change" zIndex={50}></FloorChange>
                 <Tip

packages-user/data-state/src/core/layerState.ts

@@ -1,18 +1,43 @@
-import { logger } from '@motajs/common';
-import { IMapLayer, MapLayer } from '../map';
-import { ILayerState } from './types';
+import {
+    Hookable,
+    HookController,
+    IHookController,
+    logger
+} from '@motajs/common';
+import {
+    IMapLayer,
+    IMapLayerHookController,
+    IMapLayerHooks,
+    MapLayer
+} from '../map';
+import { ILayerState, ILayerStateHooks } from './types';
 
-export class LayerState implements ILayerState {
-    readonly layerList: WeakSet<IMapLayer> = new WeakSet();
+export class LayerState
+    extends Hookable<ILayerStateHooks>
+    implements ILayerState
+{
+    readonly layerList: Set<IMapLayer> = new Set();
     /** 图层到图层别名映射 */
     readonly layerAliasMap: WeakMap<IMapLayer, string> = new WeakMap();
     /** 图层别名到图层的映射 */
-    readonly aliasLayerMap: WeakMap<symbol, IMapLayer> = new WeakMap();
+    readonly aliasLayerMap: Map<symbol, IMapLayer> = new Map();
+
+    /** 背景图块 */
+    private backgroundTile: number = 0;
+
+    /** 图层钩子映射 */
+    private layerHookMap: Map<IMapLayer, IMapLayerHookController> = new Map();
 
     addLayer(width: number, height: number): IMapLayer {
         const array = new Uint32Array(width * height);
         const layer = new MapLayer(array, width, height);
         this.layerList.add(layer);
+        this.forEachHook((hook, controller) => {
+            hook.onUpdateLayer?.(controller, this.layerList);
+        });
+        const controller = layer.addHook(new StateMapLayerHook(this));
+        this.layerHookMap.set(layer, controller);
+        controller.load();
         return layer;
     }
 
@@ -24,6 +49,17 @@ export class LayerState implements ILayerState {
             this.aliasLayerMap.delete(symbol);
             this.layerAliasMap.delete(layer);
         }
+        this.forEachHook((hook, controller) => {
+            hook.onUpdateLayer?.(controller, this.layerList);
+        });
+        const controller = this.layerHookMap.get(layer);
+        if (!controller) return;
+        controller.unload();
+        this.layerHookMap.delete(layer);
+    }
+
+    hasLayer(layer: IMapLayer): boolean {
+        return this.layerList.has(layer);
     }
 
     setLayerAlias(layer: IMapLayer, alias: string): void {
@@ -49,7 +85,7 @@ export class LayerState implements ILayerState {
         layer: IMapLayer,
         width: number,
         height: number,
-        keepBlock?: boolean
+        keepBlock: boolean = false
     ): void {
         if (keepBlock) {
             layer.resize(width, height);
@@ -57,4 +93,58 @@ export class LayerState implements ILayerState {
             layer.resize2(width, height);
         }
     }
+
+    setBackground(tile: number): void {
+        this.backgroundTile = tile;
+        this.forEachHook((hook, controller) => {
+            hook.onChangeBackground?.(controller, tile);
+        });
+    }
+
+    getBackground(): number {
+        return this.backgroundTile;
+    }
+
+    protected createController(
+        hook: Partial<ILayerStateHooks>
+    ): IHookController<ILayerStateHooks> {
+        return new HookController(this, hook);
+    }
+}
+
+class StateMapLayerHook implements Partial<IMapLayerHooks> {
+    constructor(readonly state: LayerState) {}
+
+    onUpdateArea(
+        controller: IMapLayerHookController,
+        x: number,
+        y: number,
+        width: number,
+        height: number
+    ): void {
+        this.state.forEachHook((hook, c) => {
+            hook.onUpdateLayerArea?.(c, controller.layer, x, y, width, height);
+        });
+    }
+
+    onUpdateBlock(
+        controller: IMapLayerHookController,
+        block: number,
+        x: number,
+        y: number
+    ): void {
+        this.state.forEachHook((hook, c) => {
+            hook.onUpdateLayerBlock?.(c, controller.layer, block, x, y);
+        });
+    }
+
+    onResize(
+        controller: IMapLayerHookController,
+        width: number,
+        height: number
+    ): void {
+        this.state.forEachHook((hook, c) => {
+            hook.onResizeLayer?.(c, controller.layer, width, height);
+        });
+    }
 }

packages-user/data-state/src/core/types.ts

@@ -1,8 +1,76 @@
+import { IHookable, IHookBase, IHookController } from '@motajs/common';
 import { IMapLayer } from '../map';
 
-export interface ILayerState {
+export interface ILayerStateHooks extends IHookBase {
+    /**
+     * 当设置背景图块时执行，如果设置的背景图块与原先一样，则不会执行
+     * @param controller 钩子控制器
+     * @param tile 背景图块
+     */
+    onChangeBackground(controller: IHookController<this>, tile: number): void;
+
+    /**
+     * 当地图列表发生变化时执行
+     * @param controller 钩子控制器
+     * @param layerList 地图图层列表
+     */
+    onUpdateLayer(
+        controller: IHookController<this>,
+        layerList: Set<IMapLayer>
+    ): void;
+
+    /**
+     * 当地图状态对象的某个图层发生区域更新时执行
+     * @param controller 钩子控制器
+     * @param layer 触发更新的地图图层对象
+     * @param x 更新区域左上角横坐标
+     * @param y 更新区域左上角纵坐标
+     * @param width 更新区域宽度
+     * @param height 更新区域高度
+     */
+    onUpdateLayerArea(
+        controller: IHookController<this>,
+        layer: IMapLayer,
+        x: number,
+        y: number,
+        width: number,
+        height: number
+    ): void;
+
+    /**
+     * 当地图状态对象的某个图层设置图块时执行，如果设置的图块与原先一样则不会触发
+     * @param controller 钩子控制器
+     * @param layer 触发更新的地图图层对象
+     * @param block 设置为的图块
+     * @param x 图块横坐标
+     * @param y 图块纵坐标
+     */
+    onUpdateLayerBlock(
+        controller: IHookController<this>,
+        layer: IMapLayer,
+        block: number,
+        x: number,
+        y: number
+    ): void;
+
+    /**
+     * 当地图状态对象的某个图层大小发生变化时执行
+     * @param controller 钩子控制器
+     * @param layer 触发更新的地图图层对象
+     * @param width 地图的新宽度
+     * @param height 地图的新高度
+     */
+    onResizeLayer(
+        controller: IHookController<this>,
+        layer: IMapLayer,
+        width: number,
+        height: number
+    ): void;
+}
+
+export interface ILayerState extends IHookable<ILayerStateHooks> {
     /** 地图列表 */
-    readonly layerList: WeakSet<IMapLayer>;
+    readonly layerList: Set<IMapLayer>;
 
     /**
      * 添加图层
@@ -17,6 +85,12 @@ export interface ILayerState {
      */
     removeLayer(layer: IMapLayer): void;
 
+    /**
+     * 当前地图状态对象是否包含指定图层对象
+     * @param layer 图层对象
+     */
+    hasLayer(layer: IMapLayer): boolean;
+
     /**
      * 设置图层别名
      * @param layer 图层对象
@@ -49,6 +123,17 @@ export interface ILayerState {
         height: number,
         keepBlock?: boolean
     ): void;
+
+    /**
+     * 设置背景图块
+     * @param tile 背景图块数字
+     */
+    setBackground(tile: number): void;
+
+    /**
+     * 获取背景图块数字，如果没有设置过，则返回 0
+     */
+    getBackground(): number;
 }
 
 export interface ICoreState {

packages-user/data-state/src/map/mapLayer.ts

@@ -2,25 +2,19 @@ import { isNil } from 'lodash-es';
 import {
     IMapLayer,
     IMapLayerData,
-    IMapLayerExtends,
-    IMapLayerExtendsController
+    IMapLayerHookController,
+    IMapLayerHooks
 } from './types';
-import { logger } from '@motajs/common';
+import { Hookable, HookController, logger } from '@motajs/common';
 
-interface IExtendsData {
-    readonly ex: IMapLayerExtends;
-    readonly controller: IMapLayerExtendsController;
-}
-
-export class MapLayer implements IMapLayer {
+export class MapLayer
+    extends Hookable<IMapLayerHooks, IMapLayerHookController>
+    implements IMapLayer
+{
     width: number;
     height: number;
     empty: boolean = true;
-
-    /** 已经加载完毕的图层拓展 */
-    private loadedExtends: Set<IExtendsData> = new Set();
-    /** 添加的图层拓展 */
-    private addedExtends: Map<string, IExtendsData> = new Map();
+    zIndex: number = 0;
 
     /** 地图图块数组 */
     private mapArray: Uint32Array;
@@ -28,6 +22,7 @@ export class MapLayer implements IMapLayer {
     private mapData: IMapLayerData;
 
     constructor(array: Uint32Array, width: number, height: number) {
+        super();
         this.width = width;
         this.height = height;
         const area = width * height;
@@ -42,9 +37,6 @@ export class MapLayer implements IMapLayer {
 
     resize(width: number, height: number): void {
         if (this.width === width && this.height === height) {
-            this.loadedExtends.forEach(v => {
-                v.ex.onResize?.(v.controller, width, height);
-            });
             return;
         }
         this.mapData.expired = true;
@@ -78,17 +70,14 @@ export class MapLayer implements IMapLayer {
             expired: false,
             array: this.mapArray
         };
-        this.loadedExtends.forEach(v => {
-            v.ex.onResize?.(v.controller, width, height);
+        this.forEachHook((hook, controller) => {
+            hook.onResize?.(controller, width, height);
         });
     }
 
     resize2(width: number, height: number): void {
         if (this.width === width && this.height === height) {
             this.mapArray.fill(0);
-            this.loadedExtends.forEach(v => {
-                v.ex.onResize?.(v.controller, width, height);
-            });
             return;
         }
         this.mapData.expired = true;
@@ -99,17 +88,18 @@ export class MapLayer implements IMapLayer {
             expired: false,
             array: this.mapArray
         };
-        this.loadedExtends.forEach(v => {
-            v.ex.onResize?.(v.controller, width, height);
-        });
         this.empty = true;
+        this.forEachHook((hook, controller) => {
+            hook.onResize?.(controller, width, height);
+        });
     }
 
     setBlock(block: number, x: number, y: number): void {
         const index = y * this.width + x;
+        if (block === this.mapArray[index]) return;
         this.mapArray[index] = block;
-        this.loadedExtends.forEach(v => {
-            v.ex.onUpdateBlock?.(v.controller, block, x, y);
+        this.forEachHook((hook, controller) => {
+            hook.onUpdateBlock?.(controller, block, x, y);
         });
         if (block !== 0) {
             this.empty = false;
@@ -131,6 +121,9 @@ export class MapLayer implements IMapLayer {
         const height = Math.ceil(array.length / width);
         if (width === this.width && height === this.height) {
             this.mapArray.set(array);
+            this.forEachHook((hook, controller) => {
+                hook.onUpdateArea?.(controller, x, y, width, height);
+            });
             return;
         }
         const w = this.width;
@@ -156,8 +149,8 @@ export class MapLayer implements IMapLayer {
             }
             this.mapArray.set(array.subarray(start, start + nw), offset);
         }
-        this.loadedExtends.forEach(v => {
-            v.ex.onUpdateArea?.(v.controller, x, y, width, height);
+        this.forEachHook((hook, controller) => {
+            hook.onUpdateArea?.(controller, x, y, width, height);
         });
         this.empty &&= empty;
     }
@@ -210,51 +203,32 @@ export class MapLayer implements IMapLayer {
         return this.mapData;
     }
 
-    loadExtends(ex: IMapLayerExtends): boolean {
-        if (!this.addedExtends.has(ex.id)) return false;
-        ex.awake?.();
-        const data = this.addedExtends.get(ex.id)!;
-        this.loadedExtends.add(data);
-        return true;
+    protected createController(
+        hook: Partial<IMapLayerHooks>
+    ): IMapLayerHookController {
+        return new MapLayerHookController(this, hook);
     }
 
-    addExtends(ex: IMapLayerExtends): IMapLayerExtendsController {
-        const controller = new MapLayerExtendsController(this, ex);
-        this.addedExtends.set(ex.id, {
-            ex,
-            controller
-        });
-        return controller;
-    }
-
-    removeExtends(ex: IMapLayerExtends | string): void {
-        const id = typeof ex === 'string' ? ex : ex.id;
-        const data = this.addedExtends.get(id);
-        if (!data) return;
-        data.ex.destroy?.();
-        this.addedExtends.delete(id);
-        this.loadedExtends.delete(data);
+    setZIndex(zIndex: number): void {
+        this.zIndex = zIndex;
     }
 }
 
-class MapLayerExtendsController implements IMapLayerExtendsController {
-    loaded: boolean = false;
+class MapLayerHookController
+    extends HookController<IMapLayerHooks>
+    implements IMapLayerHookController
+{
+    hookable: MapLayer;
 
     constructor(
         readonly layer: MapLayer,
-        readonly ex: IMapLayerExtends
-    ) {}
-
-    load(): void {
-        this.loaded = this.layer.loadExtends(this.ex);
+        hook: Partial<IMapLayerHooks>
+    ) {
+        super(layer, hook);
+        this.hookable = layer;
     }
 
     getMapData(): Readonly<IMapLayerData> {
         return this.layer.getMapRef();
     }
-
-    unload(): void {
-        this.layer.removeExtends(this.ex);
-        this.loaded = false;
-    }
 }

packages-user/data-state/src/map/types.ts

@@ -1,3 +1,5 @@
+import { IHookable, IHookBase, IHookController } from '@motajs/common';
+
 export interface IMapLayerData {
     /** 当前引用是否过期，当地图图层内部的地图数组引用更新时，此项会变为 `true` */
     expired: boolean;
@@ -5,26 +7,15 @@ export interface IMapLayerData {
     array: Uint32Array;
 }
 
-export interface IMapLayerHooks {
+export interface IMapLayerHooks extends IHookBase {
     /**
-     * 当钩子准备完毕时执行，会自动分析依赖，并把依赖实例作为参数传入，遵循依赖列表的顺序
-     * @param dependencies 依赖列表
-     */
-    awake(): void;
-
-    /**
-     * 当拓展被移除之前执行，可以用来清理相关内容
-     */
-    destroy(): void;
-
-    /**
-     * 当地图大小发生变化时执行
+     * 当地图大小发生变化时执行，如果调用了地图的 `resize` 方法，但是地图大小没变，则不会触发
      * @param controller 拓展控制器
      * @param width 地图宽度
      * @param height 地图高度
      */
     onResize(
-        controller: IMapLayerExtendsController,
+        controller: IMapLayerHookController,
         width: number,
         height: number
     ): void;
@@ -38,7 +29,7 @@ export interface IMapLayerHooks {
      * @param height 更新区域高度
      */
     onUpdateArea(
-        controller: IMapLayerExtendsController,
+        controller: IMapLayerHookController,
         x: number,
         y: number,
         width: number,
@@ -53,47 +44,37 @@ export interface IMapLayerHooks {
      * @param y 更新点纵坐标
      */
     onUpdateBlock(
-        controller: IMapLayerExtendsController,
+        controller: IMapLayerHookController,
         block: number,
         x: number,
         y: number
     ): void;
 }
 
-export interface IMapLayerExtends extends Partial<IMapLayerHooks> {
-    /** 这个拓展对象的标识符 */
-    readonly id: string;
-}
-
-export interface IMapLayerExtendsController {
-    /** 当前图层拓展是否已经被加载 */
-    readonly loaded: boolean;
+export interface IMapLayerHookController
+    extends IHookController<IMapLayerHooks> {
     /** 拓展所属的图层对象 */
     readonly layer: IMapLayer;
 
-    /**
-     * 加载此图层拓展，如果拓展依赖了其他拓展并且已经添加，将会自动加载其他拓展
-     */
-    load(): void;
-
     /**
      * 获取地图数据，是对内部存储的直接引用
      */
     getMapData(): Readonly<IMapLayerData>;
-
-    /**
-     * 结束此拓展的生命周期，释放相关资源
-     */
-    unload(): void;
 }
 
-export interface IMapLayer {
+export interface IMapLayer
+    extends IHookable<IMapLayerHooks, IMapLayerHookController> {
     /** 地图宽度 */
     readonly width: number;
     /** 地图高度 */
     readonly height: number;
-    /** 地图是否全部空白，此值具有保守性，即如果其为 `true`，则地图一定空白，但是如果其为 `false`，那么地图也有可能空白 */
+    /**
+     * 地图是否全部空白，此值具有充分性，但不具有必要性，
+     * 即如果其为 `true`，则地图一定空白，但是如果其为 `false`，那么地图也有可能空白
+     */
     readonly empty: boolean;
+    /** 图层纵深 */
+    readonly zIndex: number;
 
     /**
      * 调整地图尺寸，维持原有图块。如果尺寸变大，那么会补零，如果尺寸变小，那么会将当前数组裁剪
@@ -153,15 +134,13 @@ export interface IMapLayer {
     ): Uint32Array;
 
     /**
-     * 添加图层拓展，使用一系列钩子与图层本身通讯。不同图层拓展没有顺序关系。
-     * @param ex 图层拓展对象
-     * @returns 图层拓展控制对象，可以通过它来控制拓展的生命周期，也可以用于获取图层内的一些数据
+     * 获取整个地图的地图数组，是对内部数组的直接引用
      */
-    addExtends(ex: IMapLayerExtends): IMapLayerExtendsController;
+    getMapRef(): IMapLayerData;
 
     /**
-     * 移除指定的图层拓展对象
-     * @param ex 要移除的图层拓展对象，也可以填拓展对象的标识符
+     * 设置地图纵深，会影响渲染的遮挡顺序
+     * @param zIndex 纵深
      */
-    removeExtends(ex: IMapLayerExtends | string): void;
+    setZIndex(zIndex: number): void;
 }

packages/common/src/dirtyTracker.ts

@@ -1,32 +1,32 @@
 import { isNil } from 'lodash-es';
-import { IDirtyTracker } from './types';
+import { IDirtyMark, IDirtyTracker } from './types';
 
 /**
  * 布尔类型的脏标记追踪器。当传入 `dirtySince` 的标记不属于当前的追踪器时，会返回 `true`
  */
 export class PrivateBooleanDirtyTracker implements IDirtyTracker<boolean> {
     /** 标记映射 */
-    private markMap: WeakMap<symbol, number> = new WeakMap();
+    private markMap: WeakMap<IDirtyMark, number> = new WeakMap();
     /** 脏标记 */
     private dirtyFlag: number = 0;
 
-    mark(): symbol {
-        const symbol = Symbol();
+    mark(): IDirtyMark {
+        const symbol = {};
         this.markMap.set(symbol, this.dirtyFlag);
         return symbol;
     }
 
-    unmark(mark: symbol): void {
+    unmark(mark: IDirtyMark): void {
         this.markMap.delete(mark);
     }
 
-    dirtySince(mark: symbol): boolean {
+    dirtySince(mark: IDirtyMark): boolean {
         const num = this.markMap.get(mark);
         if (isNil(num)) return true;
         return num < this.dirtyFlag;
     }
 
-    hasMark(symbol: symbol): boolean {
+    hasMark(symbol: IDirtyMark): boolean {
         return this.markMap.has(symbol);
     }
 
@@ -47,24 +47,24 @@ export class PrivateListDirtyTracker<T extends number>
     /** 标记映射，键表示在索引，值表示其对应的标记数字 */
     private readonly markMap: Map<T, number> = new Map();
     /** 标记 symbol 映射，值表示这个 symbol 对应的标记数字 */
-    private readonly symbolMap: WeakMap<symbol, number> = new WeakMap();
+    private readonly symbolMap: WeakMap<{}, number> = new WeakMap();
 
     /** 脏标记数字 */
     private dirtyFlag: number = 0;
 
     constructor(protected length: number) {}
 
-    mark(): symbol {
-        const symbol = Symbol();
+    mark(): IDirtyMark {
+        const symbol = {};
         this.symbolMap.set(symbol, this.dirtyFlag);
         return symbol;
     }
 
-    unmark(mark: symbol): void {
+    unmark(mark: IDirtyMark): void {
         this.symbolMap.delete(mark);
     }
 
-    dirtySince(mark: symbol): Set<T> {
+    dirtySince(mark: IDirtyMark): Set<T> {
         const num = this.symbolMap.get(mark);
         const res = new Set<T>();
         if (isNil(num)) return res;
@@ -74,7 +74,7 @@ export class PrivateListDirtyTracker<T extends number>
         return res;
     }
 
-    hasMark(symbol: symbol): boolean {
+    hasMark(symbol: IDirtyMark): boolean {
         return this.symbolMap.has(symbol);
     }
 
@@ -95,24 +95,24 @@ export class PrivateMapDirtyTracker<T extends string>
     /** 标记映射，键表示名称，值表示其对应的标记数字 */
     private readonly markMap: Map<T, number> = new Map();
     /** 标记 symbol 映射，值表示这个 symbol 对应的标记数字 */
-    private readonly symbolMap: WeakMap<symbol, number> = new WeakMap();
+    private readonly symbolMap: WeakMap<{}, number> = new WeakMap();
 
     /** 脏标记数字 */
     private dirtyFlag: number = 0;
 
     constructor(protected length: number) {}
 
-    mark(): symbol {
-        const symbol = Symbol();
+    mark(): IDirtyMark {
+        const symbol = {};
         this.symbolMap.set(symbol, this.dirtyFlag);
         return symbol;
     }
 
-    unmark(mark: symbol): void {
+    unmark(mark: IDirtyMark): void {
         this.symbolMap.delete(mark);
     }
 
-    dirtySince(mark: symbol): Record<T, boolean> {
+    dirtySince(mark: IDirtyMark): Record<T, boolean> {
         const num = this.symbolMap.get(mark) ?? 0;
         const obj: Partial<Record<T, boolean>> = {};
         this.markMap.forEach((v, k) => {
@@ -122,7 +122,7 @@ export class PrivateMapDirtyTracker<T extends string>
         return obj as Record<T, boolean>;
     }
 
-    hasMark(symbol: symbol): boolean {
+    hasMark(symbol: IDirtyMark): boolean {
         return this.symbolMap.has(symbol);
     }
 

packages/common/src/hook.ts

@@ -0,0 +1,82 @@
+import { logger } from './logger';
+import { IHookable, IHookBase, IHookController, IHookObject } from './types';
+
+export abstract class Hookable<
+    H extends IHookBase = IHookBase,
+    C extends IHookController<H> = IHookController<H>
+> implements IHookable<H, C>
+{
+    /** 加载完成的钩子列表 */
+    protected readonly loadedList: Set<IHookObject<H, C>> = new Set();
+
+    /** 钩子列表 */
+    private readonly hookList: Set<IHookObject<H, C>> = new Set();
+    /** 钩子对象到钩子存储对象的映射 */
+    private readonly hookMap: Map<Partial<H>, IHookObject<H, C>> = new Map();
+    /** 钩子控制器到钩子存储对象的映射 */
+    private readonly controllerMap: Map<C, IHookObject<H, C>> = new Map();
+
+    /**
+     * 创建钩子对象的控制器
+     * @param hook 钩子对象
+     */
+    protected abstract createController(hook: Partial<H>): C;
+
+    addHook(hook: Partial<H>): C {
+        const controller = this.createController(hook);
+        const obj: IHookObject<H, C> = { hook, controller };
+        this.hookMap.set(hook, obj);
+        this.controllerMap.set(controller, obj);
+        this.hookList.add(obj);
+        return controller;
+    }
+
+    loadHook(hook: Partial<H>): void {
+        const obj = this.hookMap.get(hook);
+        if (!obj) {
+            logger.warn(85);
+            return;
+        }
+        hook.awake?.(obj.controller);
+        this.loadedList.add(obj);
+    }
+
+    removeHook(hook: Partial<H>): void {
+        const obj = this.hookMap.get(hook);
+        if (!obj) return;
+        obj.hook.destroy?.(obj.controller);
+        this.hookList.delete(obj);
+        this.loadedList.delete(obj);
+        this.hookMap.delete(hook);
+        this.controllerMap.delete(obj.controller);
+    }
+
+    removeHookByController(hook: C): void {
+        const obj = this.controllerMap.get(hook);
+        if (!obj) return;
+        obj.hook.destroy?.(obj.controller);
+        this.hookList.delete(obj);
+        this.loadedList.delete(obj);
+        this.controllerMap.delete(hook);
+        this.hookMap.delete(obj.hook);
+    }
+
+    forEachHook(fn: (hook: Partial<H>, controller: C) => void): void {
+        this.loadedList.forEach(v => fn(v.hook, v.controller));
+    }
+}
+
+export class HookController<H extends IHookBase> implements IHookController<H> {
+    constructor(
+        readonly hookable: IHookable<H, IHookController<H>>,
+        readonly hook: Partial<H>
+    ) {}
+
+    load(): void {
+        this.hookable.loadHook(this.hook);
+    }
+
+    unload(): void {
+        this.hookable.removeHookByController(this);
+    }
+}

packages/common/src/index.ts

@@ -1,4 +1,5 @@
 export * from './dirtyTracker';
+export * from './hook';
 export * from './logger';
 export * from './utils';
 export * from './types';

packages/common/src/logger.json

@@ -41,7 +41,7 @@
         "39": "Offset pool size exceeds WebGL2 limitation, ensure size type of your big image is less than $1.",
         "40": "Material used by map block $1 is not found in built asset. Please ensure you have pack it into asset.",
         "41": "You are trying to use a texture on moving block whose offset is not in the offset pool, please build it into asset after loading.",
-        "42": "The layerList property of map-render element is required.",
+        "42": "The layerState property of map-render element is required.",
         "1101": "Shadow extension needs 'floor-hero' extension as dependency.",
         "1201": "Floor-damage extension needs 'floor-binder' extension as dependency.",
         "1301": "Portal extension need 'floor-binder' extension as dependency.",
@@ -130,8 +130,9 @@
         "80": "Parameter count of MapLayer.getMapData must be 0 or 4.",
         "81": "Map data to get is partially (or totally) out of range. Overflowed area will be filled with zero.",
         "82": "Big image offset size is larger than 64. Considier reduce big image offset bucket.",
-        "83": "It seems that you call 'updateBlock' too frequently. This will extremely affect game's performance, so considering integrate them into one 'updateArea' or 'updateBlockList' call.",
+        "83": "It seems that you call '$1' too frequently. This will extremely affect game's performance, so considering integrate them into one 'updateArea' or 'updateBlockList' call.",
         "84": "Cannot set alias '$1' for layer, since '$1' is already an alias for another layer.",
+        "85": "Hook to load does not belong to current hookable object.",
         "1001": "Item-detail extension needs 'floor-binder' and 'floor-damage' extension as dependency.",
         "1101": "Cannot add new effect to point effect instance, for there's no more reserve space for it. Please increase the max count of the instance."
     }

packages/common/src/types.ts

@@ -1,3 +1,5 @@
+//#region 脏标记
+
 export interface IDirtyMarker<T> {
     /**
      * 标记为脏，即进行了一次更新
@@ -6,27 +8,109 @@ export interface IDirtyMarker<T> {
     dirty(data: T): void;
 }
 
+export interface IDirtyMark {}
+
 export interface IDirtyTracker<T> {
     /**
      * 对状态进行标记
      */
-    mark(): symbol;
+    mark(): IDirtyMark;
 
     /**
      * 取消指定标记符号
      * @param mark 标记符号
      */
-    unmark(mark: symbol): void;
+    unmark(mark: IDirtyMark): void;
 
     /**
      * 从指定标记符号开始，数据是否发生了变动
      * @param mark 标记符号
      */
-    dirtySince(mark: symbol): T;
+    dirtySince(mark: IDirtyMark): T;
 
     /**
      * 当前追踪器是否包含指定标记符号
      * @param symbol 标记符号
      */
-    hasMark(symbol: symbol): boolean;
+    hasMark(symbol: IDirtyMark): boolean;
 }
+
+//#endregion
+
+//#region 钩子
+
+export interface IHookObject<
+    H extends IHookBase,
+    C extends IHookController<H>
+> {
+    /** 钩子对象 */
+    readonly hook: Partial<H>;
+    /** 钩子控制器 */
+    readonly controller: C;
+}
+
+export interface IHookController<H extends IHookBase = IHookBase> {
+    /** 控制器的钩子对象 */
+    readonly hook: Partial<H>;
+
+    /**
+     * 加载此控制器对应的钩子对象
+     */
+    load(): void;
+
+    /**
+     * 卸载此控制器对应的钩子对象，之后此钩子将不会再被触发
+     */
+    unload(): void;
+}
+
+export interface IHookBase {
+    /**
+     * 加载此钩子对象
+     * @param controller 钩子控制器对象
+     */
+    awake(controller: IHookController<this>): void;
+
+    /**
+     * 摧毁此钩子对象
+     * @param controller 钩子控制器对象
+     */
+    destroy(controller: IHookController<this>): void;
+}
+
+export interface IHookable<
+    H extends IHookBase = IHookBase,
+    C extends IHookController<H> = IHookController<H>
+> {
+    /**
+     * 添加钩子对象，返回控制该钩子对象的控制器
+     * @param hook 钩子对象
+     */
+    addHook(hook: Partial<H>): C;
+
+    /**
+     * 加载指定的钩子对象
+     * @param hook 钩子对象
+     */
+    loadHook(hook: Partial<H>): void;
+
+    /**
+     * 移除钩子对象，会调用钩子对象的 `destroy` 方法
+     * @param hook 钩子对象
+     */
+    removeHook(hook: Partial<H>): void;
+
+    /**
+     * 传入钩子控制器，移除对应的钩子对象
+     * @param hook 钩子控制器
+     */
+    removeHookByController(hook: C): void;
+
+    /**
+     * 遍历每个钩子
+     * @param fn 对每个钩子执行的函数
+     */
+    forEachHook(fn: (hook: Partial<H>, controller: C) => void): void;
+}
+
+//#endregion

packages/render-assets/src/animater.ts

@@ -45,8 +45,7 @@ export class TextureColumnAnimater implements ITextureAnimater<number> {
     *once(texture: ITexture, frames: number): Generator<ITextureRenderable> {
         if (frames <= 0) return;
         const renderable = texture.render();
-        const { x: ox, y: oy } = renderable.rect;
-        const { width, height: h } = texture!;
+        const { x: ox, y: oy, w: width, h } = renderable.rect;
         const w = width / frames;
         for (let i = 0; i < frames; i++) {
             const renderable: ITextureRenderable = {

packages/render-assets/src/store.ts

@@ -64,6 +64,10 @@ export class TextureStore<T extends ITexture = ITexture>
         }
     }
 
+    hasTexture(identifier: number): boolean {
+        return this.texMap.has(identifier);
+    }
+
     getTexture(identifier: number): T | null {
         return this.texMap.get(identifier) ?? null;
     }

packages/render-assets/src/texture.ts

@@ -7,6 +7,7 @@ import {
     ITextureSplitter,
     SizedCanvasImageSource
 } from './types';
+import { clamp } from 'lodash-es';
 
 export class Texture implements ITexture {
     source: SizedCanvasImageSource;
@@ -91,11 +92,11 @@ export class Texture implements ITexture {
     }
 
     clampRect(rect: Readonly<IRect>): Readonly<IRect> {
-        const l = Math.max(this.cl, this.cl + rect.x);
-        const t = Math.max(this.ct, this.ct + rect.y);
-        const r = Math.min(l + rect.w, this.cr);
-        const b = Math.min(t + rect.h, this.cb);
-        return { x: l, y: t, w: r - b, h: b - t };
+        const l = clamp(rect.x, this.cl, this.cr);
+        const t = clamp(rect.y, this.ct, this.cb);
+        const r = clamp(rect.x + rect.w, this.cl, this.cr);
+        const b = clamp(rect.y + rect.h, this.ct, this.cb);
+        return { x: l, y: t, w: r - l, h: b - t };
     }
 
     clipped(rect: Readonly<IRect>): ITextureRenderable {

packages/render-assets/src/types.ts

@@ -173,6 +173,12 @@ export interface ITextureStore<T extends ITexture = ITexture> {
      */
     removeTexture(identifier: number | string | T): void;
 
+    /**
+     * 判断当前贴图存储对象是否包含指定贴图 id
+     * @param identifier 贴图对象 id
+     */
+    hasTexture(identifier: number): boolean;
+
     /**
      * 根据贴图对象 id 获取贴图
      * @param identifier 贴图对象 id

packages/render-core/src/gl2.ts

@@ -1237,7 +1237,7 @@ export class GL2Program extends EventEmitter<ShaderProgramEvent> {
     }
 
     /**
-     * 设置渲染模式，目前可选 {@link Shader.DRAW_ARRAYS} 至 {@link Shader.DRAW_INSTANCED}
+     * 设置渲染模式，目前可选 {@link GL2.DRAW_ARRAYS} 至 {@link GL2.DRAW_INSTANCED}
      */
     mode(mode: RenderMode) {
         this.renderMode = mode;

public/project/floors/MT13.js

@@ -67,7 +67,7 @@ main.floors.MT13=
 ],
     "beforeBattle": {},
     "weather": [
-        "sun",
+        "rain",
         8
     ],
     "cannotMoveIn": {},

public/project/functions.js

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