Egret中使用TiledMap

一、关于如何制作瓦片底图：http://www.skywind.me/blog/archives/427

二、ts中TiledMap类

/**
 *
 * @author 
 *
 */
'use strict';
module gtm{
    export class TiledMap {
        /**网格线 图层*/
        public lineScene: egret.Sprite = new egret.Sprite();
        /**障碍点 图层*/
        public pointScene: egret.Sprite = new egret.Sprite();
        public static PATH_UNKNOWN: number = -1;         //未知数据
        public static PATH_PASS: number = 0;            // 路径中 0 为可以通过
        public static PATH_BARRIER: number = 1;         // 路径中 1 为障碍
        public static PATH_TRANSLUCENCE: number = 2;    // 路径中 2 为半透明

        public TILE_WIDTH: number = 0;           // A*格子宽
        public TILE_HEIGHT: number = 0;          // A*格子高
        public MAP_WITDTH: number = 0;           // 地图的宽
        public MAP_HEIGHT: number = 0;           // 地图的高
        public MAP_X: number = 0;                // X坐标最大
        public MAP_Y: number = 0;                // Y坐标最大
        
        /**
         * 得到的地图数据是从0开始的
         * */
        public data: Array;                 //地图数据
        
        /**
         * object层的数据
         * */
        public objectData:any;
        
        /**
         * 清空地图数据
         * */
        public dispose() {
            this.TILE_WIDTH = 0;
            this.TILE_HEIGHT = 0;
            this.MAP_WITDTH = 0;
            this.MAP_HEIGHT = 0;
            this.data = null;
        }
        
        /** 
         * 判断A*地图从标是否可以通过的路 true 为可以通过 
         */
        public isPass(checkX: number,checkY: number): boolean {
            try{
                var mapWidth: number = this.MAP_X;
                var mapHeight: number = this.MAP_Y;
                if(checkX < 0 || checkX >= mapWidth || checkY < 0 || checkY >= mapHeight) {
                    return false;
                }
                return this.data[checkY][checkX] != gtm.TiledMap.PATH_BARRIER ? true : false;
            }catch(e){
                console.warn("in IsPass " + e.toString());
                return false;
            }
            //return false;
        }
        
        /** 
         * 判断地图上改点是否是透明点 
         */
        public isOpacity(checkX: number,checkY: number): boolean {
            var mapWidth: number = this.MAP_X;
            var mapHeight: number = this.MAP_Y;
            if(checkX < 0 || checkX >= mapWidth || checkY < 0 || checkY >= mapHeight) {
                return false;
            }
            return this.data[checkY][checkX] == gtm.TiledMap.PATH_TRANSLUCENCE;
        }
        
        /**
         * 像素坐标转换为地图坐标
         * */
        public SpaceToTiled(point: egret.Point): egret.Point {
            var y = Math.floor(point.y * 2 / this.TILE_HEIGHT) * this.TILE_HEIGHT / 2;
            var x = Math.floor(point.x * 2 / this.TILE_WIDTH) * this.TILE_WIDTH / 2;
        
//            var center: egret.Shape = new egret.Shape();
//            center.graphics.lineStyle(2,0xff00ff);
//            center.graphics.drawCircle(0,0,2);
//            center.graphics.endFill();

//            center.x = x;
//            center.y = y;
//            this.pointScene.addChild(center);
            var leftPos: egret.Point = new egret.Point();
            var rightPos: egret.Point = new egret.Point();
            //console.log("x = " + Math.floor(point.x * 2 / this.TILE_WIDTH) + " y = " + Math.floor(point.y * 2 / this.TILE_HEIGHT))
            if((Math.floor(point.y * 2 / this.TILE_HEIGHT) % 2 == 0 && Math.floor(point.x * 2 / this.TILE_WIDTH) % 2 == 0) || (Math.floor(point.y * 2 / this.TILE_HEIGHT) % 2 == 1 && Math.floor(point.x * 2 / this.TILE_WIDTH) % 2 == 1)) {
                //表示定点在真确的tile中心点，只需要再花一个右下角的点
//                var center1: egret.Shape = new egret.Shape();
//                center1.graphics.lineStyle(2,0xffffff);
//                center1.graphics.drawCircle(0,0,2);
//                center1.graphics.endFill();
//                center1.x = x + this.TILE_WIDTH / 2;
//                center1.y = y + this.TILE_HEIGHT / 2;
//                this.pointScene.addChild(center1);

                leftPos.x = x;
                leftPos.y = y;
                rightPos.x = x + this.TILE_WIDTH / 2;
                rightPos.y = y + this.TILE_HEIGHT / 2;
            } else {
//                var center1: egret.Shape = new egret.Shape();
//                center1.graphics.lineStyle(2,0xffffff);
//                center1.graphics.drawCircle(0,0,2);
//                center1.graphics.endFill();
//                center1.x = x;
//                center1.y = y + this.TILE_HEIGHT / 2;
//                this.pointScene.addChild(center1);

//                var center2: egret.Shape = new egret.Shape();
//                center2.graphics.lineStyle(2,0xffffff);
//                center2.graphics.drawCircle(0,0,2);
//                center2.graphics.endFill();
//                center2.x = x + this.TILE_WIDTH / 2;
//                center2.y = y;
//                this.pointScene.addChild(center2);

                leftPos.x = x;
                leftPos.y = y + this.TILE_HEIGHT / 2;
                rightPos.x = x + this.TILE_WIDTH / 2;
                rightPos.y = y;
            }
            if(egret.Point.distance(leftPos,point) <= egret.Point.distance(rightPos,point)) {
                /*if (Global.isRelease == false)
                {
                    var center: egret.Shape = new egret.Shape();
                    center.graphics.lineStyle(2,0xffffff);
                    center.graphics.drawCircle(0,0,2);
                    center.graphics.endFill();
                    center.x = leftPos.x;
                    center.y = leftPos.y;
                    this.pointScene.addChild(center);
                }*/
                return new egret.Point(Math.round(leftPos.x / this.TILE_WIDTH) - 1,leftPos.y * 2 / this.TILE_HEIGHT - 1);
            } else {
                /*var center: egret.Shape = new egret.Shape();
                center.graphics.lineStyle(2,0xffffff);
                center.graphics.drawCircle(0,0,2);
                center.graphics.endFill();
                center.x = rightPos.x;
                center.y = rightPos.y;
                this.pointScene.addChild(center);
                */
                return new egret.Point(Math.round(rightPos.x / this.TILE_WIDTH) - 1,rightPos.y * 2 / this.TILE_HEIGHT - 1);
            }
        }

        /**
         * tile坐标转为像素坐标
         * */
        public TiledToSpace(point: egret.Point): egret.Point {
            var y = this.TILE_HEIGHT * (point.y + 1) / 2;
            var x = (point.x + ((point.y) % 2 / 2.0) + 0.5) * this.TILE_WIDTH;
            return new egret.Point(x,y);
        }
        
        public drawTile() {
            var n1: number = this.TILE_HEIGHT / 2;
            var n2: number = this.TILE_WIDTH / 2;

            var m1: number = Math.round(this.MAP_HEIGHT / this.TILE_HEIGHT * 2);

            for(var i: number = 0;i < m1;i++) {
                this.line_A(n2,0,0,n1);
                this.line_A(0,this.MAP_HEIGHT - n1,n2,this.MAP_HEIGHT);
                n1 += this.TILE_HEIGHT;
                n2 += this.TILE_WIDTH;
            }
        }
        
        private line_A(a: number,b: number,c: number,d: number): void {
            var shp: egret.Shape = new egret.Shape();
            //shp.graphics.lineStyle(1,0x00ff00);//绿色
            shp.graphics.lineStyle(1,0x00ff00);//白色
            shp.graphics.moveTo(a,b);
            shp.graphics.lineTo(c,d);
            shp.graphics.endFill();
            this.lineScene.addChild(shp);
        }
        
        public drawPo() {
            for(var i = 0;i < this.MAP_Y;i++) {
                for(var j = 0;j < this.MAP_X;j++) {
                    var t = this.data[i][j];
                    if(parseInt(t) != gtm.TiledMap.PATH_PASS) {
                        //画中心点
                        var center: egret.Shape = new egret.Shape();
                        if(parseInt(t) == gtm.TiledMap.PATH_BARRIER) center.graphics.lineStyle(2,0xff0000);
                        if(parseInt(t) == gtm.TiledMap.PATH_TRANSLUCENCE) center.graphics.lineStyle(2,0x0000ff);
                        center.graphics.drawCircle(0,0,6);
                        center.graphics.endFill();
                        var sPos = this.TiledToSpace(new egret.Point(j,i));
                        center.x = sPos.x;
                        center.y = sPos.y;
                        this.pointScene.addChild(center);
                    }
                }
            }
        }
        
        public constructor(mapData: any) {//json格式的数据
            for(var count: number = 0,length: number = mapData.length;count < length;count++) {
                var lineArr = mapData[count];
                this.TILE_WIDTH = parseInt(lineArr["TileWidth"]);
                this.TILE_HEIGHT = parseInt(lineArr["TileHeight"]);
                this.MAP_WITDTH = parseInt(lineArr["MapWidth"]);
                this.MAP_HEIGHT = parseInt(lineArr["MapHeight"]);
                this.MAP_X = parseInt(lineArr["X"]);
                this.MAP_Y = parseInt(lineArr["Y"]);
                var scenePoint = lineArr["data"];
                var sArray = new Array();
                var msgZu: String[] = scenePoint.split(",");//分割消息
                var n: number = 0;
                for(var k = 0;k < this.MAP_Y;k++) {        //一维长度为i,i为变量，可以根据实际情况改变
                    sArray[k] = new Array();    //声明二维，每一个一维数组里面的一个元素都是一个数组；
                    for(var j = 0;j < this.MAP_X;j++) {      //一维数组里面每个元素数组可以包含的数量p，p也是一个变量；
                        sArray[k][j] = msgZu[n];       //这里将变量初始化，我这边统一初始化为空，后面在用所需的值覆盖里面的值
                        n += 1;
                    }
                }
                this.data = sArray;
                this.objectData = lineArr["object"];
//                this.drawTile();
//                this.drawPo();
            }
        }
        
    }
}