Cocos2d-x精灵详解

基本概念

官方解释：精灵（Sprite）是一个能通过改变自身的属性：角度，位置，缩放，颜色等，变成可控制动画的2D图像。

精灵（Sprite）在2D游戏场景中指的就是像素图。

游戏中的精灵元素

Cocos2d-x中的Sprite精灵可以被移动，被控制。

精灵的创建

通过图片创建精灵

可以使用一张图像来创建精灵，PNG，JPEG，TIFF，WebP，这几个格式都可以。

通过图片路径创建精灵。

Sprite* sprite = Sprite::create("mysprite.png");
//或者
auto mysprite = Sprite::create("mysprite.png");

该方式创建的精灵以静态图的形式出现

图片大小与原大小一致

如果图片显示大小超出屏幕范围，则只显示屏幕内的部分

如果精灵大小小于图片大小，则会按比例进行缩放图片，导致图片变形

使用矩形

上面的例子中，精灵和原始图像的尺寸一致，如果你想创建一个尺寸只有原始图像一部分的精灵，可以在创建精灵的时候使用一个矩形，指定矩形需要的四个值，初始x坐标，初始y坐标，矩形宽，矩形高。

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

矩形的初始坐标，从图形的左上角开始算，即左上角的坐标是（0,0），不是从左下角。（请注意，在测试的时候务必设置精灵的位置坐标，否则无法保证可以精确的看到效果。）因此如果精灵是图像左上角的小块，从左上角开始算起，40x40的大小。

如果没指定一个矩形，Cocos2d-x引擎会自动使用这个图像的全部的宽和高，如果指定矩形的宽高为图像的宽高，矩形的初始坐标指定为（0,0），那这就和第一种情况的效果是完全一样的。

通过图集创建精灵

什么是图集？

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

在使用图集的时候，首先将其全部加载到SpriteFrameCache中，SpriteFrameCache是一个全局的缓存类，缓存了添加到其中的SpriteFrame对象，提高了精灵的访问速度。SpriteFrame只从磁盘中请求一次，后续一直保存在SpriteFrameCache（内存）中。

使用工具创建图集文件
- texturepacker：https://www.codeandweb.com/texturepacker
- shoebox：https://renderhjs.net/shoebox/
- sprite-sheet-packer：https://amakaseev.github.io/sprite-sheet-packer/
其中texturepacker有一个专门为Cocos2d-x写的图集创建指南（https://www.codeandweb.com/texturepacker/tutorials/animations-and-spritesheets-in-cocos2d-x）。

通过图集创建精灵

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

string path = "sprites.plist";
//通过plist文件路径将图片读取到精灵的帧缓存
SpriteFrameCache::getInstance()->addSpriteFramesWithFile(path);
//通过指定名称的精灵帧创建精灵
auto sprite = Sprite::createWithSpriteFrameName("1.png");//具体的根据plist中的key判断，也可无后缀文件名

TIPS：如果读取的图片数量过多，会导致内存崩溃。因此使用后，需要及时清理内存。

使用精灵缓存

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

//.plist文件中有每个精灵的名字，我们获取精灵通过精灵的名字获取。
auto mysprite = Sprite::createWithSpriteFrameName("mysprite.png");

我们可以从精灵缓存对象SpriteFrameCache访问一个精灵，访问方式是先从缓存对象中获取对应SpriteFrame。然后用SpriteFrame创建精灵，方法如下：

//这个例子相当于上面的例子，但它是通过从缓存中检索SpriteFrame来创建的。
auto newspriteFrame = SpriteFrameCache::getInstance()->getSpriteFrameByName("Blue_Font1.png");//先获取该对象
auto newSprite = Sprite::createWithSpriteFrame(newspriteFrame);//使用对象创建//或者如下
auto sprite = Sprite::createWithSpriteFrameName("Blue_Font1.png");//通过.plist文件中的key名直接创建

通过贴图创建精灵

什么是贴图？
- 贴图又称为纹理
- 用ps等平面软件制作材质平面图，覆于利用Maya、3DMax等3D制作软件建立的立体模型上的过程，称为贴图。

TIPS：如果读取的图片数量过多，会导致内存崩溃。因此使用后，需要及时清理内存。

通过贴图创建一个精灵

//贴图缓存
auto textureCache = TextureCache::getInstance();
//读取贴图，在缓存中添加
auto cache = textureCache->addImage("bg/bg_01.jpg");//通过贴图创建精灵
Sprite* sprite = Sprite::createWithTexture(cache);
//裁切贴图
sprite->setTextureRect(Rect(0,0,480,320));

多边形精灵

多边形精灵（Ploygon Sprite）也是一个精灵节点，同样是为了展示一个可以被控制的图像，但是和普通的精灵的区别是，普通精灵在绘图处理中被分为了两个三角形，而多边形精灵则是被分为一系列的三角形。

为什么要使用多边形精灵

提高性能！

要深入分析这个是如何提高性能的，会需要很多和像素填充率有关的技术术语（不作详细阐述）。

注意左右两种情况的不同。

左侧，是一个典型的精灵绘制时的处理，精灵被处理成一个由两个三角形组成的矩形。

右侧，是一个多边形精灵绘制时的处理，精灵被处理成一系列小的三角形。

显然可以看到，右侧多边形精灵需要绘制的像素数量比左侧精灵需要的像素数量更小（在图形学中顶点附近的像素点由于特征相同，是可以根据相应的算法生成的，而左侧无法很好的利用相应的算法。且右侧在GPU渲染的过程中描述的像素点远小于左侧。），由于在现代的图形处理中，一般绘制顶点比绘制像素消耗的性能少。所以多边形精灵的性能更好。

以下使用AutoPloygon工具类创建多边形精灵。

AutoPloygon

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

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

//自动生成多边形信息
auto pinfo = AutoPolygon::generatePolygon("fiename.png");//使用多边形信息创建精灵
auto sprite = Sprite::create(pinfo);

TIPS：

图片格式只能为png图片，不支持其它格式的图片；

生成时会占用CPU，消耗系统性能；

多种精灵创建方式的对比

精灵的控制

在创建完精灵后，现在可以修改精灵的属性去控制它。

创建精灵：

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

锚点

锚点确定了精灵对象在计算坐标位置的一个基准点，这个点是精灵内部的点，锚点影响精灵的缩放，旋转，倾斜这种转换，不影响颜色，透明度这种属性。锚点使用的坐标系以左下角为原点(0,0)，在你设置锚点的值得时候，要注意这个点。默认情况下，所有的节点对象锚点是(0.5,0.5)。

// 所有精灵的默认锚点
mySprite->setAnchorPoint(0.5, 0.5);// 左下
mySprite->setAnchorPoint(0, 0);// 左上
mySprite->setAnchorPoint(0, 1);// 右下
mySprite->setAnchorPoint(1, 0);// 右上
mySprite->setAnchorPoint(1, 1);

观察下面的图，感受锚点对精灵的位置的影响，红点是精灵的锚点。

位置

精灵的位置受锚点的影响，看一下这个具体是怎样的，以红线红点为环境参考，看精灵的不同位置。注意，我们设置了锚点值，精灵的位置变化了，我们并没有使用setPosition()方法设置精灵的位置。

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

//将精灵定位到x=100，y=200的特定位置
mySprite->setPosition(Vec2(100,200));

旋转

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

//顺时针旋转20度
mySprite->setRotation(20.0f);//逆时针旋转20度
mySprite->setRotation(-20.0f);//顺时针旋转60度
mySprite->setRotation(60.0f);//逆时针旋转60度
mySprite->setRotation(-60.0f);

缩放

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

//精灵整体增加2.0
mySprite->setScale(2.0);//精灵水平增加2.0
mySprite->setScaleX(2.0);//精灵竖直增加2.0
mySprite->setScale(2.0);

倾斜

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

//将水平倾斜率调整至20
mySprite->setSkewX(20.0f);//将竖直倾斜率调整至20
mySprite->setSkewY(20.0f);

颜色

通过 setColor()控制精灵的颜色。将一个RGB值设置到Color3B对象，调用精灵的setColor()，就能完成精灵颜色的设置。RGB是一个从0-255的值，三个值分别代表红绿蓝的颜色深度，数值越大，颜色越深。特别是RBG(255,255,255)是白色。如果你不想自己指定RGB的三个值，也可以使用Cocos2d-x提供的预定义颜色，比如 Color3B::White，Color3B::Red。

//通过传递在Color3B对象中预定义的颜色设置颜色
mySprite->setColor(Color3B::WHITE);//通过直接使用Color3B对象设置颜色
mySprite->setColor(Color3B(255,255,255));//跟Color3B::WHITE相同

透明度

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

//将不透明度设置为30，这将使得精灵只有11.7%的不透明度
// 30/255=0.1171875...
mySprite->setOpacity(30);

演示示例：对精灵的控制

要求：
- 实现精灵的旋转效果
- 实现精灵淡入效果
- 实现精灵水平翻转
- 实现精灵在屏幕中自动移动

 //实现精灵旋转效果_angle = 0;_textureSprite->setRotation(_angle);this->schedule([&](float dlt) {_angle += 1.0f;if (_angle > 360)_angle = _angle - 360;_textureSprite->setRotation(_angle);}, 0.02f, "schedule");

 //实现精灵淡入效果_opcity = 0;_textureSprite->setOpacity(_opcity);this->schedule([&](float dlt) {if (_opcity >= 255){this->unschedule("schedule");return false;}_opcity += 1;_textureSprite->setOpacity(_opcity);}, 0.02f, "schedule");

 //实现精灵水平翻转_scaleX = _textureSprite->getScaleX();_minScaleX = -_scaleX;this->schedule([&](float dlt) {if (_minScaleX > _scaleX){this->unschedule("schedule");return;}_scaleX -= 0.01;_textureSprite->setScaleX(_scaleX);}, 0.02f, "schedule");

 //实现精灵在水平上移动this->schedule([&](float dlt) {if (_textureSprite->getPositionX() + _textureSprite->getContentSize().width / 2 * _textureSprite->getScale() > Director::getInstance()->getVisibleSize().width|| _textureSprite->getPositionX() + _textureSprite->getContentSize().width / 2 * _textureSprite->getScale() < 0){this->unschedule("schedule");return;}_textureSprite->setPositionX(_textureSprite->getPositionX() + 1.0f);}, 0.02f, "schedule");

九宫格精灵

九宫格

什么是九宫格？
- 古代称为“洛书”
Scale9Sprite类
- 继承自Sprite类

九宫格精灵

创建九宫格精灵

auto sprite = Scale9Sprite::create("bg/bg_03.png");

设置九宫格中心区域

sprite->setCapInsets(Rect(22,22,56,56));

TIPS：

九宫格精灵根据中心区域的长宽缩放大小

四个角的形状不改变

九宫格精灵 vs 精灵

性能参数对比

应用场景
- 九宫格精灵常用于有发布包（apk release）大小要求的情况，用于压缩图片大小。