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,.....}