Drawing glPrimitives

Cocos2d uses openGLES, which is a graphics library that enables objects to be displayed onscreen. In fact, all the drawing that we have done until now uses this library. Cocos2d also gives you basic access to glPrimitives, which can be used to create basic shapes, such as circles, squares, rectangles, and so on.

Getting ready

Let's take a look at a few of the examples now. We will begin by creating a simple circle.

How to do it…

Right after adding the hero node, we will add the following code:

//drawDotNode
CCDrawNode* dotNode = [CCDrawNode node];
CCColor* red = [CCColorcolorWithRed:1.0fgreen:0.0fblue:0.0f];
[dotNodedrawDot:CGPointMake(winSize.width/2, winSize.height/2) radius: 10.0fcolor:red];
[selfaddChild:dotNode];

glPrimitives are created using the CCDrawNode class. Here, we will create a new instance of CCDrawNode and call it DotNode. We will create a new CCColor variable called red and assign the RGBA value of red.

We will then call the drawDot function on CCDrawNode and pass in the location where we would like to create the circle. We will also pass in the radius and color. In the end, we will add dotNode to the scene.

How it works…

When you run the project, you will see a red dot at the center of the screen.

Here, as we provided the center of the circle and radius, Cocos2d creates the circle and paints the area inside this region with the color that you specified.

The circle is one example; there are other shapes that can also be created this way.

There's more…

Next, we will take a look at how to create polygons of any shape with the drawWithPolyVert function of the CCDrawNode class. Add the following code and replace or comment the DrawDot node:

// DrawSquareNode
CCDrawNode *squareNode = [CCDrawNode node];

CGPointsquareVerts[4] =
{
  CGPointMake(center.x - 50, center.y - 50),

  CGPointMake(center.x - 50, center.y + 50),

  CGPointMake(center.x + 50, center.y + 50),

  CGPointMake(center.x + 50, center.y - 50)
};

CCColor* green = [CCColorcolorWithRed:0.0fgreen:1.0fblue:0.0f];

[squareNodedrawPolyWithVerts:squareVerts
  count:4
  fillColor:red
  borderWidth:1
  borderColor:green];

[selfaddChild:squareNode];

We will create a new node of the CCDrawNode type. Next, we will create an array of CGPoint by calling in squareVerts, which will take in the location of the vertices of the square. We will then create a new CCColor called green and assign it a green color using the RGBA value.

Then, we will call drawPolyLineWithVerts, pass in the vertices array, give the number of vertices to draw, pass in the fill color as red, and assign a border width of 1. In the end, we will pass in the border color as green, which we specified earlier.

Then, we will add squareNode to the scene.

We can simply run the project to see the final result.

We can also make a triangle with the same code. Instead of drawing four nodes, if we just ask the function to draw three nodes, a triangle will be drawn instead of a square.

We can change the code as follows, in which we will change the count to 3 instead of 4. There is no need to change the verts array:

CCColor* green = [CCColorcolorWithRed:0.0fgreen:1.0fblue:0.0f];        

[squareNodedrawPolyWithVerts:squareVerts
 count: 3
 fillColor:red
 borderWidth:1
 borderColor:green];

[selfaddChild:squareNode];

We will then run again to see the change:

Using the CCDrawNode class, we can also create line segments between two points.

For this, we will add the following code right after adding the polyline code:

//segment node
CCColor* blue = [CCColorcolorWithRed:0.0fgreen:0.0fblue:1.0f];

CCDrawNode* segmentNode = [CCDrawNode node];

[segmentNodedrawSegmentFrom:center
  to:CGPointMake(center.x + 40, center.y + 40)
  radius: 2.0
  color: blue];

[selfaddChild:segmentNode];

We will define a new CCColor called blue so that we can color the line blue. Next, we will create a new CCDrawNode class and call it segmentNode.

On segmentNode, we will call the drawSegment function and provide the center of the screen as the start point and the second point is 40 units in the x direction and 40 units in the y direction from the center. We will then pass in the radius, which is the thickness of the line, and the color blue.

The node is then added to the scene.

Note that in the following screenshot, I changed the polyline to draw a square instead of a triangle: