Cocos2d-x特殊节点对象（瓦片地图、粒子系统、视差滚动）概述

ufgnix0802
338 阅读6分钟

Cocos2d-x特殊节点对象（瓦片地图、粒子系统、视差滚动）概述

  除了Label、Sprite这些基本的节点对象外，Cocos2d-x还提供了一些特殊的节点对象，来帮助构造建一些高级功能。

  也许你想制作一个基于瓦片地图的游戏，也许你想添加粒子效果，也许你想在游戏中添加一个2D滚动的边栏，别担心，这些特殊的节点对象能帮助你。

瓦片地图

  在游戏开发过程中，我们会遇到超过屏幕大小的地图，例如在即时战略游戏中，它使得玩家在地图中滚动游戏画面。这些游戏通常会有丰富的背景元素，如果直接使用背景切换的方式，需要为每个不同的场景准备一张背景图，而且每个背景图都不小，这样会造成资源浪费。

  瓦片地图就是为了解决这个问题而产生的。一张大的世界地图或者背景图可以由几种地形来表示，每种地形对应一张小的图片，我们称这些小的地形图片为瓦片。把这些瓦片拼凑在一起，一个完成的地图就组合出来了，这就是瓦片地图的原理。

  在Cocos2d-x中，瓦片地图实现的是TileMap方案，TileMap要求每个瓦片占据地图上一个四边形或者六边形的区域。把不同的瓦片拼接在一起，就可以组成完成的地图。TileMap使用一种基于XML的TMX格式文件。

  使用TMX文件创建一个瓦片地图：

//读取瓦片地图
auto map = TMXTiledMap::create("TileMap.tmx");
this->addChild(map,0,99);//tag值为99

  瓦片地图可能有许多层，通过层名获取一个特定的层。

//如何获得特定的层
auto map = TMXTiledMap::create("TileMap.tmx");
auto layer = map->getLayer("Layer0");
auto tile = layer->getTileAt(Vec2(1,63));//通过位置坐标获取该层上面的某个精灵对象

  每个瓦片都有独一无二的位置和ID，这使得我们很容易选择特定的瓦片。

  通过位置访问：

//获取具体的瓦片ID
unsigned int gid = layer->getTileGIDAt(Vec2(0,63));

  瓦片地图布局示例：

效果图

效果图

  有很多工具可以用来制作瓦片地图，Tiled就是一种一款流行的制作工具，它有一个活跃的用户社区。上面的两张图就来自于Tiled的项目。

粒子系统

  粒子系统是指计算机图形学中特定现象的技术，它在模拟自然现象、物理现象及空间扭曲上具备得天独厚的优势，能为我们实现一些真实而又带有随机性的效果（如爆炸、烟花、水流）提供了方便。Cocos2d-x引擎中就为我们提供了强大的粒子系统。

  下面是使用粒子系统完成的两个粒子特效：

效果图

效果图

创建粒子特效的工具

  尽管你能手动创建粒子特效，按照喜好确定每个属性，但是使用工具往往更方便高效。下面介绍几个第三方工具：

  1. Particle Designer：Mac上一款非常强大的粒子特效编辑器
  2. V-play particle editor：一款跨平台的粒子特效编辑器
  3. Particle2dx：一款web粒子特效编辑器，打开网页即可进行设计。

  使用这些工具完成粒子特效的设计，最终会导出一个*.plist*文件，Cocos2d-x通过使用这种文件，就能把粒子特效添加到场景中，添加方法和操作一个普通的节点类型一样。

  创建方法：

//通过plist文件创建
auto particleSystem = ParticleSystem::create("SpinningPeas.plist");

内置粒子特效

  准备好添加粒子特效到你的游戏中了吗？是否习惯创建自定义粒子特效？不习惯也没关系，我们内置了一些粒子特效，可以直接使用。这些列表都是（以下粒子特效均使用重力模式且是点粒子系统）：

  • ParticleFire
  • ParticleFireworks
  • ParticleSun
  • ParticleGalaxy
  • ParticleFlower
  • ParticleMeteor
  • ParticleSpiral
  • ParticleExplosion
  • ParticleSmoke
  • ParticleSnow
  • ParticleRain

  比如使用内置的烟火特效ParticleFireworks:

auto emitter = ParticleFireworks::create();

this->addChild(emitter,10);

  是这样的效果：

效果图

  要是内置的粒子特效不是我们所需要的那样，也没关系，可以直接手动设置参数！让我们拿上面的烟火特效示例，并通过手动改变属性进一步控制。

auto emitter = ParticleFireworks::create();

//设置持续时间
emitter->setDuration(ParticleSystem::DURATION_INFINITY);

//半径模式
emitter->setEmitterMode(ParticleSystem::Mode::RADIUS);

//半径模式：中心100px
emitter->setStartRadius(100);
emitter->setStartRadiusVar(0);
emitter->setEndRadius(ParticleSystem::START_RADIUS_EQUAL_TO_END_RADIUS);
emitter->setEndRadiusVar(0);

效果图

视差滚动

  • 什么是视差滚动？

    • 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

  • 视差滚动的规则

    越远的层移动的速度越慢，越近的层移动速度越快。

    • 背景层的滚动最慢
    • 贴图层的滚动次慢
    • 内容层的滚动可以和页面的滚动速度一致

效果图

  视差滚动是指让多层背景以不同速度移动，从而形成的立体运动效果。比如超级马里奥游戏中，角色所在地面的移动与背景天空的移动，就是一个视差滚动。Cocos2d-x通过ParallaxNode对象模拟视差滚动。可以通过序列控制移动，也可以通过监听鼠标，触摸，加速度计，键盘等事件控制移动。ParallaxNode对象比常规节点对象复杂一些，因为为了呈现不同的移动速度，需要多个子节点。它类似Menu像一个容器，本身不移动，移动的是被添加进入其中的不同子节点。ParallaxNode的创建：

//创建ParallaxNode
auto paraNode = ParallaxNode::create();

  添加多个节点对象：

//创建ParallaxNode
auto paraNode = ParallaxNode::create();

//背景图片以x坐标为0.4，y坐标为0.5的速率移动
paraNode->addChild(background,-1,Vec2(0.4f,0.5f),Vec2::ZERO);

//瓦片以x坐标为2.2，y坐标为1.0的速率移动
paraNode->addChild(middle_layer,1,Vec2(2.2f,1.0f),Vec2(0,-200));

//顶部图片以x坐标为3.0，y坐标为2.5的速率移动
paraNode->addChild(top_layer,2,Vec2(3.0f,2.5f),Vec2(200,800));

  需要注意的是，被添加的每个Node对象被赋予了一个唯一的z-order顺序，以便他们堆叠在彼此之上。另外要注意addChild()调用中两个Vec2参数，第一个决定这个子节点的移动速度与父节点的移动速度的比率，第二个是相对父节点ParallexNode的偏移量。

Cocos2d-x特殊节点对象（瓦片地图、粒子系统、视差滚动）概述_ufgnix0802的博客-CSDN博客_在tiledmap挂上粒子特效(ufgnix0802.blog.csdn.net/article/det…)

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，   点击查看活动详情

avatar
文章
阅读
粉丝