Internship Small white:: (Turn) Cocos2d-x 3.x Development (18) 10 lines of code to see the automatic batch,10 line code to see the automatic culling--------is actually rendering the picture mechanism

1. Overview

In the course of running the game, drawing is a very big overhead. For the good and bad Android mobile phone market, draw better game, can be run on more mobile phones, so it is also the top priority of optimization. The optimization of graphics is mainly reflected in reducing the number of GPU draw times. Here we separately from the Automatic optimization rendering batch and draw culling two aspects of the new version on the drawing of the optimization.

2. Automatic Batch

In the Cocos2d-x 3.x, the previous manual writing of Batchnode was discarded, using the automatic management method. Speaking of Batchnode, it will inevitably involve the graphics card underlying drawing principle. Simply put, each submission of a drawing instruction to the video card will incur consumption, so as little as possible to submit instructions to optimize performance. More specifically, when the entire scene is drawn in the same instruction, it is the best state.

It's hard to explain the problem by simply introducing the theory, so let's write a demo to test it.

Create a new project. Change the init function as follows. [CPP]View Plaincopyprint?

2. BOOL Helloworld::init ()
4. {
6. //////////////////////////////  
8. //1. Super init First
10. if (! Layer::init ())
12. {
14. return false;
16. }
18. node* node = node::create ();
20. Char name[32];
22. For (int i = 0;i<100;++i)
24. {
26. memset (name, 0, sizeof (name));
28. sprintf (name, "%d.png", i%10);
30. Auto Sprite = sprite::create (name);
32. Sprite->setposition (Point (i*5,i*5));
34. Node->addchild (Sprite, 0);
36. }
38. this->addchild (node);
40. return true;
42. }

This code creates 100 of images. I copied 9 buttons from the sample project and modified the third button a little. This way the program loops through the creation of these 10 images. The picture resource is as shown.
 

Compile and run the program, we can see the following running screen.

Our focus is on the second line of information in the lower left corner. "GL calls" represents the number of calls to OpenGL instructions in each frame. The smaller the number, the better the program's rendering performance. Now every 101 draws, where 100 elements are drawn once per element, and the extra one is to draw this left-hand corner of the information itself.

Next, we use the graph software to synthesize these 10 images into a large image and a plist file. When exporting using Cocostudio, select "Use large image" to synthesize a large image. Of course, we can also choose to texturepacker this professional mapping software. The synthesized picture is divided into "test.png" and "Test.plist", as shown in the picture of the resource file above.

Change the init code as follows.

[CPP]View Plaincopyprint?

2. BOOL Helloworld::init ()
4. {
6. //////////////////////////////  
8. //1. Super init First
10. if (! Layer::init ())
12. {
14. return false;
16. }
18. Ccspriteframecache::getinstance ()->addspriteframeswithfile ("Test.plist","test.png");
20. node* node = node::create ();
22. Char name[32];
24. For (int i = 0;i<100;++i)
26. {
28. memset (name, 0, sizeof (name));
30. sprintf (name, "%d.png", i%10);
32. //auto sprite = sprite::create (name);
34. Auto Sprite = sprite::createwithspriteframename (name);
36. Sprite->setposition (Point (i*5,i*5));
38. Node->addchild (Sprite, 0);
40. }
42. this->addchild (node);
44. return true;
46. }

in this code, we call the Addspriteframeswithfile function, load the large image into memory, and call Createwithspriteframename to load the picture from the cached texture when the object is created. Doing so all our draw calls can be combined into one OpenGL directive, and the calculations and merges of these drawing instructions are done by the Cocos2d-x engine. The compilation runs as shown.

we can very clearly see that the optimized program "GL calls" became 2 times.

3. Draw culling

On the other hand optimization is drawing culling. This is easier to understand relative to the previous optimization. It means that when an element is moved out of the screen, it is not drawn.

In the example that follows, let's test this feature. Change the init function as follows.

[CPP]View Plaincopyprint?

2. BOOL Helloworld::init ()
4. {
6. //////////////////////////////  
8. //1. Super init First
10. if (! Layer::init ())
12. {
14. return false;
16. }
18. //ccspriteframecache::getinstance ()->addspriteframeswithfile ("Test.plist", "test.png");
20. node* node = node::create ();
22. Char name[32];
24. For (int i = 0;i<100;++i)
26. {
28. memset (name, 0, sizeof (name));
30. sprintf (name, "%d.png", i%10);
32. Auto Sprite = sprite::create (name);
34. //auto sprite = sprite::createwithspriteframename (name);
36. Sprite->setposition (Point (i*5,i*5));
38. Node->addchild (Sprite, 0);
40. }
42. this->addchild (node);
46. Auto listener = eventlistenertouchonebyone::create ();
48. Listener->ontouchbegan = [=] (Touch *ptouch, Event *pevent)
50. {
52. return true;
54. };
56. listener->ontouchmoved = [=] (Touch *ptouch, Event *pevent)
58. {
60. Node->setposition (Node->getposition () +ptouch->getdelta ());
62. };
64. Director::getinstance ()->geteventdispatcher ()
66. Addeventlistenerwithscenegraphpriority (Listener, this );
70. return true;
72. }

First, we'll change the optimization of automatic batch back, otherwise we won't be able to test it. Next, we add a click event to the scene and move the 100 elements when you click on the drag screen. Compile the run, run the effect as.

As you can see, the number of "GL calls" drops when some pictures are moved out of the screen.

4. SummaryOverall, this two-point optimization can be said to have greatly improved the performance of the program. At the same time, in the process of development, but also so that programmers do not have too much to struggle with rendering efficiency optimization.  related code download: http://download.csdn.net/detail/fansongy/7398941  PS: Recently work relatively busy, blog update less. Busy over this paragraph, as much as possible to write some articles to fill up, readers.  

This blog from the Asura road , reproduced please indicate the source, prohibited for commercial use: http://blog.csdn.net/fansongy/article/details/26968473

Internship Small white:: (Turn) Cocos2d-x 3.x Development (18) 10 lines of code to see the automatic batch,10 line code to see the automatic culling--------is actually rendering the picture mechanism