一、定义：什么是Sprites
Sprites是一个能动画或者转变的2D图像，通过改变他的属性诸如rotation,position,scale,color。
二、创建Sprites
创建Sprites要依据你需要什么的完成方式。你可以通过不同的图像格式创建，例如PNG,JPEG,TIFF等。
1、指定使用的图片
auto mySprite = Sprite::create("mysprite.png");
var mySprite = new cc.Sprite(res.mySprite_png);
这样创建的结果就是使用了全部的图片。sprite同图片的尺寸一样。如果图片大小事200*200那么Sprite就是200*200；
2、创建一个具体大小的Sprite
之前的例子中，创建的Sprite与图像的尺寸一样，如果要创建一个确定指定的图像和指定的大小，如下；
var mySprite = new cc.Sprite(res.mySprite_png,cc.rect(0,0,40,40));
矩形从左上角开始，作为左边原点。而世界的坐标是在左下角。
三、creating a Sprite from a Sprite Sheet
Sprite Sheet将一系列的Sprites组合到一个文件中。通过Sprite sheet可以更好的利用绘制方法配料渲染。他们也可以在减少磁盘和内存的情况下更搞笑的将sprites打包到sheet中。
第一次使用sprite sheet加载，他将全部进入到SpriteFrameCache中。SpriteFrameCache是一个将SpriteFrame对象添加到里面的类，他能快速的取得SpriteFrame.SpriteFrame只载入一次，然后又保持在SpriteFrameCache中。
下面就是一个sprite sheet;
下面详细的观看发生的变化：
如你看到的sprite sheet，他最小化了他们减少了不需要的空间，将所有的sprites绑到一个文件。
1、Loading a Sprite Sheet
将sprite sheet载入到SpriteFrameCache中，或许是AppDelegate:
auto spritecache = SpriteFrameCache::getInstance;
spritecache->addSpriteFramesWithFile("sprites.plist");
Javascript
var spritecache = cc.SpriteFrameCache;
//。plist文件需要通关相关的软件产生
spritecache.addSpriteFramesWithFile(res.sprites_plist);
此时就可以利用SpriteFrameCache创建Sprite对象了。
2、Creating a Sprite from SpriteFrameCache
通过SpriteFrameCache创建Sprite
//在.plist文件中有每个sprite的名称，通过抓取名称，创建
var mysprite = cc.Sprite.createWithSpriteFrameName(res.mySprite_png);
3、Creating a Sprite frome a SpriteFrame
先得到spriteFrame ，然后利用SpriteFrame创建Sprite。
var newspriteFrame = cc.SpriteFrameCache.getSpriteFrameByName(res.sprites_plist);
var newSprite = cc.Sprite.createWithSpriteFrame(newspriteFrame);
3、Tools for creating Sprite Sheets
下面是一些创建sprite sheet 的工具
Cocos Sdudio
ShoeBox
Texture Packer
Zwoptex
四、Sprite Manipulation(操纵)
创建了sprite后，你就能操纵他的很多属性
var mysprite = new Sprite(res.mysprite_png);
1、Anchor point and Position
Anchor Point :是一个设置的坐标点，当设置位置时，指定sprite使用哪部分。只针对转换属性。包含了scale ,rotation ,skew。不包括color和opacity。anchor point使用的坐标系基准点是左下角。默认情况下，所有节点的默认锚点是（0.5,0.5）
设置默哀点比较简单
mySprite.setAnchorPoint(cc._p(0.5,0.5));
//bottom left
mySprite.setAnchorPoint(cc._p(0,0));
//top left
mySprite.setAnchorPoint(cc._p(0,1));
//bottom right
mySprite.setAnchorPoint(cc._p(1,0));
//top right
mySprite.setAnchorPoint(cc.p(1,1));
实际上可以虚拟一个正方形，四个点的坐标分别为
(0,0),(0,1)-->对应左下、左上
(1,0)(1,1)-->右下，右上
图像在这个正方形田字格内分别移动，靠近设置点。
2、Sprite properties effected by anchor point
使用锚点来影响scale rotation skew 在转换中的值。
2.1Position
锚点是作为设置位置的起始点。通过颜色的线条和sprite的位置关联。你能注意到当我们改变锚点值的时候，sprite的位置也发生了改变。
按照我的理解，锚点是为了固定在某点然后旋转和其他动画使用的。
2.2Rotation
通过设置rotation的征服度数来改变sprite的角度。证书的顺时针，负数时逆时针
mySprite.setRotation(cc._p(20.0));
mySprite.setRotation(cc._p(-20.0));
mySprite.setRotation(cc._p(60.0));
mySprite.setRoation(cc._p(-60.0));
2.3Scale
利用scale属性，可以单独改变x或者y方向的放大或者同时放大，默认是同时放大一倍。
mySprite.setScale(cc._p(2.0));
mySprite.setScaleX(cc._p(2.0));
mySprite.setScaleY(cc._p(2.0));
2.4Skew
利用Skew属性，可以改变x\y或者同时改变sprite的倾斜度
mySprite.setSkewX(cc._p(20.0));
mySprite.setSkewY(cc._p(20.0));
3、Sprite properties not affected by anchor point
没有收到影响的属性，color Opacity
改变color，是通过Color3B这个对象，他是RGB值。
使用Color3B定义颜色
mySprite.setColor(cc.color.WHITE);
mySprite.setColor(cc.color(255,255,255));
Opacity
透明度，取值范围是0--255，默认情况下是255，0代表了不可见。
mySprite.setOpacity(30);
五、Polygon Sprite多边形
2Dimage ；多边形的sprite是由多个三角形组成，一般的sprite由两个三角形组成。
1、Why use a Pllygon Sprite?
这里有很多专业的技术术语来描绘像素填充率，但是主要的是多边形依据你的Sprite的多边形绘制。不是简单的使用宽和高围绕的正方形。这节省了很多不必须要的绘制。考虑下述情况：
注意左边和右边的区别。
左边，一个典型的Sprite绘制在一个由两个三角形组成的长方形中。
右边，由许多小的三角形绘制一个多边形。
纯粹的权衡他的性能原因，依据各种因素（如形状、细节、尺寸，华仔屏幕上的数量等细节），但总的来说，现在CPU的顶点像素更高效。
1、AutoPolygon
AutoPolygon是一个辅助类。他的目的是在运行状态下将图像处理为2D多边形网格。
从轨迹中所有的点，到三角网络，在处理过程中的每个步骤都有功能。结果，可以通过Sprite对象创建功能创建一个PolygonSprite，例如
//自动产生多边形
auto pinfo = cc.autopolygon.generatePolygon(res.mysprite_png);
//create a sprite with polygon info
var sprite = new cc.Sprite(pinfo);
网友评论