Cocos2d-x 开发者指南03：精灵

在 Cocos2d-x 中，精灵是我们经常会遇到的元素。那么，什么是精灵呢？

什么是精灵

精灵是一个 2D 图像，通过改变它的旋转角度、位置、尺寸、颜色等属性，我们可以让它运动或者进行变换。

创建精灵

创建精灵有多种方式，具体使用哪种方式取决于你的需求。你可以通过不同的图片格式（包括 PNG、JPEG、TIFF 等）来创建精灵（Sprite）。下面我们来详细讨论这些创建精灵的方法。

使用指定图片创建一个 Sprite

使用指定图片创建 Sprite 的代码如下：

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

上述代码使用 “mysprite.png” 图片文件创建了一个 Sprite。该方法创建的 Sprite 使用了整张图片，其尺寸与 “mysprite.png” 图片的尺寸相同。例如，如果 “mysprite.png” 图片的尺寸是 200x200，那么所创建的 Sprite 也是 200x200。

使用矩形创建一个 Sprite

在前面的例子中，创建的精灵与原始图片的尺寸相同。如果你想创建一个只显示图片特定部分的 Sprite，可以使用 Rect。

Rect 有四个值：origin x、origin y、width 和 height，即原点 x、原点 y、宽和高。示例代码如下：

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

Rect 从左上角开始创建，这与从左下角开始布局的屏幕坐标相反。所以，这个 Sprite 只是图像的一部分。在这个例子中，Sprite 的尺寸是左上角 40x40 的部分。

如果没有指定特定的 Rect，Cocos2d-x 将自动使用指定图片的长和宽。例如，使用 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 创建精灵的步骤：

加载一个 Sprite Sheet

将 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
spritecache->addSpriteFramesWithFile("sprites.plist");

从 SpriteFrameCache 中创建一个精灵

可以使用以下代码从 SpriteFrameCache 中创建一个精灵：

auto mysprite = Sprite::createWithSpriteFrameName("mysprite.png");

从 SpriteFrame 中创建一个精灵

另一种创建精灵的方式是从 SpriteFrameCache 中获取 SpriteFrame，然后使用 SpriteFrame 创建精灵，示例代码如下：

// this is equivalent to the previous example,
// but it is created by retrieving the spriteframe from the cache.
auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByName("mysprite.png");
auto newSprite = Sprite::createWithSpriteFrame(newspriteFrame);

创建 Sprite Sheet 的方法

创建 Sprite Sheet 是一个复杂的过程。幸运的是，可以使用一些工具自动创建它们。这些工具还可以提供更多的参数，通过调整参数可以优化 Sprite Sheet。这里推荐几个工具：

• Cocos Studio
• Texture Packer
• Zwoptex

控制精灵

创建完一个精灵之后，我们可以通过设置它的多个属性来控制它。示例代码如下：

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

锚点和位置

锚点

锚点是一个定点，设置精灵位置时可以通过锚点来指定使用精灵的哪个部分。锚点只影响可以修改的属性，包括 scale、rotation 和 skew，不包含 color 和 opacity。锚点使用左下角坐标系统，这意味着设置 X、Y 坐标值时需要确保是从左下角开始计算。默认情况下，所有节点对象的锚点都是 (0.5, 0.5)。

设置锚点的代码如下：

// DEFAULT anchor point for all Sprites
mySprite->setAnchorPoint(Vec2(0.5, 0.5));
// bottom left
mySprite->setAnchorPoint(Vec2(0, 0));
// top left
mySprite->setAnchorPoint(Vec2(0, 1));
// bottom right
mySprite->setAnchorPoint(Vec2(1, 0));
// top right
mySprite->setAnchorPoint(Vec2(1, 1));

被锚点影响的精灵属性

锚点只影响可以改变的属性，包括 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。示例代码如下：

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

缩放（Scale）

改变 X 值、Y 值或者同时改变 X、Y 值可以缩放精灵。X、Y 的默认值都为 1.0。示例代码如下：

// 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 值或者同时改变 X、Y 值可以使精灵倾斜。X、Y 的默认值都为 1.0。示例代码如下：

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

不被锚点影响的精灵属性

有一些精灵对象的属性是不被锚点所影响的，因为这些属性只改变表面特征，如颜色和透明度。

颜色

向 Color3B 对象中传递相应的值即可改变精灵的颜色。Color3B 对象代表 RGB 颜色值，RGB 颜色值是 0 - 255 之间的值。Cocos2d-x 还提供预定义颜色供开发者选择，使用预定义颜色会更快一些。示例代码如下：

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

透明度

通过特定的值来改变精灵的透明度，取值范围为 0 - 255，默认值为 255（不透明）。示例代码如下：

// set the opacity by passing in a value
mySprite->setOpacity(30);

以上就是关于 Cocos2d-x 中精灵的创建和控制的详细介绍。