CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/tilemap editor (#237)

Browse Source 
* feat: 添加 Tilemap 编辑器插件和组件生命周期支持

* feat(editor-core): 添加声明式插件注册 API

* feat(editor-core): 改进tiledmap结构合并tileset进tiledmapeditor

* feat: 添加 editor-runtime SDK 和插件系统改进

* fix(ci): 修复SceneResourceManager里变量未使用问题
This commit is contained in:
YHH
2025-11-25 22:23:19 +08:00
committed by GitHub
parent 551ca7805d
commit 3fb6f919f8
166 changed files with 54691 additions and 8674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/tilemap/package.json Normal file
View File

@@ -0,0 +1,56 @@
{
"name": "@esengine/tilemap",
"version": "1.0.0",
"description": "Tilemap system for ECS Framework - supports Tiled editor import",
"main": "bin/index.js",
"types": "bin/index.d.ts",
"exports": {
".": {
"types": "./bin/index.d.ts",
"import": "./bin/index.js",
"development": {
"types": "./src/index.ts",
"import": "./src/index.ts"
}
}
},
"files": [
"bin/**/*"
],
"keywords": [
"ecs",
"tilemap",
"tiled",
"game-engine",
"2d",
"typescript"
],
"scripts": {
"clean": "rimraf bin dist tsconfig.tsbuildinfo",
"build:ts": "tsc",
"prebuild": "npm run clean",
"build": "npm run build:ts",
"build:watch": "tsc --watch",
"rebuild": "npm run clean && npm run build"
},
"author": "yhh",
"license": "MIT",
"devDependencies": {
"rimraf": "^5.0.0",
"typescript": "^5.8.3"
},
"peerDependencies": {
"@esengine/ecs-framework": "^2.2.8",
"@esengine/asset-system": "workspace:*",
"@esengine/ecs-components": "workspace:*",
"@esengine/ecs-engine-bindgen": "workspace:*"
},
"dependencies": {
"tslib": "^2.8.1"
},
"repository": {
"type": "git",
"url": "https://github.com/esengine/ecs-framework.git",
"directory": "packages/tilemap"
}
}

1028
packages/tilemap/src/TilemapComponent.ts Normal file
View File

File diff suppressed because it is too large Load Diff

17
packages/tilemap/src/index.ts Normal file
View File

@@ -0,0 +1,17 @@
/**
* Tilemap System for ECS Framework
* ECS框架的瓦片地图系统
*/
// Component
export { TilemapComponent, ITilemapData, ITilesetData, ResizeAnchor } from './TilemapComponent';
// Systems
export { TilemapRenderingSystem, TilemapRenderData, ViewportBounds } from './systems/TilemapRenderingSystem';
// Loaders
export { TilemapLoader, ITilemapAsset } from './loaders/TilemapLoader';
export { TilesetLoader, ITilesetAsset } from './loaders/TilesetLoader';
// Tiled converter
export { TiledConverter, ITiledMap, ITiledConversionResult } from './loaders/TiledConverter';

332
packages/tilemap/src/loaders/TiledConverter.ts Normal file
View File

@@ -0,0 +1,332 @@
/**
* Tiled Map Editor format converter
* Tiled 地图编辑器格式转换器
*
* Converts Tiled JSON export format to our internal tilemap/tileset format.
* 将 Tiled JSON 导出格式转换为内部 tilemap/tileset 格式。
*/
import { ITilemapAsset } from './TilemapLoader';
import { ITilesetAsset } from './TilesetLoader';
/**
* Tiled map JSON format (exported from Tiled)
* Tiled 地图 JSON 格式
*/
export interface ITiledMap {
/** Map width in tiles */
width: number;
/** Map height in tiles */
height: number;
/** Tile width in pixels */
tilewidth: number;
/** Tile height in pixels */
tileheight: number;
/** Map orientation (orthogonal, isometric, etc.) */
orientation: string;
/** Render order */
renderorder: string;
/** Layers array */
layers: ITiledLayer[];
/** Tilesets array */
tilesets: ITiledTileset[];
/** Custom properties */
properties?: ITiledProperty[];
/** Tiled version */
tiledversion?: string;
/** Map version */
version?: string | number;
}
/**
* Tiled layer format
* Tiled 图层格式
*/
export interface ITiledLayer {
/** Layer name */
name: string;
/** Layer type (tilelayer, objectgroup, imagelayer, group) */
type: string;
/** Layer ID */
id: number;
/** Layer width in tiles */
width?: number;
/** Layer height in tiles */
height?: number;
/** Tile data (for tilelayer) */
data?: number[];
/** Layer visibility */
visible: boolean;
/** Layer opacity (0-1) */
opacity: number;
/** Layer X offset */
x: number;
/** Layer Y offset */
y: number;
/** Objects (for objectgroup) */
objects?: ITiledObject[];
/** Custom properties */
properties?: ITiledProperty[];
}
/**
* Tiled object format
* Tiled 对象格式
*/
export interface ITiledObject {
id: number;
name: string;
type: string;
x: number;
y: number;
width: number;
height: number;
rotation: number;
visible: boolean;
properties?: ITiledProperty[];
}
/**
* Tiled tileset format
* Tiled 瓦片集格式
*/
export interface ITiledTileset {
/** First GID (global tile ID) */
firstgid: number;
/** Tileset name */
name: string;
/** Image path */
image: string;
/** Image width */
imagewidth: number;
/** Image height */
imageheight: number;
/** Tile width */
tilewidth: number;
/** Tile height */
tileheight: number;
/** Tile count */
tilecount: number;
/** Columns */
columns: number;
/** Margin */
margin: number;
/** Spacing */
spacing: number;
/** Tile properties/metadata */
tiles?: ITiledTile[];
/** External tileset source (if embedded) */
source?: string;
}
/**
* Tiled tile metadata
* Tiled 瓦片元数据
*/
export interface ITiledTile {
id: number;
type?: string;
properties?: ITiledProperty[];
}
/**
* Tiled property format
* Tiled 属性格式
*/
export interface ITiledProperty {
name: string;
type: string;
value: unknown;
}
/**
* Conversion result
* 转换结果
*/
export interface ITiledConversionResult {
/** Converted tilemap */
tilemap: ITilemapAsset;
/** Converted tilesets */
tilesets: ITilesetAsset[];
/** Object layers (if any) */
objects: Array<{
name: string;
objects: ITiledObject[];
}>;
}
/**
* Tiled format converter
* Tiled 格式转换器
*/
export class TiledConverter {
/**
* Convert Tiled JSON map to internal format
* 将 Tiled JSON 地图转换为内部格式
*/
static convert(tiledMap: ITiledMap, mapName: string = 'tilemap'): ITiledConversionResult {
// Convert tilesets
const tilesets = tiledMap.tilesets.map(ts => this.convertTileset(ts));
// Find the first tile layer for main data
const tileLayer = tiledMap.layers.find(l => l.type === 'tilelayer');
// Convert tile data (Tiled uses global IDs, we need to adjust)
let data: number[] = [];
if (tileLayer && tileLayer.data) {
data = this.convertTileData(tileLayer.data, tiledMap.tilesets);
}
// Extract collision layer if exists
const collisionLayer = tiledMap.layers.find(
l => l.type === 'tilelayer' &&
(l.name.toLowerCase().includes('collision') || l.name.toLowerCase().includes('solid'))
);
const collisionData = collisionLayer?.data
? this.convertTileData(collisionLayer.data, tiledMap.tilesets)
: undefined;
// Collect all layers
const layers = tiledMap.layers
.filter(l => l.type === 'tilelayer')
.map(l => ({
name: l.name,
visible: l.visible,
opacity: l.opacity,
data: l.data ? this.convertTileData(l.data, tiledMap.tilesets) : undefined
}));
// Collect object layers
const objects = tiledMap.layers
.filter(l => l.type === 'objectgroup')
.map(l => ({
name: l.name,
objects: l.objects || []
}));
// Convert properties
const properties: Record<string, unknown> = {};
if (tiledMap.properties) {
for (const prop of tiledMap.properties) {
properties[prop.name] = prop.value;
}
}
const tilemap: ITilemapAsset = {
name: mapName,
version: 1,
width: tiledMap.width,
height: tiledMap.height,
tileWidth: tiledMap.tilewidth,
tileHeight: tiledMap.tileheight,
tileset: tilesets.length > 0 ? tilesets[0].name : '',
data,
layers: layers.length > 1 ? layers : undefined,
collisionData,
properties
};
return {
tilemap,
tilesets,
objects
};
}
/**
* Convert Tiled tileset to internal format
* 将 Tiled 瓦片集转换为内部格式
*/
private static convertTileset(tiledTileset: ITiledTileset): ITilesetAsset {
const tiles = tiledTileset.tiles?.map(t => ({
id: t.id,
type: t.type,
properties: t.properties?.reduce((acc, p) => {
acc[p.name] = p.value;
return acc;
}, {} as Record<string, unknown>)
}));
return {
name: tiledTileset.name,
version: 1,
image: tiledTileset.image,
imageWidth: tiledTileset.imagewidth,
imageHeight: tiledTileset.imageheight,
tileWidth: tiledTileset.tilewidth,
tileHeight: tiledTileset.tileheight,
tileCount: tiledTileset.tilecount,
columns: tiledTileset.columns,
rows: Math.ceil(tiledTileset.tilecount / tiledTileset.columns),
margin: tiledTileset.margin || 0,
spacing: tiledTileset.spacing || 0,
tiles
};
}
/**
* Convert Tiled tile data (global IDs to local IDs)
* 转换 Tiled 瓦片数据（全局ID到本地ID）
*
* Tiled uses global tile IDs where each tileset has a firstgid.
* We convert to local IDs starting from 1 (0 = empty).
*/
private static convertTileData(data: number[], tilesets: ITiledTileset[]): number[] {
if (tilesets.length === 0) return data;
// For single tileset, simple conversion
if (tilesets.length === 1) {
const firstgid = tilesets[0].firstgid;
return data.map(gid => {
if (gid === 0) return 0;
// Clear flip flags (high bits in Tiled)
const tileId = gid & 0x1FFFFFFF;
return tileId - firstgid + 1;
});
}
// For multiple tilesets, find which tileset each tile belongs to
return data.map(gid => {
if (gid === 0) return 0;
const tileId = gid & 0x1FFFFFFF;
// Find the tileset this tile belongs to
let tileset: ITiledTileset | null = null;
for (let i = tilesets.length - 1; i >= 0; i--) {
if (tileId >= tilesets[i].firstgid) {
tileset = tilesets[i];
break;
}
}
if (!tileset) return 0;
return tileId - tileset.firstgid + 1;
});
}
/**
* Parse Tiled JSON string
* 解析 Tiled JSON 字符串
*/
static parse(jsonString: string): ITiledMap {
return JSON.parse(jsonString) as ITiledMap;
}
/**
* Convert and stringify to internal format
* 转换并序列化为内部格式
*/
static convertToJson(tiledMap: ITiledMap, mapName?: string): {
tilemapJson: string;
tilesetJsons: string[];
} {
const result = this.convert(tiledMap, mapName);
return {
tilemapJson: JSON.stringify(result.tilemap, null, 2),
tilesetJsons: result.tilesets.map(ts => JSON.stringify(ts, null, 2))
};
}
}

139
packages/tilemap/src/loaders/TilemapLoader.ts Normal file
View File

@@ -0,0 +1,139 @@
/**
* Tilemap asset loader
* 瓦片地图资产加载器
*/
import {
AssetType,
IAssetLoadOptions,
IAssetMetadata,
IAssetLoadResult,
AssetLoadError,
IAssetLoader
} from '@esengine/asset-system';
/**
* Tilemap data interface
* 瓦片地图数据接口
*/
export interface ITilemapAsset {
/** 名称 */
name: string;
/** 版本 */
version: number;
/** 宽度（瓦片数） */
width: number;
/** 高度（瓦片数） */
height: number;
/** 瓦片宽度（像素） */
tileWidth: number;
/** 瓦片高度（像素） */
tileHeight: number;
/** 瓦片集资源GUID */
tileset: string;
/** 瓦片数据（行主序，0表示空） */
data: number[];
/** 图层（可选） */
layers?: Array<{
name: string;
visible: boolean;
opacity: number;
data?: number[];
}>;
/** 碰撞数据（可选） */
collisionData?: number[];
/** 自定义属性 */
properties?: Record<string, unknown>;
}
/**
* Tilemap loader implementation
* 瓦片地图加载器实现
*/
export class TilemapLoader implements IAssetLoader<ITilemapAsset> {
readonly supportedType = AssetType.Tilemap;
readonly supportedExtensions = ['.tilemap.json', '.tilemap'];
/**
* Load tilemap asset
* 加载瓦片地图资产
*/
async load(
path: string,
metadata: IAssetMetadata,
options?: IAssetLoadOptions
): Promise<IAssetLoadResult<ITilemapAsset>> {
const startTime = performance.now();
try {
const response = await this.fetchWithTimeout(path, options?.timeout);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const jsonData = await response.json() as ITilemapAsset;
// 验证必要字段
if (!jsonData.width || !jsonData.height || !jsonData.data) {
throw new Error('Invalid tilemap format: missing required fields');
}
return {
asset: jsonData,
handle: 0,
metadata,
loadTime: performance.now() - startTime
};
} catch (error) {
if (error instanceof Error) {
throw new AssetLoadError(
`Failed to load tilemap: ${error.message}`,
metadata.guid,
AssetType.Tilemap,
error
);
}
throw AssetLoadError.fileNotFound(metadata.guid, path);
}
}
/**
* Fetch with timeout
* 带超时的fetch
*/
private async fetchWithTimeout(url: string, timeout = 30000): Promise<Response> {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(url, {
signal: controller.signal,
mode: 'cors',
credentials: 'same-origin'
});
return response;
} finally {
clearTimeout(timeoutId);
}
}
/**
* Validate if the loader can handle this asset
* 验证加载器是否可以处理此资产
*/
canLoad(path: string, _metadata: IAssetMetadata): boolean {
const lowerPath = path.toLowerCase();
return this.supportedExtensions.some(ext => lowerPath.endsWith(ext));
}
/**
* Dispose loaded asset
* 释放已加载的资产
*/
dispose(asset: ITilemapAsset): void {
(asset as any).data = null;
(asset as any).layers = null;
(asset as any).collisionData = null;
}
}

151
packages/tilemap/src/loaders/TilesetLoader.ts Normal file
View File

@@ -0,0 +1,151 @@
/**
* Tileset asset loader
* 瓦片集资产加载器
*/
import {
AssetType,
IAssetLoadOptions,
IAssetMetadata,
IAssetLoadResult,
AssetLoadError,
IAssetLoader
} from '@esengine/asset-system';
/**
* Tileset data interface
* 瓦片集数据接口
*/
export interface ITilesetAsset {
/** 名称 */
name: string;
/** 版本 */
version: number;
/** 纹理图像资源GUID或路径 */
image: string;
/** 图像宽度（像素） */
imageWidth: number;
/** 图像高度（像素） */
imageHeight: number;
/** 瓦片宽度（像素） */
tileWidth: number;
/** 瓦片高度（像素） */
tileHeight: number;
/** 瓦片总数 */
tileCount: number;
/** 列数 */
columns: number;
/** 行数 */
rows: number;
/** 边距（像素） */
margin?: number;
/** 间距（像素） */
spacing?: number;
/** 每个瓦片的元数据 */
tiles?: Array<{
id: number;
type?: string;
properties?: Record<string, unknown>;
}>;
}
/**
* Tileset loader implementation
* 瓦片集加载器实现
*/
export class TilesetLoader implements IAssetLoader<ITilesetAsset> {
readonly supportedType = AssetType.Tileset;
readonly supportedExtensions = ['.tileset.json', '.tileset'];
/**
* Load tileset asset
* 加载瓦片集资产
*/
async load(
path: string,
metadata: IAssetMetadata,
options?: IAssetLoadOptions
): Promise<IAssetLoadResult<ITilesetAsset>> {
const startTime = performance.now();
try {
const response = await this.fetchWithTimeout(path, options?.timeout);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const jsonData = await response.json() as ITilesetAsset;
// 验证必要字段
if (!jsonData.tileWidth || !jsonData.tileHeight || !jsonData.image) {
throw new Error('Invalid tileset format: missing required fields');
}
// 计算派生字段（如果未提供）
if (!jsonData.columns && jsonData.imageWidth) {
jsonData.columns = Math.floor(jsonData.imageWidth / jsonData.tileWidth);
}
if (!jsonData.rows && jsonData.imageHeight) {
jsonData.rows = Math.floor(jsonData.imageHeight / jsonData.tileHeight);
}
if (!jsonData.tileCount && jsonData.columns && jsonData.rows) {
jsonData.tileCount = jsonData.columns * jsonData.rows;
}
return {
asset: jsonData,
handle: 0,
metadata,
loadTime: performance.now() - startTime
};
} catch (error) {
if (error instanceof Error) {
throw new AssetLoadError(
`Failed to load tileset: ${error.message}`,
metadata.guid,
AssetType.Tileset,
error
);
}
throw AssetLoadError.fileNotFound(metadata.guid, path);
}
}
/**
* Fetch with timeout
* 带超时的fetch
*/
private async fetchWithTimeout(url: string, timeout = 30000): Promise<Response> {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(url, {
signal: controller.signal,
mode: 'cors',
credentials: 'same-origin'
});
return response;
} finally {
clearTimeout(timeoutId);
}
}
/**
* Validate if the loader can handle this asset
* 验证加载器是否可以处理此资产
*/
canLoad(path: string, _metadata: IAssetMetadata): boolean {
const lowerPath = path.toLowerCase();
return this.supportedExtensions.some(ext => lowerPath.endsWith(ext));
}
/**
* Dispose loaded asset
* 释放已加载的资产
*/
dispose(asset: ITilesetAsset): void {
(asset as any).tiles = null;
}
}

321
packages/tilemap/src/systems/TilemapRenderingSystem.ts Normal file
View File

@@ -0,0 +1,321 @@
import { EntitySystem, Matcher, ECSSystem, Entity } from '@esengine/ecs-framework';
import { TransformComponent } from '@esengine/ecs-components';
import type { IRenderDataProvider } from '@esengine/ecs-engine-bindgen';
import { TilemapComponent } from '../TilemapComponent';
/**
* Tilemap render data for a single tilemap
*/
export interface TilemapRenderData {
entityId: number;
transforms: Float32Array;
textureIds: Uint32Array;
uvs: Float32Array;
colors: Uint32Array;
tileCount: number;
sortingOrder: number;
texturePath?: string;
}
/**
* 视口边界
*/
export interface ViewportBounds {
left: number;
right: number;
top: number;
bottom: number;
}
/**
* 瓦片地图渲染系统 - 准备瓦片地图渲染数据
*/
@ECSSystem('TilemapRendering', { updateOrder: 40 })
export class TilemapRenderingSystem extends EntitySystem implements IRenderDataProvider {
private _renderDataCache: Map<number, TilemapRenderData> = new Map();
private _currentFrameData: TilemapRenderData[] = [];
private _viewportBounds: ViewportBounds | null = null;
constructor() {
super(Matcher.empty().all(TilemapComponent, TransformComponent));
}
setViewportBounds(bounds: ViewportBounds): void {
this._viewportBounds = bounds;
}
getRenderData(): readonly TilemapRenderData[] {
return this._currentFrameData;
}
protected override onBegin(): void {
this._currentFrameData = [];
}
protected override process(entities: readonly Entity[]): void {
for (const entity of entities) {
if (!entity.enabled) continue;
const tilemap = entity.getComponent(TilemapComponent) as TilemapComponent | null;
const transform = entity.getComponent(TransformComponent) as TransformComponent | null;
if (!tilemap || !transform || !tilemap.visible) continue;
let renderData = this._renderDataCache.get(entity.id);
if (!renderData || tilemap.renderDirty) {
renderData = this.buildRenderData(entity.id, tilemap, transform);
this._renderDataCache.set(entity.id, renderData);
tilemap.renderDirty = false;
} else {
this.updateTransforms(renderData, tilemap, transform);
}
this._currentFrameData.push(renderData);
}
this._currentFrameData.sort((a, b) => a.sortingOrder - b.sortingOrder);
}
private buildRenderData(
entityId: number,
tilemap: TilemapComponent,
transform: TransformComponent
): TilemapRenderData {
const mergedData = tilemap.getMergedTileData();
const width = tilemap.width;
const height = tilemap.height;
const tileWidth = tilemap.tileWidth;
const tileHeight = tilemap.tileHeight;
// 计算可见瓦片范围
let startCol = 0,
endCol = width;
let startRow = 0,
endRow = height;
if (this._viewportBounds) {
const bounds = this._viewportBounds;
const mapX = transform.position.x;
const mapY = transform.position.y;
startCol = Math.max(0, Math.floor((bounds.left - mapX) / tileWidth));
endCol = Math.min(width, Math.ceil((bounds.right - mapX) / tileWidth));
startRow = Math.max(0, Math.floor((bounds.bottom - mapY) / tileHeight));
endRow = Math.min(height, Math.ceil((bounds.top - mapY) / tileHeight));
}
// 计算非空瓦片数量
let tileCount = 0;
for (let row = startRow; row < endRow; row++) {
for (let col = startCol; col < endCol; col++) {
if (mergedData[row * width + col] > 0) tileCount++;
}
}
const transforms = new Float32Array(tileCount * 7);
const textureIds = new Uint32Array(tileCount);
const uvs = new Float32Array(tileCount * 4);
const colors = new Uint32Array(tileCount);
const colorValue = this.parseColor(tilemap.color, tilemap.alpha);
// 计算旋转参数
// Calculate rotation parameters
// Note: transform.rotation.z is already in radians (set by Viewport gizmo)
// 注意：transform.rotation.z 已经是弧度（由 Viewport gizmo 设置）
const cos = Math.cos(transform.rotation.z);
const sin = Math.sin(transform.rotation.z);
// Tilemap 旋转中心点（左下角为原点，中心在 width/2, height/2 处）
// Tilemap rotation pivot (origin at bottom-left, center at width/2, height/2)
const pivotX = transform.position.x + (width * tileWidth * transform.scale.x) / 2;
const pivotY = transform.position.y + (height * tileHeight * transform.scale.y) / 2;
let idx = 0;
let texturePath: string | undefined;
for (let row = startRow; row < endRow; row++) {
for (let col = startCol; col < endCol; col++) {
const gid = mergedData[row * width + col];
if (gid <= 0) continue;
// 查找对应的 tileset
const tilesetInfo = tilemap.getTilesetForGid(gid);
if (!tilesetInfo) {
continue;
}
const { index: tilesetIndex, localId } = tilesetInfo;
// 获取纹理路径
if (!texturePath && tilemap.tilesets[tilesetIndex]) {
texturePath = tilemap.tilesets[tilesetIndex].source;
}
// 计算瓦片的本地位置（相对于 tilemap 中心）
// Calculate tile local position (relative to tilemap center)
const localX = transform.position.x + col * tileWidth * transform.scale.x + (tileWidth * transform.scale.x) / 2 - pivotX;
const localY = transform.position.y + (height - 1 - row) * tileHeight * transform.scale.y + (tileHeight * transform.scale.y) / 2 - pivotY;
// 应用旋转变换
// Apply rotation transform
const rotatedX = localX * cos - localY * sin + pivotX;
const rotatedY = localX * sin + localY * cos + pivotY;
// Transform: [x, y, rotation, scaleX, scaleY, originX, originY]
// Each tile rotates the same angle as the tilemap, so the whole map rotates as a unit
// 每个 tile 旋转与 tilemap 相同的角度，这样整个地图作为一个整体旋转
const tOffset = idx * 7;
transforms[tOffset] = rotatedX;
transforms[tOffset + 1] = rotatedY;
transforms[tOffset + 2] = transform.rotation.z; // Each tile rotates with tilemap
transforms[tOffset + 3] = tileWidth * transform.scale.x;
transforms[tOffset + 4] = tileHeight * transform.scale.y;
transforms[tOffset + 5] = 0.5;
transforms[tOffset + 6] = 0.5;
// Texture ID (使用 tileset 的 textureId)
textureIds[idx] = tilemap.tilesets[tilesetIndex]?.textureId || 0;
// UV coordinates
const tileUV = tilemap.getTileUV(tilesetIndex, localId);
const uvOffset = idx * 4;
if (tileUV) {
uvs[uvOffset] = tileUV[0];
uvs[uvOffset + 1] = tileUV[1];
uvs[uvOffset + 2] = tileUV[2];
uvs[uvOffset + 3] = tileUV[3];
} else {
uvs[uvOffset] = 0;
uvs[uvOffset + 1] = 0;
uvs[uvOffset + 2] = 1;
uvs[uvOffset + 3] = 1;
}
colors[idx] = colorValue;
idx++;
}
}
return {
entityId,
transforms,
textureIds,
uvs,
colors,
tileCount,
sortingOrder: tilemap.sortingOrder,
texturePath
};
}
private updateTransforms(
renderData: TilemapRenderData,
tilemap: TilemapComponent,
transform: TransformComponent
): void {
const mergedData = tilemap.getMergedTileData();
const width = tilemap.width;
const height = tilemap.height;
const tileWidth = tilemap.tileWidth;
const tileHeight = tilemap.tileHeight;
// 计算可见瓦片范围（与 buildRenderData 保持一致）
// Calculate visible tile range (consistent with buildRenderData)
let startCol = 0,
endCol = width;
let startRow = 0,
endRow = height;
if (this._viewportBounds) {
const bounds = this._viewportBounds;
const mapX = transform.position.x;
const mapY = transform.position.y;
startCol = Math.max(0, Math.floor((bounds.left - mapX) / tileWidth));
endCol = Math.min(width, Math.ceil((bounds.right - mapX) / tileWidth));
startRow = Math.max(0, Math.floor((bounds.bottom - mapY) / tileHeight));
endRow = Math.min(height, Math.ceil((bounds.top - mapY) / tileHeight));
}
// 计算旋转参数
// Calculate rotation parameters
// Note: transform.rotation.z is already in radians (set by Viewport gizmo)
// 注意：transform.rotation.z 已经是弧度（由 Viewport gizmo 设置）
const cos = Math.cos(transform.rotation.z);
const sin = Math.sin(transform.rotation.z);
// Tilemap 旋转中心点
// Tilemap rotation pivot
const pivotX = transform.position.x + (width * tileWidth * transform.scale.x) / 2;
const pivotY = transform.position.y + (height * tileHeight * transform.scale.y) / 2;
let idx = 0;
for (let row = startRow; row < endRow; row++) {
for (let col = startCol; col < endCol; col++) {
if (mergedData[row * width + col] <= 0) continue;
// 计算瓦片的本地位置（相对于 tilemap 中心）
// Calculate tile local position (relative to tilemap center)
const localX = transform.position.x + col * tileWidth * transform.scale.x + (tileWidth * transform.scale.x) / 2 - pivotX;
const localY = transform.position.y + (height - 1 - row) * tileHeight * transform.scale.y + (tileHeight * transform.scale.y) / 2 - pivotY;
// 应用旋转变换
// Apply rotation transform
const rotatedX = localX * cos - localY * sin + pivotX;
const rotatedY = localX * sin + localY * cos + pivotY;
// Each tile rotates the same angle as the tilemap
// 每个 tile 旋转与 tilemap 相同的角度
const tOffset = idx * 7;
renderData.transforms[tOffset] = rotatedX;
renderData.transforms[tOffset + 1] = rotatedY;
renderData.transforms[tOffset + 2] = transform.rotation.z;
renderData.transforms[tOffset + 3] = tileWidth * transform.scale.x;
renderData.transforms[tOffset + 4] = tileHeight * transform.scale.y;
idx++;
}
}
// Update color (alpha may have changed)
// 更新颜色（alpha 可能已更改）
const colorValue = this.parseColor(tilemap.color, tilemap.alpha);
for (let i = 0; i < renderData.colors.length; i++) {
renderData.colors[i] = colorValue;
}
renderData.sortingOrder = tilemap.sortingOrder;
}
private parseColor(hex: string, alpha: number): number {
const colorHex = hex.replace('#', '');
let r = 255,
g = 255,
b = 255;
if (colorHex.length === 6) {
r = parseInt(colorHex.substring(0, 2), 16);
g = parseInt(colorHex.substring(2, 4), 16);
b = parseInt(colorHex.substring(4, 6), 16);
} else if (colorHex.length === 3) {
r = parseInt(colorHex[0] + colorHex[0], 16);
g = parseInt(colorHex[1] + colorHex[1], 16);
b = parseInt(colorHex[2] + colorHex[2], 16);
}
const a = Math.round(alpha * 255);
return (a << 24) | (b << 16) | (g << 8) | r;
}
protected override onRemoved(entity: Entity): void {
this._renderDataCache.delete(entity.id);
}
clearCache(): void {
this._renderDataCache.clear();
this._currentFrameData = [];
}
}

57
packages/tilemap/tsconfig.json Normal file
View File

@@ -0,0 +1,57 @@
{
"compilerOptions": {
"target": "ES2020",
"module": "ES2020",
"moduleResolution": "node",
"allowImportingTsExtensions": false,
"lib": ["ES2020", "DOM"],
"outDir": "./bin",
"rootDir": "./src",
"strict": true,
"composite": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"removeComments": false,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"exactOptionalPropertyTypes": false,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": false,
"noUncheckedIndexedAccess": false,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"importHelpers": true,
"downlevelIteration": true,
"isolatedModules": false,
"allowJs": true,
"resolveJsonModule": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"bin",
"**/*.test.ts",
"**/*.spec.ts"
],
"references": [
{
"path": "../core"
},
{
"path": "../components"
},
{
"path": "../ecs-engine-bindgen"
}
]
}