Cocos2dx BASICS (18) -- Basic Drawing draw

[Nagging]

Cocos2dx encapsulates a large number of OpenGL functions for quickly drawing basic graphics. This section describes the functions related to the basic graph painting in cocos2dx. Includes: Point, straight line, rectangle, polygon, elliptic, and besell curve.

Special thanks"Lone wolf"Daniel, he wrote"Learn cocos2dx with diaosi"It is my first tutorial.

[Thank you]

Http://gl.paea.cn/contents/a486f595fd1d1f8a.html

Http://blog.csdn.net/conmajia/article/details/8543834

[Term]

Number of segments:That is, the curve is generally drawn by drawing a "spline", and the number of segments is the number of splines.

Secondary besell curve:A parabolic line between the start and end points. A control point is used to control the shape of the parabolic line.

Three-time besell curve:Two control points are used between the start and end points to control the shape of the curve.

Drawing draw]

The cocos2dx engine provides a large number of OpenGL functions.Glew. hYou will know how terrible it is. Of course, here I will only talk about how to draw basic simple images.

The drawing functions related to OpenGL primitive are stored inCcdrawingprimitives. h. It is mainly divided into six categories: points, straight lines, rectangles, polygon, circle, and besell curves.

Next, let's talk about how to draw images in the class.

1. Set the color, point size, and line width.

Those who have used drawing tools should know that when drawing a graph, we must first define the color, the size of the point, and the width of the line.

/*** Set the color, size, and width: * point size-ccpointsize () * line width-gllinewidth () * color transparency-ccdrawcolor4b (), ccdrawcolor4f () * /// specifies the size of a vertex. The default value is 1. // actually, a solid square ccpointsize (float size) is drawn. // specifies the line width, the default value is 1 gllinewidth (float width). // red R, Green G, blue B, and Transparency A. The value range is 0 ~ 255ccdrawcolor4b (unsigned char R, unsigned char g, unsigned char B, unsigned char a); // The value ranges from 0 ~ 1ccdrawcolor4f (float R, float g, float B, float );//

2. Point

You can draw one point or multiple points at the same time. It is actually a solid square.

Usage:

(1) set the vertex size:Ccpointsize

(2) set the color transparency:Ccdrawcolor4bOrCcdrawcolor4f

(3) image points:Ccdrawpoint

// Ccdrawpoint ('coordinate ccpoint'); // draw a point ccdrawpoints ('point set ccpoint', 'Total number of vertics'); // draw multiple points //

3. Straight Line

You can draw a straight line.

Usage:

(1) set the line width:Gllinewidth

(2) set the color transparency:Ccdrawcolor4bOrCcdrawcolor4f

(3) draw a straight line:Ccdrawpoint

// Ccdrawline ('ccpoint' and 'ccpoint ');//

4. rectangle

You can draw a rectangle, which can be hollow or solid.

Usage:

(1) set the line width:Gllinewidth

(2) set the color transparency:Ccdrawcolor4bOrCcdrawcolor4f

(3) Draw a rectangle:CcdrawrectOrCcdrawsolidrect

// Ccdrawrect ('diagonal vertex 1ccpoint', 'diagonal vertex 2ccpoint'); ccdrawsolidrect ('diagonal vertex 1ccpoint', 'diagonal vertex 2ccpoint', 'color transparency cccolor4f ');//

5. Polygon

You can draw a polygon, which can be hollow or solid.

Usage:

(1) set the line width:Gllinewidth

(2) set the color transparency:Ccdrawcolor4bOrCcdrawcolor4f

(3) Draw a polygon:CcdrawpolyOrCcdrawsolidpoly

// Ccdrawpoly ('vertex array ccpoint * ', 'vertex count int', 'auto-enclosed?'); ccdrawsolidpoly ('vertex array ccpoint * ', 'vertex count int ', 'autoclose? ', 'color transparency cccolor4f ');//

6. elliptic

You can draw a circle or an ellipse. When drawing an ellipse, you need to set the radius scale-down ratio between the X axis and the Y axis.

Usage:

(1) set the line width:Gllinewidth

(2) set the color transparency:Ccdrawcolor4bOrCcdrawcolor4f

(3) Draw a polygon:Ccdrawcircle

//// Parameter description: // radians: The radians of the points of the line when the display radius is true. That is, the angle between the line and the X axis. // Number of segments: the number of parameter points used to draw a circle. The more points the circle is, the more accurate the circle is. However, if the parameter is too many, the efficiency will be low. Generally, 360 is set. // Display radius: shows the radius, that is, the link between the center and a point on the circle. Ccdrawcircle ('center coordinate ccpoint', 'radius float', 'radian float', 'number of segments ', 'show radius bool'); ccdrawcircle ('center coordinate ccpoint ', 'radius float', 'radian float', 'number of segments ', 'indicates the bool radius', 'x-axis float', and 'Y-axis float '); //

7. besell Curve

I also heard about the concept of the beiser curve for the first time. You can draw the besell curve of a control point or the besell curve of two control points.

(1) Secondary besell curve: A control point is used between the start and end points to control the shape of the parabolic curve.

(2) cubic besell curve: two control points are used between the start and end points to control the shape of the curve.

For detailed drawing principle, refer to blog: http://blog.csdn.net/conmajia/article/details/8543834

Usage:

(1) set the line width:Gllinewidth

(2) set the color transparency:Ccdrawcolor4bOrCcdrawcolor4f

(3) Draw a polygon:CcdrawquadbezrOrCcdrawcubicbezr

/// The ccdrawquadbeener curve ('start point ccpoint', 'Control Point ccpoint', 'end point ccpoint', 'segment number int '); // three-step besell curve ccdrawcubicbezr ('start point ccpoint', 'Control Point 1ccpoint', 'Control Point 2ccpoint', 'end point ccpoint', 'segment number int ');//

[Code practice]

(1) set a background image

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M01/47/97/wKioL1P80Wmzm3SxAAFHbk8yBjQ167.jpg "Title =" helloworld.png "style =" text-align: center; white-space: normal; "alt =" wkiol1p80wmzm3sxaafhbk8ybjq167.jpg "/>

As a reference object for drawing, otherwise the transparency will not be highlighted.

CCSprite* bg = CCSprite::create("HelloWorld.png");bg->setPosition(mysize/2);this->addChild(bg,-1);

(2) rewrite the drawing draw () function inherited by ccnode.

Class helloworld: Public cocos2d: cclayer {public: Virtual bool Init (); static cocos2d: ccscene * scene (); create_func (helloworld); // override draw () function virtual void draw ();};

(3) write the draw () Code

Draw points, straight lines, rectangles, polygon, elliptical, and besell curves.

Void helloworld: Draw () {// screen size ccsize mysize = ccdirector: shareddirector ()-> getvisiblesize (); // point // One Point ccpointsize (10 ); ccdrawcolor4b (255, 25,200,250); ccdrawpoint (mysize/2); // multiple points ccpointsize (30); ccdrawcolor4b (255, 0, 0,100 ); ccpoint pointarray [] = {CCP (200,150), CCP (200,200), CCP (280,150), CCP (280,200)}; ccdrawpoints (pointarray, 4 ); // line gllinewidth (3); ccdrawcolor4b (255,255,255,130); ccdrawline (CCP (10,300), CCP (200,300); // circle gllinewidth (3); ccdrawcolor4b (255,255,100,190 ); ccdrawcircle (CCP (50,250), 40, 3.14/2,360, true, 1, 0.5); // rectangle // hollow gllinewidth (5); ccdrawcolor4b (24, 25,200,140 ); ccdrawrect (CCP (10,150), CCP (110,200); // solid ccdrawsolidrect (CCP (10, 90), CCP (100,140), ccc4f (255,255,255, 0.5f )); // polygon // gllinewidth (10); ccdrawcolor4b (240,225,100,130); ccpoint polyarray [] = {CCP (20, 20), CCP (50, 0 ), CCP (250,100), CCP (300,100), CCP (250, 50)}; ccdrawpoly (polyarray, 5, 1 ); // solid ccpoint polyarray2 [] = {CCP (280,300), CCP (410,130), CCP (), CCP ()}; ccdrawsolidpoly (polyarray2, 5, ccc4f (142,245, 70, 0.3f); // besell curve // plane gllinewidth (5); ccdrawcolor4b (100,100,100,255); ccdrawquadbezr (CCP (0,320 ), CCP (160,100), CCP (480,320), 100); // stereo gllinewidth (5); ccdrawcolor4b (200,200,200,255); ccdrawcubicbezr (CCP (160,300), CCP ), CCP (480,320), CCP (100 );}

Running result:

650) This. width = 650; "src =" http://s3.51cto.com/wyfs02/M00/47/96/wKiom1P80V7hba05AAFwAiuHdPE640.jpg "Title =" 1.jpg" alt = "wkiom1p80v710905aafwaiuhdpe640.jpg"/>

Analysis:

It's too late. You can find the highlights... 650) This. width = 650; "src =" http://img.baidu.com/hi/tsj/t_0016.gif "alt =" t_0016.gif "/>

[Demo download]

Http://down.51cto.com/data/1867621

This article is from the "summer wind" blog, please be sure to keep this source http://shahdza.blog.51cto.com/2410787/1545462

Cocos2dx BASICS (18) -- Basic Drawing draw