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

#28 tiled orthogonal支持

Browse Source
This commit is contained in:
YHH
2020-08-15 12:16:23 +08:00
parent 15f6b06348
commit 5dc7a72310
13 changed files with 243 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
source/src/ECS/Components/TiledMapRenderer.ts
View File

@@ -6,6 +6,7 @@ module es {
* 如果空，所有层将被渲染
*/
public layerIndicesToRender: number[];
private toContainer: boolean = false;
public get width() {
return this.tiledMap.width * this.tiledMap.tileWidth;
@@ -96,15 +97,20 @@ module es {
this.sync(camera);
if (!this.layerIndicesToRender) {
TiledRendering.renderMap(this.tiledMap, this.displayObject as egret.DisplayObjectContainer, Vector2.add(this.entity.transform.position, this._localOffset),
TiledRendering.renderMap(this.tiledMap, !this.toContainer ? this.displayObject as egret.DisplayObjectContainer : null, Vector2.add(this.entity.transform.position, this._localOffset),
this.transform.scale, this.renderLayer);
} else {
for (let i = 0; i < this.tiledMap.layers.length; i++) {
if (this.tiledMap.layers[i].visible && this.layerIndicesToRender.contains(i))
TiledRendering.renderLayerRenderCamera(this.tiledMap.layers[i] as TmxLayer, this.displayObject as egret.DisplayObjectContainer, Vector2.add(this.entity.transform.position, this._localOffset),
TiledRendering.renderLayerRenderCamera(this.tiledMap.layers[i] as TmxLayer, !this.toContainer ? this.displayObject as egret.DisplayObjectContainer : null, Vector2.add(this.entity.transform.position, this._localOffset),
this.transform.scale, this.renderLayer, camera.bounds);
}
}
if (!this.toContainer){
this.displayObject.cacheAsBitmap = true;
this.toContainer = true;
}
}
public addColliders() {

10
source/src/Tiled/Layer.ts
View File

@@ -113,7 +113,7 @@ module es {
export class TmxLayerTile {
public static readonly FLIPPED_HORIZONTALLY_FLAG = 0x80000000;
public static readonly FLIPPED_VERTICALLY_FLAG = 0x40000000;
public static readonly FLIPPED_DIAGONALLY_FLAG = 0x20000000;
// public static readonly FLIPPED_DIAGONALLY_FLAG = 0x20000000;
public tileset: TmxTileset;
public gid: number;
@@ -124,7 +124,7 @@ module es {
}
public horizontalFlip: boolean;
public verticalFlip: boolean;
public diagonalFlip: boolean;
// public diagonalFlip: boolean;
public _tilesetTileIndex?: number;
/**
@@ -161,11 +161,11 @@ module es {
flip = (rawGid & TmxLayerTile.FLIPPED_VERTICALLY_FLAG) != 0;
this.verticalFlip = flip;
flip = (rawGid & TmxLayerTile.FLIPPED_DIAGONALLY_FLAG) != 0;
this.diagonalFlip = flip;
// flip = (rawGid & TmxLayerTile.FLIPPED_DIAGONALLY_FLAG) != 0;
// this.diagonalFlip = flip;
// 零位标志
rawGid &= ~(TmxLayerTile.FLIPPED_HORIZONTALLY_FLAG | TmxLayerTile.FLIPPED_VERTICALLY_FLAG | TmxLayerTile.FLIPPED_DIAGONALLY_FLAG);
rawGid &= ~(TmxLayerTile.FLIPPED_HORIZONTALLY_FLAG | TmxLayerTile.FLIPPED_VERTICALLY_FLAG);
// 将GID保存
this.gid = rawGid;

20
source/src/Tiled/TiledMapLoader.ts
View File

@@ -298,17 +298,15 @@ module es {
if (xImage)
tileset.image = await this.loadTmxImage(new TmxImage(), xTileset);
let xTerrainType = xTileset["terraintypes"];
if (xTerrainType) {
tileset.terrains = [];
for (let e of xTerrainType["terrains"])
tileset.terrains = [];
if (xTileset["terrains"])
for (let e of xTileset["terrains"])
tileset.terrains.push(this.parseTmxTerrain(e));
}
tileset.tiles = new Map<number, TmxTilesetTile>();
for (let xTile of xTileset["tiles"]) {
let tile = await this.loadTmxTilesetTile(new TmxTilesetTile(), tileset, xTile, tileset.terrains);
tileset.tiles[tile.id] = tile;
tileset.tiles.set(tile.id, tile);
}
tileset.properties = this.parsePropertyDict(xTileset["properties"]);
@@ -340,7 +338,15 @@ module es {
tile.tileset = tileset;
tile.id = xTile["id"];
tile.terrainEdges = xTile["terrain"];
let strTerrain = xTile["terrain"];
if (strTerrain){
tile.terrainEdges = new Array(4);
let index = 0;
for (let v of strTerrain){
let edge: TmxTerrain = terrains[v];
tile.terrainEdges[index ++] = edge;
}
}
tile.probability = xTile["probability"] != undefined ? xTile["probability"] : 1;
tile.type = xTile["type"];
let xImage = xTile["image"];

73
source/src/Tiled/TiledRendering.ts
View File

@@ -1,6 +1,7 @@
module es {
import Bitmap = egret.Bitmap;
export class TiledRendering {
public static renderMap(map: TmxMap, container: egret.DisplayObjectContainer, position: Vector2, scale: Vector2, layerDepth: number) {
map.layers.forEach(layer => {
@@ -209,47 +210,55 @@ module es {
// 对于y位置，我们需要考虑瓦片是否大于瓦片的高度和移位。
// tiled使用左下角的坐标系统，而egret则使用左上角的坐标系统
let tx = tile.x * tileWidth;
let ty = tile.y * tileHeight;
let tx = Math.floor(tile.x) * tileWidth;
let ty = Math.floor(tile.y) * tileHeight;
let rotation = 0;
if (tile.diagonalFlip) {
if (tile.horizontalFlip && tile.verticalFlip) {
rotation = MathHelper.toDegrees(MathHelper.PiOver2);
tx += tileHeight + (sourceRect.height * scale.y - tileHeight);
ty -= (sourceRect.width * scale.x - tileWidth);
} else if (tile.horizontalFlip) {
rotation = MathHelper.toDegrees(-MathHelper.PiOver2);
ty += tileHeight;
} else if (tile.verticalFlip) {
rotation = MathHelper.toDegrees(MathHelper.PiOver2);
tx += tileWidth + (sourceRect.height * scale.y - tileHeight);
ty += (tileWidth - sourceRect.width * scale.x);
} else {
rotation = MathHelper.toDegrees(-MathHelper.PiOver2);
ty += tileHeight;
}
if (tile.horizontalFlip && tile.verticalFlip) {
tx += tileHeight + (sourceRect.height * scale.y - tileHeight);
ty -= (sourceRect.width * scale.x - tileWidth);
} else if (tile.horizontalFlip) {
tx += tileWidth + (sourceRect.height * scale.y - tileHeight);
ty += tileHeight;
} else if (tile.verticalFlip) {
ty += (tileWidth - sourceRect.width * scale.x);
} else {
ty += tileHeight;
// ty += (tileHeight - sourceRect.height * scale.y);
}
// 如果我们没有旋转(对角线翻转)移动y轴
if (rotation == 0)
ty += (tileHeight - sourceRect.height * scale.y);
let pos = new Vector2(tx, ty).add(position);
if (tile.tileset.image) {
if (!tile.tileset.image.bitmap.getTexture(gid.toString())) {
tile.tileset.image.texture = new Bitmap(tile.tileset.image.bitmap.createTexture(gid.toString(), sourceRect.x, sourceRect.y, sourceRect.width, sourceRect.height));
if (container){
let texture: egret.Texture = tile.tileset.image.bitmap.getTexture(`${gid}`);
if (!texture) {
texture = tile.tileset.image.bitmap.createTexture(`${gid}`, sourceRect.x, sourceRect.y, sourceRect.width, sourceRect.height);
}
tile.tileset.image.texture = new Bitmap(texture);
container.addChild(tile.tileset.image.texture);
if (tile.tileset.image.texture.x != pos.x) tile.tileset.image.texture.x = pos.x;
if (tile.tileset.image.texture.y != pos.y) tile.tileset.image.texture.y = pos.y;
if (tile.verticalFlip && tile.horizontalFlip){
tile.tileset.image.texture.scaleX = -1;
tile.tileset.image.texture.scaleY = -1;
}else if (tile.verticalFlip){
tile.tileset.image.texture.scaleX = scale.x;
tile.tileset.image.texture.scaleY = -1;
}else if(tile.horizontalFlip){
tile.tileset.image.texture.scaleX = -1;
tile.tileset.image.texture.scaleY = scale.y;
}else{
tile.tileset.image.texture.scaleX = scale.x;
tile.tileset.image.texture.scaleY = scale.y;
}
if (tile.tileset.image.texture.rotation != rotation) tile.tileset.image.texture.rotation = rotation;
if (tile.tileset.image.texture.anchorOffsetX != 0) tile.tileset.image.texture.anchorOffsetX = 0;
if (tile.tileset.image.texture.anchorOffsetY != 0) tile.tileset.image.texture.anchorOffsetY = 0;
}
tile.tileset.image.texture.x = pos.x;
tile.tileset.image.texture.y = pos.y;
tile.tileset.image.texture.scaleX = scale.x;
tile.tileset.image.texture.scaleY = scale.y;
tile.tileset.image.texture.rotation = rotation;
tile.tileset.image.texture.anchorOffsetX = 0;
tile.tileset.image.texture.anchorOffsetY = 0;
tile.tileset.image.texture.filters = [color];
// tile.tileset.image.texture.filters = [color];
} else {
if (tilesetTile.image.texture) {
if (!tilesetTile.image.bitmap.getTexture(gid.toString())) {