LayaAir引擎——（五）

LayaAir引擎——关于地图详解

所需要的软件：

LayaAirIDE1.0.2版本

在LayaAir引擎中与地图相关的类：

　　1.laya.map.TiledMap　　　　　　TiledMap类　　  地图以层级来划分地图，  每层又以分块来处理显示对象

　　2.laya.maths.Rectangle　　　　  矩形类

　　3.laya.events.Event　　　　　     事件类

　　4.laya.map.MapLayer　　　　　　层级类

　　5.laya.map.GridSprite　　　　　  分块类

　　6.laya.map.TileTexSet　　　　     纹理类

　　7.laya.display.Sprite　　　　　　  精灵类

所需要的文件：

　　

TiledMap(XML格式):

1.floor层　　　　自定义属性　　floor_pro　　　　floor pro

2.wall层　　 　　自定义属性　　wall_pro　　　　wall pro

3.objLayer层　　自定义属性　　objLayer_pro　  objLayer pro

　　　　　　　　 对象一　　　　pro1　　　　自定义属性　　pro1_1　　pro1_1 pro1_1

　　　　　　　　 对象二　　　　pro2　　　　自定义属性　　pro2_2　　pro2_2

1.为了方便调用类定义的全局变量

var TiledMap = Laya.TiledMap;
var Rectangle = Laya.Rectangle;
var Handler = Laya.Handler;
var Sprite = Laya.Sprite;
var MapLayer = Laya.MapLayer;

2.在LayaAir项目中加载Tiled地图

Laya.init(1200 , 720);
 
var map1 = new TiledMap();
map1.createMap("map/map3/map3.json",new Rectangle(0,0,1200,720),Handler.create(this,loadMap_1_OK));
 
function loadMap_1_OK() {
    console.log("地图三加载完成");
}

Laya.init(1200,720);　　　　　　创建一个1200*720的窗口

var map1 = new TiledMap(); 　 定义map1的类型是TiledMap类型

map1.createMap("map/map3/map3.json",new Rectangle(0,0,1200,720),Handler.create(this,loadMap_1_OK));

此函数是加载1200*720的在map/map3文件下的map3地图到map1中，加载完成自动调用函数loadMap_1_OK();

3.测试TiledMap属性

function loadMap_1_OK() {
    console.log("地图三加载完成");
 
    console.log(map1.x);//-0，地图x坐标
    console.log(map1.y);//-0，地图y坐标
 
    console.log(map1.width);//240，48*5，地图的宽度
    console.log(map1.tileWidth);//48，格子的宽度
     console.log(map1.gridWidth);//432，块的宽度（不大懂，猜想48*5+48*5-32）
 
    console.log(map1.height);//240，48*5，地图的高度
    console.log(map1.tileHeight);//48，格子的高度
    console.log(map1.gridHeight);//432，块的高度（不大懂，猜想48*5+48*5-32）
 
    console.log(map1.numRowsTile);//5，地图竖向的格子数
    console.log(map1.numRowsGrid);//1，地图的竖向块数
 
    console.log(map1.numColumnsTile);//5，地图横向的格子数
    console.log(map1.numColumnsGrid);//1，地图的横向块数
 
    console.log(map1.orientation);//orthogonal，当前地图的类型
    console.log(map1.renderOrder);//right-down，渲染顺序是从右下开始。
，
    console.log(map1.scale);//1，当前地图的缩放
}

gridWidth和gridHeight的源码计算分析：（感觉有点问题，但不深入）

TiledMap初始化默认值：
     this._mapTileW=;//格子的宽度
     this._mapTileH=0;//格子的高度
     this._gridW=0;//地图的横向块数
     this._gridH=0;//地图的坚向块数
     this._gridWidth=450;//块的宽度
     this._gridHeight=450;//块的高度
 
createMap(mapName,viewRect,completeHandler,viewRectPadding,gridSize){
    ...
    if (gridSize){
        this._gridWidth=gridSize.x;//450
        this._gridHeight=gridSize.y;//450
    }
    ...
}
 
onJsonComplete(e){
    ...
    this._mapTileW=tJsonData.tilewidth;//48
    this._mapTileH=tJsonData.tileheight;//48
    ...
}
 
initMap(){
    ...
    this._gridWidth=Math.floor(this._gridWidth / this._mapTileW)*this._mapTileW;//432=9*48
    this._gridHeight=Math.floor(this._gridHeight / this._mapTileH)*this._mapTileH;//432=9*48
    if (this._gridWidth < this._mapTileW){
        this._gridWidth=this._mapTileW;
    }
    if (this._gridWidth < this._mapTileH){
        this._gridWidth=this._mapTileH;
    }
    this._gridW=Math.ceil(this._width / this._gridWidth);//1
    this._gridH=Math.ceil(this._height / this._gridHeight);//1
    ...
}

orientation的补充：

this._orientation="orthogonal";//当前地图类型为四边形地图
 
地图类型：
 
hexagonal           六边形地图
 
isometric           菱形地图
 
orthogonal          四边形地图
 
staggered           45度交错地图

renderOrder的补充：

this._renderOrder="right-down";//地图格子的渲染顺序为从右上角开始渲染
 
地图格子的渲染顺序：
 
left-down　　　   从左下角开始渲染
 
left-up　　　　　　从左上角开始渲染
 
right-down　　　　从右下角开始渲染
 
right-up　　　　  从有上角开始渲染

4.测试公开的方法

var map1 = new TiledMap();//定义map1的类型是TiledMap类型

map1.createMap("map/map3/map3.json",new Rectangle(0,0,240,240),Handler.create(this, mapLoaded));
//把map/map3/map3.json以的显示240*240视图加载到map1中，加载完成调用mapLoaded()函数
function mapLoaded(){
    console.log("地图加载");
    map1.destroy();//销毁map1地图
    console.log("地图销毁")
}

var a = map1.getLayerByIndex(0);//通过索引得MapLayer 层
console.log(a.layerName);//floor
 
var a = map1.getLayerByIndex(1););//通过索引得MapLayer层
console.log(a.layerName);//wall
 
var a = map1.getLayerByIndex(2););//通过索引得MapLayer层
console.log(a.layerName);//obLayer
 
var a = map1.getLayerByName("floor");//通过名字得到MapLayer层
console.log(a.layerName);//floor
 
var a = map1.getLayerByName("wall");//通过名字得到MapLayer层
console.log(a.layerName);//wall
 
var a = map1.getLayerByName("objLayer");//通过名字得到MapLayer层
console.log(a.layerName);//obLayer

var b = map1.getLayerObject("objLayer","pro1");//得到对象层上的某一个物品
console.log(b);//GridSprite {relativeX:24,relativeY:-24,......}
 
var b = map1.getLayerObject("objLayer","pro2");//得到对象层上的某一个物品
console.log(b);//GridSprite {relativeX:216,relativeY:168,......}

注意：

realativeX和relativeY暂时不管

var mX = 48;//X轴的偏移量
var mY = 96;//y轴的偏移量
 
map1.moveViewPort(mX,mY);//地图向右边平移48像素，向下平移96像素

var mX = 48;//X轴的偏移量
var mY = 96;//y轴的偏移量
var width = 240;
var height = 240;
map1.changeViewPort(mX,mY,width,height);//改变视口大小和位置

var point = new Point();
map1.setViewPortPivotByScale(0.5,0.5);//设置视口的缩放中心点（例如：scaleX= scaleY= 0.5,就是以视口中心缩放）
map1.changeViewPortBySize(480,480,point);//在锚点的基础上计算，通过宽和高，重新计算视口

changeViewPortBySize(width,height,rect){
    this._centerX=this._rect.x+this._rect.width *this._pivotScaleX;
    this._centerY=this._rect.y+this._rect.height *this._pivotScaleY;
    rect.x=this._centerX-width *this._pivotScaleX;
    rect.y=this._centerY-height *this._pivotScaleY;
    rect.width=width;
    rect.height=height;
    this.changeViewPort(rect.x,rect.y,rect.width,rect.height);
}

var b = map1.mapSprite();//整个地图的显示容器
var c = new Sprite();
c.loadImage("map/map3/map2_2.png",0,0,48,48,null);
b.addChild(c);

var c = a.getSprite(2,2);//通过纹理索引，生成一个可控制物件
console.log(c);//GridSprite {relativeX:0,relativeY:0,.....}