Cocos Creator学习のTiledMap

目前正在学习Cocos creator，版本是2.4.x

PS: 业余兴趣进行学习一下，体会一下做游戏的感受，而且逻辑语言也可以使用JS和TS进行编写

关于cocos creator和tiledMap的一些简单介绍可以参考：

用Cocos Creator让嫦娥一步步跳上月亮
Tiled工具绘制需要的瓦片图

Cocos Creator，这是一款游戏开发引擎。 Tiled，是一款可以用来绘制瓦片地图的工具。

本次学习的来源主要为： B站的视频

Cocos Creator使用Tiled地图

创建地图的步骤：

先划分好需要的地图层次，最底部是地面层。然后是地面上的装饰层，这些装饰玩家可以踩在上面。之后是对象层，玩家和一些可以交互的物体基本就位于这一层。再上一层可以是遮盖层，比如一些树，玩家经过可以被遮挡住。最上层可以是阻挡物层，玩家不可通过

地图层次	作用
阻挡层	玩家不可通过，会产生碰撞
遮盖层	玩家可通过，但是会被遮盖住
对象层	玩家所在层
地面装饰层	玩家可通过，地面上可能会有一些花花草草，玩家可以踩在上面
地面层	玩家可通过，最基本的地面，玩家可以踩在上面

素材的话可以自己去寻找，本人是从爱给网上获取的。
先在Tiled 右侧的图层上建立好五层，中间是对象层，然后经过了一些时间的绘制，一张简单的分层地图就出现了。中间的十字墓碑是之后玩家将要初始出现的地方
将创建好的tile地图拖到项目中，可以看到forestAndCity下面具有五层节点。
可以在playObj节点下添加一个单色精灵player作为之后要运动的玩家，上面挂在一个playerControl作为运动脚本。然后把这个精灵拖到下方资源文件夹中变成预设体prefab
可以把canvas和camera的大小缩小，为了让之后的玩家运动起来后摄像机跟随运行看起来跟舒服
创建一个newMapControl脚本挂在到 forestAndCity节点 上面，用来获取Tiledmap地图

关于更多地图方法可参考：官方TiledMap的API

下面是newMapControl的代码：（现在运行后，玩家就会出现在startPos的位置上，并且摄像机也会跟随移动到此位置）

export default class newMapControl extends cc.Component {//  获取瓦片图资源map: cc.TiledMap;player: cc.Node = null;// onLoad () {}start () {this.map = this.getComponent(cc.TiledMap);// 获取指定的对象层 let playerObj = this.map.getObjectGroup('playObj');// 获取对象let playerStartPos = playerObj.node.getChildByName("startPos");// 在开始位置创建玩家对象// 加载资源cc.resources.load('prefab/tilemap/player', cc.Prefab,  (err, playerPre)=> { // 实例化预设体this.player = cc.instantiate(playerPre);this.player.setParent(this.node.getChildByName('playObj'));// // // 设置玩家位置this.player.x= playerStartPos.x;this.player.y = playerStartPos.y;})}update (dt) {// 摄像头跟随玩家if (this.player != null) {cc.Camera.main.node.x = this.player.x;cc.Camera.main.node.y = this.player.y;}}
}

效果：

8. 然后封装一个移动的ts文件，取名为moveInput，对应按键按下，横轴竖轴上运动方向改变。

const {ccclass, property} = cc._decorator;
// 封装移动方向
// 单例模式
export default class moveInput{private static instance: moveInput = null;// 水平轴horizontal: number = 0;// 垂直轴vertical: number = 0;static Instance() {if (!this.instance) { this.instance = new moveInput(); }return this.instance;};// 通过private修饰符，让类无法在外部创建新的实例private constructor() { // 键盘按下cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, (event)=>{switch(event.keyCode) {case cc.macro.KEY.w: this.vertical = 1; break;case cc.macro.KEY.s: this.vertical = -1; break;case cc.macro.KEY.a: this.horizontal = -1; break;case cc.macro.KEY.d: this.horizontal = 1; break;}})// 键盘抬起cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, (event)=>{switch(event.keyCode) {case cc.macro.KEY.w: if(this.vertical == 1) this.vertical = 0; break;case cc.macro.KEY.s: if(this.vertical == -1) this.vertical = 0; break;case cc.macro.KEY.a: if(this.horizontal == -1) this.horizontal = 0; break;case cc.macro.KEY.d: if(this.horizontal == 1) this.horizontal = 0; break;}})}
}

这样只需要在playerControl玩家运动脚本中进行控制即可，记得要import导入moveInput。这里的speed速度我设置了一百。

ps: 如果想让玩家每秒移动设置的速度，需要乘dt

update (dt) {// 移动this.node.x += this.speed * dt * moveInput.Instance().horizontal;this.node.y += this.speed * dt * moveInput.Instance().vertical;
}

当前效果（因为博客图片大小限制，这里我剪了一些帧数）：

9. 但是这里会发现，虽然隐藏层已经实现了，但是阻挡层并没有阻挡物体，并且物体也可以超出界面之外。所以要开启物理系统。在newMapControl中代码开启，并且在节点上也可以添加四周边框。注意： 地图的刚体类型要选为静止，否则会掉下去

onLoad () {// getPhysicsManager物理管理器let gp:cc.PhysicsManager = cc.director.getPhysicsManager();gp.enabled = true;// 绘制调试区域var Bits = cc.PhysicsManager.DrawBits;gp.debugDrawFlags = Bits.e_shapeBit;
}

在玩家的预设体上面也需要添加物理组件，并且将玩家的重力设置为0，否则会下落

效果：

设置当前的阻挡层刚体，现在地图的四周已经设置好了范围，玩家出不去了，但是阻挡层玩家还是可以通过。
因为阻挡层的形状变化过多，如果一个刚体一个刚体添加过于麻烦，所以可以通过分组来进行动态设置。

定义一个mapInit方法，用于动态生成刚体，并且对应的hinder节点的anchor最好也调整成(0,0)，

const {ccclass, property} = cc._decorator;
// 动态生成地图刚体 name: 需要生成刚体的层次名字， groupIndex: 分组index  tileMap: 地图
export default function mapInit(name: string, groupIndex:number, tileMap: cc.TiledMap) {let tileSize = tileMap.getTileSize();  // 地图小块尺寸 let layer:cc.TiledLayer = tileMap.getLayer(name);  // 得到阻挡层let layerSize = layer.getLayerSize();  // 得到阻挡层尺寸for(let i = 0; i < layerSize.width; i++) {for (let j = 0; j < layerSize.height; j++) {   let tiled:cc.TiledTile = layer.getTiledTileAt(i, j, true);  // 拿到小块// 如果元素存在if (tiled.gid != 0) {let body:cc.RigidBody = tiled.node.addComponent(cc.RigidBody);  // 动态添加RigidBody刚体body.type = cc.RigidBodyType.Static;  // 设置为静态，防止下落tiled.node.group = 'hinder'; // 将这个节点设置为walltiled.node.groupIndex = groupIndex;  // 设置节点的groupIndexlet collider = tiled.node.addComponent(cc.PhysicsBoxCollider); // 添加碰撞区域collider.offset = cc.v2(tileSize.width/2, tileSize.height/2)  // 设置偏移量, 除2是为了拿到中心点collider.size = tileSize; //包围盒的大小collider.apply();  //回调}}}
}

现在就出现了地图阻挡层的刚体了

之后可以把绘制调试区域隐藏，一个简单的TiledMap学习就到此结束了。

Cocos Creator学习のTiledMap相关推荐

cocos creator学习（七）音乐
目录背景音乐使用AudioSource组件 ①添加组件 ②脚本控制直接脚本控制 ①声明 ②播放背景音乐(playMusic) 音效直接脚本控制 ①声明 ②播放 ③停止注意背景音乐使用Au ...
cocos creator 学习随笔 day03 节点和组件属性
目录节点本身属性控件属性场景空节点 3D对象 2D对象 UI组件光线特效摄像机地形节点本身属性第一栏为节点名,可修改,前面得勾,是表示是否使用该节点,去掉代表隐藏该节点,但是该节点 ...
Cocos Creator学习目录
目录安装和启动文件结构编辑器基础基本概念 (场景树节点坐标组件 ) Cocos Creator 脚本简介 Cocos Creator调试节点 cc.Node 组件开发cc.Compon ...
Cocos creator 学习笔记（2）
7.ts 跳转场景 director.loadScene("game"); 8 ts--在ts文件声明变量时,前面加上注解 @property,此变量量就可以在cocos ...
cocos creator学习（十四） websocket、onfire
1.使用websocket替换原本无法在原生平台使用的socket. 2.事件分发开源库onfire的使用 3.一些注意事项 1.使用websocket替换原本无法在原生平台使用的socket. 其实 ...
cocos creator 学习第一篇
文章目录游戏引擎: cocos2d cocos creator 版本: 编辑器游戏引擎: unity 编程语言主要为c# 早期cocos2d 等用c++ 或者lua cocos creator 编 ...
cocos creator学习个人踩坑（3）--关于项目调试在一些安卓机上FPS低
一些cocos creator遇到的小问题问题在做点消游戏项目的时候,在一些旧的安卓机上测试时消除特效显示会有明显的卡顿,火箭消除会有残留,FPS下降明显原因通过真机调试,发现日志输出会明显导 ...
cocos creator学习：PageView 控件的使用
PageView: 页面视图组件,实现分页功能 PageViewIndicator: 页面视图每页标记组件,常用与PageView配合使用 1.介绍当我们直接使用ccc提供的控件时,节点如下图,其 ...
Cocos Creator游戏开发教程学习笔记
学完提问几个问题吧: position的锚点位置数值原点在哪里? 因为position是相对坐标,所以原点是父节点的锚点 .所以Canvas下面的直属节点原点就是世界坐标系的原点Canvas的锚点. ...
cocos creator 3D学习（六）光照+阴影
目录前言分类 1.方向光 2.球面光 3.聚光灯 4.阴影 5.环境光最后前言有一些会需要在cocos creator 3D里面加光照,让模型更好看一些 cocos creator 3D里面 ...

Cocos Creator学习のTiledMap

Cocos Creator使用Tiled地图

Cocos Creator学习のTiledMap相关推荐

最新文章

热门文章