1. 程式人生 > >Cocos2d-x入門之旅[2]精靈

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, 100, 100));
//我的圖片解析度是480*480

效果就是新之助會一隻眼盯著你

矩形的初始座標要從圖形的左上角開始算,即左上角的座標是 (0, 0)

如果你把矩形的寬高指定為影象的寬高,矩形的初始座標指定為 (0, 0),那和預設設定是一樣的(這裡圖片的解析度就是200x200)

auto mySprite = Sprite::create("mysprite.png");
//效果相同
auto mySprite = Sprite::create("mysprite.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)物件都有錨點值,SpriteNode 的子類,自然也具有錨點

錨點是節點物件在計算座標位置時的一個基準點,理解不了沒關係,直接看圖:

以我們剛才的展示的精靈為例,設定錨點(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::WhiteColor3B::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);