Cocos2dx BASICS (12) -- figure 9 ccscale9sprite

[Introduction]

Originally, I wanted to learn about the cccontrolbutton, another subclass of the control class cccontrol. However, we found that a parameter involved the ccscale9sprite class. When you see ccscale9sprite, it is easy to think of ccsprite. What is the difference between the two? So I collected some information about ccscale9sprite online.

[References]

[1]Http://blog.csdn.net/nynyvkhhiiii/article/details/12782249

[2]Http://www.cnblogs.com/moodlxs/archive/2012/12/26/2834235.html

[3]Http://blog.sina.com.cn/s/blog_7d1531ed010167pq.html

[4]Http://blog.csdn.net/zaojiahua/article/details/21295535

[5]Http://blog.csdn.net/onerain88/article/details/8273219

[Ccscale9sprite]

For the ccscale9sprite class, I don't know how to translate it. Some people call it a 9-chart, some call it a 9-sister diagram. 650) This. width = 650; "src =" http://img.baidu.com/hi/face/ I _f08.gif "alt =" I _f08.gif "/>

So what is ccscale9sprite? The ccscale9sprite object is a ccsprite Object Deformation. Its usage is similar to that of ccsprite. The difference is that the ccscale9sprite object has a feature that it can minimize Frame loss during texture scaling.

As shown in, after stretching with a common ccsprite, the four corners are blurred and distorted. Instead, after stretching with ccscale9sprite, it is still clear.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/46/FF/wKiom1P1i7WQlNDAAABOALnKTvQ654.jpg "Title =" 1.png" alt = "wkiom1p1i7wqlndaaaboalnktvq654.jpg"/>

1. Principle:

The implementation of ccscale9sprite is very clever. It is achieved through one ccspritebatchnode and nine ccsprite. The principle is very simple. by cutting the original texture resources into nine parts (PS: this is also the reason for the jiugong diagram.) complete the following three steps based on the desired size:

(1) Keep the four corners intact

(2) One-Way stretching of four sides (that is, the side between the four corners, such as the top, only horizontal stretching)

(3) bidirectional stretching of the middle part (that is, the middle part of the jiugong diagram, horizontal and vertical stretching at the same time, PS: The tensile ratio is not necessarily the same)

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/46/FF/wKiom1P1jjXgE2TMAADVtyZHzc0054.jpg "Title =" ccscale9sprite.png "alt =" wkiom1p1jjxge2tmaadvtyzhzc0054.jpg "/>

The resources of ccspritebatchnode are the entire texture. 9 ccsprite correspond to 9 parts of the texture (the proportion of 9 parts varies depending on the texture, assemble the nine parts!

2. header files and namespaces to be referenced:

# Include "cocos-ext.h" // include cocos-ext.h header file using namespace cocos2d: extension; // reference cocos2d: Extension namespace //

3. Common operations are as follows:

Ccscale9sprite inherits from ccnodergba. Therefore, in addition to the following custom operations, you can also use the ccnode and ccnodergba functions.

/*************************************** * ********************************** Principle of the above section take the image as an example *//********************************* ***************************************/ class ccscale9sprite: public ccnodergba {/*** three types of creation: * Create, createwithspriteframe, and createwithspriteframename * // use the image resource name to create. // parameter description: // rect the rectangle size of the entire graph // the size of the rectangle corresponding to the middle part of the capinsets // rect = ccrectmake (0, 0, 80, 80); // capinsets = ccrectmake (1 2, 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); // create static ccscale9sprite * createwithspriteframe (ccspritefr Ame * spriteframe); static ccscale9sprite * weight (ccspriteframe * spriteframe, ccrect capinsets); // use the spritframe name to create static ccscale9sprite * weight (const char * spriteframename ); static ccscale9sprite * sets (const char * spriteframename, ccrect capinsets);/*** Property setting * setspriteframe, setcapinsets, * setpreferredsize, setcontentsize, * setopacity, setcolo R * // set the virtual void setspriteframe (ccspriteframe * spriteframe) of the genie frame; // set the cc_property (ccrect, m_capinsets, capinsets) of the rectangle corresponding to the intermediate part of the frame ); // set the size to be generated. The default value is the original size cc_property (ccsize, m_preferredsize, preferredsize) of the sprite. // This is used to stretch ccscale9sprite, while ccsprtie is stretched by setscale. Virtual void setcontentsize (const ccsize & size); // sets the transparency virtual void setopacity (glubyte opacity); Virtual glubyte getopacity (); // set the color virtual void setcolor (const cccolor3b & color); Virtual const cccolor3b & getcolor ();};//

4. Instructions for use:

(1) about parameters:

When usingCcscale9sprite: Create (const char * file, ccrect rect, ccrect capinsets );You must understandRectAndCapinsetsThese two parameters.

Do you still remember the following creation methods in the genie ccsprite?

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

This method uses the pszfilename image resource and captures the rect of the rectangle in a region to create the ccsprite. Of course, if you set rect, the default size is the size of the entire image.

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/06/wKiom1P1oJnByMWnAADARBo6V0E491.jpg "Title =" 22.jpg" alt = "wkiom1p1ojnbymwnaadarbo6v0e491.jpg"/>

InCcscale9spriteInRectIn fact, the usage is the same. If you are using the entire image resource sp.png, you only need to set the rect to the size of the entire image, and the coordinates are (0, 0.

ForCapinsetsIt determines the size of the Nine-palace split area of ccscale9sprite. If you have not set the capinsets of ccscale9sprite, the partition of the created 9-palace chart is 9-cent. Capinsets specifies the size of the intermediate area to obtain the size of the other eight areas. (This is not necessarily an equal score)

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/47/08/wKioL1P1pjKwKl99AABZGxOsbUU714.jpg "style =" float: none; "Title =" 111.jpg" alt = "wkiol1p1pjkwkl99aabzgxosbuu714.jpg"/> 650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/47/06/wKiom1P1pW2DJ51bAABqk6jl0EA981.jpg "Title =" 444.jpg" alt = "wkiom1p1pw2dj51baabqk6jl0ea981.jpg"/>

(2) about image stretching:

We all knowCcspriteThe way of stretching is throughSetscale ();AndCcscale9spriteIs different. It is throughSetcontentsize (const ccsize & size );To achieve image stretching. However, it seems thatSetpreferredsize (const ccsize & size );?

[Code practice]

(1) Use three sets of images for testing:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/47/09/wKiom1P1y3awwwGkAAAMosjZL_o127.jpg "Title =" icon.png "style =" white-space: normal; float: none; "alt =" wkiom1p1y3awwwgkaaamosjzl_o127.jpg "/> 650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/47/0B/wKioL1P1zI7hAfEWAAALGXvKFrw144.jpg "style =" float: none; "Title =" closenormal.png "alt =" wkiol1p1zi7hafewaaalgxvkfrw144.jpg "/> 650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/0B/wKioL1P1zI7QcC8HAAAG9XhV_To288.jpg "Title =" rect.png "style =" float: none; "alt =" wkiol1p1zi7qcc8haaag9xhv_to288.jpg "/>

(2) introduce the header file and namespace:

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

(3) Compile the test comparison function:

/*** File: image resource name, for example, "sp.png" * index: Group of test data */void helloworld: Test (const char * file, int index) {// obtain the size of the visible area. ccsize mysize = ccdirector: shareddire()-> getvisiblesize (); // obtain the origin position of the visible area. ccpoint origin = ccdirector: shareddire () -> getvisibleorigin (); // ccpoint midpos = CCP (mysize. width/2, mysize. height/2); // ccsprite, Sprite stretch ccsprite * sprite1 = ccsprite: Create (File); sprite1-> setposition (CCP (120 * index, mysize. height-60); this-> addchild (sprite1); // sprite1-> setscale (2.0f); // scale9sprite1; capinsetsccscale9sprite * scale9sprite1 = ccscale9sprite :: create (File); scale9sprite1-> setposition (CCP (120 * index, mysize. height/2); this-> addchild (scale9sprite1); // do not set capinsets, stretch scale9sprite1-> setcontentsize (ccsizemake (80, 80); // scale9sprite2, set capinsetsccscale9sprite * scale9sprite2 = ccscale9sprite: Create (File); scale9sprite2-> setposition (CCP (120 * index, 60); this-> addchild (scale9sprite2 ); // set capinsets and stretch scale9sprite2-> setcapinsets (ccrectmake (3, 3, 34, 34); scale9sprite2-> setcontentsize (ccsizemake (80, 80 ));}//

(4) test three groups of images:

Bool helloworld: Init () {If (! Cclayer: Init () {return false;} test ("icon.png", 1); // test with icon.png ("closenormal.png", 2 ); // use closenormal.png for test ("rect.png", 3); // use rect.png for test return true ;}//

Running result:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M02/47/0B/wKioL1P1zwbTpOyHAAESX332c04309.jpg "Title =" 1.jpg" alt = "wkiol1p1zwbtpoyhaaesx332c020.9.jpg"/>

Analysis result:

Click here to find the highlights. 650) This. width = 650; "src =" http://img.baidu.com/hi/face/ I _f07.gif "alt =" I _f07.gif "/>

[Demo download]

Http://down.51cto.com/data/1865750

This article is from the "summer wind" blog, please be sure to keep this source http://shahdza.blog.51cto.com/2410787/1543284