Feature/tilemap editor (#237)
* 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
GitHub
332
packages/tilemap/src/loaders/TiledConverter.ts
Normal file
332
packages/tilemap/src/loaders/TiledConverter.ts
Normal 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
139
packages/tilemap/src/loaders/TilemapLoader.ts
Normal 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
151
packages/tilemap/src/loaders/TilesetLoader.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user