一捏鱼、定義：什么是Sprites
Sprites是一個能動畫或者轉(zhuǎn)變的2D圖像蔑水，通過改變他的屬性諸如rotation,position,scale,color早芭。
二、創(chuàng)建Sprites
創(chuàng)建Sprites要依據(jù)你需要什么的完成方式恬叹。你可以通過不同的圖像格式創(chuàng)建，例如PNG,JPEG,TIFF等同眯。
1绽昼、指定使用的圖片
auto mySprite = Sprite::create("mysprite.png");
var mySprite = new cc.Sprite(res.mySprite_png);
這樣創(chuàng)建的結(jié)果就是使用了全部的圖片。sprite同圖片的尺寸一樣须蜗。如果圖片大小事200*200那么Sprite就是200*200硅确；
2、創(chuàng)建一個具體大小的Sprite
之前的例子中明肮，創(chuàng)建的Sprite與圖像的尺寸一樣菱农，如果要創(chuàng)建一個確定指定的圖像和指定的大小，如下晤愧；
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可以更好的利用繪制方法配料渲染舅巷。他們也可以在減少磁盤和內(nèi)存的情況下更搞笑的將sprites打包到sheet中羔味。
第一次使用sprite sheet加載，他將全部進入到SpriteFrameCache中钠右。SpriteFrameCache是一個將SpriteFrame對象添加到里面的類赋元，他能快速的取得SpriteFrame.SpriteFrame只載入一次，然后又保持在SpriteFrameCache中。
下面就是一個sprite sheet;
下面詳細的觀看發(fā)生的變化：
如你看到的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文件需要通關相關的軟件產(chǎn)生
spritecache.addSpriteFramesWithFile(res.sprites_plist);
此時就可以利用SpriteFrameCache創(chuàng)建Sprite對象了嫡良。
2锰扶、Creating a Sprite from SpriteFrameCache
通過SpriteFrameCache創(chuàng)建Sprite
//在.plist文件中有每個sprite的名稱，通過抓取名稱寝受，創(chuàng)建
var mysprite = cc.Sprite.createWithSpriteFrameName(res.mySprite_png);
3坷牛、Creating a Sprite frome a SpriteFrame
先得到spriteFrame ，然后利用SpriteFrame創(chuàng)建Sprite很澄。
var newspriteFrame = cc.SpriteFrameCache.getSpriteFrameByName(res.sprites_plist);
var newSprite = cc.Sprite.createWithSpriteFrame(newspriteFrame);
3京闰、Tools for creating Sprite Sheets
下面是一些創(chuàng)建sprite sheet 的工具
Cocos Sdudio
ShoeBox
Texture Packer
Zwoptex
四、Sprite Manipulation(操縱)
創(chuàng)建了sprite后痴怨，你就能操縱他的很多屬性
var mysprite = new Sprite(res.mysprite_png);
1忙干、Anchor point and Position
Anchor Point :是一個設置的坐標點，當設置位置時浪藻，指定sprite使用哪部分捐迫。只針對轉(zhuǎn)換屬性。包含了scale ,rotation ,skew爱葵。不包括color和opacity施戴。anchor point使用的坐標系基準點是左下角。默認情況下萌丈，所有節(jié)點的默認錨點是（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)-->右下辆雾，右上
圖像在這個正方形田字格內(nèi)分別移動肪笋，靠近設置點。
2度迂、Sprite properties effected by anchor point
使用錨點來影響scale rotation skew 在轉(zhuǎn)換中的值藤乙。
?2.1Position
錨點是作為設置位置的起始點。通過顏色的線條和sprite的位置關聯(lián)惭墓。你能注意到當我們改變錨點值的時候坛梁，sprite的位置也發(fā)生了改變。
按照我的理解腊凶，錨點是為了固定在某點然后旋轉(zhuǎn)和其他動畫使用的划咐。
2.2Rotation
通過設置rotation的征服度數(shù)來改變sprite的角度拴念。證書的順時針，負數(shù)時逆時針
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?
這里有很多專業(yè)的技術(shù)術(shù)語來描繪像素填充率钓猬，但是主要的是多邊形依據(jù)你的Sprite的多邊形繪制。不是簡單的使用寬和高圍繞的正方形撩独。這節(jié)省了很多不必須要的繪制敞曹。考慮下述情況：
注意左邊和右邊的區(qū)別综膀。
左邊澳迫，一個典型的Sprite繪制在一個由兩個三角形組成的長方形中。
右邊剧劝，由許多小的三角形繪制一個多邊形巍耗。
純粹的權(quán)衡他的性能原因，依據(jù)各種因素（如形狀舟山、細節(jié)摩窃、尺寸，華仔屏幕上的數(shù)量等細節(jié)）暂论，但總的來說面褐，現(xiàn)在CPU的頂點像素更高效。
1取胎、AutoPolygon
AutoPolygon是一個輔助類展哭。他的目的是在運行狀態(tài)下將圖像處理為2D多邊形網(wǎng)格湃窍。
從軌跡中所有的點，到三角網(wǎng)絡匪傍，在處理過程中的每個步驟都有功能您市。結(jié)果，可以通過Sprite對象創(chuàng)建功能創(chuàng)建一個PolygonSprite役衡，例如
//自動產(chǎn)生多邊形
auto pinfo = cc.autopolygon.generatePolygon(res.mysprite_png);
//create a sprite with polygon info
var sprite = new cc.Sprite(pinfo);
