IOS-Cocos2d game development 17th] flexible use of the genie visible area (texturerect) and anchorpoint, and combined with the visible area and anchorpoint to create a progress bar!

Li huaming himiOriginal, reprinted must be explicitly noted:
Reprinted from[Heimi gamedev block]Link: http://www.himigame.com/iphone-cocos2d/501.html

Today, himi uses a blog post to introduce two frequently-used genie-related details to shoes;

First, we will introduce the first knowledge point: the sprite visible area;

No matter which mobile platform is used for game development, it will be used in the visible area, such as the setclip method of the kjava (j2s) platform and the cliprect method of Android, which also exists on IOS, here we will introduce the settexturerect function in the cocos2d engine;

If you have never been familiar with the concept of shoes, you can simply give an overview of himi:

The so-called visible area is to set a certain area on a complete surface, so that it only displays the surface of the Set area, other parts are hidden and not displayed; the most common method is to set a visible area for an image, so that only the area set for this image is displayed;

In cocos2d, the visible area of the genie ccsprite can be set in two ways:

1. Set it when creating the genie; 2. Set it after creation; for example:

Create a cocos2d project and create an genie in the init method of helloworldlayer. m. The Code is as follows:

// --- Normal creation of the icon graph ccsprite * spriteold = [ccsprite spritewithfile: @ "icon.png"]; spriteold. position = CCP (80,100); [self addchild: spriteold]; // --- set ccsprite * spritenew = [ccsprite spritewithfile: @ "icon.png" rect: cgrectmake (0, 0, 30, 30)]; spritenew. position = CCP (150,100); [self addchild: spritenew]; // --- after creation, set ccsprite * spritet = [ccsprite spritewithfile for the visible area with a width of 30: @ "icon.png"]; [spritet settexturerect: cgrectmake (10, 10, 30, 30)]; spritet. position = CCP (230,100); [self addchild: spritet];

I created three genie above. The first is the icon Genie With no settings but the region, and the second and third are the genie with a visible area width of 30 and a height of 30, however, the second and third genie have the same region width and height but different starting points. The second is to set the visible region when creating the genie, the third genie is set after the genie is created. The settings are different and the functions are the same;

You need to explain in detail that no matter which method you use to set the visible area, you need to input a cgrect object. The cgrect parameter has four coordinates x, y, and W width and height, y;

Therefore, cgrect functions in the region are as follows:

In cgrect, X and Y indicate the size of the visible area (W, h) starting from the (x, y) coordinates of the sprite;

Below is the run. It is easy to understand the comparison between the three genie (from left to right:

 

BelowThe second knowledge point is anchorpoint );

The purpose of rendering an anchor is to determine the rendering method when rendering an image. Generally, the following commonly used anchor points are used:

The top left corner of the image, the top right corner of the image, the center point of the image, the bottom left corner of the image, and the bottom right corner of the image.

First, you need to know that the default anchor is its center point when you add a Paster texture to the layer in the cocos2d engine;

In cocos2d, the origin (0, 0) of the layer is the lower left corner of the screen. Therefore, if you create a genie to add it to the layer by default, the central point of the genie is placed on the origin of the layer, that is, the sprite image is displayed on the screen, but the width of the Sprite is half the height, for example:

The Code is as follows:

// --- Use the default anchor ccsprite * spriteold = [ccsprite spritewithfile: @ "icon.png"]; [self addchild: spriteold];

If we set the anchor of the genie to the lower left corner, the sprite icon is displayed completely, because the lower left corner of the genie exactly matches the origin of the layer, for example:

The Code is as follows:

// --- Set the sprite anchpoint to ccsprite * spritenew = [ccsprite spritewithfile: @ "icon.png"]; spritenew. anchorpoint = CCP (0, 0); [self addchild: spritenew];

The setting method is the anchorpoint attribute of the Genie. the value assigned is a cgpoint object. The maximum value of X and Y in the cgpoint is 1, indicating the rightmost and rightmost;

--------- The above description is too simple, so the following himi uses the visible area and the characteristics of the anchor to create a simple progress bar from left to right style;

First, we still use the cocos2d icon chart as a progress bar and display it from left to right. The steps are as follows:

Step 1: Create an Genie and set the anchor's anchor to x = 0 (leftmost) and Y = 0.5 (the y-axis midpoint of the genie). The Code is as follows:

// --- Use the default anchor ccsprite * spritep = [ccsprite spritewithfile: @ "icon.png"]; spritep. position = CCP (size. width * 0.5, size. height * 0.5); // sets the coordinate spritep. anchorpoint = CCP (0, 0.5); // set the anchorpoint [self addchild: spritep Z: 0 Tag: 88]; // Add the genie to the layer for display

Careful kids shoes may find that the genie is not displayed at the midpoint of the screen after the above Code is run. Well, because we have set the anchor's anchor, the lower left corner of the genie overlaps with the center of the screen;

Step 2: Add a variable to record the current progress:

@ Interface helloworldlayer: cclayer {float currentshowrect; // the size of the current visible area}

Enable a refresh function:

-(ID) Init {[self scheduleupdate];}-(void) Update :( cctime) himi {// function executed for each frame}

Last step: Write the logic code of the icon progress bar from left to right in the refresh function. The Code is as follows:

-(Void) Update :( cctime) himi {// function executed at each frame // implement the progress bar logic ccsprite * sprite = (ccsprite *) [self getchildbytag: 88]; currentshowrect ++; If (currentshowrect >=100) {currentshowrect = 0;} [sprite settexturerect: cgrectmake (0, 0, currentshowrect, Sprite. position. y)];}

Run the following command: (the icon display area is getting bigger and keeps repeating)

OK. After this article is completed, we may think that this article is too simple. If you are a child shoes that often follow the himi blog, in this case, you will find that basically all the blog posts on himi have introduced many details. For the first reason, there are too many identical articles and so many others have written, so I do not need to repeat them. Cause 2: What himi often says is that the Details determine everything. Although it is absolutely said, the fact that development projects are basically details that plague everyone;

Okay, I will not talk about it anymore. I will continue to be busy;