The usage and consideration of several drawing methods of cocos2d-x

CCRenderTexture

Understanding by yourself

The CCRenderTexture is similar to a blank "canvas". You can use a custom brush (CCSprite *) to "record" the movement trace of the brush in the touch event, in this way, "Draw" various artistic effects. The record method is very simple. First, the CCRenderTexture calls its own begin () function, enables the "record" function, and then calls the brush-> visit () to draw itself "on this canvas, at last, CCRenderTexture calls end () to end the record, and then OK.

Here I think the CCRenderTexture overwrites the Texture of the paint brush to its own Texture instead of creating new textures, so the consumption is relatively low, even if the painting is frequent, the number of frames can also remain stable, which is a very good class.

As long as the "record" function is enabled in begin (), any subsequent CCNode * object can be "painted" on it as long as visit () is called. So, the general game screenshot function, can fully use the CCRenderTexture to achieve, specific can see in tests example, cocos2d-x has provided related examples, look at the source code can be understood.

Advantages

Using CCRenderTexture can easily achieve the ideal drawing effect (as long as you build a very small brush image, then load it with CCSprite, and then call a CCSprite visit () as appropriate ), the number of frames is low, and it is easy to implement the screenshot function of the game. The first thought of this project is "you draw and guess.

Disadvantages

Because the hardware or OpenGL versions of each Android mobile phone are different, some mobile phones use CCRenderTexture to display blurred screens, such as HTC. Even the official tests example is hard to escape. This fatal weakness leads to the fact that "you draw my guess" cannot be used across mobile phones...

This Bug I think is not a problem with the cocos2d-x engine, some cool people say it is because Texture is being painted repeatedly (only draw once OK, so the screenshot function should not be affected ), maybe every Android phone OpenGL is not the same, so the problem has not been solved, can only wait for the cocos2d-x or other cool people can fix it.

It is not recommended to use the screen because of the problem. (If you have solved the screen problem, please advise me. Thank you)

[Landscape reference]

Example

CCRenderTexture is probably familiar to everyone. There are also examples in tests. You need to know the usage and check the source code of tests.

Use OpenGL-ES for drawing

Understanding by yourself

OpenGL-ES is a lite version of OpenGL. Due to its simplicity, many commonly used OpenGL functions are "simplified". As a result, many online image search algorithms cannot be used. Therefore, it is very difficult to draw Images Using OpenGL-ES.

In the cocos2d-x, OpenGL-ES generally calls its related functions in the draw () function. Of course, cocos2d-x also encapsulates several commonly used drawing functions: ccDrawLine, ccDrawCircle and so on, of course, cocos2d-x also provides an example that can be easily found in tests.

Advantages

Not yet, because I am not familiar with OpenGL-ES...

Disadvantages

It is difficult to implement and can intercept a large number of people. Because it cannot be drawn in the touch event like the CCRenderTexture, The CCPoint to be drawn is usually recorded in the touch event, and then traversed in the draw () function, to achieve the drawing effect.

Generally, moved vertices must be saved. Note that all vertices must be saved. If only the current vertices are saved, draw () will draw only one vertex, the effect is like moving the mouse following a "spot", rather than drawing. Generally, when you draw a painting, the mouse will drag out N points. If you just save the simple vector, the vector will be too large, and it will be very time-consuming to traverse it in draw, as a result, the number of frames will be dropped soon. Let's take a look at how to save the data structure. Colleagues use line segments as the data structure to record points. This will consume a little, and the number of frames will remain stable.

Another disadvantage is that, if the algorithm is not implemented well, the drawn results will be very poor. Although my colleague's line segment method can draw lines smoothly, the problem of sawtooth is very serious, it does not work even if OpenGL is enabled. If you are familiar with OpenGL-ES and have good algorithms, draw () may be the fastest and best way to draw images.

The last disadvantage is that draw () is always shown on the top of the Samsung mobile phone of Google, and then the lines will cover the game UI, no matter how to set z-Order, it is useless. It is estimated that it is Google's Samsung's OpenGL-ES that has done some special processing, which leads to "ah, ah ..."

 
[Even the teeth…]

Example

Related examples provided by the Cocos2d-x (DrawPrimitivesTest), the common draw line, circle, draw betiller line, etc., there are functions provided, specific or open their own tests to see the source code, here is not detailed.

[DrawPrimitivesTest]

CCSpriteBatchNode

Understanding by yourself

The CCSprite generated by CCSpriteBatchNode shares a single texture. The advantage of this is that it is very efficient to generate many identical CCSprite, and the number of frames can be very high and stable. Because of this feature, it is a good choice to achieve the particle effect, but I have not seen the implementation of the cocos2d-x particle system, here do not speculate, so as not to mislead everyone. The usage of CCSpriteBatchNode is still in tests. If you are interested, you can check it yourself.

Advantages

Because the implementation of draw () is too difficult, and the CCRenderTexture has the problem of blurred screen, we try to use CCSpriteBatchNode for drawing. The drawing effect is very good, because we use CCSprite for custom brushes. The number of frames remains 58-60, which is very stable (if you just create CCSprite * And then addChild to the Layer, dropping frames will be very serious)

Disadvantages

Although CCSpriteBatchNode works very well, there is also a fatal drawback: CCSpriteBatchNode * objects cannot be addChild too many CCSprite * objects, and colleagues have done some experiments, after addChild to more than 16000 CCSprite nodes, CCSpriteBatchNode cannot be addChild. That is to say, after drawing more than 16000 points, the paint brush "no ink", resulting in no effect on mouse dragging.

After checking the source code, the CCSpriteBatchNode will re-allocate the memory when addChild is used. When the memory to be allocated is large, the memory allocation will fail, and CCSpriteBatchNode will invalidate this addChild.

One solution is to generate a count. When CCSpriteBatchNode is addChild to 10000, capture a graph with CCRenderTexture to save the current drawing record, then clear the CCSpriteBatchNode, and set the count to zero, then draw a picture. This operation is delayed, so it is not implemented.

CCRibbon

Understanding by yourself

CCRibbon is a line segment set. Unlike the above method, CCRibbon can only be a single color. That is to say, if you set it to red, all the lines you have drawn will be red. If it is blue, all the lines will be blue.

To generate a CCRibbon * object, you must specify parameters such as the width of the brush, the image of the brush, the length of the line segment, and the color of the brush. (Fade has not understood this parameter yet ...).

CCRibbon provides addPointAt (CCPoint location, float width) to add the point to CCRibbon with multiple widths, where the cocos2d-x calculates the size of the point so that the line reaches "narrow head and tail, body width. This can be said to be an advantage or a disadvantage. "The head and tail are narrow and the body is wide." It looks like a paint brush, but it won't work if you want to make a uniform paint brush.

Advantages

The number of frames is stable, and the paint effect is good. Because CCRibbon uses draw () for drawing, you don't have to worry about the screen rendering problem like CCRenderTexture. Currently, CCRibbon is an ideal drawing method.

Disadvantages

If you set a vertex at (100,100) and run to (400,400) and then click another vertex, CCRibbon automatically connects the two vertices, CCRibbon won't work if you want to make the line layout method of "click farming. The solution is to generate a CCRibbon for each TouchBegan operation so that this problem will not occur. However, if too many CCRibbon statements are generated, it is unknown whether other problems will occur, such as CCSpriteBatchNode...

Because CCRibbon is a single color, it is impossible to draw a color chart. The solution is to generate multiple CCRibbon * objects, as shown in the preceding figure. The color of each CCRibbon * object is different.

The last thing we don't feel very human-friendly is that the paint brush can only "narrow head and tail, wide body". If you want to draw "Uniform head and tail" lines, you may not be able to do it with CCRibbon.

Example

The Cocos2d-x does not directly give the CCRibbon example, so this can not be seen on the tests use method, but a slight attempt on the line, the usage is quite simple.