*Warning* This post is a little more technical, and features implementation details

Last time I gave an overview of using CCRibbon and GL_Line in creating lines. We were left with 2 major issues. First, the polygons being generated become very irregular when angles start getting steep.  Second, texture mapping is not always clean and does not present a line of consistent width. Our art style demands clean, dynamic outlines and front indication. In order to deliver this vision, tech needs to create a custom solution with low overhead. Here is how it was done…

Creating a feature like this can easily become a huge time sink so it is important to start with a list of minimal shipping features. So in seeing what CCRibbon does, and what can be done, we need a line (the SSRibbon class) that:

1. Is drawn with an arbitrary amount of points
2. Can make any angle cleanly
3. Can be textured with any custom texture
4. Is antialiased
5. Works at every zoom level

Lastly, an interesting test case can determine if the feature is worth keeping or if the visual design needs adjustment.  Bastogne is chosen because of its mix of sharp angles and tight curving angles.  (Plus it’s currently the default camera location)

SSRibbon Algorithm showing steps leading to simplified path

Here is where GL_Line really became useful. Instead of trying to create textured version first, visual representations of each step of the line/polygon creation was done in clear easy to distinguish colors. The green line is the first step and represents the input points.  (Points input using touches).  In order to smooth out the angles the red line shows a Catmull-Rom spline.

This shape was very convenient because it conformed very well to the original line, and does not require additional point data to define the curves.  The red line does get away from the green in  a few locations, but more importantly it provides data going into and coming out of each hard angle.  Each segment is broken into 8 (shown in hard to see dark green) but that amount is controlled so curves of varying smoothness can be created.

SSRibbon Velocity Test

More polygons didn’t necessarily yield better lines, so a Douglas-Puekar Line Simplification was run on the data. This gives only the points that were necessary to create the curve. The points chosen by this algorithm are shown in bright white.  This gave very good results in the shape of the output polygons, but the texture was still getting skewed around hard angles. Above is a failed test of using a velocity function to reduce overlap around tight turns. The chosen lines are skinnier, but it was still messy.

Complex Line drawn using SSRIbbon with Debug showing half X-Planes

The problem was in still trying to use Rectangles made of 2 triangles! The center of the texture MUST match up with the line data and that will only happen if there is a vertex right on the line. The new shape to create the line now looks like a rectangle with an “X” through it… an X-Plane if you will.

Debug Vertex Points and sample X-Plane

The test case is satisfied and it looks pretty good. One thing to notice about the above image is the jagged edges of the white portion of the outline.  This is because the SSRibbon class uses GL_Line if no texture is passed to it.  So there are actually two lines being drawn to create the effect.

Tune in next time for final results and optimizations!