#28 tiled 数据解析与渲染

source/src/ECS/Components/TiledMapRenderer.ts

@@ -1,15 +1,17 @@
 module es {
-    export class TiledMapRenderer extends RenderableComponent{
+    export class TiledMapRenderer extends RenderableComponent {
         public tiledMap: TmxMap;
         public physicsLayer: number = 1 << 0;
         /**
          * 如果空，所有层将被渲染
          */
         public layerIndicesToRender: number[];
-        public get width(){
+
+        public get width() {
             return this.tiledMap.width * this.tiledMap.tileWidth;
         }
-        public get height(){
+
+        public get height() {
             return this.tiledMap.height * this.tiledMap.tileHeight;
         }
 
@@ -17,13 +19,14 @@ module es {
         public _shouldCreateColliders: boolean;
         public _colliders: Collider[];
 
-        constructor(tiledMap: TmxMap, collisionLayerName: string = null, shouldCreateColliders: boolean = true){
+        constructor(tiledMap: TmxMap, collisionLayerName: string = null, shouldCreateColliders: boolean = true) {
             super();
             this.tiledMap = tiledMap;
             this._shouldCreateColliders = shouldCreateColliders;
+            this.displayObject = new egret.DisplayObjectContainer();
 
-            if (collisionLayerName){
-                this.collisionLayer = tiledMap.tileLayers.get(collisionLayerName);
+            if (collisionLayerName) {
+                this.collisionLayer = tiledMap.tileLayers[collisionLayerName];
             }
         }
 
@@ -31,7 +34,7 @@ module es {
          * 将此组件设置为只渲染单层
          * @param layerName
          */
-        public setLayerToRender(layerName: string){
+        public setLayerToRender(layerName: string) {
             this.layerIndicesToRender = [];
             this.layerIndicesToRender[0] = this.getLayerIndex(layerName);
         }
@@ -40,18 +43,18 @@ module es {
          * 设置该组件应该按名称呈现哪些层。如果你知道索引，你可以直接设置layerIndicesToRender
          * @param layerNames
          */
-        public setLayersToRender(...layerNames: string[]){
+        public setLayersToRender(...layerNames: string[]) {
             this.layerIndicesToRender = [];
-            for (let i = 0; i < layerNames.length; i ++)
+            for (let i = 0; i < layerNames.length; i++)
                 this.layerIndicesToRender[i] = this.getLayerIndex(layerNames[i]);
         }
 
-        private getLayerIndex(layerName: string){
+        private getLayerIndex(layerName: string) {
             let index = 0;
             let layerType = this.tiledMap.getLayer(layerName);
-            for (let layer in this.tiledMap.layers){
+            for (let layer in this.tiledMap.layers) {
                 if (this.tiledMap.layers.hasOwnProperty(layer) &&
-                    this.tiledMap.layers.get(layer) == layerType){
+                    this.tiledMap.layers[layer] == layerType) {
                     return index;
                 }
             }
@@ -64,14 +67,14 @@ module es {
             return this.tiledMap.worldToTilePositionY(yPos);
         }
 
-        public getColumnAtWorldPosition(xPos: number): number{
+        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){
+            if (this._shouldCreateColliders && comp == transform.Component.position) {
                 this.removeColliders();
                 this.addColliders();
             }
@@ -90,19 +93,19 @@ module es {
         }
 
         public render(camera: es.Camera) {
-            if (!this.layerIndicesToRender){
-                TiledRendering.renderMap(this.tiledMap, Vector2.add(this.entity.transform.position, this._localOffset),
+            if (!this.layerIndicesToRender) {
+                TiledRendering.renderMap(this.tiledMap, this.displayObject as egret.DisplayObjectContainer, 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),
+            } else {
+                for (let i = 0; i < this.tiledMap.layers.length; i++) {
+                    if (this.tiledMap.layers[i].visible && this.layerIndicesToRender.contains(i))
+                        TiledRendering.renderLayer(this.tiledMap.layers[i] as TmxLayer, this.displayObject as egret.DisplayObjectContainer, Vector2.add(this.entity.transform.position, this._localOffset),
                             this.transform.scale, this.renderLayer);
                 }
             }
         }
 
-        public addColliders(){
+        public addColliders() {
             if (!this.collisionLayer || !this._shouldCreateColliders)
                 return;
 
@@ -111,7 +114,7 @@ module es {
 
             // 为我们收到的矩形创建碰撞器
             this._colliders = [];
-            for (let i = 0; i < collisionRects.length; i ++){
+            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;
@@ -122,11 +125,11 @@ module es {
             }
         }
 
-        public removeColliders(){
+        public removeColliders() {
             if (this._colliders == null)
                 return;
 
-            for (let collider of this._colliders){
+            for (let collider of this._colliders) {
                 Physics.removeCollider(collider);
             }
             this._colliders = null;

source/src/ECS/Core.ts

@@ -7,6 +7,10 @@ module es {
          * 核心发射器。只发出核心级别的事件
          */
         public static emitter: Emitter<CoreEvents>;
+        /**
+         * 是否启用调试渲染
+         */
+        public static debugRenderEndabled = false;
         /**
          * 全局访问图形设备
          */