Rotate a SKShapeNode with texture

Question

I'm trying to rotate an SKShapeNode with a texture, but it's not working. Basically, I have a circle with a texture and I'm trying to make it rotate using the same way I have done with an SKSpriteNode:

let spin = SKAction.rotateByAngle(CGFloat(M_PI/4.0), duration: 1)

The problem is that the circle is rotating, but not the texture. I can check this by using this code:

let wait = SKAction.waitForDuration(0.5)
let block = SKAction.runBlock({
                     print(self.circle.zRotation)  
                     })
let sequence = SKAction.sequence([wait, block])
self.runAction(SKAction.repeatActionForever(sequence))

This is the code I have for creating the SKShapeNode:

let tex:SKTexture = SKTexture(image: image)
let circle = SKShapeNode(circleOfRadius: 100 )
circle.position = CGPoint(x: self.frame.width / 2, y: self.frame.height / 2 + 200)
circle.strokeColor = SKColor.clearColor()
circle.glowWidth = 1.0
circle.fillColor = SKColor.whiteColor()
circle.fillTexture = tex
self.addChild(circle)
// Runing the action
circle.runAction(spin)

Please help. Thanks in advance!

PS: I know that using an SKSpriteNode would be better but my goal is to place a square image in a circular frame and I figured that using an SKShapeNode would be perfect. If anyone know how to create a circular SKSpriteNode, feel free to post it in the answers section! :)

This is what I'm trying to achieve (with the capability of rotating it):

I didn't say it will fix the issue. I just warned about wrong usage of rotateToAngle methods which accepts radians... — Whirlwind, Mar 31 '16 at 15:31
it could be it is rotating so fast you do not see it. You are rotating 90 degrees 60 times in 1 second, Try using `rotateToAngle`, not `rotateByAngle` — Knight0fDragon, Mar 31 '16 at 15:56
I just tried slowing it down and using`rotateTo`, but it gave me the same result. Thank you for trying! If you have anymore ideas, feel free to post them in the comments :) — Anton O., Mar 31 '16 at 16:02
Haven't tested this much, but it seems that node is actually rotating... If you observe `zRotation` property of a circle, you will notice that it is changed over time. You can add a another node to it, and you will see that other node is rotated... So this can give you a start... Read docs, search about properties of a `SKShapeNode` you are using ... — Whirlwind, Mar 31 '16 at 20:03
@Whirlwind you are correct! I guess the texture wasn't rotating. I will update my question. — Anton O., Apr 01 '16 at 02:23
@AntonO. Actually what is the point of using SKShapeNode like that ? Why don't you use SKSpriteNode ? By the way, SKShapeNodes can't be rendered in batches (means one shape node requires one draw call) like SKSpriteNodes, so you can easily run into performance problems ... — Whirlwind, Apr 01 '16 at 02:28
@Whirlwind Well, I'm trying to put a square image on a circular node, so that the image is in a circle frame and I thought using 'SKShapeNode' was my best option . Do you know how to create a circular 'SKSpriteNode'? — Anton O., Apr 01 '16 at 02:32
Yeah, lol from a texture :) I mean, there is no way to create a circular SKSpriteNode other than initializing it with a texture. How many SKShapeNodes are you planning to have? — Whirlwind, Apr 01 '16 at 02:35
Then it's not a big deal ... You can go with a SKShapeNode. Still, not sure what is the problem to have SKSpriteNode initialized with a circular image. Then, add another sprite to that circular sprite. That way your rotation will work... — Whirlwind, Apr 01 '16 at 02:44
As I said, make a circular sprite from a texture. Then make a square sprite and add it as a child of a circular sprite. It will work. Set zPositions properly and rotate your sprite like you are doing already (circular sprite). Let me know if you are having troubles. — Whirlwind, Apr 01 '16 at 02:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107913/discussion-between-anton-o-and-whirlwind). — Anton O., Apr 01 '16 at 02:55

score 2 · Accepted Answer · answered Apr 01 '16 at 11:31

You can achieve what you want by using SKCropNode and setting its mask property to be a circle texture:

override func didMoveToView(view: SKView) {

     let maskShapeTexture = SKTexture(imageNamed: "circle")

     let texture = SKTexture(imageNamed: "pictureToMask")

     let pictureToMask = SKSpriteNode(texture: texture, size: texture.size())

     let mask = SKSpriteNode(texture: maskShapeTexture) //make a circular mask

     let cropNode = SKCropNode()
     cropNode.maskNode = mask
     cropNode.addChild(pictureToMask)
     cropNode.position = CGPoint(x: frame.midX, y: frame.midY)
     addChild(cropNode)
}

Let's say that picture to mask has a size of 300x300 pixels. The circle you are using as a mask, in that case, has to have the same size. Means the circle itself has to have a radius of 150 pixels (diameter of 300 pixels) when made in image editor.

Mask node determines the visible area of a picture. So don't make it too large. Mask node has to be a fully opaque circle with transparent background.

Rotate a SKShapeNode with texture

1 Answers1