理解精靈的含義
學會創建一個精靈
掌握對精靈的控制
了解九宮格精靈及其應用

Sprite在2D游戲場景設計中指的就是像素圖可以移動可以控制

1、通過圖片路徑創建精靈
Sprite* sprite = Sprite::create(“要加載的圖片文件目錄的相對路徑”);
1、該方式創建的精靈以靜態圖的形式呈現
2、圖片大小與原大小一致
3、如果圖片顯示大小超出屏幕范圍，則只顯示屏幕內的部分
4、如果精靈大小小于圖片大小。則會按比例進行縮放圖片，導致
圖片變形。（長度和寬度的比例與原圖長寬比不同，會導致圖片變形）
SpriteDemo.h

#pragma once #include"cocos2d.h" USING_NS_CC; class SpriteScene:public Scene { public:CREATE_FUNC(SpriteScene);virtual bool init(); };

SpriteDemo.cpp

bool SpriteScene::init() {if(!Scene::init())return false;//創建一個精靈Sprite* sprite = Sprite::create("要加載的圖片文件目錄的相對路徑");//圖片太大會顯示在屏幕外邊，所以需要進行一個縮放，圖片錨點默認在圖片正中心//sprite ->setContentSize(Size(100*100));//這樣處理圖片大小會變形sprite ->setScale(0.3f);//需要進行整體縮放，縮放到原來的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);return true; }

創建完成后要去AppDelegate.cpp 調用

2、使用圖集創建一個精靈
如果讀取圖片過多，會導致內存奔潰，使用后，需要及時清理緩存
通常圖片沒有達到一定數量是不會清理的，不清理的話在創建精靈
的時候去讀取圖片就會非常快，如果每次讀取都去加載一次因為是
大圖，所以會非常卡頓。一般是做場景切換的時候會去清理緩存。

string path = "plist文件的相對路徑"; //通過plist文件路徑將圖片讀取到精靈幀緩存 auto cache = SpriteFrameCache::getInstance()->addSpriteFrameWithFile(path); //通過指定名稱的精靈幀創建精靈 auto sprite = Sprite::createWithSpriteFrameName("1");

做序列幀動畫的時候和做資源優化的時候會用到圖集。
比如有很多張圖片，有很多透明的邊緣，我們想把邊緣裁掉，
我們可以把很多張圖片拼合在一起，拼合的時候裁剪，
最后做成一張大圖，可以節省磁盤空間，也可以加快渲染的效率。

圖集的產生會用到cocos2d官方提供的工具TexturePacker創建圖集文件
TexturePacker集成了cocos2d生成圖集的功能
會生成以下兩個文件：
plist文件 、png大圖；
plist文件就是xml文件，存放的每張圖片的一個鍵值對，還包含了在大圖中的偏移位置
以及精靈的大小，鍵是根據每張圖片名稱生成的可以有后綴。

SpriteDemo.h

#pragma once #include"cocos2d.h" USING_NS_CC; class SpriteScene:public Scene { public:CREATE_FUNC(SpriteScene);virtual bool init(); };

SpriteDemo.cpp

bool SpriteScene::init() {if(!Scene::init())return false;//創建一個精靈Sprite* sprite = Sprite::create("要加載的圖片文件目錄的相對路徑");//圖片太大會顯示在屏幕外邊，所以需要進行一個縮放，圖片錨點默認在圖片正中心//sprite ->setContentSize(Size(100*100));//這樣處理圖片大小會變形sprite ->setScale(0.3f);//需要進行整體縮放，縮放到原來的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);//隱藏此精靈sprite->setVisible(false);//通過圖集創建精靈SpriteFrameCache::getInstance()->addSpriteFramesWithFile("plist文件相對路徑");//這個 1 是對應plist文件中的文件名 鍵Sprite* vampireSprite = Sprite::createWithSpriteFrameName("1");this->addChild(vampireSprite);vampireSprite ->setPosition(sprite->getPosition());//吸血鬼動畫實例auto cache = SpriteFrameCache::getInstance();//cococs2d的Vector與C++的不一樣，是記錄cocos2d對象的指針Vector<SpriteFrame*>images;//8張圖片for(int i = 1;i<=8;i++){//Value()是cocos2d專門提供基本類型轉換的 這里文件名是字符串所以用asString()images.pushBack(cache->getSpriteFrameByName(Value(i).asString()));//每一幀都是一個精靈}Animation* _animation = Animation::createWithFrames(images,1.f/8);//每張圖片間隔時間0.25m//播放一次，停下來的就是最后一張圖片//vampireSprite ->runAction(Animate::create(_animation));//一直播放vampireSprite ->runAction(RepeatForever::create(Animate::create(_animation)));return true; }

3、使用貼圖創建一個精靈
貼圖又稱為紋理（讀取到圖片的數據存入內存）

//貼圖緩存 auto textureCache = TextureCache::getInstance(); //讀取貼圖，在緩存中添加 auto cache = textureCache->addImage("圖片文件相對路徑"); //通過貼圖創建一個精靈 Sprite*sprite = Sprite::createWithTexture(cache); //裁切貼圖 sprite ->setTextureRect(Rect(0,0,480,320));

SpriteDemo.cpp

bool SpriteScene::init() {if(!Scene::init())return false;//創建一個精靈Sprite* sprite = Sprite::create("要加載的圖片文件目錄的相對路徑");//圖片太大會顯示在屏幕外邊，所以需要進行一個縮放，圖片錨點默認在圖片正中心//sprite ->setContentSize(Size(100*100));//這樣處理圖片大小會變形sprite ->setScale(0.3f);//需要進行整體縮放，縮放到原來的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);//隱藏此精靈sprite->setVisible(false);//通過圖集創建精靈SpriteFrameCache::getInstance()->addSpriteFramesWithFile("plist文件相對路徑");//這個 1 是對應plist文件中的文件名 鍵Sprite* vampireSprite = Sprite::createWithSpriteFrameName("1");this->addChild(vampireSprite);vampireSprite ->setPosition(sprite->getPosition());vampireSprite ->setVisible(false);//隱藏//通過紋理創建一個精靈//png支持透明，jpg不支持，如果一張圖片轉成jpg格式就會添加一個背景色//jpg比png占的磁盤空間更小，但是在讀取到內存解析的時候png更快auto cache = TextureCache::getInstance()->addImage("圖片相對路徑");Sprite* textureSprite = Sprite::createWithTexture(cache);this->addChild(textureSprite);textureSprite ->setPosition(sprite->getPosition());//0,0,前邊是圖片坐標，480,320是圖片長寬//如果裁切位置是240，160那么裁切出來的是圖片右下角textureSprite ->setTextureRect(Rect(0,0,480,320));//裁切return true; }

4、多邊形精靈
對圖片空白的地方進行裁切后構成多邊形，算法越好裁切的就越多，
空白的地方就越少。裁切后需要著色的像素點就會變少。

讀取圖片生成多邊形 注意： 1、圖片格式只能為png圖片，不支持其他格式的圖片； 2、生成時會占用CPU，消耗系統性能 auto info = AutoPolygon::generatePolygon("圖片相對路徑",Rect(0,0,437,437));

根據多邊形數據創建多邊形精靈

auto sprite = Sprite::create(info);

SpriteDemo.cpp

bool SpriteScene::init() {if(!Scene::init())return false;//創建一個精靈Sprite* sprite = Sprite::create("要加載的圖片文件目錄的相對路徑");//圖片太大會顯示在屏幕外邊，所以需要進行一個縮放，圖片錨點默認在圖片正中心//sprite ->setContentSize(Size(100*100));//這樣處理圖片大小會變形sprite ->setScale(0.3f);//需要進行整體縮放，縮放到原來的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);//隱藏此精靈sprite->setVisible(false);//通過圖集創建精靈SpriteFrameCache::getInstance()->addSpriteFramesWithFile("plist文件相對路徑");//這個 1 是對應plist文件中的文件名 鍵Sprite* vampireSprite = Sprite::createWithSpriteFrameName("1");this->addChild(vampireSprite);vampireSprite ->setPosition(sprite->getPosition());vampireSprite ->setVisible(false);//隱藏//通過紋理創建一個精靈//png支持透明，jpg不支持，如果一張圖片轉成jpg格式就會添加一個背景色//jpg比png占的磁盤空間更小，但是在讀取到內存解析的時候png更快auto cache = TextureCache::getInstance()->addImage("圖片相對路徑");Sprite* textureSprite = Sprite::createWithTexture(cache);this->addChild(textureSprite);textureSprite ->setPosition(sprite->getPosition());//0,0,前邊是圖片坐標，480,320是圖片長寬//如果裁切位置是240，160那么裁切出來的是圖片右下角textureSprite ->setTextureRect(Rect(0,0,480,320));//裁切//創建一個多邊形精靈3.x的版本才有的//RGBA8888這個格式就是pngauto polygonInfo = AutoPolygon::generatePolygon("圖片相對路徑",Rect(0,0,437,437));Sprite* _sprite = Sprite::create(polygonInfo);_sprite ->setPosition(sprite->getPosition());this->addChild(_sprite);return true; } 創建精靈的方式優點缺點

通過圖片路徑創建	不需要清理緩存	圖片過大，直接讀取會卡頓
通過圖集創建	圖片加載速度快	內存占用較大，切換場景時需要清理緩存
通過貼圖創建	圖片加載速度快	內存占用較大，切換場景時需要清理緩存
通過多邊形數據創建	渲染速度快	讀取圖片生成多邊形信息會消耗更多CPU性能

游戲中常見的幾種對精靈的控制

對精靈控制的演示：
1、實現精靈旋轉效果
2、實現精靈淡入效果
3、實現精靈水平翻轉
4、實現精靈在屏幕中自動移動

SpriteDemo.h

#pragma once #include"cocos2d.h" USING_NS_CC; class SpriteScene:public Scene { public:CREATE_FUNC(SpriteScene);virtual bool init(); private:Sprite* _sprite;float _angel;int _opacity;//淡入，對應到阿爾法通道，對透明度操作的float _scaleX;float _minScaleX; };

SpriteDemo.cpp

bool SpriteScene::init() {if(!Scene::init())return false;//創建一個精靈Sprite* sprite = Sprite::create("要加載的圖片文件目錄的相對路徑");//圖片太大會顯示在屏幕外邊，所以需要進行一個縮放，圖片錨點默認在圖片正中心//sprite ->setContentSize(Size(100*100));//這樣處理圖片大小會變形sprite ->setScale(0.3f);//需要進行整體縮放，縮放到原來的多少倍sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));this->addChild(sprite);//隱藏此精靈sprite->setVisible(false);//通過圖集創建精靈SpriteFrameCache::getInstance()->addSpriteFramesWithFile("plist文件相對路徑");//這個 1 是對應plist文件中的文件名 鍵Sprite* vampireSprite = Sprite::createWithSpriteFrameName("1");this->addChild(vampireSprite);vampireSprite ->setPosition(sprite->getPosition());vampireSprite ->setVisible(false);//隱藏//通過紋理創建一個精靈//png支持透明，jpg不支持，如果一張圖片轉成jpg格式就會添加一個背景色//jpg比png占的磁盤空間更小，但是在讀取到內存解析的時候png更快auto cache = TextureCache::getInstance()->addImage("圖片相對路徑");Sprite* textureSprite = Sprite::createWithTexture(cache);this->addChild(textureSprite);textureSprite ->setPosition(sprite->getPosition());//0,0,前邊是圖片坐標，480,320是圖片長寬//如果裁切位置是240，160那么裁切出來的是圖片右下角textureSprite ->setTextureRect(Rect(0,0,480,320));//裁切//創建一個多邊形精靈3.x的版本才有的//RGBA8888這個格式就是pngauto polygonInfo = AutoPolygon::generatePolygon("圖片相對路徑",Rect(0,0,437,437));_sprite = Sprite::create(polygonInfo);_sprite ->setPosition(sprite->getPosition());this->addChild(_sprite);//實現精靈旋轉效果//將圖片先縮小_sprite ->setScale(0.3f);//_angel = 0;//_sprite ->setRotation(_angel );//開啟一個調度器//this->schedule([&](float dlt)//{//_angel +=1.f;//if(_angel > 360)//{//_angel = _angel - 360;//}//_sprite ->setRotation(_angel );//},0.02f,"schedule");//實現精靈淡入效果//_opacity = 0;//精靈默認透明度是255，所以需要先初始化//_sprite ->setOpacity(_opacity);//this->schedule([&](float dlt)//{//if(_opacity>= 255)//{//調度器用完需要注銷，不然就會像線程的死循環//this->unschedule("schedule");//return;//}//_opacity+=5;//_sprite ->setOpacity(_opacity);//},0.02f,"schedule");//實現精靈水平翻轉(X軸)//_scaleX = _sprite->getScaleX();//_minScaleX = -_sprite->getScaleX();//this->schedule([&](float dlt)//{//if(_minScaleX > _scaleX)//{//this->unschedule("schedule");//return;//}//_scaleX -= 0.01f;//_sprite ->setScaleX(_scaleX);//},0.02f,"schedule");//控制精靈移動this->schedule([&](float dlt){//游戲角色錨點一般在底部中心//寬度需要乘以一個系數_sprite ->getScale()，不然縮小后的圖片在原始圖片的范圍情況下不會到邊if(_sprite ->getPositionX() + _sprite ->getContentSize().width /2 * _sprite ->getScale() > Director::getInstance()->getVisibleSize().width || _sprite ->getPositionX() - _sprite ->getContentSize().width /2 * _sprite ->getScale()< 0){this->unschedule("schedule");return;}_sprite ->setPositionX(_sprite ->getPositionX() + 1.f);},0.02f,"schedule");return true; }

九宮格古代稱為"洛書"
Scale9Sprite類繼承自Sprite所以也是精靈
對圖片的拉伸，長寬比例會改變，但是不會
發生拉伸的形變。特點就是四個角不會變，
四條邊會被拉伸。需要確定中心區域，
中心區域確定后就可以確定四個角，只改變中心區域

創建九宮格精靈

auto sprite = Scale9Sprite::create("圖片相對路徑");

設置九宮格中心區域

//22,22是相對整個圖形的坐標位置，56,56是傳入的整個中心區域的大小，長和寬 sprite ->setCapInsets(Rect(22,22,56,56));

Scale9Demo.h

#pragma once #include"cocos2d.h" USING_NS_CC;#include"ui/UIScale9Sprite.h" using namespace ui; class Scale9SpriteScene:public Scene { public:CREATE_FUNC(Scale9SpriteScene);virtual bool init(); }; bool SpriteScene::init() {if(!Scene::init())return false;//如果圖片背景和顏色都是黑色，那么我們需要添加白色背景，方便觀察auto layer = LayerColor::create(Color4B::WHITE);this->addChild(layer);//創建九宮格精靈的演示實例Scale9Sprite* sprite = Scale9Sprite::create("圖片相對路徑");this->addChild(sprite);//設置精靈坐標位置在屏幕正中心sprite->setAnchorPoint(Vec2::ANCHOR_MIDDLE);sprite->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));//設置九宮格精靈的中心區域sprite->setCapInsets(Rect(20,20,1,1));//改變圖形大小sprite->setContentSize(Size(200,200));//改變圖形形狀為矩形sprite->setContentSize(Size(300,200));//后邊創建的精靈會蓋在前邊的九宮格精靈下面,所以這里隱藏九宮格的//sprite->setVisible(false);//創建一個用于對比的精靈//Sprite*_sprite = Sprite::create("圖片相對路徑");//this->addChild(_sprite );//_sprite ->setColor(Color3B::RED);//設置精靈坐標位置在屏幕正中心//_sprite ->setAnchorPoint(Vec2::ANCHOR_MIDDLE);//_sprite ->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));//_sprite ->setContentSize(Size(200,200));return true; }

九宮格精靈VS精靈
性能參數對比

對比參數九宮格精靈精靈

圖片資源占用磁盤大小	小	大
消耗CPU性能	小	小
占用內存	小	一般
渲染速度	一般	一般

九宮格精靈應用范圍
常用于發布包(apk release)大小要求的情況，用于壓縮圖片大小。

演示示例：對話框自適應文字內容
要求：
文字顯示內容不確定，對話框需要根據文字內容大小進行自適應匹配

bool SpriteScene::init() {if(!Scene::init())return false;//如果圖片背景和顏色都是黑色，那么我們需要添加白色背景，方便觀察auto layer = LayerColor::create(Color4B::WHITE);this->addChild(layer);//創建九宮格精靈的演示實例Scale9Sprite* sprite = Scale9Sprite::create("圖片相對路徑");this->addChild(sprite);//設置精靈坐標位置在屏幕正中心sprite->setAnchorPoint(Vec2::ANCHOR_MIDDLE);sprite->setPosition(Vec2(Director::getInstance()->getVisibleSize() / 2));//設置九宮格精靈的中心區域sprite->setCapInsets(Rect(20,20,1,1));//改變圖形大小sprite->setContentSize(Size(200,200));//改變圖形形狀為矩形sprite->setContentSize(Size(300,200));//讀取文字內容auto data = FileUtils::getInstance()->getValueMapFromFile("plist文件相對路徑");if(!data.empty()){std::string content = data.at("1000").asString();Label* _label = Label::create(content,"方正姚體",24);_label ->setAnchorPoint(Vec2::ANCHOR_BOTTOM_LEFT);//九宮格包裹了內容，內部標簽距離上下左右都有20的距離//Vec2(20,20)這個外邊距的長度正好是中心區域sprite->setCapInsets(Rect(20,20,1,1));20,20的長寬_label ->setPosition(Vec2(20,20));//把標簽直接添加到九宮格上，因為二者都是精靈sprite->addChild(_label);//控制寬度if(_label->getContentSize().width>300){_label->setDimensions(300,0);//寬度300像素換行}//Size(40,40)設置個外邊距sprite->setContentSize(_label->getContentSize() + Size(40,40));}return true; }

總結

以上是生活随笔為你收集整理的cocos2dx学习之路（七）——精灵、精灵旋转、淡入、水平翻转、自由移动、九宫格精灵的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。