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,.....}
最新文章
- ERDAS 2014安装破解及汉化图文教程
- Visual Studio 2010 下 安装RGiesecke.DllExport
- ALS
- ASP.NET MVC 控制器激活(三)
- 【记录】ASP.NET MVC RegisterBundles
- Linux 命令积累
- WPF中Grid布局
- Java面试总结系列之Collections.sort()
- background-size背景缩放
- Qt无边框,可移动窗口
- MySQL基础(二)——DDL语句
- C. Om Nom and Candies 巧妙优化枚举,将复杂度控制在10e6
- [转] GMT、UTC与24时区 等时间概念
- Open Wifi SSID Broadcast vulnerability
- 使用vlmcsd自建KMS服务~一句命令激活windows/office
- python练习题-day23
- MT【282】一道几何题
- 微信小程序:scroll滑到指定位置
- [转][smart3d]Smart3D之手动配置 S3C 索引加载全部的OSGB瓦片数据
- Linux性能优化之CPU优化(一)