Cocos2d-x from getting started to mastering the sixth lesson "Custom Drawing"

Course Video Tutorial Address: http://edu.csdn.net/course/detail/1342/20984?auto_start=1
A Custom Drawing

A graphics engine that is always written by the build point, line, and polygon drawing functions. Point, line, face. form the initial graphical basis. So, mastering the point, the line, the surface is the basis of mastering the engine.

When Cocos2d-x was 2.0, it was drawn using related functions under the Drawprimitives namespace. The cocos2d-x3.0 version begins with the related methods provided by the Drawnode class to draw. Today's course focuses on drawing using the latest methods.

Two Drawing drawing

Get Drawnode very simple, he is a node sub-class, last class we have talked about what node is, a preliminary understanding of node, let's take a look at Drawnode this type, the code is as follows:

It is not hard to see from the code that Drawnode is actually a subclass of node, and then he is similar to the usage of node that we talked about earlier. So how do we get a Drawnode object, actually very simple, the code is as follows:

    Create Drawnode    Auto draw = Drawnode::create ();    Add the Drawnode to the layer    addChild (draw, 10);

<span style= "White-space:pre" ></span> through code annotations we can clearly see that only the method that calls Drawnode's create () can create a Drawnode object. Then we add it to the HelloWorld layer.

Now that we've got the Drawnode object, let's take a look at how to use Drawnode to draw a point with the following code:

    Draw a point    //parameter 1, the position of the point, Parameter 2, the size of the point, Parameter 3, the color of the point, the color value 0-1 of the range of float    draw->drawpoint (Vec2 (200,200), color4f (1, 0.5, 0, 1));

It's easy to see the PIP in the code. Only need to call Drawnode's Drawpoint method on the line, just need to fill in the corresponding parameters can be, the role of the specific parameters of the comments have been described in detail, we can write it all over to deepen the memory.

Let's take a look at how to draw a line with the following code:

    Draw a line    //parameter 1, the line's starting point, Parameter 2, the line's end point, Parameter 3, the line's color, ccrandom_o_1 the random number of the parameter 0-1, which means that the line color will change every frame    draw->drawline (VEC2 ( 0,0), VEC2 (480,), color4f (Ccrandom_0_1 (), Ccrandom_0_1 (), ccrandom_0_1 (), 0.5);

After reading the code smart students should understand, the dash is also very simple, only need to call Drawnode DrawLine method on it. We can see that this line is drawn straight, then how do we draw a curve, this we first want to popularize a knowledge, about the Bezier curve of knowledge, specific what is Bezier curve, we can go to Baidu Encyclopedia to look at, because the concept of Bessel is not important, here is not detailed, So let's start by looking at what the two Bezier curves cocos2d-x can look like.

Quadratic Bezier curve

Gauche Besel Curve

The above two graphs represent two Bezier curves, which are the most commonly used Bezier curves, so how can they be drawn? Let's take a look at the code.

    Draw a two-time Bezier curve    //three parameters respectively in P0,p1,p2, but in our case, just mirror it up and down. The    fourth parameter is the number of segments that make up the curve, but the more the number of segments the smoother the curve, and the fifth parameter is the color of the line    Draw->drawquadbezier (VEC2 (810, 490), VEC2 (890, 630), VEC2 (950, 630), ten, color4f (Ccrandom_0_1 (), Ccrandom_0_1 (), ccrandom_0_1 (), 0.5);    Draw a Gauche Besel curve    //The first four parameters should correspond to the P0,P1,P3,P4, the figure on the P2 can be omitted. The fifth one is the number of segments used in the curve composition.    Draw->drawcubicbezier (VEC2 (200,200), VEC2 (300,300), VEC2 (450,200), VEC2 (500,100), ten, color4f (1,0,0,1));

We should be able to figure out the Bezier curve by combining code annotations with the above Bezier graphs. Let's take a look at how to draw polygons, such as triangles, rectangles, and irregular polygons. The code is as follows:

    Draw a triangle, the parameters are three vertices of the triangle, the parameter 4 is the color value    draw->drawtriangle (VEC2 (), VEC2 (three, three), VEC2 (three, five), color4f ( Ccrandom_0_1 (), Ccrandom_0_1 (), ccrandom_0_1 (), 0.5    );    Draw a rectangle, parameter 1 is the position of the lower left vertex of the rectangle, parameter 2 is the position of the upper right vertex of the rectangle, the parameter is the color    draw->drawrect (VEC2 (230,230), VEC2 (70,70), color4f (1,1,0,1));    Draw the circle function, the parameter 1 is the center point, the parameter 2 is the radius, the parameter 3 is the circle counterclockwise rotation angle, here uses a macro Cc_degrees_to_radians to convert the angle value to the radian. Rotated 90 degrees to allow the center line to be    displayed vertically. , Parameter 4 is the average tangent segment number of a circle, and the last parameter is to specify whether to connect to the center of the circle from the point of origin of the circle segment, parameter 5 is a multiple of horizontal scaling, and parameter 6 is a multiple of the vertical scale, and the seven is the color of the circle segment (    Vec2 (draw->drawcircle 600,320), Cc_degrees_to_radians, 1.0f, 2.0f, color4f (1.0, 0.0, 0.0, 0.5));    Draw a polygon, first to save the coordinates of each vertex of the polygon by an array    Vec2 vertices[] = {VEC2 (0,0), VEC2 (50,50), VEC2 (100,50), VEC2 (100,100), VEC2 (50,100) };    Draw a polygon, parameter 1 is the coordinates of each vertex, parameter 2 the number of points, Parameter 3 is closed graph, parameter 4 color value    draw->drawpoly (vertices, 5, true, color4f (Ccrandom_0_1 (), Ccrandom_0_1 (), Ccrandom_0_1 (), 1));

Through the comments of the code, we will also find that, in fact, are very simple.

So, Dot and line are drawn, below we will see how to draw a face, above we explained how to draw a polygon, then we draw a "solid" polygon is not the face, if you can have this thinking is very good to do, the following look at the screen code:

<span style= "White-space:pre" ></span>//draw a round face, parameter 1 is the center point, parameter 2 is the radius, parameter 3 is a circle counterclockwise rotation angle, here use a macro cc_degrees_to_ Radians convert the angle value to radians. Rotated 90 degrees to allow the center line to be displayed vertically. , Parameter 4 is the average tangent segment number of a circle, and the last parameter is to specify whether to connect to the center of the circle from the point of origin of the circle segment, parameter 5 is a multiple of horizontal scaling, and parameter 6 is a multiple of the vertical scale, and the seven is the color of the circle segment (    Vec2 (draw->drawsolidcircle 480,320), Cc_degrees_to_radians, 2.0, 2.0, color4f (1,0,0,1));    Draw a rectangular face, parameter 1 is the position of the lower left vertex of the rectangle, parameter 2 is the position of the upper right vertex of the rectangle, the parameter is the color    draw->drawsolidrect (VEC2 (100,100), VEC2 (200,200), color4f ( 1,1,0,1));    Draw a polygon, first to save the coordinates of each vertex of the polygon by an array    Vec2 vertices1[] = {VEC2 (0,0), VEC2 (50,50), VEC2 (100,50), VEC2 (100,100), VEC2 (50,100 ) };    Parameter 1 is the coordinates of each vertex, the number of 2 points, the parameter 3 color value    draw->drawsolidpoly (vertices1, 5, color4f (Ccrandom_0_1 (), Ccrandom_0_1 (), Ccrandom _0_1 (), 1));

Through the code of the comments you can see, to draw a face, only need to use the corresponding interface drawsolidxxxx () can be drawn out of the shape of the surface, and the picture of the polygon is not much different, just use the interface name more solid, is not very simple.

OK, write so much code, let's look at the last run effect,

Three. Summary of custom drawing

Today we mainly explain the relevant knowledge of custom drawing, through this class students should be able to learn to use the Cocos Drawnode class to draw some images, line segments, in our actual work will always be used to custom-drawn, For example, the sighting line of a fish-catching man is a typical color line that is drawn using custom drawing.

Four, homework:

1. Draw points, lines, polygons, and polygons.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Cocos2d-x from getting started to mastering the sixth lesson "Custom Drawing"