Animating line drawing « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Animating line drawing

(7 posts) (4 voices)

Started 1 year ago by pshemu
Latest reply from wiegerthefarmer

Tags:

pshemu
Member

Hello,

I am new to cocos2d and I faced a problem last night. I want to do something like this: I have a grid with points of fixed gap. I would like to draw a line between those points, when a user selects one. And I would also like to animate the last step, after the user has selected next point. So the line can connect two points of the grid horizontally, vertically or crosswise. Another thing is, that this line should be at least 4 pixel width, two pixels of one color and two of another. Maybe edges pixels should be darker or have a smaller alpha value.

So please, do you have any ideas how to do that? I tried to extend CCNode class and override "draw" method. But I was not able to achieve transparency in my line, nor gradient I want.

My idea was to have a node for every line part between two points of the grid, with a type: horizontal, vertical and four crosswise types. Then in draw method I drawed a line based on type of the node. Next I wanted to put such a node at the current end of the line, and when user selects another point, set the type and run an action on that node, so it will resize such as the line is drawing...

I hope I have made myself clear... :))

Thanks in advance for any help.

Regards,

Przemek

Posted 1 year ago #
pshemu
Member

Of course I meant two crosswise types (not four).

And then CCSpriteSheet could be an object holding whole line drawed by user. But maybe there is another option, so line can be in one object but still last step animated??

Posted 1 year ago #
pshemu
Member

Anyone??

Posted 1 year ago #
pabloruiz55
Member

I don't think you can have a gradient in your line, but you can achieve the same effect by placing 2 lines one beside the other of different colors maybe.

For chaging their alpha you have to do it by calling:
glColor4ub(r,g,b,a);
before drawing the line.

About animating them, you could do it like you said, i think. in that case you don't even need to draw a line but just a 1px point
1)place a node which draws a point in your starting place.
2)rotate the node towards the endpoint
3)get the distance between the starting and end point.
4)scale the node in one axis in order for it to reach the end point. (instantly or by running an action)

I haven't tried this myself, so i am not really sure this will work. Hope it helps anyway

Posted 1 year ago #
pshemu
Member

Hi,

thanks for the reply.

I called glColor4f(1.0f, 1.0f, 1.0f, 0.5f) for example, but still there was no transparency in that line - it was "full" white...

Also how can I enable antialiasing, because right now it looks crappy? I tried glEnable(GL_LINE_SMOOTH), if I remember correctly, but there was no change.

Everything I did was in the "draw" method of my custom node. Maybe I should do something more?

And what is the purpose of CCRenderTexture node? If I understand correctly, I could use it. Draw in It a 4 pixel gradient (for example semi trans. red, red, green, trans. green) and then rotate it and scale it properly. But could someone point me an example usage of that class, beacuse doc is quite general and I have not found any tutorial for this.

Thanks and sorry, if It was already described on that forum.

Regards,

Przemek

Posted 1 year ago #
mobilebros
Moderator
GL_LINE_SMOOTH only works for lines of width 1 currently I believe. For transparency I think you need to change your blending mode:
```
if( _opacity != 255 )
		glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

	glColor4ub(_color.r, _color.g, _color.b, _opacity);

	//draw!

	if( _opacity != 255 )
		glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST);
```
Also take a look at GL_COLOR_ARRAY, you may be able to get a gradient out of that with lines, but I've only tried it on texture so I'm not sure.
Posted 1 year ago #
wiegerthefarmer
Member

Did you end up getting this working? I'm starting a new project and this sort of concept would be great.

I need to drag with the finger (tap&hold->drag->release) and then the system would draw a line between the two points.

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.