cocos2dx基礎篇(12)——點九圖CCScale9Sprite

【嘮叨】

    本來是想學學控件類CCControl的另一個子類按鈕控件CCControlButton的。但是發現里面有一個參數牽扯到CCScale9Sprite這個類。看到CCScale9Sprite，很容易聯想到精靈類CCSprite。兩者又有什么區別呢？因此我就去網上收了一些有關CCScale9Sprite的資料來學習。

【致謝】

    http://blog.csdn.net/zaojiahua/article/details/21295535

    http://blog.csdn.net/onerain88/article/details/8273219

【Demo下載】

    https://github.com/shahdza/Cocos_LearningTest/tree/master/demo_%E7%82%B9%E4%B9%9D%E5%9B%BECCScale9Sprite 

【3.x】

    （1）去掉“CC”

    （2）其他幾乎無變化。

【v3.3】

    我們在 ui模塊 下實現了一個新的Scale9Sprite類。它的內部實現比之前的Scale9Sprite更為簡潔，功能也更為強大。

    重新實現這個類的主要的原因是：Scale9Sprite在UI模塊被大量使用。

    現在UI模塊不再依賴于extension模塊。 通過采用全新的 ui::Scale9Sprite ，很多部件類內部的代碼更加簡潔，優雅。

【CCScale9Sprite】

    對于CCScale9Sprite類，不知道該怎么翻譯，有人叫它點九圖，有人叫它九宮圖，有有人叫它九妹圖。

    那么什么是CCScale9Sprite呢？CCScale9Sprite對象，是一種CCSprite對象的變形，它的用法和CCSprite類似，不同點是：CCScale9Sprite對象有個特性就是縮放貼圖時可以盡量不失幀。

    如下圖所示，用普通的CCSprite拉伸后四個角模糊失真了，而是用CCScale9Sprite進行拉伸后，依舊很清晰。

1、原理

    CCScale9Sprite的實現非常巧妙，是通過1個CCSpriteBatchNode和9個CCSprite來實現的，原理很簡單，通過將原紋理資源切割成9部分（PS: 這也是叫九宮圖的原因），根據想要的尺寸，完成以下的三個步驟：

    （1）保持4個角部分不變形

    （2）單向拉伸4條邊（即在4個角兩兩之間的邊，比如上邊，只做橫向拉伸）

    （3）雙向拉伸中間部分（即九宮圖的中間部分，橫向，縱向同時拉伸，PS：拉伸比例不一定相同）

    CCSpriteBatchNode的資源為整個的紋理，9個CCSprite對應于紋理的9個部分（根據紋理不同，9部分所占比例會有所不同），根據想要的尺寸，將9部分拼裝在一起！

2、需要引用的頭文件及命名空間

//
	#include "cocos-ext.h"              //包含cocos-ext.h頭文件
	using namespace cocos2d::extension; //引用cocos2d::extension命名空間
//

3、常用操作

    CCScale9Sprite繼承于CCNodeRGBA，所以除了可以使用以下自定義的操作外，還可以使用節點類CCNode、以及節點顏色類CCNodeRGBA的相關函數操作。

//
/************************************************************************/
/* 以上面原理部分提到的圖片為例											*/
/************************************************************************/

class CCScale9Sprite : public CCNodeRGBA
{
/**
 *		創建的三類方式
 *		create , createWithSpriteFrame , createWithSpriteFrameName
 */
	//使用圖片資源名來創建
	//參數說明：
	//		rect整個圖的矩形大小
	//		capInsets中間部分區域對應的矩形大小
	//rect = CCRectMake(0, 0, 80, 80);
	//capInsets = CCRectMake( 12, 12, 56, 56);
	//create("sp.png", rect, capInsets);
	//create(capInsets, "sp.png");
	static CCScale9Sprite* create(const char* file);
	static CCScale9Sprite* create(const char* file, CCRect rect);
	static CCScale9Sprite* create(const char* file, CCRect rect,  CCRect capInsets);
	static CCScale9Sprite* create(CCRect capInsets, const char* file);

	//使用精靈幀來創建
	static CCScale9Sprite* createWithSpriteFrame(CCSpriteFrame* spriteFrame);  
	static CCScale9Sprite* createWithSpriteFrame(CCSpriteFrame* spriteFrame, CCRect capInsets); 

	//使用精靈幀的名稱來創建
	static CCScale9Sprite* createWithSpriteFrameName(const char* spriteFrameName);
	static CCScale9Sprite* createWithSpriteFrameName(const char* spriteFrameName, CCRect capInsets); 


/**
 *		屬性設置
 *		setSpriteFrame , setCapInsets , 
 *		setPreferredSize ,  setContentSize ,
 *		setOpacity , setColor
 */
	//設置精靈幀
	virtual void setSpriteFrame(CCSpriteFrame * spriteFrame);

	//設置中間部分區域對應的矩形大小
	CC_PROPERTY(CCRect, m_capInsets, CapInsets);

	//設置需要生成的尺寸大小，默認為精靈圖的原始大小
	CC_PROPERTY(CCSize, m_preferredSize, PreferredSize); 

	//CCScale9Sprite是通過這個來拉伸的，而CCSprtie是通過setScale來拉伸。
	virtual void setContentSize(const CCSize & size);

	//設置透明度
	virtual void setOpacity(GLubyte opacity);
	virtual GLubyte getOpacity();

	//設置顏色
	virtual void setColor(const ccColor3B& color);
	virtual const ccColor3B& getColor();
};
//

4、使用說明：

    4.1、關于參數

    當使用CCScale9Sprite::create(const char* file, CCRect rect,  CCRect capInsets);進行創建的時候，必須要注意理解 rect 和 capInsets 這兩個參數。

    在曾經講到的精靈類CCSprite中，是否還記得下列創建的方法？

//
	CCSprite::create(const char *pszFileName, const CCRect& rect);
//

    該方法就是使用pszFileName圖片資源，并從中截取某區域矩形的小圖rect，來創建CCSprite精靈。當然若為設置rect的話，默認為整張圖片的大小。

    而在 CCScale9Sprite 中的 rect 其實用法也是一樣的。如果是需要整張圖片資源sp.png的話，只要設置rect為整張圖片的大小，坐標為(0,0)即可。

    另外對于 capInsets 的設置，則是決定了CCScale9Sprite的九宮分割的區域大小。若未對CCScale9Sprite的capInsets進行設置，創建的九宮圖的分區為九等分。capInsets則是設置了中間區域的大小，從而得到其他8塊區域的大小。（這樣就不一定是等分了）

    4.2、關于圖片拉伸

    我們都知道 CCSprite 的拉伸方式是通過 setScale(); 來實現的，而對于 CCScale9Sprite 則不同。它是通過 setContentSize(const CCSize & size); 來實現圖片的拉伸。不過貌似使用 setPreferredSize(const CCSize & size); 的效果類似？

【代碼實戰】

1、使用三組圖片進行測試

2、引入頭文件及命名空間：

//
	#include "cocos-ext.h"
	using namespace cocos2d::extension;
//

3、編寫測試對比函數test

//
	/**
	 *		file：圖片資源名稱，如"sp.png"
	 *		index：第幾組測試數據
	 */
	void HelloWorld::test(const char* file, int index)
	{

		//獲取可視區域尺寸大小
		CCSize mysize = CCDirector::sharedDirector()->getVisibleSize();
		//獲取可視區域的原點位置
		CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
		//屏幕正中心位置
		CCPoint midPos = ccp(mysize.width/2, mysize.height/2);


	//CCSprite，精靈拉伸
		CCSprite* sprite1 = CCSprite::create(file);
		sprite1->setPosition( ccp(120 * index, mysize.height - 60) );
		this->addChild(sprite1);

		//精靈拉伸
		sprite1->setScale(2.0f);


	//scale9Sprite1，不設置capInsets
		CCScale9Sprite* scale9Sprite1 = CCScale9Sprite::create(file);
		scale9Sprite1->setPosition( ccp(120 * index, mysize.height/2) );
		this->addChild(scale9Sprite1);

		//不設置capInsets，拉伸
		scale9Sprite1->setContentSize( CCSizeMake(80, 80) );


	//scale9Sprite2，設置capInsets
		CCScale9Sprite* scale9Sprite2 = CCScale9Sprite::create(file);
		scale9Sprite2->setPosition( ccp(120 * index, 60) );
		this->addChild(scale9Sprite2);

		//設置capInsets，并拉伸
		scale9Sprite2->setCapInsets( CCRectMake(3, 3, 34, 34) );
		scale9Sprite2->setContentSize( CCSizeMake(80, 80) );
	}
//

4、測試三組圖片

//
	bool HelloWorld::init()
	{
		if ( !CCLayer::init() )
		{
			return false;
		}

		test("Icon.png", 1);        //用Icon.png做測試
		test("CloseNormal.png", 2); //用CloseNormal.png做測試
		test("Rect.png", 3);        //用Rect.png做測試

		return true;
	}
//

5、運行結果