Cocos2d-x Series 8-drawing API

This section takes a look at some of the commonly used drawing APIs in cocos2d-x;

Let's take a look at a tool class to quickly specify the location of the game window, such as top left and top right;
VisibleRect. h

#ifndef __VISIBLERECT_H__#define __VISIBLERECT_H__#include "cocos2d.h"class VisibleRect{public:    static cocos2d::Rect getVisibleRect();    static cocos2d::Vec2 left();    static cocos2d::Vec2 right();    static cocos2d::Vec2 top();    static cocos2d::Vec2 bottom();    static cocos2d::Vec2 center();    static cocos2d::Vec2 leftTop();    static cocos2d::Vec2 rightTop();    static cocos2d::Vec2 leftBottom();    static cocos2d::Vec2 rightBottom();private:    static void lazyInit();    static cocos2d::Rect s_visibleRect;};#endif /* __VISIBLERECT_H__ */

VisibleRect. cpp implementation

#include "VisibleRect.h"USING_NS_CC;Rect VisibleRect::s_visibleRect;void VisibleRect::lazyInit(){    // no lazy init    // Useful if we change the resolution in runtime    s_visibleRect = Director::getInstance()->getOpenGLView()->getVisibleRect();}Rect VisibleRect::getVisibleRect(){    lazyInit();    return s_visibleRect;}Vec2 VisibleRect::left(){    lazyInit();    return Vec2(s_visibleRect.origin.x, s_visibleRect.origin.y+s_visibleRect.size.height/2);}Vec2 VisibleRect::right(){    lazyInit();    return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y+s_visibleRect.size.height/2);}Vec2 VisibleRect::top(){    lazyInit();    return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y+s_visibleRect.size.height);}Vec2 VisibleRect::bottom(){    lazyInit();    return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y);}Vec2 VisibleRect::center(){    lazyInit();    return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width/2, s_visibleRect.origin.y+s_visibleRect.size.height/2);}Vec2 VisibleRect::leftTop(){    lazyInit();    return Vec2(s_visibleRect.origin.x, s_visibleRect.origin.y+s_visibleRect.size.height);}Vec2 VisibleRect::rightTop(){    lazyInit();    return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y+s_visibleRect.size.height);}Vec2 VisibleRect::leftBottom(){    lazyInit();    return s_visibleRect.origin;}Vec2 VisibleRect::rightBottom(){    lazyInit();    return Vec2(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y);}

The above code is no longer explained too much, which is relatively simple, that is, to obtain some Rect positions;
The following mainly shows two forms: one is to draw directly in the Layer constructor through the api, and the other is to draw in the draw and onDraw methods inherited from the Layer;

1. Draw images directly in the Layer Constructor

DrawNodeTest: DrawNodeTest () {auto s = Director: getInstance ()-> getWinSize (); auto draw = DrawNode: create (); addChild (draw, 10 ); // draw 10 circles, which are actually 10 points and specify the point size, so it looks like a circle; for (int I = 0; I <10; I ++) {draw-> drawDot (Vec2 (s. width/2, s. height/2), 10 * (10-i), Color4F (CCRANDOM_0_1 (), CCRANDOM_0_1 (), CCRANDOM_0_1 (), 1 ));} // draw a polygon Vec2 points [] = {Vec2 (s. height/4, 0), Vec2 (s. width, s. height/5), Vec2 (s. width/3*2, s. height)}; draw-> drawPolygon (points, sizeof (points)/sizeof (points [0]), Color4F (0.5, 0,), 4, Color4F, 1, 1); // polygon (note that there will be some bugs here) {const float o = 80; const float w = 20; const float h = 50; vec2 star [] = {Vec2 (o + w, o-h), Vec2 (o + w * 2, o ), // lower spike Vec2 (o + w * 2 + h, o + w), Vec2 (o + w * 2, o + w * 2 ), // right spike // {o + w, o + w * 2 + h}, {o, o + w * 2 }, // top spike // {o-h, o + w}, {o, o}, // left spike}; draw-> drawPolygon (star, sizeof (star) /sizeof (star [0]), Color4F (0.5, 0,), 1, Color4F (,);} // polygon, which is displayed normally, note the difference between this and the previous polygon: it specifies the order of vertices in regular order. On the contrary, the order of vertices in the previous polygon is messy, so there will be some bugs; {const float o = 180; const float w = 20; const float h = 50; Vec2 star [] = {Vec2 (o, o), Vec2 (o + w, o-h ), vec2 (o + w * 2, o), // lower spike Vec2 (o + w * 2 + h, o + w), Vec2 (o + w * 2, o + w * 2), // right spike Vec2 (o + w, o + w * 2 + h), Vec2 (o, o + w * 2 ), // top spike Vec2 (o-h, o + w), // left spike}; draw-> drawPolygon (star, sizeof (star) /sizeof (star [0]), Color4F (0.5, 0,), 1, Color4F ));} // draw the clip draw-> drawSegment (Vec2 (20, s. height), Vec2 (20, s. height/2), 10, Color4F (0, 1, 0, 1); draw-> drawSegment (Vec2 (10, s. height/2), Vec2 (s. width/2, s. height/2), 40, Color4F (1, 0, 1, 0.5); // triangle draw-> drawTriangle (Vec2 (10, 10), Vec2 (70, 30), Vec2 (100,140), Color4F (CCRANDOM_0_1 (), CCRANDOM_0_1 (), CCRANDOM_0_1 (), 0.5); // curve draw-> drawquadraticbezerer (Vec2 (s. width-150, s. height-150), Vec2 (s. width-70, s. height-10), Vec2 (s. width-10, s. height-10), 10, Color4F (CCRANDOM_0_1 (), CCRANDOM_0_1 (), CCRANDOM_0_1 (), 0.5); draw-> drawcubicbezr (Vec2 (s. width-250, 40), Vec2 (s. width-70,100), Vec2 (s. width-30,250), Vec2 (s. width-10, s. height-50), 10, Color4F (CCRANDOM_0_1 (), CCRANDOM_0_1 (), CCRANDOM_0_1 (), 0.5 ));}

The code above draws multiple images as follows:

2. inherit the Layer and draw the image in the onDraw/draw Method 

Void DrawPrimitivesTest: draw (Renderer * renderer, const Mat4 & transform, bool transformUpdated) {_ customCommand. init (_ globalZOrder); // _ customCommand is a field of DrawPrimitivesTest (CustomCommand); _ customCommand. func = CC_CALLBACK_0 (scheme: onDraw, this, transform, transformUpdated); renderer-> addCommand (& _ customCommand);} void merge: onDraw (const Mat4 & transform, bool transformUp Dated) {Director * director = Director: getInstance (); CCASSERT (nullptr! = Director, "Director is null when seting matrix stack"); director-> pushMatrix (MATRIX_STACK_TYPE: MATRIX_STACK_MODELVIEW); director-> loadMatrix (MATRIX_STACK_TYPE: MATRIX_STACK_MODELVIEW, transform ); // draw CHECK_GL_ERROR_DEBUG (); // draw line, default width: 1, white, DrawPrimitives: drawLine (VisibleRect: leftBottom (), VisibleRect: rightTop ()); CHECK_GL_ERROR_DEBUG (); // draw line: Specify the color and width. When the width is greater than 1, GL_LINE_SMOOTH is ineffective. // fill = () on iPhone // glDisable (GL_LINE_SMOOTH ); glLineWidth (5.0f); gradient: setDrawColor4B (255, 0, 0,255); DrawPrimitives: drawLine (VisibleRect: leftTop (), VisibleRect: rightBottom (); gradient (); // draw point DrawPrimitives: setPointSize (64); DrawPrimitives: setDrawColor4B (255,128,); DrawPrimitives: drawPoint (VisibleRect: center (); vertex (); // draw 4 small points Vec2 points [] = {Vec2 (60,60), Vec2 (70,70), Vec2 (60,70), Vec2 (70,60)}; DrawPrimitives :: setPointSize (4); fig: setDrawColor4B (0,255,255,255); DrawPrimitives: drawPoints (points, 4); CHECK_GL_ERROR_DEBUG (); // draw a green circle with 10 segments glLineWidth (16); DrawPrimitives: setDrawColor4B (0,255, 0,255); DrawPrimitives: drawCircle (VisibleRect: center (), 100, 0, 10, false); CHECK_GL_ERROR_DEBUG (); // draw a green circle with 50 segments with line to center glLineWidth (2); DrawPrimitives: setDrawColor4B (0,255,255,255); DrawPrimitives :: drawCircle (VisibleRect: center (), 50, CC_DEGREES_TO_RADIANS (90), 50, true); CHECK_GL_ERROR_DEBUG (); // draw a filled circle, glLineWidth (2); DrawPrimitives:: setDrawColor4B (255, 0,255,255); DrawPrimitives: drawSolidCircle (VisibleRect: center () + Vec2 (), 40, CC_DEGREES_TO_RADIANS (90), 50, 1.0f, 1.0f ); CHECK_GL_ERROR_DEBUG (); // unclosed polygon (the drawn result is actually a line) DrawPrimitives: setDrawColor4B (255,255, 0,255); glLineWidth (10 ); vec2 vertices [] = {Vec2 (100,100), Vec2 (50, 50), Vec2 (50,100), Vec2 (), Vec2 ()}; DrawPrimitives: drawPoly (vertices, 5, false); CHECK_GL_ERROR_DEBUG (); // filled polygon glLineWidth (1); Vec2 filledVertices [] = {Vec2 (0,120), Vec2 (50,120), Vec2 (50,170 ), vec2 (25,200), Vec2 (0,170)}; DrawPrimitives: drawSolidPoly (filledVertices, 5, Color4F (0.5f, 0.5f, 1, 1); // closed purble poly DrawPrimitives :: setDrawColor4B (255, 0,255,255); glLineWidth (2); Vec2 vertices2 [] = {Vec2 (30,130), Vec2 (30,230), Vec2 (50,200)}; DrawPrimitives :: drawPoly (vertices2, 3, true); trim (); // draw quad bezr path DrawPrimitives: drawquadbezr (VisibleRect: leftTop (), VisibleRect: center (), VisibleRect:: rightTop (), 50); CHECK_GL_ERROR_DEBUG (); // draw cubic bezr path DrawPrimitives: drawcubicbeier (VisibleRect: center (), Vec2 (VisibleRect: center (). x + 30, VisibleRect: center (). y + 50), Vec2 (VisibleRect: center (). x + 60, VisibleRect: center (). y-50), VisibleRect: right (), 100); CHECK_GL_ERROR_DEBUG (); // draw a solid polygon Vec2 vertices3 [] = {Vec2 (60,160), Vec2 (70,190 ), vec2 (100,190), Vec2 (90,160)}; DrawPrimitives: drawSolidPoly (vertices3, 4, Color4F (,); // restore the paint brush to the original state glLineWidth (1 ); drawPrimitives: setDrawColor4B (255,255,255,255); DrawPrimitives: setPointSize (1); trim (); // end draw ctor-> popMatrix (MATRIX_STACK_TYPE: MATRIX_STACK_MODELVIEW );}

The result of the above Code is

Note: Some of the above image painting methods do not comment on some parameters. Below is a simple example;

// Rectangular DrawPrimitives: setDrawCooolor4B (255, 0, 0,255); DrawPrimitives: drawRect (Point (0, 0), Point (100,100); // Filled Rectangular DrawPrimitives:: drawSolidRect (Point (0, 0), Point (100,100), Color4F (0, 0, 1, 1); // circle, five parameters are center, radius, angle, cut segment (in fact, the computer can not draw a circle, the circle is actually a combination of points, here the circle is divided into 50 points), DrawPrimitives: drawCircle (Point (0, 0), 50, m_PI * 2, 50, true); // fill the circle. The five parameters are center, radius, angle, cut part, DrawPrimitives: drawSolidCircle (Point (0, 0 ), 50, M_PI * 2, 50); Point ps [3]; ps [0] = Point (0, 0); ps [1] = Point (100, 0 ); ps [2] = Point (0, 50); // polygon; the second parameter indicates the number of vertices DrawPrimitives: drawPoly (ps, 3, true); // fill the polygon DrawPrimitives:: drawSolidPoly (ps, 3, Color4F (0, 0, 1, 1); // line DrawPrimitives: drawLine (Point (0, 0), Point (50, 50); // click DrawPrimitives: drawPoint (Point (0, 0 ));

End: I new Cocos2d-x, if there is a mistake, please advise!