On the Line – Rocket Through - Cocos2d-x by Example Beginner's Guide - page 164

What just happened?
You just learned how to draw inside DrawNode . One important line in that code is the
clear() call. It clears all the drawings in that node before we update them with their new
state.
In LineContainer , we use a switch statement to determine how to draw the player's
line. If the _lineType property is set to LINE_NONE , we don't draw anything (this will,
in effect, clear the screen of any drawings done by the player).
If _lineType is LINE_TEMP , this means the player is currently dragging a finger away
from the _rocket object, and we want to show a white line from the _rocket current
position to the player's current touch position. These points are called tip and pivot , re-
spectively.
We also draw a dot right on the pivot point.
drawLine(_tip, _pivot, Color4F(1.0, 1.0, 1.0, 1.0));
drawDot(_pivot, 5, Color4F(Color3B::WHITE));
If _lineType is LINE_DASHED , it means the player has removed his or her finger from
the screen and set a new pivot point for the _rocket to rotate around. We draw a white
dotted line, using what is known as the Bezier linear formula to draw a series of tiny circles
from the _rocket current position and the pivot point:
for (int i = 0; i < segments + 1; i++) {
x_ = _pivot.x + t * (_tip.x - _pivot.x);
y_ = _pivot.y + t * (_tip.y - _pivot.y);
drawDot(Vec2(x_, y_), 5, Color4F(Color3B::WHITE));
t += (float) 1 / segments;
}
And finally, for the energy bar, we draw a black line underneath an orange one. The orange
one resizes as the value for _energy in LineContainer is reduced. The black one
stays the same and it's here to show contrast. You layer your drawings through the order of
your draw calls; so the first things drawn appear underneath the latter ones.