How to Draw a Line in Sprite-Kit

How to draw a line in Sprite-kit

Using SKShapeNode you can draw line or any shape.

SKShapeNode *yourline = [SKShapeNode node];
CGMutablePathRef pathToDraw = CGPathCreateMutable();
CGPathMoveToPoint(pathToDraw, NULL, 100.0, 100.0);
CGPathAddLineToPoint(pathToDraw, NULL, 50.0, 50.0);
yourline.path = pathToDraw;
[yourline setStrokeColor:[SKColor redColor]];
[self addChild:yourline];

Equivalent for Swift 4:

var yourline = SKShapeNode()
var pathToDraw = CGMutablePath()
pathToDraw.move(to: CGPoint(x: 100.0, y: 100.0))
pathToDraw.addLine(to: CGPoint(x: 50.0, y: 50.0))
yourline.path = pathToDraw
yourline.strokeColor = SKColor.red
addChild(yourline)

How to draw a line in SpriteKit efficiently

Do not constantly create new SKShapeNodes, there is a bug which is causing your slowdown. Instead, only use 1 SKShapeNode (Or create a bunch but reuse them), and append the path with new info (So there is no need to constantly add the myline to the background)

Alternative:

Use 1 community SKSkapeNode for rendering of the path, then convert the SKShapeNode to a texture with view.textureFromNode, then add an SKSpriteNode with this new texture instead of the shape node

Create a line with two CGPoints SpriteKit Swift

This can be done using CGPath and SKShapeNode.

Lets start with CGPath. CGPath is used when we need to construct a path using series of shapes or lines. Paths are line connecting two points. So to make a line:

1. moveToPoint: It sets the current point of the path to the specified point.
2. addLineToPoint: It draws a straight line from the current point to the specified point.
   or
   addCurveToPoint: It draws a curved line from the current point to the specified point based on certain tangents and control points.

You can check the documentation here:
http://developer.apple.com/library/mac/#documentation/graphicsimaging/Reference/CGPath/Reference/reference.html

What you need to do is:

    var path = CGPathCreateMutable()
    CGPathMoveToPoint(path, nil, 100, 100)
    CGPathAddLineToPoint(path, nil, 500, 500)

Now to make the path visible, and give it attributes like stroke color, line width etc. you create a SKShapeNode in SpriteKit and add the path to it.

    let shape = SKShapeNode()
    shape.path = path
    shape.strokeColor = UIColor.whiteColor()
    shape.lineWidth = 2
    addChild(shape)

Hope this helps :).

swift and sprite kit drawing a straight line while dragging your finger on the screen

SpriteKit has some of the worst 2D drawing ever presented in a 2D game engine.

Actually, the worst.

SKShapeNode and its CGPath are atrocious nonsense. It's as if the
"designers" of SpriteKit have never once looked at the most primitive
of 2D drawing in anything like DirectX or OpenGL. Let alone the kinds
of things that animators might want to do with lines and shape
creation, mutation, distortion and progress and line animation. ~ Confused

---

Having gotten that little rant off my chest, in the vain hope that it recalibrates your expectations to not expect a drawing style solution, consider this:

SKSpriteNodes can be a simple box, and they can be scaled in both the X and Y axis, and they can be parented to a "dummy" SKNode that rotates to face the direction of the current touch, relative to the original position of the touch.

SO.... you can draw a skinny box, starting at the point of the initial touch, and as the touch is moved, scale the SKSpriteNode to that point by both rotating the SKDummyNode you create to be the parent of your "line", and then scaling it out along that length from the origin to the current position of the touch.

Viola, a LINE!

Of sorts.

Is it possible to draw a line with SpriteKit animated?

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.

How to make one line follow touch instead of drawing infinite in spritekit?

Every time you call drawLine, you're creating a new shape node and adding it to the scene. However, you're never removing any of these shape nodes, so the number of lines is increasing as you move your finger.

One fix is to have an optional shape node that remembers the previous line, if any. Then just remove and discard the previous shape node if there is one whenever the touch moves. And when the touch ends, remove the line.

Or you could create one shape node and add it to the scene when the touch begins, change its path as the touch moves, and remove it from the scene when the touch ends. If I recall correctly, the shape node makes a copy of the path internally, so just having a mutable path and changing the path won't update the shape node. But I believe you can make a new path and assign to the shape node's path property to update the node.

---

Related Topics