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

#28 tiled 数据解析与渲染

Browse Source
This commit is contained in:
yhh
2020-08-13 17:39:24 +08:00
parent e5805960e0
commit b0511db001
23 changed files with 2586 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
demo/libs/framework/framework.d.ts vendored
View File

@@ -252,6 +252,7 @@ declare module es {
declare module es {
class Core extends egret.DisplayObjectContainer {
static emitter: Emitter<CoreEvents>;
static debugRenderEndabled: boolean;
static graphicsDevice: GraphicsDevice;
static content: ContentManager;
static _instance: Core;
@@ -1551,11 +1552,11 @@ declare module es {
properties: Map<string, string>;
visible: boolean;
name: string;
layers: TmxList<any>;
tileLayers: TmxList<TmxLayer>;
objectGroups: TmxList<TmxObjectGroup>;
imageLayers: TmxList<TmxImageLayer>;
groups: TmxList<TmxGroup>;
layers: ITmxLayer[];
tileLayers: TmxLayer[];
objectGroups: TmxObjectGroup[];
imageLayers: TmxImageLayer[];
groups: TmxGroup[];
}
}
declare module es {
@@ -1618,19 +1619,15 @@ declare module es {
}
declare module es {
class TmxDocument {
TmxDirectory: string;
tmxDirectory: string;
constructor();
}
interface ITmxElement {
name: string;
}
class TmxList<T extends ITmxElement> extends Map<string, T> {
_nameCount: Map<string, number>;
add(t: T): void;
protected getKeyForItem(item: T): string;
}
class TmxImage {
texture: egret.Texture;
bitmap: egret.Bitmap;
readonly texture: egret.Texture;
source: string;
format: string;
data: any;
@@ -1657,12 +1654,12 @@ declare module es {
renderOrder: RenderOrderType;
backgroundColor: number;
nextObjectID?: number;
layers: TmxList<any>;
tilesets: TmxList<TmxTileset>;
tileLayers: TmxList<TmxLayer>;
objectGroups: TmxList<TmxObjectGroup>;
imageLayers: TmxList<TmxImageLayer>;
groups: TmxList<TmxGroup>;
layers: ITmxLayer[];
tilesets: TmxTileset[];
tileLayers: TmxLayer[];
objectGroups: TmxLayer[];
imageLayers: TmxImageLayer[];
groups: TmxGroup[];
properties: Map<string, string>;
maxTileWidth: number;
maxTileHeight: number;
@@ -1707,12 +1704,14 @@ declare module es {
offsetY: number;
color: number;
drawOrder: DrawOrderType;
objects: TmxList<TmxObject>;
objects: TmxObject[];
properties: Map<string, string>;
}
class TmxObject implements ITmxElement {
id: number;
name: string;
shape: egret.Shape;
textField: egret.TextField;
objectType: TmxObjectType;
type: string;
x: number;
@@ -1725,6 +1724,7 @@ declare module es {
text: TmxText;
points: Vector2[];
properties: Map<string, string>;
constructor();
}
class TmxText {
fontFamily: string;
@@ -1769,14 +1769,40 @@ declare module es {
bottom = 2
}
}
declare module es {
class TiledMapLoader {
static loadTmxMap(map: TmxMap, filePath: string): Promise<TmxMap>;
static loadTmxMapData(map: TmxMap, xMap: any): Promise<TmxMap>;
static parseLayers(container: any, xEle: any, map: TmxMap, width: number, height: number, tmxDirectory: string): void;
private static updateMaxTileSizes;
static parseOrientationType(type: string): OrientationType;
static parseStaggerAxisType(type: string): StaggerAxisType;
static parseStaggerIndexType(type: string): StaggerIndexType;
static parseRenderOrderType(type: string): RenderOrderType;
static parsePropertyDict(prop: any): Map<string, string>;
static parseTmxTileset(map: TmxMap, xTileset: any): Promise<TmxTileset>;
static loadTmxTileset(tileset: TmxTileset, map: TmxMap, xTileset: any, firstGid: number): Promise<TmxTileset>;
static loadTmxTilesetTile(tile: TmxTilesetTile, tileset: TmxTileset, xTile: any, terrains: TmxTerrain[]): Promise<TmxTilesetTile>;
static loadTmxAnimationFrame(frame: TmxAnimationFrame, xFrame: any): TmxAnimationFrame;
static loadTmxObjectGroup(group: TmxObjectGroup, map: TmxMap, xObjectGroup: any): TmxObjectGroup;
static loadTmxObject(obj: TmxObject, map: TmxMap, xObject: any): TmxObject;
static loadTmxText(text: TmxText, xText: any): TmxText;
static loadTmxAlignment(alignment: TmxAlignment, xText: any): TmxAlignment;
static parsePoints(xPoints: any): any[];
static parsePoint(s: string): Vector2;
static parseTmxTerrain(xTerrain: any): TmxTerrain;
static parseTmxTileOffset(xTileOffset: any): TmxTileOffset;
static loadTmxImage(image: TmxImage, xImage: any): Promise<TmxImage>;
}
}
declare module es {
class TiledRendering {
static renderMap(map: TmxMap, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderLayer(layer: TmxLayer, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderImageLayer(layer: TmxImageLayer, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderObjectGroup(objGroup: TmxObjectGroup, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderGroup(group: TmxGroup, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderTile(tile: TmxLayerTile, position: Vector2, scale: Vector2, tileWidth: number, tileHeight: number, color: Color, layerDepth: number): void;
static renderMap(map: TmxMap, container: egret.DisplayObjectContainer, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderLayer(layer: TmxLayer, container: egret.DisplayObjectContainer, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderImageLayer(layer: TmxImageLayer, container: egret.DisplayObjectContainer, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderObjectGroup(objGroup: TmxObjectGroup, container: egret.DisplayObjectContainer, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderGroup(group: TmxGroup, container: egret.DisplayObjectContainer, position: Vector2, scale: Vector2, layerDepth: number): void;
static renderTile(tile: TmxLayerTile, container: egret.DisplayObjectContainer, position: Vector2, scale: Vector2, tileWidth: number, tileHeight: number, color: egret.ColorMatrixFilter, layerDepth: number): void;
}
}
declare module es {
@@ -1794,7 +1820,7 @@ declare module es {
tileOffset: TmxTileOffset;
properties: Map<string, string>;
image: TmxImage;
terrains: TmxList<TmxTerrain>;
terrains: TmxTerrain[];
tileRegions: Map<number, Rectangle>;
update(): void;
}
@@ -1817,7 +1843,7 @@ declare module es {
type: string;
properties: Map<string, string>;
image: TmxImage;
objectGroups: TmxList<TmxObjectGroup>;
objectGroups: TmxObjectGroup[];
animationFrames: TmxAnimationFrame[];
readonly currentAnimationFrameGid: number;
_animationElapsedTime: number;
@@ -1835,6 +1861,12 @@ declare module es {
duration: number;
}
}
declare module es {
class TmxUtils {
static decode(data: any, encoding: any, compression: string): Array<number>;
static color16ToUnit($color: string): number;
}
}
declare class ArrayUtils {
static bubbleSort(ary: number[]): void;
static insertionSort(ary: number[]): void;
@@ -1850,15 +1882,16 @@ declare class ArrayUtils {
static equals(ary1: number[], ary2: number[]): Boolean;
static insert(ary: any[], index: number, value: any): any;
}
declare class Base64Utils {
private static _keyNum;
private static _keyStr;
private static _keyAll;
static encode: (input: any) => string;
static decode(input: any, isNotStr?: boolean): string;
private static _utf8_encode;
private static _utf8_decode;
private static getConfKey;
declare module es {
class Base64Utils {
private static _keyStr;
static readonly nativeBase64: boolean;
static decode(input: string): string;
static encode(input: string): string;
static decodeBase64AsArray(input: string, bytes: number): Uint32Array;
static decompress(data: string, decoded: any, compression: string): any;
static decodeCSV(input: string): Array<number>;
}
}
declare module es {
class Color {
@@ -1882,6 +1915,9 @@ declare module es {
declare module es {
class DrawUtils {
static drawLine(shape: egret.Shape, start: Vector2, end: Vector2, color: number, thickness?: number): void;
static drawCircle(shape: egret.Shape, position: Vector2, radius: number, color: number): void;
static drawPoints(shape: egret.Shape, position: Vector2, points: Vector2[], color: number, closePoly?: boolean, thickness?: number): void;
static drawString(textField: egret.TextField, text: string, position: Vector2, color: number, rotation: number, origin: Vector2, scale: number): void;
static drawLineAngle(shape: egret.Shape, start: Vector2, radians: number, length: number, color: number, thickness?: number): void;
static drawHollowRect(shape: egret.Shape, rect: Rectangle, color: number, thickness?: number): void;
static drawHollowRectR(shape: egret.Shape, x: number, y: number, width: number, height: number, color: number, thickness?: number): void;

828
demo/libs/framework/framework.js
View File

File diff suppressed because it is too large Load Diff

2
demo/libs/framework/framework.min.js vendored
View File

File diff suppressed because one or more lines are too long

345
demo/resource/assets/isometric_grass_and_water.json Normal file
View File

@@ -0,0 +1,345 @@
{ "height":25,
"infinite":false,
"layers":[
{
"data":[24, 24, 23, 11, 19, 19, 12, 23, 24, 24, 23, 7, 2, 2, 1, 4, 2, 2, 3, 4, 4, 1, 3, 4, 1, 24, 23, 23, 14, 3, 3, 8, 12, 24, 24, 18, 4, 1, 3, 1, 3, 3, 4, 4, 1, 3, 1, 4, 3, 4, 11, 15, 15, 7, 1, 4, 3, 20, 23, 11, 7, 2, 1, 3, 1, 3, 4, 4, 3, 2, 2, 3, 4, 2, 1, 18, 4, 3, 2, 2, 4, 3, 8, 12, 18, 2, 4, 4, 3, 3, 1, 4, 2, 1, 4, 4, 4, 1, 1, 1, 14, 2, 1, 4, 2, 1, 4, 2, 8, 7, 5, 17, 6, 3, 3, 3, 4, 3, 4, 4, 3, 2, 4, 3, 4, 10, 6, 2, 1, 4, 4, 1, 3, 4, 3, 8, 12, 10, 6, 2, 1, 1, 1, 1, 2, 1, 4, 2, 1, 1, 24, 18, 1, 2, 4, 3, 3, 5, 6, 5, 13, 9, 11, 7, 3, 4, 1, 3, 1, 3, 4, 2, 4, 4, 4, 24, 14, 4, 2, 5, 6, 2, 8, 22, 9, 23, 24, 10, 6, 2, 1, 3, 1, 5, 6, 2, 3, 4, 4, 2, 19, 7, 3, 1, 8, 7, 4, 1, 8, 12, 24, 23, 23, 10, 17, 6, 3, 1, 8, 7, 1, 3, 3, 3, 1, 1, 2, 4, 2, 2, 3, 3, 4, 3, 20, 24, 23, 23, 23, 23, 18, 2, 2, 3, 1, 4, 4, 1, 1, 1, 3, 3, 5, 13, 6, 1, 2, 2, 5, 9, 23, 23, 24, 23, 24, 14, 1, 3, 1, 1, 3, 3, 4, 4, 4, 2, 4, 16, 24, 10, 6, 2, 4, 20, 23, 23, 24, 23, 23, 24, 14, 2, 4, 2, 4, 5, 6, 4, 3, 1, 3, 1, 20, 23, 24, 10, 6, 3, 8, 12, 24, 23, 23, 23, 24, 14, 1, 2, 1, 5, 9, 18, 4, 3, 4, 4, 2, 8, 12, 23, 24, 18, 4, 3, 16, 24, 24, 24, 23, 24, 18, 1, 3, 1, 16, 24, 14, 1, 3, 2, 4, 1, 2, 8, 12, 24, 14, 4, 1, 8, 15, 12, 24, 23, 11, 7, 2, 1, 2, 16, 23, 18, 1, 4, 2, 3, 4, 3, 2, 8, 19, 7, 2, 2, 3, 3, 8, 15, 19, 7, 3, 1, 2, 5, 9, 24, 14, 1, 2, 3, 2, 2, 1, 4, 4, 1, 2, 5, 6, 2, 2, 2, 1, 3, 4, 3, 5, 13, 9, 24, 24, 18, 4, 3, 4, 1, 4, 1, 3, 2, 5, 13, 9, 14, 3, 1, 3, 2, 4, 4, 5, 21, 19, 12, 24, 11, 7, 1, 2, 3, 2, 1, 3, 3, 3, 20, 23, 24, 18, 4, 4, 2, 3, 1, 1, 8, 7, 5, 9, 23, 18, 1, 3, 4, 2, 4, 2, 4, 1, 2, 8, 15, 19, 7, 4, 5, 6, 4, 2, 4, 5, 17, 9, 23, 11, 22, 13, 6, 4, 1, 3, 2, 2, 4, 4, 3, 2, 1, 4, 2, 8, 7, 4, 2, 3, 16, 24, 23, 11, 7, 16, 23, 18, 3, 1, 1, 3, 1, 2, 3, 3, 3, 4, 2, 1, 3, 2, 3, 4, 3, 8, 15, 15, 7, 4, 8, 19, 7, 3, 4, 1, 2, 3, 4, 1, 3, 4, 4, 4, 1, 4, 4, 3, 2, 3, 4, 1, 2, 4, 2, 1, 2, 2, 4, 1, 4, 2, 3, 2, 1, 4, 2, 2, 1, 2, 2, 2, 4, 3, 3, 2, 3, 3, 2, 3, 2, 4, 1, 3, 1, 1, 1, 1, 4, 1, 3, 3, 2, 1, 4, 2, 1, 3, 1, 3, 3, 4, 3, 4, 2, 1, 2, 3, 1, 1],
"height":25,
"id":1,
"name":"Tile Layer 1",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":25,
"x":0,
"y":0
}],
"nextlayerid":2,
"nextobjectid":1,
"orientation":"isometric",
"renderorder":"right-down",
"tiledversion":"1.2.1",
"tileheight":32,
"tilesets":[
{
"columns":4,
"firstgid":1,
"grid":
{
"height":32,
"orientation":"isometric",
"width":64
},
"image":"isometric_grass_and_water.png",
"imageheight":384,
"imagewidth":256,
"margin":0,
"name":"isometric_grass_and_water",
"spacing":0,
"terrains":[
{
"name":"Grass",
"tile":0
},
{
"name":"Water",
"tile":22
}],
"tilecount":24,
"tileheight":64,
"tileoffset":
{
"x":0,
"y":16
},
"tiles":[
{
"id":0,
"terrain":[0, 0, 0, 0]
},
{
"id":1,
"terrain":[0, 0, 0, 0]
},
{
"id":2,
"terrain":[0, 0, 0, 0]
},
{
"id":3,
"terrain":[0, 0, 0, 0]
},
{
"id":4,
"terrain":[0, 0, 0, 1]
},
{
"id":5,
"terrain":[0, 0, 1, 0]
},
{
"id":6,
"terrain":[1, 0, 0, 0]
},
{
"id":7,
"terrain":[0, 1, 0, 0]
},
{
"id":8,
"terrain":[0, 1, 1, 1]
},
{
"id":9,
"terrain":[1, 0, 1, 1]
},
{
"id":10,
"terrain":[1, 1, 1, 0]
},
{
"id":11,
"terrain":[1, 1, 0, 1]
},
{
"id":12,
"terrain":[0, 0, 1, 1]
},
{
"id":13,
"terrain":[1, 0, 1, 0]
},
{
"id":14,
"terrain":[1, 1, 0, 0]
},
{
"id":15,
"terrain":[0, 1, 0, 1]
},
{
"id":16,
"terrain":[0, 0, 1, 1]
},
{
"id":17,
"terrain":[1, 0, 1, 0]
},
{
"id":18,
"terrain":[1, 1, 0, 0]
},
{
"id":19,
"terrain":[0, 1, 0, 1]
},
{
"id":20,
"terrain":[0, 1, 1, 0]
},
{
"id":21,
"terrain":[1, 0, 0, 1]
},
{
"id":22,
"terrain":[1, 1, 1, 1]
},
{
"id":23,
"terrain":[1, 1, 1, 1]
}],
"tilewidth":64,
"wangsets":[
{
"cornercolors":[
{
"color":"#8ab022",
"name":"Grass",
"probability":1,
"tile":0
},
{
"color":"#378dc2",
"name":"Water",
"probability":1,
"tile":23
}],
"edgecolors":[],
"name":"Grass and Water",
"tile":15,
"wangtiles":[
{
"dflip":false,
"hflip":false,
"tileid":0,
"vflip":false,
"wangid":[0, 1, 0, 1, 0, 1, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":1,
"vflip":false,
"wangid":[0, 1, 0, 1, 0, 1, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":2,
"vflip":false,
"wangid":[0, 1, 0, 1, 0, 1, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":3,
"vflip":false,
"wangid":[0, 1, 0, 1, 0, 1, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":4,
"vflip":false,
"wangid":[0, 1, 0, 2, 0, 1, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":5,
"vflip":false,
"wangid":[0, 1, 0, 1, 0, 2, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":6,
"vflip":false,
"wangid":[0, 1, 0, 1, 0, 1, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":7,
"vflip":false,
"wangid":[0, 2, 0, 1, 0, 1, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":8,
"vflip":false,
"wangid":[0, 2, 0, 2, 0, 2, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":9,
"vflip":false,
"wangid":[0, 1, 0, 2, 0, 2, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":10,
"vflip":false,
"wangid":[0, 2, 0, 1, 0, 2, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":11,
"vflip":false,
"wangid":[0, 2, 0, 2, 0, 1, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":12,
"vflip":false,
"wangid":[0, 1, 0, 2, 0, 2, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":13,
"vflip":false,
"wangid":[0, 1, 0, 1, 0, 2, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":14,
"vflip":false,
"wangid":[0, 2, 0, 1, 0, 1, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":15,
"vflip":false,
"wangid":[0, 2, 0, 2, 0, 1, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":16,
"vflip":false,
"wangid":[0, 1, 0, 2, 0, 2, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":17,
"vflip":false,
"wangid":[0, 1, 0, 1, 0, 2, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":18,
"vflip":false,
"wangid":[0, 2, 0, 1, 0, 1, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":19,
"vflip":false,
"wangid":[0, 2, 0, 2, 0, 1, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":20,
"vflip":false,
"wangid":[0, 2, 0, 1, 0, 2, 0, 1]
},
{
"dflip":false,
"hflip":false,
"tileid":21,
"vflip":false,
"wangid":[0, 1, 0, 2, 0, 1, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":22,
"vflip":false,
"wangid":[0, 2, 0, 2, 0, 2, 0, 2]
},
{
"dflip":false,
"hflip":false,
"tileid":23,
"vflip":false,
"wangid":[0, 2, 0, 2, 0, 2, 0, 2]
}]
}]
}],
"tilewidth":64,
"type":"map",
"version":1.2,
"width":25
}

BIN
demo/resource/assets/isometric_grass_and_water.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

2
demo/resource/default.res.json
View File

@@ -1,7 +1,7 @@
{
"groups": [
{
"keys": "checkbox_select_disabled_png,checkbox_select_down_png,checkbox_select_up_png,checkbox_unselect_png,selected_png,border_png,header_png,radiobutton_select_disabled_png,radiobutton_select_down_png,radiobutton_select_up_png,radiobutton_unselect_png,roundthumb_png,thumb_png,track_png,tracklight_png,handle_png,off_png,on_png,button_down_png,button_up_png,thumb_pb_png,track_pb_png,track_sb_png,bg_jpg,egret_icon_png,description_json",
"keys": "checkbox_select_disabled_png,checkbox_select_down_png,checkbox_select_up_png,checkbox_unselect_png,selected_png,border_png,header_png,radiobutton_select_disabled_png,radiobutton_select_down_png,radiobutton_select_up_png,radiobutton_unselect_png,roundthumb_png,thumb_png,track_png,tracklight_png,handle_png,off_png,on_png,button_down_png,button_up_png,thumb_pb_png,track_pb_png,track_sb_png,bg_jpg,egret_icon_png,description_json,isometric_grass_and_water_json",
"name": "preload"
}
],

4
demo/src/game/MainScene.ts
View File

@@ -31,6 +31,10 @@ module scene {
// player2.addComponent(new es.BoxCollider());
}
let map = new es.TmxMap();
let mapData = await es.TiledMapLoader.loadTmxMap(map, "isometric_grass_and_water_json");
console.log(mapData);
let pool = new es.ComponentPool<component.SimplePooled>(component.SimplePooled);
let c1 = pool.obtain();