Cocos2d-x入门之旅[2]精灵

精灵就是cocos是屏幕上移动的对象，它能被控制，比如我们HelloWorld场景的这个图片就是精灵(Sprite)

怎么才算精灵？你能控制它的，就是一个精灵，否则就只是一个节点(Node)

准确的说，精灵是一个能通过改变自身的属性：角度，位置，缩放，颜色等，变成可控制动画的 2D 图像

精灵很容易被创建，它有一些可以被配置的属性，比如：位置，旋转角度，缩放比例，透明度，颜色，等等

auto mySprite = Sprite::create("xxxxxx.png");
// 改变位置
mySprite->setPosition(Vec2(500, 0));
// 设置旋转角度
mySprite->setRotation(40);
// 设置缩放比例
mySprite->setScale(2.0);
// 设置锚点
mySprite->setAnchorPoint(Vec2(0, 0));

创建精灵

我们的HelloWorld直接使用了一张图像来创建精（PNG, JPEG, TIFF, WebP，都可以），但也有一些其它的方式，比如使用图集和精灵缓存创建

图片创建

回一下HelloWorld场景里的代码

auto sprite = Sprite::create("sinnosuke.png");

精灵会使用整张图像，图像是多少的分辨率，创建出来的精灵就是多少的分辨率

但如果你想要的是一个 尺寸只有原始图像一部分的精灵，你可以在创建的时候指定一个矩形

指定矩形

指定矩形需要四个值，初始 x 坐标，初始 y 坐标，矩形宽，高

auto sprite = Sprite::create("sinnosuke.png", Rect(0, 0, 50, 50));
//我的图片分辨率是200*200

效果就是新之助会一只眼盯着你

矩形的初始坐标要从图形的左上角开始算，即左上角的坐标是 (0, 0)

如果你把矩形的宽高指定为图像的宽高，矩形的初始坐标指定为 (0, 0)，那和默认设定是一样的（这里图片的分辨率就是200x200）

auto sprite = Sprite::create("sinnosuke.png");
//效果相同
auto sprite = Sprite::create("sinnosuke.png", Rect(0,0,200,200));

图集创建

图集(Sprite Sheet)是通过专门的工具将多张图片合并成一张大图，并通过 plist 等格式的文件索引的资源，使用图集比使用多个独立图像占用的磁盘空间更少，还会有更好的性能，这种方式已经是游戏行业中提高游戏性能的标准方法之一

下图就是一个图集

在使用图集时，首先要将其全部加载到名叫 SpriteFrameCache 的缓存中

SpriteFrameCache 是一个全局的缓存类，缓存了添加到其中的 SpriteFrame 对象，提高了精灵的访问速度，SpriteFrame 只加载一次，后续一直保存在 SpriteFrameCache 中

加载图集

获取到 SpriteFrameCache 的实例，把图集添加到实例中

auto spritecache = SpriteFrameCache::getInstance();
spritecache->addSpriteFramesWithFile("sprites.plist");

现在我们就能利用这个对象创建精灵了

精灵缓存

Cocos2d-x 为了提高精灵的访问速度，提供了一个精灵的缓存机制。

我们可以创建一个精灵并把精灵放到精灵的缓存对象SpriteFrameCache中：

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

相对的，我们也可以从精灵的缓存对象 SpriteFrameCache 访问一个精灵

访问方法是先从缓存对象中获取对应的 SpriteFrame，然后从 SpriteFrame创建精灵，方法：

auto newspriteFrame = 
    SpriteFrameCache::getInstance()->getSpriteFrameByName("Blue_Front1.png");
auto newSprite = 
    Sprite::createWithSpriteFrame(newspriteFrame);

控制精灵

在创建完精灵后，你可以开始修改精灵的属性去控制它了

锚点

所有的节点(Node)对象都有锚点值，Sprite 是 Node 的子类，自然也具有锚点

锚点是节点对象在计算坐标位置时的一个基准点，理解不了没关系，直接看图：

以我们刚才的展示的精灵为例，设置锚点(0,0)：

mySprite->setAnchorPoint(Vec2(0, 0));

精灵的左下角(0, 0)就变为了计算坐标的基准点，setAnchorPoint就以这个基准点来设定精灵位置

再看看其它的锚点效果（红点表示锚点的位置）

锚点对于确定节点对象的位置非常有用的

默认情况下，所有的节点对象锚点是 (0.5, 0.5)

位置

精灵的位置受锚点影响，当我们想设置一个精灵的位置时，主要使用 setPosition() 方法，只有想改变精灵与基准坐标点的相对位置时，才考虑使用 setAnchorPoint() 设置锚点

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

旋转

通过setRotation() 方法，设置一个角度值可控制精灵的旋转，正值精灵顺时针旋转，负值精灵逆时针旋转，默认位置的角度值是0.0

mySprite->setRotation(20.0f);

mySprite->setRotation(-20.0f);

mySprite->setRotation(60.0f);

mySprite->setRotation(-60.0f);

结果如下

缩放

通过setScale()方法控制精灵的缩放，可以控制精灵水平缩放，垂直缩放，也可以整体缩放，默认水平和竖直的缩放值都是1.0

mySprite->setScale(2.0);

mySprite->setScaleX(2.0);

mySprite->setScaleY(2.0);

倾斜

通过 setSkewX() 控制精灵的倾斜度，可以控制精灵水平倾斜，竖直倾斜，或者水平竖直同时倾斜，默认水平和竖直的倾斜值都是0.0

mySprite->setSkewX(20.0f);

mySprite->setSkewY(20.0f);

颜色

通过 setColor() 控制精灵的颜色。将一个 RGB 值设置到 Color3B 对象，调用精灵的 setColor() ，就能完成精灵颜色的设置，RGB 是三个从 0-255 的值，三个值分别代表红绿蓝的颜色深度，数值越大，颜色越深

如果你不想自己指定 RGB 的三个值，也可以使用 Cocos2d-x 提供的预定义颜色，比如: Color3B::White，Color3B::Red。

mySprite->setColor(Color3B::WHITE);
//等效于
mySprite->setColor(Color3B(255, 255, 255));

透明度

精灵的透明度可以通过 setOpacity() 传入一个特定的值来设置，这个值的范围是0-255，数值越大透明度越低，255 代表完全不透明，0 代表完全透明

mySprite->setOpacity(30);

多边形精灵

多边形精灵(Polygon Sprite) 也是精灵

普通精灵在绘图处理中被分为了两个三角形，多边形精灵则是被分为了一系列三角形

为什么要使用多边形精灵

因为可以提高性能，真的，深入分析这个是如何提高性能的，会需要很多和像素填充率有关的技术术语，所以我们这里先不深入，只要知道能提高性能就行了

注意上图

• 左侧，精灵绘制时被处理成一个有两个三角形组成的矩形
• 右侧，精灵被处理成一系列小的三角形

右侧多边形精灵需要绘制的像素数量比左侧精灵需要的像素数量更小

AutoPolygon

AutoPolygon是一个工具类，它可以在程序运行时，通过跟踪关键点和三角测量，将一个矩形图像划分成一系列小三角形块

首先将图像资源传入 AutoPolygon 进行处理，然后我们使用它生成的对象进行精灵的创建就能得到多边形精灵

auto pinfo = AutoPolygon::generatePolygon("xxxxxx.png");
auto sprite = Sprite::create(pinfo);