为了访问瓦片地图,Cocos2d-JS中访问瓦片地图API,主要的类有:TMXTiledMap、TMXLayer和TMXObjectGroup等。
1、TMXTiledMap
TMXTiledMap是瓦片地图类,它的类图如下图所示,TMXTiledMap派生自Node类,具有Node特点。

TMXTiledMap类图

TMXTiledMap常用的函数如下: 
new cc.TMXTiledMap(tmxFile)。创建瓦片地图对象。
getLayer(layerName)。通过层名获得层对象。
getObjectGroup(groupName)。通过对象层名获得层中对象组集合。
getObjectGroups()。获得对象层中所有对象组集合。
getProperties()。获得层中所有属性。
getPropertiesForGID (GID)。通过GID[ GID是一个瓦片的全局标识符。]获得属性。
getMapSize()。获得地图的尺寸,它的单位是瓦片。
getTileSize()。获得瓦片尺寸,它的单位是像素。

示例代码如下:
var group = _tileMap.getObjectGroup("Objects");
var background = _tileMap.getLayer("Background");
其中_tileMap是瓦片地图对象。

2、TMXLayer
TMXLayer是地图层类,它的类图如下图所示,TMXLayer也派生自Node类,也具有Node特点。同时TMXLayer也派生自SpriteBatchNode类,所有TMXLayer对象具有批量渲染的能力,瓦片地图层就是由大量重复的图片构成,它们需要渲染提高性能。

TMXLayer类图

TMXLayer常用的函数如下: 
getLayerName()。获得层名。
getLayerSize()。获得层尺寸,它的单位是瓦片。
getMapTileSize()。获得瓦片尺寸,它的单位是像素。
getPositionAt(pos)。通过瓦片坐标获得像素坐标,瓦片坐标y轴方向与像素坐标y轴方向相反。
getTileGIDAt(pos)。通过瓦片坐标获得GID值。

3、TMXObjectGroup
TMXObjectGroup是对象层中的对象组集合,它的类图如下图所示,注意TMXObjectGroup与TMXLayer不同,TMXObjectGroup不是派生自Node,不具有Node特性。

TMXObjectGroup类图

TMXObjectGroup常用的函数如下:
propertyNamed(propertyName)。通过属性名获得属性值。
objectNamed(objectName)。通过对象名获得对象信息。
getProperties()。获得对象的属性。

getObjects()。获得所有对象。

更多内容请关注最新Cocos图书《Cocos2d-x实战:JS卷——Cocos2d-JS开发》

本书交流讨论网站:http://www.cocoagame.net

欢迎加入Cocos2d-x技术讨论群:257760386

更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com

《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:

京东:http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息

Cocos2d-JS中瓦片地图API的更多相关文章

  1. JS版百度地图API

    地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...

  2. js基于谷歌地图API绘制可编辑圆形与多边形

    之前的工作中需要在谷歌地图上绘制可编辑多边形区域,所以基于谷歌地图API封装了个html页面,通过调用js绘制多边形并返回各点的经纬度坐标:当然首先你要保证你的电脑可以打开谷歌地图... 新建一个ht ...

  3. 在网页中嵌入地图API

    1.登录百度地图api,地址:http://api.map.baidu.com/lbsapi/creatmap/index.html 2.设置你的地理位置 3.简单设置下地图功能.地图的宽度和高度根据 ...

  4. JS调用百度地图API标记地点

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  6. js调用百度地图API创建地图,搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  7. js调用百度地图api

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">   ...

  8. 笔记-Node.js中的核心API之HTTP

    最近正在学习Node,在图书馆借了基本关于Node的书,同时在网上查阅资料,颇有收获,但是整体感觉对Node的理解还是停留在一个很模棱两可的状态.比如Node中的模块,平时练习就接触到那么几个,其他的 ...

  9. js调用百度地图API创建地图

    技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...

随机推荐

  1. mysql 线程级别的缓冲区

    线程栈信息使用内存(thread_stack) 主要用来存放每一个线程自身的标识信息,如线程id,线程运行时基本信息等等,我们可以通过 thread_stack 参数来设置为每一个线程栈分配多大的内存 ...

  2. mysql数据类型区别

    create table t1(c1 float(10,2), c3 decimal(10,2)); insert into t1 values(1234567.23, 1234567.23,1234 ...

  3. 优化 App 的启动速度

    App 的启动速度不仅影响我们调试,也直接关系到用户体验.之前有些很久没有打开过的项目,需要花费很长的时间才完成编译:对应的 App 在点击后,许久才出现启动画面.你是否为这些问题苦恼过呢? 这是我观 ...

  4. C#操作XML(带命名空间)

    之前文章讲述了使用c# xpath如何操作xml文件,在实际开发项目中,遇到的很多xml文件都是带有命名空间的,如果还是用之前的代码获取,那将获取到null.本文讲解操作代码有命名空间的Xml文件,以 ...

  5. BootStrap2学习日记19---缩略图

    缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...

  6. Java基础知识强化之多线程笔记05:Java中继承thread类 与 实现Runnable接口的区别

    1. Java中线程的创建有两种方式:  (1)通过继承Thread类,重写Thread的run()方法,将线程运行的逻辑放在其中. (2)通过实现Runnable接口,实例化Thread类. 2. ...

  7. html 模板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. leetcode 题解:Binary Tree Level Order Traversal (二叉树的层序遍历)

    题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...

  9. iOS - 第三方框架 - AFN

    #5.AFNetworking 2.6使用方法 >2.6版本 支持 iOS7以上,而且支持NSURLConnectionOperation >3.0版本 支持 iOS7以上 NSURLCo ...

  10. 如何鉴别程序抄袭c语言程序代写

    如何鉴别程序抄袭:如何鉴别一份程序代码是抄袭另一份程序.输入:两个C语言源程序文件 输出:抄袭了多少?给出最相似的片段,判断是谁抄袭了谁? 提示:首先进行统一规范化排版,去掉无谓的空格.空行,然后比对 ...