There are two ways to draw in Cocos2d-x: 1. Use OpenGL's drawing primitive DrawPrimitives; 2. Use DrawNode. This section mainly learns to use DrawNode to draw graphics.
【tips】
The number of segments: that is, the drawing of a curve is generally achieved by drawing a "spline curve", and the number of segments is the number of spline segments.
Quadratic Bezier curve: a parabola between the start point and the end point, using a control point to control the shape of the parabola.
Cubic Bezier curve: between the start and end points, use two control points to control the shape of the curve.
【DrawNode】
DrawNode draws all elements in a single batch, so it draws points, line segments, and polygons faster than "drawing primitives".
The graphics drawn using DrawPrimitives drawing primitives can be solid or hollow.
The graphics drawn with DrawNode are all solid.
1. How to use
Create a DrawNode, and then add it to the Layer background layer, you can draw various shapes of graphics.
The method of use is as follows:
//
//Create DrawNode, and then add it to the Layer layer
DrawNode* drawNode = DrawNode::create();
this->addChild(drawNode);
//...Basic graphics drawing...
//
2. Basic graphics drawing
Use DrawNode to draw graphics, you can draw the following graphics.
Dot: drawDot
Line segment: drawSegment
Triangle: drawTriangle
Polygon: drawPolygon
Quadratic Bezier graphics: drawQuadraticBezier
Cubic Nessel graphics: drawCubicBezier
Note: The figures drawn are all solid.
The method of use is as follows:
//
//Dot ('position','dot radius','fill color')
void drawDot(const Vec2 &pos, float radius, const Color4F &color);
//Line segment ('start point','end point','half line width','fill color')
void drawSegment(const Vec2 &from, const Vec2 &to, float radius, const Color4F &color);
//Triangle('Vertex 1','Vertex 2','Vertex 3','Filling Color')
void drawTriangle(const Vec2 &p1, const Vec2 &p2, const Vec2 &p3, const Color4F &color);
//Polygon('vertex array','number of vertices','fill color','contour thickness','contour color')
void drawPolygon(Vec2 *verts, int count, const Color4F &fillColor, float borderWidth, const Color4F &borderColor);
// Quadratic Bezier graphics ('start point','control point','end point','number of segments','fill color')
void drawQuadraticBezier(const Vec2& from, const Vec2& control, const Vec2& to, unsigned int segments, const Color4F &color);
//Cubic Bezier graphics ('start point','control point 1','control point 2','end point','number of segments','fill color')
void drawCubicBezier(const Vec2& from, const Vec2& control1, const Vec2& control2, const Vec2& to, unsigned int segments, const Color4F &color);
//
3. Clear the drawing cache
Use clear() to clear all the graphics previously drawn with drawNode.
//
drawNode->clear();
//
4. Color mixing method
Use setBlendFunc(const BlendFunc & blendFunc) to set the color blending method. For details, see: "Summary of Usage Examples of Color Mixing BlendFunc"
//
BlendFunc bl = { GL_ONE, GL_ONE };
drawNode->setBlendFunc(bl);
//
5. Hollow polygon drawing
The graphics drawn with DrawNode are all solid, so how to draw the hollow ones?
It can be seen from the function of drawing graphics: while drawing the graphics, you need to set the color Color4F of the graphics, which also contains the setting of transparency. So as long as you control the transparency of the fill color Color4F inside the graphic to be transparent (value is 0), you can draw a hollow graphic.
The only thing that can achieve this effect is the drawing of polygons: drawPolygon.
Examples of use:
Color4F(1, 0, 0, 0): red and transparent
Color4F(1, 0, 0, 1): red is opaque
//
Vec2 point[4];
point[0] = Vec2(100, 100);
point[1] = Vec2(100, 200);
point[2] = Vec2(200, 200);
point[3] = Vec2(200, 100);
//Draw a hollow polygon
//Filling color: Color4F(1, 0, 0, 0), transparent
//Outline color: Color4F(0, 1, 0, 1), green
drawNode->drawPolygon(point, 4, Color4F(1, 0, 0, 0), 1, Color4F(0, 1, 0, 1));
//
[Code combat]
Dots
Line segment
triangle
Solid polygon
Hollow polygon
Quadratic Bezier graphics
Cubic Bezier graphics
Color mixing test {GL_ONE, GL_ONE}
//
//Create DrawNode
DrawNode* drawNode = DrawNode::create();
this->addChild(drawNode);
//Dot
drawNode->drawDot(Vec2(50, 50), 10, Color4F::RED);
//Line segment
drawNode->drawSegment(Vec2(20, 100), Vec2(100, 100), 5, Color4F(0, 1, 0, 1));
drawNode->drawSegment(Vec2(20, 150), Vec2(100, 150), 10, Color4F(0, 0, 1, 1));
//triangle
drawNode->drawTriangle(Vec2(20, 250), Vec2(100, 300), Vec2(50, 200), Color4F(1, 1, 0, 1));
//Solid polygon
Vec2 point1[4];
point1[0] = Vec2(150, 50);
point1[1] = Vec2(150, 150);
point1[2] = Vec2(250, 150);
point1[3] = Vec2(250, 50);
drawNode->drawPolygon(point1, 4, Color4F(1, 0, 0, 1), 1, Color4F(0, 1, 0, 1));
//Hollow polygon
Vec2 point2[4];
point2[0] = Vec2(150, 200);
point2[1] = Vec2(150, 300);
point2[2] = Vec2(250, 300);
point2[3] = Vec2(250, 200);
drawNode->drawPolygon(point2, 4, Color4F(1, 0, 0, 0), 1, Color4F(0, 1, 0, 1));
//Secondary Bessel
Vec2 from1 = Vec2(300, 20);
Vec2 to1 = Vec2(450, 20);
Vec2 control = Vec2(360, 100);
drawNode->drawQuadraticBezier(from1, control, to1, 100, Color4F::ORANGE);
//Three times Bessel
Vec2 from2 = Vec2(300, 100);
Vec2 to2 = Vec2(450, 100);
Vec2 control1 = Vec2(350, 0);
Vec2 control2 = Vec2(400, 200);
drawNode->drawCubicBezier(from2, control1, control2, to2, 100, Color4F::YELLOW);
//Color mixing test
BlendFunc bl = { GL_ONE, GL_ONE };
drawNode->setBlendFunc(bl);
drawNode->drawSegment(Vec2(300, 250), Vec2(450, 250), 10, Color4F::GREEN);
drawNode->drawTriangle(Vec2(300, 200), Vec2(400, 300), Vec2(450, 150), Color4F::RED);
//
Screenshot:
analysis:
(1) It can be seen that all the drawn figures are solid.
(2) The endpoints on both sides of the drawn line segment are a semicircle, because the line segment is drawn through dots.
(3) See the two rectangles in the middle, one is solid and the other is hollow.
(4) The solid Bezier graphics look so strange.