cocos2d for iPhone

A fast, easy to use, free, and community supported 2D game engine

1. 

   ehoffman
   Member

   Hi,

   I'm working on a kind of drawing / painting application. Currently I have done:

   - capturing user touches
   - calculation of cubic bezier spline controlpoints, so that the curve is smooth in all captured touch points (constant first and second derivative -> constant slope)
   - breaking the resulting curves in equal (segment can vary as needed) length segments, based on arclength approximation

   But now I have some trouble to draw the resulting line correctly. What did I try:

   (1) Point sprites OES (GLPaint example / CCParticleSystemPoint). This is really slow on the iPad, espacially with large line width (oh I forgot, iPad only app).

   (2) Drawing GL_TRIANGLES with overlapping quads. This works pretty well when I break the line into really small segments. With about 1px segment size you get a pretty nice filled line. I can even strech the line to get a stamp like effect (the texture is placed without overlapping).

   The problem here is opacity. When overlapping the quads are drawn multiple times over each other (the texture is a circle). So it is getting darker and darker... But I want the texture in one stroke to be the same opacity at all quads, even if they overlap. opacity should influence only the background (CCRenderTexture). So constant opacity.

   I tried several blending modes, but without success. Can this be solved with blending modes?

   (3) I did also triangulate the line and draw it as a GL_TRIANGLE_STRIP. But this approach has the same problems with opacity as (2). Furthermore there are small glitches/holes in the curve when the slope is changing rapidly. Ok it is faster as approach (2), but to solve the problems with these holes I think I need to work with degenerated triangles (and I hate that).

   Any suggestion how to solve (2) with blending? Or would you suggest to follow (3)?

   Thank you very much.

   P.S. I'm not making another painting app ... and no line drawing game, too. :) But maybe someone "knows" how they do the texturing in e.g. Sketchbook or Brushes. Do they use (1)/(2) or (3) - or even something totally different?

   Posted 1 year ago #
2. 

   ehoffman
   Member

   No one any hint?

   Posted 1 year ago #
3. 

   samkass
   Member

   I did something similar in some tests but just drew a UIBezierPath to a texture and put the texture up on the screen instead of trying to draw the line across individual triangles.

   Posted 1 year ago #
4. 

   ehoffman
   Member

   @samkass The bezier is not the problem. The rendering to the screen is.

   As far as I guess currently:

   - AB: The drawing of the flight path is done with quads, placed on equal sized curve segments. One texture, scaled up/down in every second quad.

   - FC: The texture is a small line, drawn on a bezier (?) curve. The curve is also split in equal size segments (segment size = line_width * 1.2 to get the gap). Then drawn with rotated quads. The rotation of the quads equals the slope of the curve.

   - Sketchbook: Difficult, but my guess is quads, too. But they split the lines in inception points.

   - Brushes: Absolutly quads.

   Maybe I just write rubbish...

   Posted 1 year ago #
5. 

   ehoffman
   Member

   Looks like I'm talking to myself, but anyway ... maybe it's useful for someone else.

   As I wrote in my last post, I'm sure most of the line drawing games are based on quads (two triangles). Placed along a curve with equal sized segments. For lines with gaps (dashed, dotted lines) this is the easiest way, because you just need to place one scaled texture in every quad and rotate it to the slope of the curve (to get this correct is not that easy).

   This approach is also good if you want to draw patterns, some trees, grass, eyes, holes or something like that (have a look at SketchBook). The curve segments are here sized to meet the texture width (plus some delta). And you need (no you can if you want) to rotate them a little bit along the curve.

   With quads you can even simulate the effect of pen pressure (change the line width according to the drawing speed or change the line opacity according to the drawing speed). Just adjust the line radius (half linewidth) along the captured touch times when calculation the quads out of the curve points.

   Ok this is easier with triangle strips. But you could convert the quads to a triangle strip, too:

   - connect the quads: Q_i.bl = Q_i-1.br; Q_i.tl = Q_i-1.tr;
   - check for correct order of the vertices
   - and if you want convert that to a triangle strip (remove unnecessary vertices)

   You always have the problem of placing the texture correctly if you want, e.g. dashed or dotted lines. And there are holes and overlapping.

   So, to get closed lines. I'm currently following two approaches:

   (1) With render buffers

   - Render the line without blending to a buffer
   - capture the rendering
   - use that as a texture with AA and opacity if needed
   (with that you even have the base for undo/redo)

   (2) glBlendFuncSeparateOES

   - the only problem when using quads with a small curve segment size is the overlapping
   - there are no holes, just overlapping (circle texture)
   - so it must be possible to blend color and alpha in such a way that the overlapping is "removed"
   -> this would be good to remove overlapping when using triangle strips with large line widths, too.

   I've read a lot about the blending functions, but currently I have not found something working.

   Posted 1 year ago #
6. 

   Twixoed
   Member

   Wow! It's very interesting for me. Don't stop, ehoffman, please :)

   I'm doing something similar, but not yet tried all of this ways. I will repeat after you, may be some will help me.

   Posted 1 year ago #
7. 

   Twixoed
   Member

   @ehoffman, can you suggest the best way to Anti-aliasing lines?

   I'm trying to use gradient triangles on the edge of the brush, whose vertices on the border is 100% transparency. There may be more beautiful way?

   Posted 1 year ago #
8. 

   ehoffman
   Member

   @Twixoed So you ask, what is the best way to do AA lines on the iPhone?

   My answer is: It depends! It depends on what exactly you want to do.

   (1) The best, no the universal solution is what I try to do. An universal stroke/line drawing class, which can handle dashed, dotted and closed (so no gaps) lines. With all options necessary:

   - smoothed curves
   - straight lines
   - caps: round, flat, square
   - joins: miter (with limit), bevel, round
   - take speed in account (vary line width or alpha based on speed)

   To do this you need textured lines. Triangulated. As I know now, it does not matter if quads or triangles ... in the end they are all triangles. If you don't need closed lines (without gaps) you can just follow what I described above:

   - Chaikin, bezier
   - break line in equal size segments (segment size = texture size = dot/dash-size)
   - draw using rotated quads (broken in two triangles)

   And yes to get smooth edges gradient textures are easier, but an universal solution could work with almost every texture to get the desired result (the result depends on the texture and the configuration for the stroke: caps, width, ...).

   But as you may guess, this is not an easy thing to do. I'm not even at a stage where I would say, ready for v0.1...

   (2) But as I said, it depends... If you just need straigt closed AA lines with one color (no texture), you can draw that as a triangle strip and reduce the alpha value at the outline vertices. This gives nice AA lines, just without caps and you can not draw smooth curves (overlapping).

   (3) Or you could draw the lines to a CCRenderTexture with AA on (default is no AA for CCRenderTexture, so you need to modify CCRenderTexture or subclass) - using ccDrawPoly.

   (2) and (3) are fast, but can not handle textures and may have problems with overlapping if you want lines with alpha < 1.0 (alpha < 255). But for simple things it is enough.

   If you want to do another painting app, there is no way around (1). And as I said it's complicated, but doable :)

   Posted 1 year ago #
9. 

   Col49
   Member

   Hi ehoffman,

   I'm looking at ways to improve the speed of my textured line drawing on the iPad1 and I was wondering if you ever finished your line drawing class? And if so could I grab a copy of it?

   I'm quite interested in seeing how you did:
   - calculation of cubic bezier spline control points, so that the curve is smooth in all captured touch points (constant first and second derivative -> constant slope)
   - breaking the resulting curves in equal (segment can vary as needed) length segments, based on arc length approximation.

   Right now I am just using simple liner interpolation which actually runs pretty good on the iPad2 and works okay with most of my brushes however on the iPad1 it is a bit too slow.

   Regarding your approach (2) I did find a way to draw into a render texture with a constant opacity and then have it blend correctly with the background contents. Here is the approach I took (works in cocos2d 1.x):

   1. Create a canvasRenderTexture with opacityModifyRGB = YES and add it to your scene.
   2. Create a strokeRenderTexture with opacityModifyRGB = YES and add it to your scene.
   3. Draw your brush sprite into the strokeRenderTexture (ccTouchesBegan / ccTouchesMoved)
   - To adjust opacity change the render texture opacity.
   - The brush sprite opacity needs to be 255 at all times.
   - Brush sprite is a 8bit png with alpha. Visible pixels are colored white with the desired alpha value.
   4. Draw the strokeRenderTexture into the canvasRenderTexture (ccTouchesEnded).
   5. Clear the strokeRenderTexture ([strokeRenderTexture beginWithClear:0.0 g:0.0 b:0.0 a:0.0];) (ccTouchesEnded).

   The trick was setting setOpacityModifyRGB:YES for both render textures.

   Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.