Laya中使用tiledMap瓦片地图以及遇到的坑

/**
* 瓦片地图
*/
import Stage = Laya.Stage;
import TiledMap = Laya.TiledMap;
import Browser = Laya.Browser;
import Sprite = Laya.Sprite;
import MapLayer = Laya.MapLayer;
import Point = Laya.Point;import Brick from './Brick';export default class CTiledMap {//extends Laya.Scriptprivate _tMap: Laya.TiledMap;private mLastMouseX: number = 0;private mLastMouseY: number = 0;private mX: number = 0; //地图初始位置private mY: number = 0;private _moveSpeedY:number = 1;//移动速度private _loadFinished:boolean = false;//是否加载完成private _startMove: boolean = true;private _testSprite:Sprite = null;//用于测试瓦片位置的精灵对象private _bgLayer:MapLayer = null; //背景层private _objLayer:MapLayer = null;//对象层private _showCollider:boolean = false;//是否显示碰撞体private _testTouch:boolean = false;//是否测试触摸反馈// constructor() {//     super();// }// onEnable(){/*** 加载瓦片地图* path：地图文件路径*/loadTiledMap(path:string){if(this._tMap){return;}//注意！！！//在加载成功之前如果调用地图刷新，会使用到错误的数据，导致显示错误或者显示不出来，必须要等进入回调后再调用TileMap对象的接口。this._tMap = new Laya.TiledMap();this._tMap.createMap(path, new Laya.Rectangle(0, 0, Browser.width, Browser.height), Laya.Handler.create(this, this.onLoaded),new Laya.Rectangle(500, 500, 0, 0));//该扩展区域牵扯到瓦片地图的裁剪优化}/*** 是否有效的地图，地图销毁后返回false*/isValid():boolean{return this._tMap != null;}createTestSprite(){let radiusX:number = 32;let radiusY:number = 32;//Math.tan(180 / Math.PI * 30) * radiusX;let color:string = "#FF7F50";this._testSprite = new Sprite();this._testSprite.graphics.drawLine(0, 0, 0, radiusY*2, color);this._testSprite.graphics.drawLine(radiusX*2, 0, radiusX*2, radiusY*2, color);this._testSprite.graphics.drawLine(0, 0, radiusX*2, 0, color);this._testSprite.graphics.drawLine(0, 0, radiusX*2, 0, color);Laya.stage.addChild(this._testSprite);}onLoaded(){console.log('LoadMap success.');this._tMap.setViewPortPivotByScale(0,0);//Laya引擎默认把瓦片地图直接add到stage上，导致加载的地图必然在整个Scene上方，所以这里手动调整层级//stage共有两个node，0：Scene，1：tiledMap，将tiledMap移动到Scene中。let mapNode:Laya.Node = Laya.stage.removeChildAt(1);Laya.stage.getChildAt(0).getChildAt(0).addChild(mapNode);// let sp = this._tMap.mapSprite() as Laya.Sprite;this.mY = this._tMap.height;//地图初始位置在屏幕外// this._bgLayer = this._tMap.getLayerByIndex(0);// if(this._bgLayer){//     //this._bgLayer.getTileData();// }this._objLayer = this._tMap.getLayerByName("Objects");//this._tMap.getTileProperties();if(this._objLayer){for(let i = 0; i < this._objLayer.numChildren; ++i){let obj = this._objLayer.getChildAt(i);if(obj instanceof Laya.GridSprite){let objData = this._objLayer.getObjectDataByName(obj.name);let type = objData['type'];let gid = objData['gid'];let h = objData['height'];console.log('objName: ', obj.name, obj.x, obj.y);if(type == "Brick"){let boxCollider:Laya.BoxCollider = obj.addComponent(Laya.BoxCollider);boxCollider.width = h;boxCollider.height = h;let rigid:Laya.RigidBody = obj.addComponent(Laya.RigidBody);rigid.type = "static";obj.addComponent(Brick);}else if(type == "PolygonCollider"){let points = objData['polygon'];let pStr:string = '';for (let index = 0; index < points.length; index++) {let p = points[index];if(index == points.length - 1){pStr = pStr + p.x + ',' + p.y;}else{pStr = pStr + p.x + ',' + p.y +',';}}//console.log('XY: ', pStr);//绘制碰撞体if (this._showCollider) {let sp = new Laya.Sprite();this._objLayer.addChild(sp);let ps:number[] = [];for (let index = 0; index < points.length; index++) {let p = points[index];ps.push(p.x);ps.push(p.y);}sp.graphics.drawPoly(obj.x, obj.y, ps, "#ffff00");//}//解析并且创建多边形碰撞体let collider:Laya.PolygonCollider = obj.addComponent(Laya.PolygonCollider);collider.points = pStr;collider.label = type;let rigid:Laya.RigidBody = obj.addComponent(Laya.RigidBody);rigid.type = "static";obj.addComponent(Brick);obj.y -= this.mY;//这里初始化每个子对象的位置obj.getComponent(Brick).setCheckDestroyRangeWH(this._tMap.width ,this._tMap.height);}}}// let obj:Laya.GridSprite = this._objLayer.getObjectByName("monster");// if(obj != null){//     let objData = this._objLayer.getObjectDataByName("monster");//     let type = objData['type'];//     let gid = objData['gid'];//     let test;// }}Laya.stage.on(Laya.Event.RESIZE,this,this.resize);if (this._testTouch) {Laya.stage.on(Laya.Event.MOUSE_DOWN, this, this.mouseDown);Laya.stage.on(Laya.Event.MOUSE_UP, this, this.mouseUp);            }this._loadFinished = true;this.resize();//this.createTestSprite();}//鼠标按下拖动地图private mouseDown(): void {this.mLastMouseX = Laya.stage.mouseX;this.mLastMouseY = Laya.stage.mouseY;Laya.stage.on(Laya.Event.MOUSE_MOVE, this, this.mouseMove);this._startMove = true;}private mouseMove(): void {//移动地图视口let moveX:number = this.mX - (Laya.stage.mouseX - this.mLastMouseX);let moveY:number = this.mY - (Laya.stage.mouseY - this.mLastMouseY);//console.log("mouseMove moveY : ", moveY);if (this._loadFinished) {this._tMap.moveViewPort(moveX, moveY);}}private mouseUp(): void {this.mX = this.mX - (Laya.stage.mouseX - this.mLastMouseX);this.mY = this.mY - (Laya.stage.mouseY - this.mLastMouseY);//console.log("mouseUp this.mY : ", this.mY);Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.mouseMove);if(this._bgLayer){let p:Point = new Point();this._bgLayer.getTilePositionByScreenPos(Laya.stage.mouseX , Laya.stage.mouseY, p);this._bgLayer.getScreenPositionByTilePos(Math.floor(p.x), Math.floor(p.y), p);if(this._testSprite){this._testSprite.pos(p.x, p.y);}}}// 窗口大小改变，把地图的视口区域重设下private resize(): void {//console.log("resize this.mY : ", this.mY);if(this._loadFinished && this._tMap){this._tMap.changeViewPort(this.mX, this.mY, Browser.width, Browser.height);}}       destroy(){if(this._tMap){//console.log("Destroy Map.");this._tMap.destroy();this._tMap = null;}}onUpdate(){        if(this._loadFinished && this._startMove && this._tMap){this._tMap.moveViewPort(this.mX, this.mY);this.mY -= this._moveSpeedY; if (this._objLayer) {//this._objLayer.y = -this.mY;//很奇怪，只是移动 _objLayer这个父节点，子对象并不会跟着一起移动，这里必须手动处理每个子对象的移动//碰撞体只有地图上方的四个，其他的可能被裁剪掉了//碰撞体无法移动for(let i = 0; i < this._objLayer.numChildren; ++i){let obj = this._objLayer.getChildAt(i);(obj as Laya.GridSprite).y += this._moveSpeedY;}}   //console.log("this.mY ", this.mY);}if(this.mY < -(Laya.stage.height + 10)){this.destroy();}}
}

注意！！！在加载成功之前如果调用地图刷新，会使用到错误的数据，导致显示错误或者显示不出来，必须要等进入加载回调后再调用TileMap对象的接口！！！所以增加了一个LoadFinished的标记

Laya中使用tiledMap瓦片地图以及遇到的坑相关推荐

【Cocos Creator实战教程(3)】——TiledMap(瓦片地图)组件
1. 前言瓦片地图是由一张一张的正方形小图片拼接成的地图,例如炸弹人,QQ堂都是非常典型的瓦片游戏.瓦片地图(Tile Map) 不但生成简单,并且可以灵活的用于Cocos2d-x引擎.不论你的游戏 ...
tiledmap瓦片地图使用
(译)如何使用cocos2d制作基于tile地图的游戏教程:第一部分免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明. ...
转：瓦片地图TiledMap
标签:tiledMap 3.x cocos tmx tile 原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://shahdza.bl ...
在openlayer中对瓦片地图进行平移
失踪人口回归. 这次给大家介绍的是在openlayer中对在线瓦片地图进行平移.可以解决将高德/百度瓦片地图的偏移问题. 适用的场景:当某个在线瓦片地图的坐标系与我们需要的底图坐标系不同,我们很难对每 ...
Cocos2d-x 3.x基础学习：瓦片地图TiledMap
有谁还记得小时候玩的小霸王里的游戏?比如坦克大战.冒险岛.魂斗罗.吞食天地等,他们大部分都是基于Tile地图的游戏.但在手游中,基于瓦片地图的游戏很常见.如:<保卫萝卜>. 瓦片地图有专门 ...
瓦片地图 cocos
[前言] 还记得我们小时候玩的小霸王里面的游戏吗?大部分都是基于Tile地图的游戏,如坦克大战.冒险岛.魂斗罗.吞食天地等.而在手游中,基于瓦片地图的游戏也很常见.如:<保卫萝卜>. 瓦片 ...
【Unity入门计划】基本概念(8)-瓦片地图 TileMap 01
目录 1 TileMap概念主要思想优点创建的层级 2 Unity中的TileMap 2.1 自动父级Grid 网格 2.2 Sprite精灵 2.3 Tile 瓦片 2.4 Tile Pale ...
QGIS 上加载瓦片地图（高德、ESRI、OSM等）
1. 在QGIS左侧的浏览面板中,选择XYZ Tiles节点,右键新建连接.在弹出的窗口中填入名称和瓦片地图的网址http://webrd02.is.autonavi.com/appmaptile?l ...
Unity(9)-TileMap瓦片地图
文章目录前言相关介绍其他介绍上一篇笔记下一篇笔记一.图片预处理二.创建调色板(TilePalette) 三.创建瓦片(Tile) [1]. 方式一 [2]. 方式二四.修改瓦片(Til ...
Geoserver中TileLayers中切割离线瓦片预览时地图模糊不清
场景 Geoserver怎样切割离线瓦片地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118491320 上面介绍了怎样切 ...

Laya中使用tiledMap瓦片地图以及遇到的坑

Laya中使用tiledMap瓦片地图以及遇到的坑相关推荐

最新文章

热门文章