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

精靈會使用整張圖像，圖像是多少的分辨率，建立出來的精靈就是多少的分辨率

但若是你想要的是一個 尺寸只有原始圖像一部分的精靈，你能夠在建立的時候指定一個矩形

指定矩形

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