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. PC小技巧

    一.如何在office 2010中安装 Microsoft Office Document Imaging 我用的是office 2010版本,如下操作可以把照片转换成文本:第一步:使用Microso ...

  2. [原创]在Linux系统Ubuntu14.04上安装部署docker。

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  3. blade and soul Personal Combos

    Personal Combos Since Blade and Soul is mainly based on skills, the game is more interesting after y ...

  4. 罗永浩Vs王自如:浮躁的世界该如何降温?!

    这段时间智能手机业界有一件事情炒得纷纷扬扬,可谓是波澜起伏,想必大家都多少略有耳闻.昨天中午在群里看到“罗永浩舌战王自如视频”分享,就有些‘凑热闹’的好奇点开看看.一开场的几分钟正如老罗所说的那样:两 ...

  5. Linux开源系统对比Windows闭源系统的优势解析

    当我们听到linux的时候是不是觉得高大上的感觉呢?在我刚上大学的时候,听着学长们给我讲他们的大学的学习经历,先学习C语言.单片机.然后做一些项目,现在正学习linux操作系统,当我听到linux操作 ...

  6. bzoj 3611: [Heoi2014]大工程

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #d ...

  7. 完全卸载oracle11g步骤【转】

    重装oralce,每次都很蛋疼.找了个比较全的步骤.留作备份. 完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2 ...

  8. 静态绑定网关,防止ARP攻击

    Windows XP 下 写个批处理文件:内容如下,名称自取 @echo offard -darp -s 192.168.1.1 00-14-78-ef-10-45//绑定IP地址 WIN 7 下 1 ...

  9. Cheap Hollister Clothing

    (link to hollisterco site), Spectacles don't simply take care of the eye area inside sun; Putting th ...

  10. as3 代码优化之pmd

    首先下载com.abobe,ac.pmd.eclipse_...jar 和 flex-pmd-all-in-one...zip俩文件 前面一个装在xx\adobe flash builder xx\e ...