精选_【Cocos Creator实战教程(4)】——炸弹人(TiledMap相关)_源码打包

# 【Cocos Creator实战教程(4)】——炸弹人(TiledMap相关) # 1. 相关知识点 - 虚拟手柄（新） - 地图制作 - 碰撞检测 - 动画制作 # 2. 步骤 ## 2.1 制作地图 ### 2.1.1.新建19x19的地图，Tile大小32x32，导入图块资源 ### 2.1.2 建立三个图层（ground，hide，main）和一个对象层（objects） ground是背景层，用绿色的草坪图块填充满  hide是道具层，挑选道具图块（包括出口的门）放在几个位置  main是障碍物层，还原经典炸弹人的地图布局，每隔一个位置放一个钢块，用土块覆盖道具层的道具，在其他位置再放几个土块  objects层有两个对象（player，enemy）标记玩家和敌人的位置信息 最终效果如图  ### 2.1.3 将除了草坪图块的其他图块添加type属性，属性值分别为，soil（土块），steel（钢块），door（门），prop1（道具1）...  ### 2.1.4 保存地图文件和图集文件放在一起 ## 2.2 绑定地图 ### 2.2.1 新建工程Bomberman，将所需资源全部导入，项目结构如下（有些是后来添加的）  ### 2.2.2 将地图拖入场景（自动生成map和layer节点），将锚点改为（0，0），下面出现的player等节点也都是(0,0)为锚点 ### 2.2.3 新建脚本game.js添加为map节点组件，声明全局变量,在属性面板中拖入相关层节点  ## 2.3 虚拟手柄 ### 2.3.1 我们准备了上下左右炸弹五个按钮的原始状态和按下状态共十张图片素材，在场景编辑器中看着顺眼的地方摆放这五个按钮（将label删除），并将按钮的相应状态的按钮图片添加到右侧属性面板中 ### 2.3.2 为每个按钮添加点击事件，（map->game->btnBomb, btnUp, btnDown, btnLeft, btnRight）  ## 2.4 炸弹动画 ### 2.4.1 将炸弹图片集中的任意一个拖入场景中，将其宽高改为32x32，再拖回资源管理器中制作一个炸弹的prefab bomb，为其添加Animation组件 ### 2.4.2 新建炸弹爆炸动画clip explode，拖入bomb的属性面板 ### 2.4.3 在动画播放完成的最后一帧加入一个帧事件，响应事件方法名为exploded  ## 2.5 主角和敌人 ### 2.5.1 添加player和enemy为map节点的两个子节点，锚点0，0，大小32x32 （位置随意，一会我们要在代码中动态设置他们的位置）  # 3. 总结 - 虚拟手柄是一个比较热点的控制，现实生活中还会有圆圈控制各个角度的，也有开源项目大家可以参考 - 注意节点前后层的遮挡关系 注意：本教程部分素材来源于网络，另请大家在评论区踊跃提问发言。