"Cocos2d-x game development practice" Study Notes 1-show the image in Cocos2d, cocos2dx practice

"Cocos2d-x game development practice" Study Notes 1-show the image in Cocos2d, cocos2dx practice

The images in the Cocos2d-x are displayed through the sprite class. In the Cocos2d-x game every role, monster, item can be understood as a genie, game background as a special unit to understand it as a genie is nothing wrong. The project ChapterThree03 under the source file in this chapter directory shows how to use Cocos2d-x to implement a simple game start interface, mainly through the sprite class to display the image, its key code is shown in Example 3-5.

Example 3-5 show an image in a Cocos2d-x]

Size size = Director: getInstance ()-> getVisibleSize (); // obtain the screen Size // The background image auto * background = Sprite: create ("background.jpg "); // create a spirit class. The background image is background.jpg background-> setPosition (size. width/2, size. height/2); // align the background image to display background-> setScale (0.7f); // reduce the background image size by addChild (background, 0 ); // Add the background image to the scene. // The three buttons on the right of the screen are auto * button1 = Sprite: create ("button.png"); // The customized material image is button.png button1-> setPosition (550, size. height/2); // The Position of the first button button1-> setScale (0.6f); // set the button size addChild (button1, 1 ); // Add the first button to the scene auto * button2 = Sprite: create ("button.png"); // the second button button2-> setPosition (550, size. height/2-60); button2-> setScale (0.6f); addChild (button2, 1); // Add the second button to the scene auto * button3 = Sprite :: create ("button.png"); // the third button button3-> setPosition (550, size. height/2-120); button3-> setScale (0.6f); addChild (button3, 1 ); // Add the third button to the scene // The old Character auto * renwu = Sprite: create ("renwu.png") on the left "); // create an excellent class, and store the library material in renwu.png. renwu-> setPosition (); // set the renwu position-> setAnchorPoint (Vec2 )); // set the genie anchor renwu-> setScale (0.5f); addChild (renwu, 2); // Add the character to the scene

　　

The effect after running is 3-5.

Figure 3-5 game start interface using the genie class

You can go to the Resources directory of the project to view the materials used in this example 3-6. . We can see that the interface shown in Figure 3-5 is actually the result of these three clips stacked together with a certain regularity. The example 3-5 provides such a function.

Figure 3-6 Materials Used in Example 3-5

In line 3-5 of the example, first obtain the size of the current screen and store it in the variable size. Then, create an object background of the genie class, the parameters of the create method are the names of the required materials, as shown in row 02nd of the example. The next step is to add the genie object to the scene using the addChild method, as shown in row 06th of the example.

However, in this example, you must not only display the image, but also change the image position and scale the image. Therefore, you must take a look at the content at rows 04th and 05. The setPosition method is used in row 04th to set the position of the background image. By default, the anchor of the element in the Cocos2d-x is located at the center of the image, therefore, the parameter in setPosition indicates the displacement of the midpoint of the image and the lower left corner of the screen in the x and y directions.

As for the setScale used in row 05th, a float type decimal number is directly used to set the image zoom factor, as the size of the background image in this example is unknown, the window width (screen width) is set to 640*360. Therefore, the screen can be filled with background images. In actual development, screen adaptation may occur, this will be explained later in this chapter.

08th ~ Lines 19 use a similar method to add the three buttons to the scene, and set a certain degree of displacement and scaling. 21st ~ Line 25 is used to add a character image to the scene. It is not difficult to see the code used earlier. This part uses a new setAnchorPoint method. This method is used to set the anchor of the current object, as shown in row 23rd. It sets the anchor of the character image to the position in the lower-left corner. Then, when the setPosition method is used, the parameter changes to the relative position between the lower-left corner of the image and the lower-left corner of the screen.

Recommended a new book to learn the latest version of the Cocos2d-x game development practice, Tsinghua published, must belong to the boutique!