cocos2d-x Programmers Guide v3.3 译本和阅读笔记（第3章：精灵）

原著是英文，本文只是一个个人的简单理解的中文的非正式翻译，供自己学习使用，参考需谨慎。

向原著的作者SlackMoehrle, Ricardo, Justin, Nite , Kai, Minggo, Wenhai, Tony, Yingtao, Rao 致敬。

第三章：精灵

什么是精灵

精灵是一张2D的贴图，我们通过改变它的属性来实现播放动画或者完成各种转换动作，比如旋转角度，位置，放缩，颜色等等。

创建精灵

根据实际情况的不同，我们提供了创建精灵的几种不同方式。你可以通过几种不同的图片格式来创建精灵，比如PNG，JPEG，TIFF等。我们接下来看一下都有哪些精灵的创建方式，并对每一种分别讨论。

创建一个精灵

我们可以通过某个图片来创建精灵

auto mySprite = Sprite::create("mysprite.png");

图1

上面创建精灵的方法使用图片“mysprite.png”。这样会利用整个图片来创建一个精灵。精灵的尺寸和图片的尺寸是一样的。如果图片的尺寸是200x200，那么精灵的尺寸也是200x200。

用矩形（Rect一个类）创建精灵

之前的例子中，我们创建的精灵的尺寸和图片的原始尺寸是一样的。如果你希望使用图片的某个特定的部分来创建自己的精灵，你可以使用一个特定的矩形（Rect）来完成。

Rect 有四个值：原点 x ，原点 y，宽和高。

auto mySprite = Sprite::create("mysprite.png", Rect(0, 0, 40, 40));

图2

也许于你平时在屏幕上布局位置的时候以左下角为原点的习惯向违背，Rect是以左上角为原点的。因此我们得到的精灵只是图片文件的一部分，它是从左上角开始的一个40x40的方形区域。

如果你不指定Rect，Coco2d-x将会自动的使用整个图片的宽和高作为你Rect。看一下下面的两行代码，如果我们指明尺寸为200x200，结果将是一样的。

auto mySprite = Sprite::create("mysprite.png");
auto mySprite = Sprite::create("mysprite.png", Rect(0, 0, 200, 200));

通过精灵表单（sprite sheet）创建精灵

sprite sheet 是一种拼合了许多单个精灵的文件。这种方式相对于把每个精灵图片保存在一个单个的文件中减少了整体文件的大小。这样你就能够有效的减少内存使用、文件大小和加载时间。

不仅如此，使用精灵表单还可以让你通过批量绘制来提高游戏的性能。在后面的章节你读到更过关于这些的内容，这是众多提高游戏效率的标准化方法中的一个。

使用sprite sheet 是，sprite sheet 将会在进入的时候加载到SpriteFrameCache中。SpriteFrameCache 是一个缓存类。它将SpriteFrame 对象持久化以便于之后的快速访问。

SpriteFrame 对象保存的是包含图片文件的名称和指定精灵尺寸的Rect。

SpriteFrameCache避免了将SpriteFrame一次又一次的重复加载。SpriteFrame只需要加载一次并保存在SpriteFrameCache中。

这是一个精灵表单的例子



它看上去没什么不同，让我仔细看一看到底发生了什么：



如你所见，精灵表单一方面最大化减少不需要的空间并且把所有的精灵包含在同一个文件中。

那就让我们把所有的都绑定在一起吧！

加载一个精灵表单（Sprite Sheet）

加载精灵表单到SpriteFrameCache，可能是在AppDelegate中：

// load the Sprite Sheet
auto spritecache = SpriteFrameCache::getInstance();
// the .plist file can be generated
// with any of the tools mentioned below
spritechache->addSpriteFramesWithFile("sprites.plist");

现在我们已经将一个精灵表单加载到SpriteFrameCache中了，我们可以使用它来创建精灵了。

使用SpriteFrameCache创建精灵

下面这段代码演示了如何利用SpriteFrameCache创建精灵。

//Our .plist file has names for each of the sprites in it.
//We`ll grab the sprite named, "Blue_Front1" from the sprite
//sheet:
auto mysprite = Sprite::createWithSpriteFrameName("Blue_Front1.png");

使用SpriteFrame创建Sprite

另一种创建Sprite的方式是从SpriteFrameCache中拿出SpriteFrame，然后使用SpriteFrame创建Sprite。

例子：

//this is equivalent to the previous example.
//but it is created by retrieving the spriteframe
//from the cache.
auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFarmeByName("Blue_Front1.png")
//在更新的版本中getSpriteFrameByName已经不在提倡，(个人添加)
//新版本建议使用getSpriteFrame("name at here")（个人添加）
auto newSprite = Sprite::createWithSpriteFrame(newspriteFrame);

创建精灵表单的工具

手动创建精灵表单是个繁琐的过程。有幸的是，市面上有许多自动构建精灵表单的工具。这些工具根据你的对精灵表单的需求提供了多种方式来优化。

只是几种工具：

Cocos Studio

ShoeBox

Texture Packer

Zwoptex

精灵的操作
4000

创建一个精灵之后，你需要接触精灵的各种属性以便对精灵控制。

我们已经完成：

auto mySprite = Sprite:create("mysprite.png");

锚点（Anchor Point）和位置

锚点了你设置图片位置的时候使用的点。锚点只对一些属性有影响，比如放缩，旋转，扭曲。对另一些没有影响，比如颜色和透明度。锚点使用左下角为原点的坐标系统。就是说当你指定锚点的x和y值时一定要确定你是从左下角开始计算的。所有Node 对象的默认锚点是（0.5， 0.5）。

设置锚点十分简单：

// DEAFULT anchor point for all Sprites(所有精灵的默认锚点)
mySprite->setAnchorPoint(0.5, 0.5);

// bottom left
mySprite->setAnchorPoint(0, 0);

// top left
mySprite->setAnchorPoint(0, 1);

//bottom right
mySprite->setAnchorPoint(1, 0);

//top right
mySprite->setAnchorPoint(1, 1);

效果如下：

受锚点影响的精灵属性

锚点只影响那些可以被变换（transform）的属性。（这一点我解释一下，原著中使用transformed，这个词是变换，它的像scale rotation skew的设置改变实际上是依赖数学上的矩阵变换产生的，有兴趣可以了解一下，而颜色之类的只是色值而已）。这些和变换（transform）相关的属性包含放缩（scale）， 旋转（rotation），形变（skew）。

位置(Position)

一个精灵的位置会受到锚点的影响。这是由于锚点是位置计算的开始点。让我看一下接下来发生的事。注意一下红线和精灵的相对位置关系。当我改变锚点值时，精灵的位置也发生了变化。值得指出的一点是这些变化只是由于锚点位置的变化引起的。我们并没有使用setPosition()语句：



除了改变锚点外还有许多改变精灵位置的方法。精灵对象用的位置也可以使用setPosition()来改变。

//position a sprite to a specific position of x = 100, y =200
mySprite->setPosition(Vec2(100, 200));

旋转（Rotation）

通过改变正负角度，我们可以旋转精灵。正数角度是顺时针旋转，而负数就是逆时针旋转。默认值是0.

//rotate sprite by +20 degrees
mySprite->setRotation(20.0f);
//rotate sprite by -20 degrees
mySprite->setRotation(-20.0f);
//rotate sprite by +60 degrees
mySprite->setRotation(60.0f);
//rotate sprite by -60 degrees
mySprite->setRotation(-60.0f);

放缩(scale)

可以通过scale改变x向y向或者两个方向的放缩大小。默认是1。

// increases X and Y size by 2.0 uniformly
mySprite->setScale(2.0);
// increases just X scale by 2.0
mySprite->setScaleX(2.0);
// increases just Y scale by 2.0
mySprite->setScaleY(2.0);

形变（Skew）

精灵可以改变x向和y向的形变，默认值0

//adjusts the X skew by 20.0
mySprite->setSkewX(20.0f);
//adjusts the Y skew by 20.0
mySprite->setSkewY(20.0f);

不收锚点影响的的精灵属性

也有一些属性不受到锚点影响，因为他们改变一些表面属性，比如颜色和透明度。

颜色（Color）

精灵的颜色改变。这是通过向精灵传递Color3B对象实现的。Color3B对象是RGB值。我们还没有提到过Color3B对象，但是一个非常简单的定义RGB颜色的对象。RGB颜色是有3个字节的0-255的值组成。Cocos2d-x也定义了一些你拿来即用的预定义颜色。使用这些预定义的颜色可能会更快一点。比如Color3B::White 和 Color3B::Red。

//set the color by passing in a pre-defined Color3B object.
mySprite->setColor(Color3B::WHITE);
//set the color by passing in a Color3B object.
mySprite->setColor(Color3B(255, 255, 255));
//same as Color3B::WHITE

* 不透明度（Opacity）*

我们可以通过一个特定的值来改变图片的透明度。透明度的属性是从0-255的值。255表示完全不透明，而0表示完全透明。实际上0不透明度（Opacity）的图像是看不到的。默认的不透明度是255。

//set the opacity to 30 , which makes this sprite 11.7% opaque.
//(30 divided by 256 equals 0.117875)
mySprite->setOpacity(30);