Line Primitives Look Terrible, Smooth Lines?

Hey!

(I’m using Cocos2dx 3.1 if it matters).

Using a DrawNode as a child in am otherwise empty Layer, I am attempting to draw primitives (specifically, a line drawn by points added by the user, like a paintbrush). I draw them as a set of lines.

However, the effect is awful : the primitives are not antialiased, they are jagged… and certainly not fit for a game. Does anyone know what I can do to improve on the effect ?

Here is the relevant code :

void TouchPaddleSprite::draw(Renderer* renderer, const Mat4& transform, bool transformUpdated) {
    if (pointsToDraw < 2) return;

if (nPoints > 2) {
    for (int i = 0; i < pointsToDraw; ++i) {
        drawNode->drawSegment(points[nPoints - i - 2], points[nPoints - i - 1], 2.0f, Color4F::WHITE);
    }
}
else if (nPoints == 2) {
    drawNode->drawSegment(points[0], points[1], 2.0f, Color4F::WHITE);
}
pointsToDraw = 0; }

The points are added through touchesMoved with these functions:

void TouchPaddleSprite::resetPoints() {
    drawNode->clear();
    nPoints = 0;
}
void TouchPaddleSprite::addPoint(cocos2d::Vec2 point) {
    if (nPoints + 1 > kMaxPoints) { this->resetPoints(); return; }
    pointsToDraw++;
    points[nPoints++] = point;
}


void TouchPaddleSprite::draw(Renderer* renderer, const Mat4& transform, bool transformUpdated) {
    if (pointsToDraw < 2) return;
    
    if (nPoints > 2) {
        for (int i = 0; i < pointsToDraw; ++i) {
            drawNode->drawSegment(points[nPoints - i - 2], points[nPoints - i - 1], 2.0f, Color4F::WHITE);
        }
    }
    else if (nPoints == 2) {
        drawNode->drawSegment(points[0], points[1], 2.0f, Color4F::WHITE);
    }
    pointsToDraw = 0;
}

I would be grateful for any help and open to any ideas.
I’ve tried porting this guide to Cocos2D-X v3.1 but with no success ; and if anyone has in the past ported it, I would actually be very happy !


screenshot of the ugly lines

Up, anyone ?

I changed ccShader_PositionColorLengthTexture_frag.h to this to enable anti-aliasing for lines etc.

"
#ifdef GL_ES
#extension GL_OES_standard_derivatives : enable

varying mediump vec4 v_color;
varying mediump vec2 v_texcoord;
#else
varying vec4 v_color;
varying vec2 v_texcoord;
#endif

void main()
{
#if defined GL_OES_standard_derivatives
gl_FragColor = v_colorsmoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord));
#else
gl_FragColor = v_color
step(0.0, 1.0 - length(v_texcoord));
#endif
}
";

Hope this helps!

1 Like

Hey!

Thanks for the reply–it doesn’t change anything for me :frowning:

Alex.

That’s strange. It gives me a nice anti-aliased draw node on iOS, Android, OSX and Windows…
I seem to remember that ccShader_PositionColorLengthTexture_frag.h wasn’t included in the 2d-x project, so you might want to try adding it / doing a full rebuild.
I’m using v2.2 btw… maybe it behaves differently in v3.x.
Keep trying, the smoothstep cmd is the trick to this and it does work. Maybe there is something else I did as well that I can’t recall now.
When/if I get time I’ll have another look into it.
Good luck!

Thank you :smile:

I’ll keep working on the rest of my project and leave that to the end. Can’t be too hard to figure out :smile:

Do tell me if you find anything !

Thanks,
Alex

Did you find a working solution ?
I’m facing the same problem with version 3.3
Any help would be great. I have very little experience in OpenGL and couldn’t find any way to
draw smooth lines anywhere that works for me…

This is interesting, Can you try use this shader by setGLProgramState(GLProgram::createWithFilename())

@AlexCassagne

I am too using v3.3.
I made the changes to the file as what @IslandPlaya said but I also didn’t get any results. Did anything work for you?

@code_game_chef

I haven’t had much time recently to play with this, but I’ve just tested it and it doesn’t seem to work on my end.

Alex.

Where do I have to put the setGLProgramState(GLProgram::createWithFilename()) ?

I’m using Cocos2d-x V3.3 and when I uncomment what @IslandPlaya said in the ccShader_PositionColorLengthTexture_frag.h file, the anti-aliasing works only for drawDot and drawSegment. The problem is that if I draw a node with drawPolygon, there is only the border that is drawed, the node is not filled…