[IOS-Cocos2d game development of 20] the basic knowledge of the genie collection (Bitmap operation/texture replacement/Re z axis, etc.) and the use of ccsprite and cclayercolor to make a simple covering layer!

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

Recently I wrote a lot of cocos2d blog posts, so because himi is generally about error-prone problems or more important knowledge points, many children's shoes need to write a basic article, here, himi will give an example of the most commonly used genie ccsprite to introduce some of it in detail; Considering the internet for the Cocos2d-iphone of the Chinese tutorial has been a lot, therefore, here, himi will share some basic knowledge points not mentioned in the tutorial;

First, create an genie:

Ccsprite * sprite = [ccsprite spritewithfile: @ "icon.png"]; // initialize [self addchild: SPRITE]; // Add to Layer

The code is very simple. Just pass in a Paster name and then add layers. Here, what are the himi points:

1. in addition to this function, the genie also has many methods. The most important one is to load the texture and create it in the frame cache packaged by the packaging tool. The packaging tool himi uses TP, there are other blog posts that we will not introduce here;

2. by default, the Sprite is added to the layer, which is the (0, 0) Point of the layer by default, that is, the lower left corner of the screen. In addition, the sprite Paster is rendered based on the texture center of the sprite, simply put, if the sprite texture size is regarded as Unit 1, the anchor of the genie is (0.5, 0.5). This is the default anchor of course, you can also set the anchor, the range of the anchor is [0, 1].

3. if you are new to a new language, engine, framework, and so on, you need to slowly find their rules. For example, in cocos2d, the creation method is similar, the initialization function basically starts with a word after the class name. For example, in the ccsprite class, its constructor starts with Sprite;

OK. Now we know how to create an genie. Let's write some common methods and basic bitmap operations for the genie:

Ccsprite * sprite = [ccsprite spritewithfile: @ "icon.png"]; // initialize [self addchild: SPRITE]; // Add Sprite in the layer. scale = 2; // zoom in 2 times Sprite. rotation = 90; // Rotate 90 degrees Sprite. opacity = 255; // set the transparency to completely opaque (range: 0 ~ 255) Sprite. position = CCP (100,100); // set the coordinates of the sprite center to X = 100, y = 100 [sprite setflipx: Yes]; // reverse the X axis image [sprite setflipy: Yes]; // reverse the Y axis image [sprite setcolor: ccc3 (255, 0, 0)]; // set the color to red

I have written many articles about the movements of the Genie. I will not write them here, which is meaningless. I will explain to you two problems that children's shoes often struggle:

1. How to reset the zaxis (overlay layer) of the genie )?

For this problem, many children's shoes cannot find a method mainly because the first thing you think of is to change the zaxis value of the genie (the larger the zaxis value, the closer it is to the screen ), the following code is incorrectly used:

sprite.zOrder=2;

This is an error code that cannot be used, because the zorder attribute of the genie can only be readable and unchangeable. Therefore, himi provides a solution, that is to use the layout to reset the zaxis value of the genie you want to set, for example, the following code: (111.pngis a picture that I can refer to from the blog, which is bigger than icon.png, so that the children's shoes can see clearly)

// -- Sprite * sprite = [ccsprite spritewithfile: @ "icon.png"]; [self addchild: sprite z: 1]; // Add Sprite in the input layer. position = CCP (300,200); // set the coordinates of the genie center to X = 100, y = 100 // -- the sprite ccsprite * sprite2 = [ccsprite spritewithfile for Z value 2: @ "111.png"]; [self addchild: sprite2 Z: 2]; sprite2.position = CCP (220,120 );

The Code clearly shows that the Z axis of the second sprite2 is greater than the Z axis value of the first Sprite. Then sprite2 must overwrite the sprite and run the following command:

The following code uses layer to reset the Z axis of the first genie:

[self reorderChild:sprite z:10];

SELF: cclayer

Sprite: The genie who wants to reset the Z axis (overlayer)

Z: The Z axis value of the genie who wants to reset the Z axis (overlay)

OK, then we reset the Z axis value of the first genie to 10. At this time, Genie 1 is bigger than the Z axis of genie 2, and 1 will cover 2 genie. The running effect is as follows:

2. How do I replace the created Sprite?

I have introduced two types of genie creation: one is using frame cache and the other is directly indexing the texture ID; therefore, you can change the sprite texture in two ways;

First, we will introduce the first method of replacing with a new texture:

The instance code is as follows:

// ----- Ccsprite * sprite = [ccsprite spritewithfile: @ "icon.png"]; Sprite. position = CCP (150,150); [self addchild: SPRITE]; // ----- ccsprite * sprite2 = [ccsprite spritewithfile: @ "icon.png"] After texture change; sprite2.position = CCP (350,150); [self addchild: sprite2]; // change texture cctexture2d * texture = [[cctexturecache sharedtexturecache] addimage: @ "default.png"]; // create a texture [sprite2 settexture: texture];

The running effect is as follows:

Second, use frame replacement:

// Load the frame cache, testpngs. plist saves the icon and 111 images,-HD represents the HD version of iPhone 4 [[ccspriteframecache sharedspriteframecache] addspriteframeswithfile: @ "testpngs-hd.plist"]; // ----- ccsprite * sprite = [ccsprite spritewithspriteframename: @ "icon.png"]; Sprite. position = CCP (150,150); [self addchild: SPRITE]; // ----- ccsprite * sprite2 = [ccsprite spritewithspriteframename: @ "icon.png"] After texture change; sprite2.position = CCP (350,150); [self addchild: sprite2]; // change the frame map // adjust ccspriteframe * frame2 = [[ccspriteframecache failed] spriteframebyname: @ "111.png"]; [sprite2 setdisplayframe: frame2];

The running effect is as follows:

------------- The following describes how to use the ccsprite or cclayercolor to implement a simple overwriting effect.

The Code is as follows:

Ccsprite * sprleft = [ccsprite spritewithfile: @ "icon.png"]; sprleft. position = CCP (100,180); [self addchild: sprleft]; // ---- create a simple overwriting layer // obtain the current screen width and height cgsize = [[ccdirector shareddire] winsize]; // create a Sprite (no texture) ccsprite * sprite = [ccsprite node]; // set the sprite size (full screen width and height) Sprite. texturerect = cgrectmake (0, 0, size. width, size. height); Sprite. position = CCP (size. width * 0.5, size. height * 0.5); Sprite. opacity = 127; // translucent [0 ~ 255] Sprite. color = ccc3 (0, 0, 0); // set the black [self addchild: SPRITE]; // ---- ccsprite * sprright = [ccsprite spritewithfile: @ "icon.png"]; sprright. position = CCP (300,180); [self addchild: sprright];

Here I have created two genie, one being overwritten, and the other being not overwritten, so as long as the kids shoes can be seen more clearly ~

The second method is used as follows:

// ---- Ccsprite * sprleft = [ccsprite spritewithfile: @ "icon.png"]; sprleft. position = CCP (100,180); [self addchild: sprleft]; // ---- create a simple overlayer // create a Sprite (no Paster) cclayercolor * layer = [cclayercolor layerwithcolor: ccc4 (0, 0, 0,127)]; [self addchild: layer]; // ---- ccsprite * sprright = [ccsprite spritewithfile: @ "icon.png"]; sprright. position = CCP (300,180); [self addchild: sprright];

The second method is implemented in two sentences. The reason is as follows:

The first option sets the texture size, which is not required by the layer! Because layer is full screen by default;

The first method sets coordinates, which is not required by the layer! Because layer has the default screen center;

The first method sets transparency and color, and the layer also sets ~ The four parameters that are input during layer creation:

The four parameters indicate rgba! Note: rgba !!!! Not argb! (Because himi has been used for me and Android, the first concept of color setting is argb .. So I was just touched by all kinds of frustrations here, and the effect was always not as I thought ...)

Here, we will add the three primary colors of rgba: red, green, blue, and transparency!

The effects of the two methods are shown in:

 

We hope that the children's shoes will try their best to solve the problems as follows:First, try again-> go to the source code-> Baidu Google-> finally ask others

OK, write it here! See the next article ~ Continue to be busy;