Cocos Creator Tiledmap——入门知识整理

最新推荐文章于 2025-07-07 00:21:17 发布

原创

最新推荐文章于 2025-07-07 00:21:17 发布 · 1.3w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#cocos #cocos-creator #cocos2dx

本文档整理了Cocos Creator中TiledMap的最新使用知识，包括如何获取图层、理解图块和像素坐标转换，以及如何实现简单的障碍物检测逻辑。通过官方API文档和实践经验，为开发者提供参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在网上很多资料都比较旧了，某些api也失效了，故整理出这篇文章，方便自己复习和大家查资料用。
先贴上cocos creator中关于tiledmap的官网api文档
http://www.cocos.com/docs/creator/api/classes/TiledMap.html

以下是通过开发实践以及网上资料整理出的相关知识

·获得图层

//map: cc.TiledMap
var layer = this.map.getLayer('图层名');

·图块、瓦片坐标和像素坐标

以上面的图为例

//获取左上角瓦片坐标为（0,0）的图块的像素坐标

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AnliaLee

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Cocos Creator中使用TiledMap教程资源

05-11

我特别喜欢瓦片类的游戏，正好在学习Cocos Creator，所以想自己做几个。可是官方文档关于TiledMap组件的介绍太少了。网上一搜，我滴天，全是cocos2d的，就让我来填补一下这个空白吧。里面包括了TiledMap编辑器，还有练习资源文件和相关Cocos Creator的工程文件，教程可以参见我的博客blog.youkuaiyun.com/potato47

【Cocos Creator实战教程(3)】——TiledMap(瓦片地图)组件

12-05

1694

1. 前言瓦片地图是由一张一张的正方形小图片拼接成的地图，例如炸弹人，QQ堂都是非常典型的瓦片游戏。瓦片地图(Tile Map) 不但生成简单，并且可以灵活的用于Cocos2d-x引擎。不论你的游戏是角色扮演游戏, 平台动作游戏或仿打砖块游戏，这些游戏地图可以使用开源的瓦片地图编辑器Tiled Map Editor生成并保存为TMX文件格式，被Cocos2d-...

参与评论您还未登录，请先登录后发表或查看评论

Cocos Creator入门教学（全而简单版）

最新发布

前方的路在刚开始

07-07

1986

摘要：作者利用周末时间学习使用CocosCreator游戏引擎开发一款2D横板竞速游戏《战士勇敢向前冲》。文章详细记录了从引擎安装（选择2D模板）、界面介绍（层级/资源/场景编辑器等），到实现角色移动功能的全过程：导入自制角色素材，创建控制脚本绑定方向键操作，并通过代码实现像素级移动。作为国产开源引擎，CocosCreator支持中英文切换，适合新手入门2D/3D游戏开发。

cocos2dx[3.4](25)——瓦片地图TiledMap

weixin_33936401的博客

02-11

2899

【唠叨】还记得我们小时候玩的小霸王里面的游戏吗？大部分都是基于Tile地图的游戏，如坦克大战、冒险岛、魂斗罗、吞食天地等。而在手游中，基于瓦片地图的游戏也很常见。如：《保卫萝卜》。瓦片地图有专门的地图编辑器：Tiled Map Editor 。先给大家看个酷炫的图吧。此图来自：http://blog.youkuaiyun.com/aa4790139/article...

【CocosCreator入门】CocosCreator组件 | TiledMap（地图）组件

看世界，也找自己

05-30

7151

Cocos Creator是一款流行的游戏开发引擎，具有丰富的组件和工具，其中TiledMap组件可以帮助开发者快速创建、加载和渲染地图。

cocoscreator使用tiledmap

panadalove的博客

06-09

2336

在本文中，我们将讲解如何使用TiledMap来创建一个简单的地图。我们可以将地图导出为一个JSON文件，然后使用Cocos Creator的TiledMap组件将其导入。首先，打开Tiled，创建一个新地图，然后将一些图块绘制在地图上。至此，我们就创建了一个简单的游戏地图。通过使用TiledMap和Cocos Creator，我们可以轻松地创建出更复杂的地图和更丰富的游戏世界。下面是一个简单的例子，它展示了如何使用TiledMap和Cocos Creator来加载地图，以及如何使玩家在地图上移动。

CocosCreator TiledMap练习修复

05-24

总的来说，"CocosCreator TiledMap练习修复"涉及到的是在CocosCreator的特定版本中，如何解决TiledMap相关代码的兼容性和运行问题，以及如何利用TiledMap组件创建和管理2D游戏地图的全面知识。通过深入理解和实践...

Cocos Creator引擎AR开发：Cocos Creator AR基础入门

09-03

Cocos Creator引擎AR开发：Cocos Creator AR基础入门_（10）.AR动画与特效.docx Cocos Creator引擎AR开发：Cocos Creator AR基础入门_（11）.AR音效处理.docx Cocos Creator引擎AR开发：Cocos Creator AR基础入门_...

Cocos Creator 3D开发入门----CocosCreator3D篮球.zip

12-13

Cocos Creator 3D开发入门----CocosCreator3D篮球.zip import { _decorator, Component, Node, RigidBodyComponent, PhysicMaterial, ColliderComponent } from "cc"; const { ccclass, property } = _...

Cocos Creator学习のTiledMap

苦作舟的空城机

02-24

8349

目前正在学习Cocos creator，版本是2.4。本次利用tiled做一个简单的分层地图，人物可以在上面运动，并且可以被遮挡和墙体阻挡

【Cocos Creator基础教程(组件篇)】——TiledMap(瓦片地图)

热门推荐

Next的博客

05-11

5万+

Tiled Map Editor：下载（window 64位汉化,包括下面用到的资源和工程源码）： http://download.youkuaiyun.com/download/potato47/9516578

RPGMakerFP:基于Cocos Creator的RPG系统

03-11

角色扮演游戏使用Cocos Creator开发的RPG Maker的日式RPG游戏的基础系统。例如：角色移动，对话，商店，背包，地图切换，事件触发等等。项目包含系统的核心代码，使用方法请移步注：代码里的A *算法根据。写的修改而来更新一下... 过去减少以及未来的停机都很多事情做，真的是很少时间来写这个了，虽然本来也就是写着来玩玩的。而且既然多多的地方的设计好烂啊（没脸看，扶额），已经写好的部分如果没什么大问题暂时是懒得去改了。机械城那个工程发出来不太合适，虽然现在都是在这个基础上开发。然后也琢磨着想弄个战斗系统，甚至肯定是很简单的（复杂的也做不来啊），不过就算再简单还是想做个出来吧。就这样吧。

CocosCreator中TiledMap简单使用

卡西莫多说的博客

09-26

2450

在开发游戏过程中，有时候会用到TiledMap（瓦片地图），我这边使用的是1.4.3版本的tiledmap,2.3.4版本的CocosCreator，其他版本的tiledmap会有做不了动画的问题，后面会说到。视频参考：B站UP主：阿信OL，这位up主以视频方式讲述使用方法，感兴趣的可以去搜索看下。软件下载：一位好心人1.4.3版本的tiledmap。链接：https://pan.baidu.com/s/1WLvcozzBO7GK-M2WBjpW5Q 提取码：kcak 一、软件使用新建地图

【CocosCreator入门】CocosCreator组件 | TiledTile（地图块）组件

看世界，也找自己

06-01

2105

Cocos Creator是一款流行的游戏开发引擎，具有丰富的组件和工具，其中TiledTile组件是用于在TiledMap地图中显示瓦片的组件，可以帮助开发者更方便地渲染地图。

cocos2dx A* + tiledMap

w18767104183的专栏

09-30

5497

前面一章讲了cocos2dx 中使用A星算法这章中讲 A*结合tiledmap 先看下效果图图有点丑,忍受下绿色的块表示人物的行走的路线(A*算法的结果) 红色部分表示A*算法搜寻过的点(越少,速度越快) 黑色的部分(其实是无色块,因为背景是黑色的) 表示障碍物这张图是用tiledmap做出来的, 看看里面的内容可以看到我把不能通过的地区的图

TiledMap 地图有哪些优化方法？Cocos Creator 带你从这4个方面入手，实现深度优化...

Cocos的博客

07-06

1020

引言：如何进行 TiledMap 地图优化？开发者Bool Chen 将分享一套行之有效的 TiledMap 地图优化方案，其中包括了渲染、解析、寻路方面。当项目里的地图越来越庞大和复杂，一些性能上的问题也开始逐渐出现。本文将从裁剪区域共享、Sprite 颜色数据去除、多图集渲染合批和分帧寻路四个方面，分享关于 TiledMap 地图的优化以及实现。测试用例本次的测试用例是这样的一张地图，有6个...

tilemap 菱形_使用Cocos creator制作【治愈七夕】-音乐游戏图形api绘制跳舞的线

weixin_39542710的博客

12-31

401

专栏概述及目录：笑苍天Smile：专栏概述及目录zhuanlan.zhihu.com游戏截图：游戏地址：微信扫一扫游戏源码游戏技术：前端引擎-Cocos creator，语言-Ts。写作目的：自我总结，游戏引流，经验分享。游戏分成Cocos creator引擎的通用技术，微信的第三方接入，治愈七夕共3个部分。前面两部分可参考wind扫雷治愈七夕商业模式音乐加载微信前后台切换声音处理地形图tile...

【amazing cocos2d-x 3.0之九】Tiled Map（瓦片地图）

三十画生一个北漂的人

04-04

3768

Tiled Map（瓦片地图）编辑器的使用，详见：http://blog.youkuaiyun.com/legendof1991/article/details/22289857 1. TMX瓦片地图格式 cocos2d-x支持Tiled所创建的地图文件（TMX）。 2. 地图定向（Orientation） Orthogonal maps 直角鸟瞰地图(90°地图) Isometr

cocosCreator 动态设置tiledMap碰撞区域

王扬扬的博客

06-29

4518

需求：在cocosCreator项目里，动态识别tiledMap的图层，并设置某些图层的碰撞分组。（这样一来，每次改动地图，就不需要重新手动修改碰撞区域，复杂形状的碰撞区域可能自动设置）代码：传入需要动态设置的地图节点即可。第一个wall是tiledMap中的图层名称，第二个wall是我设置的碰撞分组名称。 initMap(mapNode) { let tiledMap = mapNode.getComponent(cc.TiledMap); le