views:

129

answers:

2

There is this site...

... where they explain how to draw an antialiased line.

Exactly what I want!
but...

I don't understand how to achieve that for a simple line. I have found the online version of the book (the article is kind of derived from the book), i have downloaded the sample code (showing a stick figure doing fancy moves), but there is so much mambojambo going on... some strange python script... circles as png-images and as header files, almost everything is written in cpp, files i copy to my project produce lots of errors that i can't resolve properly and so on and so on. And I think I don't need all of that fancy stuff, since I only want to draw lines in a simple cocos2d based app [Btw.... I didn't want to use AA, but my lines are thicker than 5px which makes them have ugly holes when connected (f.e. in a circle made of several lines) so that I must use AA as it seems].

So does someone have or found a tiny little piece of runnable sample code using the principle explained in the linked article ?


Notes:

  1. In the picture you see the holes:

  2. Here you will find the code of the mentioned stickman (AA Lines): http://examples.oreilly.com/9780596804831/readme.html#AaLines

  3. This is how I draw my circles:

    int segments = 80;
    CGFloat width = 100;
    CGFloat height = 100;
    CGPoint center = ccp(800,200);  
    
    
    glDisable(GL_TEXTURE_2D);
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);
    glDisableClientState(GL_COLOR_ARRAY);
    //glEnable(GL_LINE_SMOOTH); // doesn't work on device
    glTranslatef(center.x, center.y, 0.0);
    glLineWidth(3.0f);
    GLfloat vertices[segments*2];
    int count=0;
    for (GLfloat i = 0; i < 360.0f; i+=(360.0f/segments))
    {
        vertices[count++] = (cos(degreesToRadian(i))*width);
        vertices[count++] = (sin(degreesToRadian(i))*height);
    }
    glVertexPointer (2, GL_FLOAT , 0, vertices); 
    glDrawArrays (GL_LINE_LOOP, 0, segments);
    
    
    glEnableClientState(GL_COLOR_ARRAY);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glEnable(GL_TEXTURE_2D);    
    
A: 

Maybe you can see this. I resolve the problem from that link for opengl-es.

Toro
Did it work on a 10 px Circle ? Do you have working Sample Code ?
Allisone
My problem is that my texture is drawn with rectangle, and the edges needs anti-alias. When surveying this site and getting the link, I solve my problem by redraw edge lines again. It works well now. But my codes is opengl-es, not cocos2d.
Toro
Cocos2d uses OpenGL-es. It's just a nice framework with lots of easy to use stuff like sprites, menus, animations, scene transitions etc.
Allisone
Maybe I will learn Cocos2d one day. But my project currently use iPhone-SDK and opengl-es. I am not boss, so ...
Toro
+1  A: 

I ran into that issue as well. I spent a while figuring this out... I used a solution similar to this one for a while (via walterBenjamin on Apple.com):

https://devforums.apple.com/message/264670

This works, it is easy and it looks nice, but it still isn't the best (for what I am doing). In the end, I wrote my own solution that combined GL Paint particle drawing with his solution of point-to-point line drawing.

I made an array and at touchesBegin, touchesMoved, I added a point to it:

[currentStroke addObject:[NSValue valueWithCGPoint:point]]

Then I iterate through the strokes, such as you see in GL Paint using GL_Points.

Ginamin
Thanks man, I really appreciate this.
Allisone
No worries. Hope it helped an sorry I didn't see it sooner!
Ginamin
Well, you are new here, so I it's even an honer that mine was the first question you answered, while I believed nobody would answer it anymore. But I have to admit that I also already successfully implemented the AALine with textures technique two days ago (after lots of pain cause of so much c++ elemts and libraries I didn't understand and the mix into the obj-c cocos2d framework). Yours worked immediately and now I will clean my code, optimize it and then I will decide by performance which technique to use.
Allisone
Maybe I will also find some time to post some clear and simple example of the other technique here.
Allisone
Hah, thanks. I would like to post the code, but I am under NDA... which is annoying. Anyway, I can't post the code but if you have specific questions, I'm sure I can answer them without getting into much trouble. A note on performance. The GL_Paint method looks great for user drawn lines, better than the tangent method from the apple forums, just because it is so much smoother. However, it can get slow and I had to spend a chunk of time on optimization...
Ginamin