Scale9Sprite

cocos2d 2.0之後加入了一種九宮格的實現,主要作用是用來拉伸圖片,這樣的好處在於保留圖片四個角不變形的同時,對圖片中間部分進行拉伸,來滿足一些控件的自適應(PS: 比如包括按鈕,對話框,最直觀的形象就是iOS裏的短信氣泡了),這就要求圖片資源的中間部分是純色或者是簡單的漸變了!


1.cocos2d中九宮格CCScale9Sprite的實現

(1)原理

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

a. 保持4個角部分不變形

b. 單向拉伸4條邊(即在4個角兩兩之間的邊,比如上邊,只做橫向拉伸)

c. 雙向拉伸中間部分(即九宮格的中間部分,橫向,縱向同時拉伸,PS:拉伸比例不一定相同)


(PS: 更多原理可參考 http://yannickloriot.com/2011/12/create-buttons-in-cocos2d-by-using-cccontrolbutton/ )

(2)實現

CCSpriteBatchNode的資源爲整個的紋理,9個CCSprite對應於紋理的9個部分(根據紋理不同,9部分所佔比例會有所不同),根據想要的尺寸,將9部分拼裝在一起!

(3)優缺點

優點:思路簡單清晰;使用CCSpriteBatchNode,只需要一次繪製,效率較高

缺點:內存佔用大,需要1個CCSpriteBatchNode和9個CCSprite對象;不支持CCSpriteBatchNode(如果控件很多,我們都需要對每個控件單獨繪製一次,會影響效率)

發佈了19 篇原創文章 · 獲贊 4 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章