二. Cocos精灵(Sprite)

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

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

1. 使用图像创建

Sprite 能用一个特定的图像去创建:

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

上面直接使用了 mysprite.png 图像来创建精灵。精灵会使用整张图像，图像是多少的分辨率，创建出来的精灵就是多少的分辨率。比如图像是 200 x 200，Sprite 也是 200 x 200。

使用矩形遮罩

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

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

矩形的初始坐标，从图形的左上角开始算，即左上角的坐标是 (0, 0)，不是从左下角。因此结果精灵是图像左上角的一小块，从左上角开始算起，40 x 40 的大小。

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

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

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

精灵的控制

在创建完精灵后，现在你能试着修改精灵的属性去控制它了。

创建精灵：

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() 设置锚点。

// 设置精灵的位置为cocos默认绝对坐标系的x=100，y=200的位置
mySprite->setPosition(Vec2(100, 200));

旋转

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

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

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

缩放

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

// 等比例扩大2倍
mySprite->setScale(2.0);

// 只横向拉伸2倍
mySprite->setScaleX(2.0);

// 只纵向拉伸2倍
mySprite->setScaleY(2.0);

// 横向扩大2倍，纵向扩大1.5倍
mySprite->setScale(2.0, 1.5);

倾斜

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

// x方向倾斜20像素
mySprite->setSkewX(20.0f);

// y方向倾斜20像素
mySprite->setSkewY(20.0f);

颜色

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

// 颜色叠加为默认的红色
mySprite->setColor(Color3B::RED);

// 传入一个RGB的 Color3B对象
mySprite->setColor(Color3B(255, 0, 0)); // 跟 Color3B::RED 的效果一样

可见性

mySprite->setVisible(false); //false表示不可见，true为可见，与透明度0的区别为，倘若该精灵有点击效果，不可见时则无法点击，而透明度为0时，依然可以点击该精灵产生效果

透明度

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

// 设置透明度为30数值
// 注意，这里的30表示的并不是30%，而是表示的是RGBA中的Alpha值为30，其满值为255
// 也就是说，换算成百分比为 30/255 ≈ 11.7647%
mySprite->setOpacity(30);

镜像翻转

mySprite->setFlippedX(true); //X轴镜像反转
mySrite->setFlippedY(true);  //Y轴镜像反转

挂载精灵

所有的精灵都需要挂载到某个特定的层上才能在屏幕上显示

如果当前没有任何节点可以做父节点，那么该场景的画布也是可以做父节点的，代码为

this->addChild(mySprite, 1);

当然，如果我们已经有了一个节点，比如果我们创建了一个菜单栏，我们希望这个菜单栏上有按钮，并且，当用户移动菜单栏的时候，上面的按钮也会一并移动，这时，所有的节点全部放在场景画布上，没有父子关系的话，操作起来会十分繁琐，可以使用如下代码

//设置sprite的坐标为屏幕中心
sprite->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

// 添加层级关系
this->addChild(sprite, 0);
sprite->addChild(closeButton, 0);

// 关闭按钮的位置位于它的父节点，也就是sprite节点的右上角坐标
// closeButton的坐标将他的父节点的锚点处视为坐标中心
closeButton->setPosition(Vec2(sprite->getContentSize().width, sprite->getContentSize().height));

// 此时当sprite移动时，sprite的所有子节点将一并移动
auto moveBy = MoveBy::create(2, Vec2(-100, -100));
sprite->runAction(moveBy);

精灵纹理(Texture)

1. 利用纹理创建精灵对象

   createWithTexture(Texture2D *texture)
   create("name.png",Rect(x1,y1,x2,y2));
   

2. 利用精灵帧数创建精灵

   createWithSpriteFrame(SpriteFrame *pSpriteFrame);
   createWithSpriteFrame(string &frameName);
   

3. 创建纹理

   Texture2D *cache = Director::getInstance()->getTextureCache()->addImage("name.png");
   auto sprite = Sprite::create();
   sprite->setTexture(cache);
   sprite->setTextureRect(Rect(x1,y1,x2,y2));
   

4. 精灵帧缓存(SpriteFrameCache)

   SpriteFrameCache::getInstance()->addSpriteFramesWithFile("name.plist");
   auto spriteFrame = cache->getSpriteFrameByName("name_p2.plist");
   auto sprite::createWithSpriteFrameName("name_p1.plist");
   

5. 动画缓存(AnimationCache)

6. 移除精灵帧

   removeSpriteFramesFromFile(string &plist);//删除和缓存中某个plist文件
   removeUnusedSpriteFrames();//移除没有使用过的精灵帧