【开发者指南】第三章：精灵——学习笔记

什么是精灵？

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

创建精灵

【一】

使用指定图片创建一个Sprite：



上述代码中使用“mysprite.png”图片文件创建了一个

Sprite

。而结果表明，该方法所创建的

Sprite

使用了整张图片。Sprite与“mysprite.png”图片的尺寸相同。也就是说，如果“mysprite.png”图片的尺寸是200200，那么所创建的Sprite也是200200。

【二】

使用矩形创建一个Sprite

如果你想要创建一个只显示一张图片特定部分的

Sprite

，那么你可以使用

Rect

。

Rect有四个值:

origin x

,

origin y

,

width

和

height

，既原点x，原点y，宽，以及高。

Rect

从左上角开始创建，这与从左下角开始布局的屏幕坐标相反。所以，这个

Sprite

只是图像的一部分。在这个例子中，

Sprite

的尺寸是左上角40*40的部分。

使用Sprite Sheet创建一个精灵

Sprite Sheet是一个将多个精灵合并到一个文件的方法。

相对于把每个精灵放在单独的文件夹中，这种方式减小了整个文件的大小。这意味着你将很大程度地减少内存的使用、文件大小和加载时间。

另外，为了通过批处理来实现更好的性能，我们必须使用Sprite Sheet。

当使用Sprite Sheet时，首先将其加载到

SpriteFrameCache

中。

SpriteFrameCache

是一个保存

SpriteFrame

，以便我们能很快访问到

SpriteFrame

的缓存类。

SpriteFrame

是一个包含了图像名和特定精灵尺寸（

Rect

）的对象。（有疑问）

SpriteFrameCache

可以避免多次加载

SpriteFrame

。

SPriteFrame

只加载一次，并被保存到

SpriteFrameCache

中。

下面是一个Sprite Sheet的例子：



我们来仔细分析一下：



正如我们在Sprite Sheet中所看到的，它减小了不必要的空间，并将所有精灵整合到了同一个文件中。

让我们把这些联系在一起！

加载一个Sprite Sheet

将Sprite Sheet加载到SpriteFrameCache中，或许是在AppDelegate中：

创建Sprite Sheet的方法

通过工具来创建：

Cocos Studio

Texture Packer

Zwoptex

控制精灵

锚点和位置

锚点

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

如下图所示：


注意：图从右边开始对应上述的代码

被锚点影响的精灵属性

锚点只影响可以改变的属性，包括scale，rotation和skew。

位置（Position）

锚点作为起始点时就会影响精灵的位置。如下图中的红线，为精灵位置的参考线。当改变锚点值时，精灵的位置就发生了改变。需要注意的是，这些变化都是因为改变了锚点值。在这里不使用setPosition()函数：



还有更多其他的方式可以设置位置。使用特定的setPosition()语句也可以设置精灵对象。

角度（Rotation）

通过增加或减少角度来使精灵旋转。增加角度值使精灵顺时针旋转，减少角度值使精灵逆时针旋转。默认值为0。

倾斜（Skew）

改变X值、Y值或者同时改变X、Y值可以使精灵倾斜。X、Y的默认值都为1.0。

不被锚点影响的精灵属性

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

颜色

向Color3B对象中传递相应的值即可改变精灵的颜色。Color3B对象代表RGB颜色值。我们目前还没有用到过Color3B，但这很简单，Color3B就是一个定义RGB颜色的对象。RGB颜色值即0-255之间的值。Cocos2d-x还提供预定义颜色供开发者选择。由于这些颜色是预定义所以用起来会快一点，如下为Color3B::White和Color3B::Red的例子：

透明度

通过特定的值来改变精灵的透明度。取值范围为（2~255），默认值为255（不透明）