#28 新增tiledMapRenderer用于渲染tiledmap

demo/libs/framework/framework.d.ts

@@ -725,6 +725,31 @@ declare module es {
         collisionRectForSide(side: Edge, motion: number): Rectangle;
     }
 }
+declare module es {
+    class TiledMapRenderer extends RenderableComponent {
+        tiledMap: TmxMap;
+        physicsLayer: number;
+        layerIndicesToRender: number[];
+        readonly width: number;
+        readonly height: number;
+        collisionLayer: TmxLayer;
+        _shouldCreateColliders: boolean;
+        _colliders: Collider[];
+        constructor(tiledMap: TmxMap, collisionLayerName?: string, shouldCreateColliders?: boolean);
+        setLayerToRender(layerName: string): void;
+        setLayersToRender(...layerNames: string[]): void;
+        private getLayerIndex;
+        getRowAtWorldPosition(yPos: number): number;
+        getColumnAtWorldPosition(xPos: number): number;
+        onEntityTransformChanged(comp: transform.Component): void;
+        onAddedToEntity(): void;
+        onRemovedFromEntity(): void;
+        update(): void;
+        render(camera: es.Camera): void;
+        addColliders(): void;
+        removeColliders(): void;
+    }
+}
 declare module es {
     interface ITriggerListener {
         onTriggerEnter(other: Collider, local: Collider): any;
@@ -787,6 +812,7 @@ declare module es {
         constructor();
         width: number;
         height: number;
+        createBoxRect(x: number, y: number, width: number, height: number): BoxCollider;
         setSize(width: number, height: number): this;
         setWidth(width: number): BoxCollider;
         setHeight(height: number): void;
@@ -1224,6 +1250,7 @@ declare module es {
         static readonly Epsilon: number;
         static readonly Rad2Deg: number;
         static readonly Deg2Rad: number;
+        static readonly PiOver2: number;
         static toDegrees(radians: number): number;
         static toRadians(degrees: number): number;
         static map(value: number, leftMin: number, leftMax: number, rightMin: number, rightMax: number): number;
@@ -1568,6 +1595,9 @@ declare module es {
         height: number;
         tiles: TmxLayerTile[];
         getTileWithGid(gid: number): TmxLayerTile;
+        getTile(x: number, y: number): TmxLayerTile;
+        getCollisionRectangles(): Rectangle[];
+        findBoundsRect(startX: number, endX: number, startY: number, checkedIndexes?: boolean[]): Rectangle;
     }
     class TmxLayerTile {
         static readonly FLIPPED_HORIZONTALLY_FLAG: number;
@@ -1638,6 +1668,9 @@ declare module es {
         maxTileHeight: number;
         readonly requiresLargeTileCulling: boolean;
         getTilesetForTileGid(gid: number): TmxTileset;
+        worldToTilePositionX(x: number, clampToTilemapBounds?: boolean): number;
+        worldToTilePositionY(y: number, clampToTilemapBounds?: boolean): number;
+        getLayer(name: string): ITmxLayer;
         update(): void;
         _isDisposed: any;
         dispose(disposing?: boolean): void;
@@ -1690,6 +1723,8 @@ declare module es {
         tile: TmxLayerTile;
         visible: boolean;
         text: TmxText;
+        points: Vector2[];
+        properties: Map<string, string>;
     }
     class TmxText {
         fontFamily: string;
@@ -1734,6 +1769,16 @@ declare module es {
         bottom = 2
     }
 }
+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;
+    }
+}
 declare module es {
     class TmxTileset extends TmxDocument implements ITmxElement {
         map: TmxMap;
@@ -1815,6 +1860,18 @@ declare class Base64Utils {
     private static _utf8_decode;
     private static getConfKey;
 }
+declare module es {
+    class Color {
+        private _packedValue;
+        constructor(r: number, g: number, b: number, alpha: number);
+        b: number;
+        g: number;
+        r: number;
+        a: number;
+        packedValue: number;
+        equals(other: Color): boolean;
+    }
+}
 declare module es {
     class ContentManager {
         protected loadedAssets: Map<string, any>;

demo/libs/framework/framework.js

@@ -3286,6 +3286,120 @@ var es;
     es.TiledMapMover = TiledMapMover;
 })(es || (es = {}));
 var es;
+(function (es) {
+    var TiledMapRenderer = (function (_super) {
+        __extends(TiledMapRenderer, _super);
+        function TiledMapRenderer(tiledMap, collisionLayerName, shouldCreateColliders) {
+            if (collisionLayerName === void 0) { collisionLayerName = null; }
+            if (shouldCreateColliders === void 0) { shouldCreateColliders = true; }
+            var _this = _super.call(this) || this;
+            _this.physicsLayer = 1 << 0;
+            _this.tiledMap = tiledMap;
+            _this._shouldCreateColliders = shouldCreateColliders;
+            if (collisionLayerName) {
+                _this.collisionLayer = tiledMap.tileLayers.get(collisionLayerName);
+            }
+            return _this;
+        }
+        Object.defineProperty(TiledMapRenderer.prototype, "width", {
+            get: function () {
+                return this.tiledMap.width * this.tiledMap.tileWidth;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TiledMapRenderer.prototype, "height", {
+            get: function () {
+                return this.tiledMap.height * this.tiledMap.tileHeight;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TiledMapRenderer.prototype.setLayerToRender = function (layerName) {
+            this.layerIndicesToRender = [];
+            this.layerIndicesToRender[0] = this.getLayerIndex(layerName);
+        };
+        TiledMapRenderer.prototype.setLayersToRender = function () {
+            var layerNames = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                layerNames[_i] = arguments[_i];
+            }
+            this.layerIndicesToRender = [];
+            for (var i = 0; i < layerNames.length; i++)
+                this.layerIndicesToRender[i] = this.getLayerIndex(layerNames[i]);
+        };
+        TiledMapRenderer.prototype.getLayerIndex = function (layerName) {
+            var index = 0;
+            var layerType = this.tiledMap.getLayer(layerName);
+            for (var layer in this.tiledMap.layers) {
+                if (this.tiledMap.layers.hasOwnProperty(layer) &&
+                    this.tiledMap.layers.get(layer) == layerType) {
+                    return index;
+                }
+            }
+            return -1;
+        };
+        TiledMapRenderer.prototype.getRowAtWorldPosition = function (yPos) {
+            yPos -= this.entity.transform.position.y + this._localOffset.y;
+            return this.tiledMap.worldToTilePositionY(yPos);
+        };
+        TiledMapRenderer.prototype.getColumnAtWorldPosition = function (xPos) {
+            xPos -= this.entity.transform.position.x + this._localOffset.x;
+            return this.tiledMap.worldToTilePositionX(xPos);
+        };
+        TiledMapRenderer.prototype.onEntityTransformChanged = function (comp) {
+            if (this._shouldCreateColliders && comp == transform.Component.position) {
+                this.removeColliders();
+                this.addColliders();
+            }
+        };
+        TiledMapRenderer.prototype.onAddedToEntity = function () {
+            this.addColliders();
+        };
+        TiledMapRenderer.prototype.onRemovedFromEntity = function () {
+            this.removeColliders();
+        };
+        TiledMapRenderer.prototype.update = function () {
+            this.tiledMap.update();
+        };
+        TiledMapRenderer.prototype.render = function (camera) {
+            if (!this.layerIndicesToRender) {
+                es.TiledRendering.renderMap(this.tiledMap, es.Vector2.add(this.entity.transform.position, this._localOffset), this.transform.scale, this.renderLayer);
+            }
+            else {
+                for (var i = 0; i < this.tiledMap.layers.size; i++) {
+                    if (this.tiledMap.layers.get(i.toString()).visible && this.layerIndicesToRender.contains(i))
+                        es.TiledRendering.renderLayer(this.tiledMap.layers.get(i.toString()), es.Vector2.add(this.entity.transform.position, this._localOffset), this.transform.scale, this.renderLayer);
+                }
+            }
+        };
+        TiledMapRenderer.prototype.addColliders = function () {
+            if (!this.collisionLayer || !this._shouldCreateColliders)
+                return;
+            var collisionRects = this.collisionLayer.getCollisionRectangles();
+            this._colliders = [];
+            for (var i = 0; i < collisionRects.length; i++) {
+                var collider = new es.BoxCollider().createBoxRect(collisionRects[i].x + this._localOffset.x, collisionRects[i].y + this._localOffset.y, collisionRects[i].width, collisionRects[i].height);
+                collider.physicsLayer = this.physicsLayer;
+                collider.entity = this.entity;
+                this._colliders[i] = collider;
+                es.Physics.addCollider(collider);
+            }
+        };
+        TiledMapRenderer.prototype.removeColliders = function () {
+            if (this._colliders == null)
+                return;
+            for (var _i = 0, _a = this._colliders; _i < _a.length; _i++) {
+                var collider = _a[_i];
+                es.Physics.removeCollider(collider);
+            }
+            this._colliders = null;
+        };
+        return TiledMapRenderer;
+    }(es.RenderableComponent));
+    es.TiledMapRenderer = TiledMapRenderer;
+})(es || (es = {}));
+var es;
 (function (es) {
     var Mover = (function (_super) {
         __extends(Mover, _super);
@@ -3568,6 +3682,12 @@ var es;
             enumerable: true,
             configurable: true
         });
+        BoxCollider.prototype.createBoxRect = function (x, y, width, height) {
+            this._localOffset = new es.Vector2(x + width / 2, y + width / 2);
+            this.shape = new es.Box(width, height);
+            this._colliderRequiresAutoSizing = false;
+            return this;
+        };
         BoxCollider.prototype.setSize = function (width, height) {
             this._colliderRequiresAutoSizing = false;
             var box = this.shape;
@@ -5719,6 +5839,7 @@ var es;
         MathHelper.Epsilon = 0.00001;
         MathHelper.Rad2Deg = 57.29578;
         MathHelper.Deg2Rad = 0.0174532924;
+        MathHelper.PiOver2 = Math.PI / 2;
         return MathHelper;
     }());
     es.MathHelper = MathHelper;
@@ -7381,6 +7502,55 @@ var es;
             }
             return null;
         };
+        TmxLayer.prototype.getTile = function (x, y) {
+            return this.tiles[x + y * this.width];
+        };
+        TmxLayer.prototype.getCollisionRectangles = function () {
+            var checkedIndexes = [];
+            var rectangles = [];
+            var startCol = -1;
+            var index = -1;
+            for (var y = 0; y < this.map.height; y++) {
+                for (var x = 0; x < this.map.width; x++) {
+                    index = y * this.map.width + x;
+                    var tile = this.getTile(x, y);
+                    if (tile && !checkedIndexes[index]) {
+                        if (startCol < 0)
+                            startCol = x;
+                        checkedIndexes[index] = true;
+                    }
+                    else if (tile || checkedIndexes[index]) {
+                        if (startCol >= 0) {
+                            rectangles.push(this.findBoundsRect(startCol, x, y, checkedIndexes));
+                            startCol = -1;
+                        }
+                    }
+                }
+                if (startCol >= 0) {
+                    rectangles.push(this.findBoundsRect(startCol, this.map.width, y, checkedIndexes));
+                    startCol = -1;
+                }
+            }
+            return rectangles;
+        };
+        TmxLayer.prototype.findBoundsRect = function (startX, endX, startY, checkedIndexes) {
+            var index = -1;
+            for (var y = startY + 1; y < this.map.height; y++) {
+                for (var x = startX; x < endX; x++) {
+                    index = y * this.map.width + x;
+                    var tile = this.getTile(x, y);
+                    if (tile || checkedIndexes[index]) {
+                        for (var _x = startX; _x < x; _x++) {
+                            index = y * this.map.width + _x;
+                            checkedIndexes[index] = false;
+                        }
+                        return new es.Rectangle(startX * this.map.tileWidth, startY * this.map.tileHeight, (endX - startX) * this.map.tileWidth, (y - startY) * this.map.tileHeight);
+                    }
+                    checkedIndexes[index] = true;
+                }
+            }
+            return new es.Rectangle(startX * this.map.tileWidth, startY * this.map.tileHeight, (endX - startX) * this.map.tileWidth, (this.map.height - startY) * this.map.tileHeight);
+        };
         return TmxLayer;
     }());
     es.TmxLayer = TmxLayer;
@@ -7518,6 +7688,23 @@ var es;
             }
             console.error("tile gid" + gid + "\u672A\u5728\u4EFB\u4F55tileset\u4E2D\u627E\u5230");
         };
+        TmxMap.prototype.worldToTilePositionX = function (x, clampToTilemapBounds) {
+            if (clampToTilemapBounds === void 0) { clampToTilemapBounds = true; }
+            var tileX = Math.floor(x / this.tileWidth);
+            if (!clampToTilemapBounds)
+                return tileX;
+            return es.MathHelper.clamp(tileX, 0, this.width - 1);
+        };
+        TmxMap.prototype.worldToTilePositionY = function (y, clampToTilemapBounds) {
+            if (clampToTilemapBounds === void 0) { clampToTilemapBounds = true; }
+            var tileY = Math.floor(y / this.tileHeight);
+            if (!clampToTilemapBounds)
+                return tileY;
+            return es.MathHelper.clamp(tileY, 0, this.height - 1);
+        };
+        TmxMap.prototype.getLayer = function (name) {
+            return this.layers.get(name);
+        };
         TmxMap.prototype.update = function () {
             this.tilesets.forEach(function (tileset) { tileset.update(); });
         };
@@ -7619,6 +7806,144 @@ var es;
     })(TmxVerticalAlignment = es.TmxVerticalAlignment || (es.TmxVerticalAlignment = {}));
 })(es || (es = {}));
 var es;
+(function (es) {
+    var TiledRendering = (function () {
+        function TiledRendering() {
+        }
+        TiledRendering.renderMap = function (map, position, scale, layerDepth) {
+            var _this = this;
+            map.layers.forEach(function (layer) {
+                if (layer instanceof es.TmxLayer && layer.visible) {
+                    _this.renderLayer(layer, position, scale, layerDepth);
+                }
+                else if (layer instanceof es.TmxImageLayer && layer.visible) {
+                    _this.renderImageLayer(layer, position, scale, layerDepth);
+                }
+                else if (layer instanceof es.TmxGroup && layer.visible) {
+                    _this.renderGroup(layer, position, scale, layerDepth);
+                }
+                else if (layer instanceof es.TmxObjectGroup && layer.visible) {
+                    _this.renderObjectGroup(layer, position, scale, layerDepth);
+                }
+            });
+        };
+        TiledRendering.renderLayer = function (layer, position, scale, layerDepth) {
+            if (!layer.visible)
+                return;
+            var tileWidth = layer.map.tileWidth * scale.x;
+            var tileHeight = layer.map.tileHeight * scale.y;
+            var color = new es.Color(0, 0, 0, layer.opacity * 255);
+            for (var i = 0; i < layer.tiles.length; i++) {
+                var tile = layer.tiles[i];
+                if (!tile)
+                    continue;
+                this.renderTile(tile, position, scale, tileWidth, tileHeight, color, layerDepth);
+            }
+        };
+        TiledRendering.renderImageLayer = function (layer, position, scale, layerDepth) {
+            if (!layer.visible)
+                return;
+            var color = new es.Color(0, 0, 0, layer.opacity * 255);
+            var pos = es.Vector2.add(position, new es.Vector2(layer.offsetX, layer.offsetY).multiply(scale));
+        };
+        TiledRendering.renderObjectGroup = function (objGroup, position, scale, layerDepth) {
+            if (!objGroup.visible)
+                return;
+            for (var object in objGroup.objects) {
+                var obj = objGroup.objects.get(object);
+                if (!obj.visible)
+                    continue;
+                var pos = es.Vector2.add(position, new es.Vector2(obj.x, obj.y).multiply(scale));
+                switch (obj.objectType) {
+                    case es.TmxObjectType.basic:
+                        break;
+                    case es.TmxObjectType.point:
+                        var size = objGroup.map.tileWidth * 0.5;
+                        pos.x -= size * 0.5;
+                        pos.y -= size * 0.5;
+                        break;
+                    case es.TmxObjectType.tile:
+                        var tileset = objGroup.map.getTilesetForTileGid(obj.tile.gid);
+                        var sourceRect = tileset.tileRegions[obj.tile.gid];
+                        pos.y -= obj.tile.tilesetTile.image.height;
+                        break;
+                    case es.TmxObjectType.ellipse:
+                        pos = new es.Vector2(obj.x + obj.width * 0.5, obj.y + obj.height * 0.5).multiply(scale);
+                        break;
+                    case es.TmxObjectType.polygon:
+                    case es.TmxObjectType.polyline:
+                        var points = [];
+                        for (var i = 0; i < obj.points.length; i++)
+                            points[i] = es.Vector2.multiply(obj.points[i], scale);
+                        break;
+                    case es.TmxObjectType.text:
+                        break;
+                    default:
+                        break;
+                }
+            }
+        };
+        TiledRendering.renderGroup = function (group, position, scale, layerDepth) {
+            var _this = this;
+            if (!group.visible)
+                return;
+            group.layers.forEach(function (layer) {
+                if (layer instanceof es.TmxGroup) {
+                    _this.renderGroup(layer, position, scale, layerDepth);
+                }
+                if (layer instanceof es.TmxObjectGroup) {
+                    _this.renderObjectGroup(layer, position, scale, layerDepth);
+                }
+                if (layer instanceof es.TmxLayer) {
+                    _this.renderLayer(layer, position, scale, layerDepth);
+                }
+                if (layer instanceof es.TmxImageLayer) {
+                    _this.renderImageLayer(layer, position, scale, layerDepth);
+                }
+            });
+        };
+        TiledRendering.renderTile = function (tile, position, scale, tileWidth, tileHeight, color, layerDepth) {
+            var gid = tile.gid;
+            var tilesetTile = tile.tilesetTile;
+            if (tilesetTile && tilesetTile.animationFrames.length > 0)
+                gid = tilesetTile.currentAnimationFrameGid;
+            var sourceRect = tile.tileset.tileRegions.get(gid);
+            var tx = tile.x * tileWidth;
+            var ty = tile.y * tileHeight;
+            var rotation = 0;
+            if (tile.diagonalFlip) {
+                if (tile.horizontalFlip && tile.verticalFlip) {
+                    rotation = es.MathHelper.PiOver2;
+                    tx += tileHeight + (sourceRect.height * scale.y - tileHeight);
+                    ty -= (sourceRect.width * scale.x - tileWidth);
+                }
+                else if (tile.horizontalFlip) {
+                    rotation = -es.MathHelper.PiOver2;
+                    ty += tileHeight;
+                }
+                else if (tile.verticalFlip) {
+                    rotation = es.MathHelper.PiOver2;
+                    tx += tileWidth + (sourceRect.height * scale.y - tileHeight);
+                    ty += (tileWidth - sourceRect.width * scale.x);
+                }
+                else {
+                    rotation = -es.MathHelper.PiOver2;
+                    ty += tileHeight;
+                }
+            }
+            if (rotation == 0)
+                ty += (tileHeight - sourceRect.height * scale.y);
+            var pos = new es.Vector2(tx, ty).add(position);
+            if (tile.tileset.image) {
+            }
+            else {
+            }
+        };
+        return TiledRendering;
+    }());
+    es.TiledRendering = TiledRendering;
+})(es || (es = {}));
+var es;
 (function (es) {
     var TmxTileset = (function (_super) {
         __extends(TmxTileset, _super);
@@ -7982,6 +8307,78 @@ var Base64Utils = (function () {
     return Base64Utils;
 }());
 var es;
+(function (es) {
+    var Color = (function () {
+        function Color(r, g, b, alpha) {
+            if (((r | g | b | alpha) & 0xFFFFFF00) != 0) {
+                var clampedR = es.MathHelper.clamp(r, 0, 255);
+                var clampedG = es.MathHelper.clamp(g, 0, 255);
+                var clampedB = es.MathHelper.clamp(b, 0, 255);
+                var clampedA = es.MathHelper.clamp(alpha, 0, 255);
+                this._packedValue = (clampedA << 24) | (clampedB << 16) | (clampedG << 8) | (clampedR);
+            }
+            else {
+                this._packedValue = (alpha << 24) | (b << 16) | (g << 8) | r;
+            }
+        }
+        Object.defineProperty(Color.prototype, "b", {
+            get: function () {
+                return this._packedValue >> 16;
+            },
+            set: function (value) {
+                this._packedValue = (this._packedValue & 0xff00ffff) | (value << 16);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Color.prototype, "g", {
+            get: function () {
+                return this._packedValue >> 8;
+            },
+            set: function (value) {
+                this._packedValue = (this._packedValue & 0xffff00ff) | (value << 8);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Color.prototype, "r", {
+            get: function () {
+                return this._packedValue;
+            },
+            set: function (value) {
+                this._packedValue = (this._packedValue & 0xffffff00) | value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Color.prototype, "a", {
+            get: function () {
+                return this._packedValue >> 24;
+            },
+            set: function (value) {
+                this._packedValue = (this._packedValue & 0x00ffffff) | (value << 24);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Color.prototype, "packedValue", {
+            get: function () {
+                return this._packedValue;
+            },
+            set: function (value) {
+                this._packedValue = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Color.prototype.equals = function (other) {
+            return this._packedValue == other._packedValue;
+        };
+        return Color;
+    }());
+    es.Color = Color;
+})(es || (es = {}));
+var es;
 (function (es) {
     var ContentManager = (function () {
         function ContentManager() {

source/bin/framework.d.ts

@@ -725,6 +725,31 @@ declare module es {
         collisionRectForSide(side: Edge, motion: number): Rectangle;
     }
 }
+declare module es {
+    class TiledMapRenderer extends RenderableComponent {
+        tiledMap: TmxMap;
+        physicsLayer: number;
+        layerIndicesToRender: number[];
+        readonly width: number;
+        readonly height: number;
+        collisionLayer: TmxLayer;
+        _shouldCreateColliders: boolean;
+        _colliders: Collider[];
+        constructor(tiledMap: TmxMap, collisionLayerName?: string, shouldCreateColliders?: boolean);
+        setLayerToRender(layerName: string): void;
+        setLayersToRender(...layerNames: string[]): void;
+        private getLayerIndex;
+        getRowAtWorldPosition(yPos: number): number;
+        getColumnAtWorldPosition(xPos: number): number;
+        onEntityTransformChanged(comp: transform.Component): void;
+        onAddedToEntity(): void;
+        onRemovedFromEntity(): void;
+        update(): void;
+        render(camera: es.Camera): void;
+        addColliders(): void;
+        removeColliders(): void;
+    }
+}
 declare module es {
     interface ITriggerListener {
         onTriggerEnter(other: Collider, local: Collider): any;
@@ -787,6 +812,7 @@ declare module es {
         constructor();
         width: number;
         height: number;
+        createBoxRect(x: number, y: number, width: number, height: number): BoxCollider;
         setSize(width: number, height: number): this;
         setWidth(width: number): BoxCollider;
         setHeight(height: number): void;
@@ -1224,6 +1250,7 @@ declare module es {
         static readonly Epsilon: number;
         static readonly Rad2Deg: number;
         static readonly Deg2Rad: number;
+        static readonly PiOver2: number;
         static toDegrees(radians: number): number;
         static toRadians(degrees: number): number;
         static map(value: number, leftMin: number, leftMax: number, rightMin: number, rightMax: number): number;
@@ -1568,6 +1595,9 @@ declare module es {
         height: number;
         tiles: TmxLayerTile[];
         getTileWithGid(gid: number): TmxLayerTile;
+        getTile(x: number, y: number): TmxLayerTile;
+        getCollisionRectangles(): Rectangle[];
+        findBoundsRect(startX: number, endX: number, startY: number, checkedIndexes?: boolean[]): Rectangle;
     }
     class TmxLayerTile {
         static readonly FLIPPED_HORIZONTALLY_FLAG: number;
@@ -1638,6 +1668,9 @@ declare module es {
         maxTileHeight: number;
         readonly requiresLargeTileCulling: boolean;
         getTilesetForTileGid(gid: number): TmxTileset;
+        worldToTilePositionX(x: number, clampToTilemapBounds?: boolean): number;
+        worldToTilePositionY(y: number, clampToTilemapBounds?: boolean): number;
+        getLayer(name: string): ITmxLayer;
         update(): void;
         _isDisposed: any;
         dispose(disposing?: boolean): void;
@@ -1690,6 +1723,8 @@ declare module es {
         tile: TmxLayerTile;
         visible: boolean;
         text: TmxText;
+        points: Vector2[];
+        properties: Map<string, string>;
     }
     class TmxText {
         fontFamily: string;
@@ -1734,6 +1769,16 @@ declare module es {
         bottom = 2
     }
 }
+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;
+    }
+}
 declare module es {
     class TmxTileset extends TmxDocument implements ITmxElement {
         map: TmxMap;
@@ -1815,6 +1860,18 @@ declare class Base64Utils {
     private static _utf8_decode;
     private static getConfKey;
 }
+declare module es {
+    class Color {
+        private _packedValue;
+        constructor(r: number, g: number, b: number, alpha: number);
+        b: number;
+        g: number;
+        r: number;
+        a: number;
+        packedValue: number;
+        equals(other: Color): boolean;
+    }
+}
 declare module es {
     class ContentManager {
         protected loadedAssets: Map<string, any>;

source/bin/framework.js

@@ -3286,6 +3286,120 @@ var es;
     es.TiledMapMover = TiledMapMover;
 })(es || (es = {}));
 var es;
+(function (es) {
+    var TiledMapRenderer = (function (_super) {
+        __extends(TiledMapRenderer, _super);
+        function TiledMapRenderer(tiledMap, collisionLayerName, shouldCreateColliders) {
+            if (collisionLayerName === void 0) { collisionLayerName = null; }
+            if (shouldCreateColliders === void 0) { shouldCreateColliders = true; }
+            var _this = _super.call(this) || this;
+            _this.physicsLayer = 1 << 0;
+            _this.tiledMap = tiledMap;
+            _this._shouldCreateColliders = shouldCreateColliders;
+            if (collisionLayerName) {
+                _this.collisionLayer = tiledMap.tileLayers.get(collisionLayerName);
+            }
+            return _this;
+        }
+        Object.defineProperty(TiledMapRenderer.prototype, "width", {
+            get: function () {
+                return this.tiledMap.width * this.tiledMap.tileWidth;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(TiledMapRenderer.prototype, "height", {
+            get: function () {
+                return this.tiledMap.height * this.tiledMap.tileHeight;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        TiledMapRenderer.prototype.setLayerToRender = function (layerName) {
+            this.layerIndicesToRender = [];
+            this.layerIndicesToRender[0] = this.getLayerIndex(layerName);
+        };
+        TiledMapRenderer.prototype.setLayersToRender = function () {
+            var layerNames = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                layerNames[_i] = arguments[_i];
+            }
+            this.layerIndicesToRender = [];
+            for (var i = 0; i < layerNames.length; i++)
+                this.layerIndicesToRender[i] = this.getLayerIndex(layerNames[i]);
+        };
+        TiledMapRenderer.prototype.getLayerIndex = function (layerName) {
+            var index = 0;
+            var layerType = this.tiledMap.getLayer(layerName);
+            for (var layer in this.tiledMap.layers) {
+                if (this.tiledMap.layers.hasOwnProperty(layer) &&
+                    this.tiledMap.layers.get(layer) == layerType) {
+                    return index;
+                }
+            }
+            return -1;
+        };
+        TiledMapRenderer.prototype.getRowAtWorldPosition = function (yPos) {
+            yPos -= this.entity.transform.position.y + this._localOffset.y;
+            return this.tiledMap.worldToTilePositionY(yPos);
+        };
+        TiledMapRenderer.prototype.getColumnAtWorldPosition = function (xPos) {
+            xPos -= this.entity.transform.position.x + this._localOffset.x;
+            return this.tiledMap.worldToTilePositionX(xPos);
+        };
+        TiledMapRenderer.prototype.onEntityTransformChanged = function (comp) {
+            if (this._shouldCreateColliders && comp == transform.Component.position) {
+                this.removeColliders();
+                this.addColliders();
+            }
+        };
+        TiledMapRenderer.prototype.onAddedToEntity = function () {
+            this.addColliders();
+        };
+        TiledMapRenderer.prototype.onRemovedFromEntity = function () {
+            this.removeColliders();
+        };
+        TiledMapRenderer.prototype.update = function () {
+            this.tiledMap.update();
+        };
+        TiledMapRenderer.prototype.render = function (camera) {
+            if (!this.layerIndicesToRender) {
+                es.TiledRendering.renderMap(this.tiledMap, es.Vector2.add(this.entity.transform.position, this._localOffset), this.transform.scale, this.renderLayer);
+            }
+            else {
+                for (var i = 0; i < this.tiledMap.layers.size; i++) {
+                    if (this.tiledMap.layers.get(i.toString()).visible && this.layerIndicesToRender.contains(i))
+                        es.TiledRendering.renderLayer(this.tiledMap.layers.get(i.toString()), es.Vector2.add(this.entity.transform.position, this._localOffset), this.transform.scale, this.renderLayer);
+                }
+            }
+        };
+        TiledMapRenderer.prototype.addColliders = function () {
+            if (!this.collisionLayer || !this._shouldCreateColliders)
+                return;
+            var collisionRects = this.collisionLayer.getCollisionRectangles();
+            this._colliders = [];
+            for (var i = 0; i < collisionRects.length; i++) {
+                var collider = new es.BoxCollider().createBoxRect(collisionRects[i].x + this._localOffset.x, collisionRects[i].y + this._localOffset.y, collisionRects[i].width, collisionRects[i].height);
+                collider.physicsLayer = this.physicsLayer;
+                collider.entity = this.entity;
+                this._colliders[i] = collider;
+                es.Physics.addCollider(collider);
+            }
+        };
+        TiledMapRenderer.prototype.removeColliders = function () {
+            if (this._colliders == null)
+                return;
+            for (var _i = 0, _a = this._colliders; _i < _a.length; _i++) {
+                var collider = _a[_i];
+                es.Physics.removeCollider(collider);
+            }
+            this._colliders = null;
+        };
+        return TiledMapRenderer;
+    }(es.RenderableComponent));
+    es.TiledMapRenderer = TiledMapRenderer;
+})(es || (es = {}));
+var es;
 (function (es) {
     var Mover = (function (_super) {
         __extends(Mover, _super);
@@ -3568,6 +3682,12 @@ var es;
             enumerable: true,
             configurable: true
         });
+        BoxCollider.prototype.createBoxRect = function (x, y, width, height) {
+            this._localOffset = new es.Vector2(x + width / 2, y + width / 2);
+            this.shape = new es.Box(width, height);
+            this._colliderRequiresAutoSizing = false;
+            return this;
+        };
         BoxCollider.prototype.setSize = function (width, height) {
             this._colliderRequiresAutoSizing = false;
             var box = this.shape;
@@ -5719,6 +5839,7 @@ var es;
         MathHelper.Epsilon = 0.00001;
         MathHelper.Rad2Deg = 57.29578;
         MathHelper.Deg2Rad = 0.0174532924;
+        MathHelper.PiOver2 = Math.PI / 2;
         return MathHelper;
     }());
     es.MathHelper = MathHelper;
@@ -7381,6 +7502,55 @@ var es;
             }
             return null;
         };
+        TmxLayer.prototype.getTile = function (x, y) {
+            return this.tiles[x + y * this.width];
+        };
+        TmxLayer.prototype.getCollisionRectangles = function () {
+            var checkedIndexes = [];
+            var rectangles = [];
+            var startCol = -1;
+            var index = -1;
+            for (var y = 0; y < this.map.height; y++) {
+                for (var x = 0; x < this.map.width; x++) {
+                    index = y * this.map.width + x;
+                    var tile = this.getTile(x, y);
+                    if (tile && !checkedIndexes[index]) {
+                        if (startCol < 0)
+                            startCol = x;
+                        checkedIndexes[index] = true;
+                    }
+                    else if (tile || checkedIndexes[index]) {
+                        if (startCol >= 0) {
+                            rectangles.push(this.findBoundsRect(startCol, x, y, checkedIndexes));
+                            startCol = -1;
+                        }
+                    }
+                }
+                if (startCol >= 0) {
+                    rectangles.push(this.findBoundsRect(startCol, this.map.width, y, checkedIndexes));
+                    startCol = -1;
+                }
+            }
+            return rectangles;
+        };
+        TmxLayer.prototype.findBoundsRect = function (startX, endX, startY, checkedIndexes) {
+            var index = -1;
+            for (var y = startY + 1; y < this.map.height; y++) {
+                for (var x = startX; x < endX; x++) {
+                    index = y * this.map.width + x;
+                    var tile = this.getTile(x, y);
+                    if (tile || checkedIndexes[index]) {
+                        for (var _x = startX; _x < x; _x++) {
+                            index = y * this.map.width + _x;
+                            checkedIndexes[index] = false;
+                        }
+                        return new es.Rectangle(startX * this.map.tileWidth, startY * this.map.tileHeight, (endX - startX) * this.map.tileWidth, (y - startY) * this.map.tileHeight);
+                    }
+                    checkedIndexes[index] = true;
+                }
+            }
+            return new es.Rectangle(startX * this.map.tileWidth, startY * this.map.tileHeight, (endX - startX) * this.map.tileWidth, (this.map.height - startY) * this.map.tileHeight);
+        };
         return TmxLayer;
     }());
     es.TmxLayer = TmxLayer;
@@ -7518,6 +7688,23 @@ var es;
             }
             console.error("tile gid" + gid + "\u672A\u5728\u4EFB\u4F55tileset\u4E2D\u627E\u5230");
         };
+        TmxMap.prototype.worldToTilePositionX = function (x, clampToTilemapBounds) {
+            if (clampToTilemapBounds === void 0) { clampToTilemapBounds = true; }
+            var tileX = Math.floor(x / this.tileWidth);
+            if (!clampToTilemapBounds)
+                return tileX;
+            return es.MathHelper.clamp(tileX, 0, this.width - 1);
+        };
+        TmxMap.prototype.worldToTilePositionY = function (y, clampToTilemapBounds) {
+            if (clampToTilemapBounds === void 0) { clampToTilemapBounds = true; }
+            var tileY = Math.floor(y / this.tileHeight);
+            if (!clampToTilemapBounds)
+                return tileY;
+            return es.MathHelper.clamp(tileY, 0, this.height - 1);
+        };
+        TmxMap.prototype.getLayer = function (name) {
+            return this.layers.get(name);
+        };
         TmxMap.prototype.update = function () {
             this.tilesets.forEach(function (tileset) { tileset.update(); });
         };
@@ -7619,6 +7806,144 @@ var es;
     })(TmxVerticalAlignment = es.TmxVerticalAlignment || (es.TmxVerticalAlignment = {}));
 })(es || (es = {}));
 var es;
+(function (es) {
+    var TiledRendering = (function () {
+        function TiledRendering() {
+        }
+        TiledRendering.renderMap = function (map, position, scale, layerDepth) {
+            var _this = this;
+            map.layers.forEach(function (layer) {
+                if (layer instanceof es.TmxLayer && layer.visible) {
+                    _this.renderLayer(layer, position, scale, layerDepth);
+                }
+                else if (layer instanceof es.TmxImageLayer && layer.visible) {
+                    _this.renderImageLayer(layer, position, scale, layerDepth);
+                }
+                else if (layer instanceof es.TmxGroup && layer.visible) {
+                    _this.renderGroup(layer, position, scale, layerDepth);
+                }
+                else if (layer instanceof es.TmxObjectGroup && layer.visible) {
+                    _this.renderObjectGroup(layer, position, scale, layerDepth);
+                }
+            });
+        };
+        TiledRendering.renderLayer = function (layer, position, scale, layerDepth) {
+            if (!layer.visible)
+                return;
+            var tileWidth = layer.map.tileWidth * scale.x;
+            var tileHeight = layer.map.tileHeight * scale.y;
+            var color = new es.Color(0, 0, 0, layer.opacity * 255);
+            for (var i = 0; i < layer.tiles.length; i++) {
+                var tile = layer.tiles[i];
+                if (!tile)
+                    continue;
+                this.renderTile(tile, position, scale, tileWidth, tileHeight, color, layerDepth);
+            }
+        };
+        TiledRendering.renderImageLayer = function (layer, position, scale, layerDepth) {
+            if (!layer.visible)
+                return;
+            var color = new es.Color(0, 0, 0, layer.opacity * 255);
+            var pos = es.Vector2.add(position, new es.Vector2(layer.offsetX, layer.offsetY).multiply(scale));
+        };
+        TiledRendering.renderObjectGroup = function (objGroup, position, scale, layerDepth) {
+            if (!objGroup.visible)
+                return;
+            for (var object in objGroup.objects) {
+                var obj = objGroup.objects.get(object);
+                if (!obj.visible)
+                    continue;
+                var pos = es.Vector2.add(position, new es.Vector2(obj.x, obj.y).multiply(scale));
+                switch (obj.objectType) {
+                    case es.TmxObjectType.basic:
+                        break;
+                    case es.TmxObjectType.point:
+                        var size = objGroup.map.tileWidth * 0.5;
+                        pos.x -= size * 0.5;
+                        pos.y -= size * 0.5;
+                        break;
+                    case es.TmxObjectType.tile:
+                        var tileset = objGroup.map.getTilesetForTileGid(obj.tile.gid);
+                        var sourceRect = tileset.tileRegions[obj.tile.gid];
+                        pos.y -= obj.tile.tilesetTile.image.height;
+                        break;
+                    case es.TmxObjectType.ellipse:
+                        pos = new es.Vector2(obj.x + obj.width * 0.5, obj.y + obj.height * 0.5).multiply(scale);
+                        break;
+                    case es.TmxObjectType.polygon:
+                    case es.TmxObjectType.polyline:
+                        var points = [];
+                        for (var i = 0; i < obj.points.length; i++)
+                            points[i] = es.Vector2.multiply(obj.points[i], scale);
+                        break;
+                    case es.TmxObjectType.text:
+                        break;
+                    default:
+                        break;
+                }
+            }
+        };
+        TiledRendering.renderGroup = function (group, position, scale, layerDepth) {
+            var _this = this;
+            if (!group.visible)
+                return;
+            group.layers.forEach(function (layer) {
+                if (layer instanceof es.TmxGroup) {
+                    _this.renderGroup(layer, position, scale, layerDepth);
+                }
+                if (layer instanceof es.TmxObjectGroup) {
+                    _this.renderObjectGroup(layer, position, scale, layerDepth);
+                }
+                if (layer instanceof es.TmxLayer) {
+                    _this.renderLayer(layer, position, scale, layerDepth);
+                }
+                if (layer instanceof es.TmxImageLayer) {
+                    _this.renderImageLayer(layer, position, scale, layerDepth);
+                }
+            });
+        };
+        TiledRendering.renderTile = function (tile, position, scale, tileWidth, tileHeight, color, layerDepth) {
+            var gid = tile.gid;
+            var tilesetTile = tile.tilesetTile;
+            if (tilesetTile && tilesetTile.animationFrames.length > 0)
+                gid = tilesetTile.currentAnimationFrameGid;
+            var sourceRect = tile.tileset.tileRegions.get(gid);
+            var tx = tile.x * tileWidth;
+            var ty = tile.y * tileHeight;
+            var rotation = 0;
+            if (tile.diagonalFlip) {
+                if (tile.horizontalFlip && tile.verticalFlip) {
+                    rotation = es.MathHelper.PiOver2;
+                    tx += tileHeight + (sourceRect.height * scale.y - tileHeight);
+                    ty -= (sourceRect.width * scale.x - tileWidth);
+                }
+                else if (tile.horizontalFlip) {
+                    rotation = -es.MathHelper.PiOver2;
+                    ty += tileHeight;
+                }
+                else if (tile.verticalFlip) {
+                    rotation = es.MathHelper.PiOver2;
+                    tx += tileWidth + (sourceRect.height * scale.y - tileHeight);
+                    ty += (tileWidth - sourceRect.width * scale.x);
+                }
+                else {
+                    rotation = -es.MathHelper.PiOver2;
+                    ty += tileHeight;
+                }
+            }
+            if (rotation == 0)
+                ty += (tileHeight - sourceRect.height * scale.y);
+            var pos = new es.Vector2(tx, ty).add(position);
+            if (tile.tileset.image) {
+            }
+            else {
+            }
+        };
+        return TiledRendering;
+    }());
+    es.TiledRendering = TiledRendering;
+})(es || (es = {}));
+var es;
 (function (es) {
     var TmxTileset = (function (_super) {
         __extends(TmxTileset, _super);
@@ -7982,6 +8307,78 @@ var Base64Utils = (function () {
     return Base64Utils;
 }());
 var es;
+(function (es) {
+    var Color = (function () {
+        function Color(r, g, b, alpha) {
+            if (((r | g | b | alpha) & 0xFFFFFF00) != 0) {
+                var clampedR = es.MathHelper.clamp(r, 0, 255);
+                var clampedG = es.MathHelper.clamp(g, 0, 255);
+                var clampedB = es.MathHelper.clamp(b, 0, 255);
+                var clampedA = es.MathHelper.clamp(alpha, 0, 255);
+                this._packedValue = (clampedA << 24) | (clampedB << 16) | (clampedG << 8) | (clampedR);
+            }
+            else {
+                this._packedValue = (alpha << 24) | (b << 16) | (g << 8) | r;
+            }
+        }
+        Object.defineProperty(Color.prototype, "b", {
+            get: function () {
+                return this._packedValue >> 16;
+            },
+            set: function (value) {
+                this._packedValue = (this._packedValue & 0xff00ffff) | (value << 16);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Color.prototype, "g", {
+            get: function () {
+                return this._packedValue >> 8;
+            },
+            set: function (value) {
+                this._packedValue = (this._packedValue & 0xffff00ff) | (value << 8);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Color.prototype, "r", {
+            get: function () {
+                return this._packedValue;
+            },
+            set: function (value) {
+                this._packedValue = (this._packedValue & 0xffffff00) | value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Color.prototype, "a", {
+            get: function () {
+                return this._packedValue >> 24;
+            },
+            set: function (value) {
+                this._packedValue = (this._packedValue & 0x00ffffff) | (value << 24);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Color.prototype, "packedValue", {
+            get: function () {
+                return this._packedValue;
+            },
+            set: function (value) {
+                this._packedValue = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Color.prototype.equals = function (other) {
+            return this._packedValue == other._packedValue;
+        };
+        return Color;
+    }());
+    es.Color = Color;
+})(es || (es = {}));
+var es;
 (function (es) {
     var ContentManager = (function () {
         function ContentManager() {

source/src/ECS/Components/Physics/Colliders/BoxCollider.ts

@@ -28,6 +28,20 @@ module es {
             this.setHeight(value);
         }
 
+        /**
+         * 创建一个BoxCollider并使用x/y组件作为localOffset
+         * @param x
+         * @param y
+         * @param width
+         * @param height
+         */
+        public createBoxRect(x: number, y: number, width: number, height: number): BoxCollider{
+            this._localOffset = new Vector2(x + width / 2, y + width / 2);
+            this.shape = new Box(width, height);
+            this._colliderRequiresAutoSizing = false;
+            return this;
+        }
+
         /**
          * 设置BoxCollider的大小
          * @param width

source/src/ECS/Components/TiledMapRenderer.ts

@@ -0,0 +1,135 @@
+module es {
+    export class TiledMapRenderer extends RenderableComponent{
+        public tiledMap: TmxMap;
+        public physicsLayer: number = 1 << 0;
+        /**
+         * 如果空，所有层将被渲染
+         */
+        public layerIndicesToRender: number[];
+        public get width(){
+            return this.tiledMap.width * this.tiledMap.tileWidth;
+        }
+        public get height(){
+            return this.tiledMap.height * this.tiledMap.tileHeight;
+        }
+
+        public collisionLayer: TmxLayer;
+        public _shouldCreateColliders: boolean;
+        public _colliders: Collider[];
+
+        constructor(tiledMap: TmxMap, collisionLayerName: string = null, shouldCreateColliders: boolean = true){
+            super();
+            this.tiledMap = tiledMap;
+            this._shouldCreateColliders = shouldCreateColliders;
+
+            if (collisionLayerName){
+                this.collisionLayer = tiledMap.tileLayers.get(collisionLayerName);
+            }
+        }
+
+        /**
+         * 将此组件设置为只渲染单层
+         * @param layerName
+         */
+        public setLayerToRender(layerName: string){
+            this.layerIndicesToRender = [];
+            this.layerIndicesToRender[0] = this.getLayerIndex(layerName);
+        }
+
+        /**
+         * 设置该组件应该按名称呈现哪些层。如果你知道索引，你可以直接设置layerIndicesToRender
+         * @param layerNames
+         */
+        public setLayersToRender(...layerNames: string[]){
+            this.layerIndicesToRender = [];
+            for (let i = 0; i < layerNames.length; i ++)
+                this.layerIndicesToRender[i] = this.getLayerIndex(layerNames[i]);
+        }
+
+        private getLayerIndex(layerName: string){
+            let index = 0;
+            let layerType = this.tiledMap.getLayer(layerName);
+            for (let layer in this.tiledMap.layers){
+                if (this.tiledMap.layers.hasOwnProperty(layer) &&
+                    this.tiledMap.layers.get(layer) == layerType){
+                    return index;
+                }
+            }
+
+            return -1;
+        }
+
+        public getRowAtWorldPosition(yPos: number): number {
+            yPos -= this.entity.transform.position.y + this._localOffset.y;
+            return this.tiledMap.worldToTilePositionY(yPos);
+        }
+
+        public getColumnAtWorldPosition(xPos: number): number{
+            xPos -= this.entity.transform.position.x + this._localOffset.x;
+            return this.tiledMap.worldToTilePositionX(xPos);
+        }
+
+        public onEntityTransformChanged(comp: transform.Component) {
+            // 这里我们只处理位置变化。平铺地图不能缩放
+            if (this._shouldCreateColliders && comp == transform.Component.position){
+                this.removeColliders();
+                this.addColliders();
+            }
+        }
+
+        public onAddedToEntity() {
+            this.addColliders();
+        }
+
+        public onRemovedFromEntity() {
+            this.removeColliders();
+        }
+
+        public update() {
+            this.tiledMap.update();
+        }
+
+        public render(camera: es.Camera) {
+            if (!this.layerIndicesToRender){
+                TiledRendering.renderMap(this.tiledMap, Vector2.add(this.entity.transform.position, this._localOffset),
+                    this.transform.scale, this.renderLayer);
+            }else{
+                for (let i = 0; i < this.tiledMap.layers.size; i ++){
+                    if (this.tiledMap.layers.get(i.toString()).visible && this.layerIndicesToRender.contains(i))
+                        TiledRendering.renderLayer(this.tiledMap.layers.get(i.toString()), Vector2.add(this.entity.transform.position, this._localOffset),
+                            this.transform.scale, this.renderLayer);
+                }
+            }
+        }
+
+        public addColliders(){
+            if (!this.collisionLayer || !this._shouldCreateColliders)
+                return;
+
+            // 获取冲突层及其冲突的矩形
+            let collisionRects = this.collisionLayer.getCollisionRectangles();
+
+            // 为我们收到的矩形创建碰撞器
+            this._colliders = [];
+            for (let i = 0; i < collisionRects.length; i ++){
+                let collider = new BoxCollider().createBoxRect(collisionRects[i].x + this._localOffset.x,
+                    collisionRects[i].y + this._localOffset.y, collisionRects[i].width, collisionRects[i].height);
+                collider.physicsLayer = this.physicsLayer;
+                collider.entity = this.entity;
+                this._colliders[i] = collider;
+
+                Physics.addCollider(collider);
+            }
+        }
+
+        public removeColliders(){
+            if (this._colliders == null)
+                return;
+
+            for (let collider of this._colliders){
+                Physics.removeCollider(collider);
+            }
+            this._colliders = null;
+        }
+    }
+}

source/src/Math/MathHelper.ts

@@ -3,6 +3,10 @@ module es {
         public static readonly Epsilon: number = 0.00001;
         public static readonly Rad2Deg = 57.29578;
         public static readonly Deg2Rad = 0.0174532924;
+        /**
+         * 表示pi除以2的值(1.57079637)
+         */
+        public static readonly PiOver2 = Math.PI / 2;
 
         /**
          * 将弧度转换成角度。

source/src/Tiled/Layer.ts

@@ -33,6 +33,81 @@ module es {
 
             return null;
         }
+
+        /**
+         * 获取x/y坐标处的TmxLayerTile。注意，这些是平铺坐标而不是世界坐标!
+         * @param x
+         * @param y
+         */
+        public getTile(x: number, y: number): TmxLayerTile {
+            return this.tiles[x + y * this.width];
+        }
+
+        /**
+         * 返回平铺空间中的矩形列表，其中任何非空平铺组合为边界区域
+         */
+        public getCollisionRectangles(): Rectangle[] {
+            let checkedIndexes = [];
+            let rectangles = [];
+            let startCol = -1;
+            let index = -1;
+
+            for (let y = 0; y < this.map.height; y ++){
+                for (let x = 0; x< this.map.width; x ++){
+                    index = y * this.map.width + x;
+                    let tile = this.getTile(x,  y);
+                    if (tile && !checkedIndexes[index]){
+                        if (startCol < 0)
+                            startCol = x;
+                        checkedIndexes[index] = true;
+                    }else if(tile || checkedIndexes[index]){
+                        if (startCol >= 0){
+                            rectangles.push(this.findBoundsRect(startCol, x, y, checkedIndexes));
+                            startCol = -1;
+                        }
+                    }
+                }
+
+                if (startCol >= 0){
+                    rectangles.push(this.findBoundsRect(startCol, this.map.width, y, checkedIndexes));
+                    startCol = -1;
+                }
+            }
+
+            return rectangles;
+        }
+
+        /**
+         * 在startX和endX之间的tile周围找到最大的边界矩形，从startY开始，尽可能向下
+         * @param startX
+         * @param endX
+         * @param startY
+         * @param checkedIndexes
+         */
+        public findBoundsRect(startX: number, endX: number, startY: number, checkedIndexes?: boolean[]){
+            let index = -1;
+            for (let y = startY + 1; y < this.map.height; y ++){
+                for (let x = startX; x < endX; x ++){
+                    index = y * this.map.width + x;
+                    let tile = this.getTile(x, y);
+                    if (tile || checkedIndexes[index]){
+                        // 再次将我们到目前为止在这一行中访问过的所有内容设置为false，因为它不会包含在矩形中，应该再次进行检查
+                        for (let _x = startX; _x < x; _x++){
+                            index = y * this.map.width + _x;
+                            checkedIndexes[index] = false;
+                        }
+
+                        return new Rectangle(startX * this.map.tileWidth, startY * this.map.tileHeight,
+                            (endX - startX) * this.map.tileWidth, (y - startY) * this.map.tileHeight);
+                    }
+
+                    checkedIndexes[index] = true;
+                }
+            }
+
+            return new Rectangle(startX * this.map.tileWidth, startY * this.map.tileHeight,
+                (endX - startX) * this.map.tileWidth, (this.map.height - startY) * this.map.tileHeight);
+        }
     }
 
     export class TmxLayerTile {

source/src/Tiled/Map.ts

@@ -67,6 +67,38 @@ module es {
             console.error(`tile gid${gid}未在任何tileset中找到`);
         }
 
+        /**
+         * 转换从世界平铺位置获取tilemap边界
+         * @param x
+         * @param clampToTilemapBounds
+         */
+        public worldToTilePositionX(x: number, clampToTilemapBounds = true){
+            let tileX = Math.floor(x / this.tileWidth);
+            if (!clampToTilemapBounds)
+                return tileX;
+            return MathHelper.clamp(tileX, 0, this.width - 1);
+        }
+
+        /**
+         * 转换从世界平铺位置获取tilemap边界
+         * @param y
+         * @param clampToTilemapBounds
+         */
+        public worldToTilePositionY(y: number, clampToTilemapBounds = true){
+            let tileY = Math.floor(y / this.tileHeight);
+            if (!clampToTilemapBounds)
+                return tileY;
+            return MathHelper.clamp(tileY, 0, this.height - 1);
+        }
+
+        /**
+         * 按名称获取平铺层
+         * @param name
+         */
+        public getLayer(name: string): ITmxLayer {
+            return this.layers.get(name);
+        }
+
         /**
          * 更新他们的动画tile
          */

source/src/Tiled/ObjectGroup.ts

@@ -25,6 +25,8 @@ module es {
         public tile: TmxLayerTile;
         public visible: boolean;
         public text: TmxText;
+        public points: Vector2[];
+        public properties: Map<string, string>;
     }
 
     export class TmxText {

source/src/Tiled/TiledRendering.ts

@@ -0,0 +1,162 @@
+module es {
+    export class TiledRendering {
+        public static renderMap(map: TmxMap, position: Vector2, scale: Vector2, layerDepth: number) {
+            map.layers.forEach(layer => {
+                if (layer instanceof TmxLayer && layer.visible) {
+                    this.renderLayer(layer, position, scale, layerDepth);
+                } else if (layer instanceof TmxImageLayer && layer.visible) {
+                    this.renderImageLayer(layer, position, scale, layerDepth);
+                } else if (layer instanceof TmxGroup && layer.visible) {
+                    this.renderGroup(layer, position, scale, layerDepth);
+                } else if (layer instanceof TmxObjectGroup && layer.visible) {
+                    this.renderObjectGroup(layer, position, scale, layerDepth);
+                }
+            });
+        }
+
+        public static renderLayer(layer: TmxLayer, position: Vector2, scale: Vector2, layerDepth: number) {
+            if (!layer.visible)
+                return;
+
+            let tileWidth = layer.map.tileWidth * scale.x;
+            let tileHeight = layer.map.tileHeight * scale.y;
+
+            let color = new Color(0, 0, 0, layer.opacity * 255);
+            for (let i = 0; i < layer.tiles.length; i ++){
+                let tile = layer.tiles[i];
+                if (!tile)
+                    continue;
+
+                this.renderTile(tile, position, scale, tileWidth, tileHeight, color, layerDepth);
+            }
+        }
+
+
+        public static renderImageLayer(layer: TmxImageLayer, position: Vector2, scale: Vector2, layerDepth: number) {
+            if (!layer.visible)
+                return;
+
+            let color = new Color(0, 0, 0, layer.opacity * 255);
+            let pos = Vector2.add(position, new Vector2(layer.offsetX, layer.offsetY).multiply(scale));
+            // TODO: draw
+        }
+
+        public static renderObjectGroup(objGroup: TmxObjectGroup, position: Vector2, scale: Vector2, layerDepth: number) {
+            if (!objGroup.visible)
+                return;
+
+            for (let object in objGroup.objects) {
+                let obj = objGroup.objects.get(object);
+                if (!obj.visible)
+                    continue;
+
+                // TODO: debug draw
+
+                let pos = Vector2.add(position, new Vector2(obj.x, obj.y).multiply(scale));
+                switch (obj.objectType) {
+                    case TmxObjectType.basic:
+                        // TODO: draw
+                        break;
+                    case TmxObjectType.point:
+                        let size = objGroup.map.tileWidth * 0.5;
+                        pos.x -= size * 0.5;
+                        pos.y -= size * 0.5;
+                        // TODO: draw
+                        break;
+                    case TmxObjectType.tile:
+                        let tileset = objGroup.map.getTilesetForTileGid(obj.tile.gid);
+                        let sourceRect = tileset.tileRegions[obj.tile.gid];
+                        pos.y -= obj.tile.tilesetTile.image.height;
+                        // TODO: draw
+                        break;
+                    case TmxObjectType.ellipse:
+                        pos = new Vector2(obj.x + obj.width * 0.5, obj.y + obj.height * 0.5).multiply(scale);
+                        // TODO: draw
+                        break;
+                    case TmxObjectType.polygon:
+                    case TmxObjectType.polyline:
+                        let points = [];
+                        for (let i = 0; i < obj.points.length; i++)
+                            points[i] = Vector2.multiply(obj.points[i], scale);
+                        // TODO: draw
+                        break;
+                    case TmxObjectType.text:
+                        // TODO: draw
+                        break;
+                    default:
+                        // TODO: debug draw
+                        break;
+                }
+            }
+        }
+
+        public static renderGroup(group: TmxGroup, position: Vector2, scale: Vector2, layerDepth: number) {
+            if (!group.visible)
+                return;
+
+            group.layers.forEach(layer => {
+                if (layer instanceof TmxGroup) {
+                    this.renderGroup(layer, position, scale, layerDepth);
+                }
+
+                if (layer instanceof TmxObjectGroup) {
+                    this.renderObjectGroup(layer, position, scale,layerDepth);
+                }
+
+                if (layer instanceof TmxLayer){
+                    this.renderLayer(layer, position, scale, layerDepth);
+                }
+
+                if (layer instanceof TmxImageLayer){
+                    this.renderImageLayer(layer, position, scale, layerDepth);
+                }
+            });
+        }
+
+        public static renderTile(tile: TmxLayerTile, position: Vector2, scale: Vector2, tileWidth: number, tileHeight: number, color: Color, layerDepth: number) {
+            let gid = tile.gid;
+
+            // 动画tiles(以及来自图像tile的tiles)将位于Tileset本身内，位于单独的TmxTilesetTile对象中，不要与我们在此循环中处理的TmxLayerTiles混淆
+            let tilesetTile = tile.tilesetTile;
+            if (tilesetTile && tilesetTile.animationFrames.length > 0)
+                gid = tilesetTile.currentAnimationFrameGid;
+
+            let sourceRect = tile.tileset.tileRegions.get(gid);
+
+            // 对于y位置，我们需要考虑瓦片是否大于瓦片的高度和移位。
+            // tiled使用左下角的坐标系统，而egret则使用左上角的坐标系统
+            let tx = tile.x * tileWidth;
+            let ty = tile.y * tileHeight;
+            let rotation = 0;
+
+            if (tile.diagonalFlip) {
+                if (tile.horizontalFlip && tile.verticalFlip) {
+                    rotation = MathHelper.PiOver2;
+                    tx += tileHeight + (sourceRect.height * scale.y - tileHeight);
+                    ty -= (sourceRect.width * scale.x - tileWidth);
+                } else if (tile.horizontalFlip) {
+                    rotation = -MathHelper.PiOver2;
+                    ty += tileHeight;
+                } else if (tile.verticalFlip) {
+                    rotation = MathHelper.PiOver2;
+                    tx += tileWidth + (sourceRect.height * scale.y - tileHeight);
+                    ty += (tileWidth - sourceRect.width * scale.x);
+                } else {
+                    rotation = -MathHelper.PiOver2;
+                    ty += tileHeight;
+                }
+            }
+
+            // 如果我们没有旋转(对角线翻转)移动y轴
+            if (rotation == 0)
+                ty += (tileHeight - sourceRect.height * scale.y);
+
+            let pos = new Vector2(tx, ty).add(position);
+            if (tile.tileset.image) {
+                // TODO: draw
+            } else {
+                // TODO: draw
+            }
+        }
+    }
+}

source/src/Utils/Color.ts

@@ -0,0 +1,68 @@
+module es {
+    export class Color {
+        /**
+         * 存储为RGBA
+         */
+        private _packedValue: number;
+
+        /**
+         * 从代表红、绿、蓝和alpha值的标量构造RGBA颜色。
+         */
+        constructor(r: number, g: number,b: number, alpha: number){
+            if (((r | g |b | alpha) & 0xFFFFFF00) != 0){
+                let clampedR = MathHelper.clamp(r, 0, 255);
+                let clampedG = MathHelper.clamp(g, 0, 255);
+                let clampedB = MathHelper.clamp(b, 0, 255);
+                let clampedA = MathHelper.clamp(alpha, 0, 255);
+
+                this._packedValue = (clampedA << 24) | (clampedB << 16) | (clampedG << 8) | (clampedR);
+            }else{
+                this._packedValue = (alpha << 24 ) | (b << 16) | (g << 8) | r;
+            }
+        }
+
+        public get b(){
+            return this._packedValue >> 16;
+        }
+
+        public set b(value: number){
+            this._packedValue = (this._packedValue & 0xff00ffff) | (value << 16);
+        }
+
+        public get g(){
+            return this._packedValue >> 8;
+        }
+
+        public set g(value: number){
+            this._packedValue = (this._packedValue & 0xffff00ff) | (value << 8)
+        }
+
+        public get r(){
+            return this._packedValue;
+        }
+
+        public set r(value: number){
+            this._packedValue = (this._packedValue & 0xffffff00) | value;
+        }
+
+        public get a(){
+            return this._packedValue >> 24;
+        }
+
+        public set a(value: number){
+            this._packedValue = (this._packedValue & 0x00ffffff) | (value << 24);
+        }
+
+        public get packedValue(){
+            return this._packedValue;
+        }
+
+        public set packedValue(value: number){
+            this._packedValue = value;
+        }
+
+        public equals(other: Color):boolean{
+            return this._packedValue == other._packedValue;
+        }
+    }
+}