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");

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

但若是你想要的是一个 <u>尺寸只有原始图像一部分的精灵</u>，你能够在建立的时候指定一个矩形

指定矩形

指定矩形须要四个值，初始 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);

原文出处：https://www.cnblogs.com/zhxmdefj/p/11695439.html