windows开发cocos2d-x系列（3）— 舞动你的精灵

前言

　　上一篇介绍了HelloWorld程序，这次我们来介绍一个很重要的元素——精灵(Sprites)。

精灵是什么？

　　精灵(Sprites)是任何游戏的一个核心元素。我们需要他们。在游戏中我们经常喜欢用它来自作和播放角色。它可以移动，旋转，缩放，执行动画，并接受其他转换。Cocos2dx的Sprite由Texure，frame和animation组成，由openes负责渲染。简单过程可描述为：使用Texture2D加载图片，可以用Texture2D生成对应的SpriteFrame（精灵帧），将SpriteFrame添加到Animation生成动画数据，用Animation生成Animate（就是最终的动画动作），最后用Sprite执行这个动作。有时候，精灵可以充当游戏的背景，可以是游戏中的主角，也可以是无恶不做的怪物。其实，它就是一张图片，但其性能开销低，经常被用来设置游戏中大部分图片资源。

创建精灵

创建精灵的几种方式：

• 直接创建


auto sprite = Sprite::create("HelloWorld.png");
this->addChild(sprite,0);

• 使用纹理来创建精灵

　　有时候，为了让图片资源更小，会根据一张图片来创建不同的CCSprite，这样需要首先通过CCTextureCache加载图片到图片纹理的缓存，然后从缓存获取这张图片的CCTexture2D对象，根据这个对象来创建CCSprite，代码如下：

auto sprite1 = Sprite::createWithTexture(TextureCache::getInstance()->addImage("HelloWorld.png"));
this->addChild(sprite1, 0);

• 使用精灵帧来创建精灵

　　利用帧缓存中的一帧的名称声称一个对象，适合于plist打包好的文件

CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("test.plist");
auto sprite2=Sprite::createWithSpriteFrameName("HelloWorld.png");　　
this->addChild(sprite2, 0);

在Cocos2dx中实现精灵显示的基本过程如下：

//创建Scene
auto scene = Scene::create();
//创建层
auto layer = HelloWorld::create();
//把层加入场景中
scene->addChild(layer);
//创建一个精灵
auto sprite = Sprite::create("HelloWorld.png");
//把精灵加到层里
layer->addChild(sprite, 0)

开始舞动吧！

　　在介绍action之前，先说明一个cocos2d-x 中坐标系的概念：在场景中以左下角为坐标原点，从左到右为x方向，从下到上为y方向，明白了这个，我们来简单介绍一下动作族谱中的几个常用成员吧。

• 　　MoveTo(移动节点对象到位置x,y。x,y是绝对坐标，通过修改它的位置属性来改变它们的值)

  /* 创建精灵 */
  Sprite* sprite=Sprite::create("test.png");
  /* 创建一个0.9秒后移动到x:250,y:150点的动作 */
  MoveTo* moveTo = MoveTo::create(0.9f, Point(250, 150));
  /* 执行动作 */
  sprite->runAction(moveTo);

• 　　ScaleTo(缩放动作)

  /* 创建精灵 */
  Sprite* sprite=Sprite::create("test.png");
  /* 创建一个3秒后宽度和高度都放大成2倍的动作 */
  ScaleTo* scaleTo = ScaleTo::create(3.0f, 2.0f, 2.0f);
  /* 执行动作 */
  sprite->runAction(scaleTo);

• 　　Blink(闪烁动作)

  /* 创建精灵 */
  Sprite* sprite=Sprite::create("test.png");
  /* 创建一个3秒内产闪烁3次的动作 */
  Blink* blink = Blink::create(3.0f, 3);
  /* 执行动作 */
  sprite->runAction(blink);

• 　　BezierTo(贝塞尔曲线动作)

  /* 创建精灵 */
  Sprite* sprite = Sprite::create("sprite.png");
  sprite->setPosition(Point(50, 180));
  this->addChild(sprite, 1, TAG_SPRITE);
  /* 创建贝塞尔曲线的配置 */
  ccBezierConfig bezier;
  bezier.controlPoint_1 = Point(100, 0);		//波谷偏向值
  bezier.controlPoint_2 = Point(200, 250);	//波峰偏向值
  bezier.endPosition = Point(300, 0);		//动作终点
  /* 创建CCBezierTo动作对象 */
  BezierTo*  bezierTo = BezierTo::create(4.0f, bezier);
  /* 执行动作 */
  sprite->runAction(bezierTo);
  this->scheduleUpdate();

• 　　RepeatForever(重复执行)

   /* 创建一个精灵 */
  Sprite* sprite = Sprite::create("sprite.png");
  sprite->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2));
  this->addChild(sprite);
  /* 创建一个CCJumpBy动作对象 */
  JumpBy* jumpBy = JumpBy::create(3.0f, Point(50, 1), 100, 1);
  /* 以jumpBy为参数，创建一个永久性的重复动作 */
  RepeatForever* repeatForeverAction = RepeatForever::create(jumpBy);sprite->runAction(repeatForeverAction);

• Sequence(组合动作，按先后顺序执行)

  /* 创建一个精灵 */
  Sprite* sprite = Sprite::create("sprite.png");
  sprite->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2));
  this->addChild(sprite);
  /* 创建一个移动动作对象 */
  MoveBy* moveBy = MoveBy::create(2.2f, Point(40, 20));
  /* 创建一个弹跳动作对象，弹跳高度100，弹跳次数5 */
  JumpBy* jumpBy = JumpBy::create(3.0f, Point(50, 1), 100, 5);
  /* 创建一个旋转动作对象 */
  RotateBy* rotateBy = RotateBy::create(2.5f, 220, 10);
  /* 创建组合动作对象，将所有动作连起来 */
  Action* actions = Sequence::create(moveBy, jumpBy, rotateBy, NULL);
  sprite->runAction(actions);

　　一般来说每个动作都是成对的，都有相应的To跟By，两者有绝对和相对之分。最后是一张动作家族的族谱图：