Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to draw a line with SpriteKit animated? [closed]

I want to draw a line from lets say A(100,50) to B(250,450) with Apples SpriteKit Framework.

So far I am able to draw this line using a SKShapeNode and set its path property.

What I want to achieve is to draw this line animated. Lets say it should take 2 seconds to draw the line from point A to B.

I looked into the SKAction class but there seems to be no method that supports this functionality by default.

This is the code i use to create the line:

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 100, 50);
CGPathAddLineToPoint(path, NULL, 250.0, 450.0);

SKShapeNode *line = [SKShapeNode node];
line.path = path;
[line setStrokeColor:[UIColor whiteColor]];
[self addChild:line];

Can anyone point me in the right direction?

like image 357
E. Lüders Avatar asked Oct 31 '13 22:10

E. Lüders


1 Answers

You have a few methods with SKAction that could likely achieve what you want :

SKAction performSelector: onTarget:

and

SKAction waitForDuration:

If you subclass a SKShapeNode you can utilize those two methods in a SKAction sequence to draw the line over time.

You will of course need to manually calculate the new location to draw to each iteration and determine if the line is completed and end the drawing over time process.

Definitely interested if anyone has another way to achieve this functionality via SpriteKit, but if not, this should work.

Sorry, don't have time to code this, but the logic should get you there.

UPDATE :

I thought of another option which I personally think is a bit easier.

  1. Calculate the angle between origin point and end point.
  2. Calculate the distance from origin point and end point.
  3. create a shape node of circle or a pixel even. Think of it as your pencil point you will be drawing with.
  4. rotate the shape node so that it is angled towards the end point - using the angle you calculated.
  5. Create a SKAction that scales the width of your shape node based on the distance you calculated.
  6. run the SKAction.

This seems relatively easy, but you could still subclass if you wanted to make it more flexible, like adding color parameters etc.

like image 116
prototypical Avatar answered Oct 24 '22 05:10

prototypical