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

LayaAir引擎——(五)的更多相关文章

  1. LayaAir引擎——(六)

    LayaAir引擎——TiledMap地图图块属性获取和进行墙壁碰撞检测 需要的软件: TiledMap LayaAir IDE 1.0.2版本 所画的地图: pass层: floor层: pass层 ...

  2. LayaAir引擎开发HTML5最简单教程(面向JS开发者)

    LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结 一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦 切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...

  3. LayaAir引擎——(七)

    LayaAir引擎——人物控制TiledMap地图移动和墙壁检测 所需要的软件: LayaAir IDE 1.0.2版本 TiledMap 所需要的东西: 地图:53 * 32,(48*48) 人物: ...

  4. LayaAir引擎——(四)

    LayaAir引擎 TiledMap 使用 所需要的软件: Tiled地图编辑器 版本0.16.2 LayaAir IDE 所需要的图片:图块图片(1.png) 步骤1: 文件->新文件-> ...

  5. LayaAir引擎——(二)

    LayaAir引擎 -> 工具 -> 图集打包例子

  6. LayaAir引擎——(一)

    LayaAir是LayaBox推出的Html5游戏引擎,支持 ActionScript3.TypeScript.JavaScript,开源,并且商用免费.   LayaAir IDE 是一款使用Lay ...

  7. Javascript多线程引擎(五)

    Javascript多线程引擎(五)之异常处理 C语言没有提供一个像Java一样的异常处理机制, 这就带来了一个问题, 对于一个子函数中发生异常后, 需要在父函数调用子函数的位置进行Check, 如果 ...

  8. LayaAir引擎——(三)

    LyaAir引擎(JavaScript)实现图片的翻转一半 图片4.png位于bin/开场过渡 文件夹下,图片大小150*30(根据实际情况做调整) var button; var scale1 = ...

  9. c json实战引擎五 , 优化重构

    引言 scjson是一个小巧的纯c跨平台小巧引擎. 适用于替换老的cJSON引擎的场景. 数据结构和代码布局做了大量改进.优势体现在以下几个方面: 1) 跨平台 (window 10 + VS2017 ...

随机推荐

  1. .NET牛人需要了解的问题[转]

    任何一个使用.NET的人 描述线程与进程的区别? 什么是Windows服务,它的生命周期与标准的EXE程序有什么不同 Windows上的单个进程所能访问的最大内存量是多少?它与系统的最大虚拟内存一样吗 ...

  2. synchronized和ReentrantLock

    一.什么是sychronized sychronized是java中最基本同步互斥的手段,可以修饰代码块,方法,类. 在修饰代码块的时候需要一个reference对象作为锁的对象. 在修饰方法的时候默 ...

  3. web前端页面项目经验总结

    项目时间:2016年4月5日--4月9日项目名称:阿七果子园web前端页面项目内容:    1.HTML5+CSS+JavaScript(banner+timer)+JQuery(small_bann ...

  4. JavaScript 面向对象(一) —— 基础篇

    学好JS的面向对象,能很大程度上提高代码的重用率,像jQuery,easyui等,这篇博客主要从细节上一步步讲JS中如何有效地创建对象,也可以看到常见的创建对象的方式,最后也会附上一些JS面向对象的案 ...

  5. nmon--非常棒的LINUX/AIX性能计数器监测和分析工具

    转自51Testinghttp://bbs.51testing.com/viewthread.php?tid=116526 经常看到很多人讨论说loadrunner对linux/aix的性能监测太少, ...

  6. Spring Framework的核心:IOC容器的实现

    2.1   Spring IoC容器概述 2.1.1 IoC容器和依赖反转模式 依赖反转的要义,如果合作对象的引用或依赖关系的管理由具体对象来完成,会导致代码的高度耦合和可测性的降低.依赖控制反转的实 ...

  7. bzoj4213: 贪吃蛇

    题意:给定一个网格,有一些格子是障碍不用管,剩余的是空地,你要用一些起点和终点在边界上的路径或环来完全覆盖掉空地,如果使用第一种,会付出1的代价,求最小代价,不能覆盖则输出-1. 现在看到网格而且数据 ...

  8. 支付宝APP支付后台参数生成Java版(一)

    一.支付参数组装: String[] parameters={ "service=\"mobile.securitypay.pay\"",//固定值 " ...

  9. Java接口中的方法

    接口中可以含有变量和方法.但是,接口中的变量会被隐式地指定为public static final变量(并且只能是public static final变量,用private修饰会报编译错误),而方法 ...

  10. VS2013 有效密钥

    今天打开笔记本上的VS2013,发现试用版到期了,就到网上找密钥,找了一些时候找到一个有效序列号,记录如下: BWG7X-J98B3-W34RT-33B3R-JVYW9