Write a text in a circle in Sprite kit (swift)

Question

i want draw a circle and put a text in it. what can i do?

If i moved or resized the circle , text move or resize too

        var color = UIColor(red: 0x00, green: 0x44, blue: 0x44, alpha: 1)
        var Circle = SKShapeNode(circleOfRadius: 100 )
        Circle.position = CGPointMake(frame.midX, frame.midY)
        Circle.strokeColor = SKColor.blackColor()
        Circle.glowWidth = 1.0
        Circle.fillColor = color

        let myLabel = SKLabelNode(fontNamed:"Chalkduster")
        myLabel.text = "Hello, World!";
        myLabel.fontSize = 60;
        myLabel.position = CGPointMake(frame.midX, frame.midY)
        myLabel.fontColor = UIColor.blackColor()

        self.addChild(Circle)

Picrate

You want to show myLabel into circle? – Biparietal

yeah. and i can move circle and label together – Picrate

You need to be clearer about your goal. Do you want the text to curve around the outside of the circle? Do you want it to stay vertical, but wrap so that it fills the space? – Chaffer

I want write a text into a circle and the text was a part a circle . For moving and actions i just work with circle . Sorry my english is not very good – Picrate

i want the text not out of the circle. if text is bigger than the circle i want trim it (mask it) – Picrate

Answer 1

One way to drag both at once is you can add both into same view and after that you change position of both with touch events like show into below code.

import SpriteKit

class GameScene: SKScene {

    var deltaPoint = CGPointZero
    let myLabel = SKLabelNode(fontNamed:"Chalkduster")
    var Circle = SKShapeNode(circleOfRadius: 100 )

    override func didMoveToView(view: SKView) {
        /* Setup your scene here */
        var color = UIColor(red: 0x00, green: 0x44, blue: 0x44, alpha: 1)

        Circle.position = CGPointMake(frame.midX, frame.midY)
        Circle.strokeColor = SKColor.blackColor()
        Circle.glowWidth = 1.0
        Circle.fillColor = color

        myLabel.text = "Hello, World!";
        myLabel.fontSize = 20
        myLabel.position = CGPointMake(Circle.frame.midX, Circle.frame.midY)
        myLabel.fontColor = UIColor.blackColor()

        // Add them into same scene
        self.addChild(Circle)
        self.addChild(myLabel)

    }

    override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {

        if let touch = touches.first as? UITouch {
            let currentPoint = touch.locationInNode(self)
            let previousPoint = touch.previousLocationInNode(self)
            deltaPoint = CGPointMake(currentPoint.x - previousPoint.x, currentPoint.y - previousPoint.y)
        }

    }

    override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {

        deltaPoint = CGPointZero
    }

    override func touchesCancelled(touches: Set<NSObject>!, withEvent event: UIEvent!) {

        deltaPoint = CGPointZero
    }

    override func update(currentTime: CFTimeInterval) {
        /* Called before each frame is rendered */
        var newPoint = CGPointMake(self.myLabel.position.x + self.deltaPoint.x, self.myLabel.position.y + self.deltaPoint.y)

        // you can drag both item at same time
        myLabel.position = newPoint
        Circle.position = newPoint

        deltaPoint = CGPointZero
    }
}

Biparietal

error in override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) { >> use of undeclared type "Set". what is this error? – Picrate

You can find method for old xcode here: ioscreator.com/tutorials/using-labels-spritekit-swift – Biparietal

Answer 2

UPDATED: Using your full example.

Not a SpritKit user, but I believe that each node has an .addChild(). So it should be possible to add it as a child to your circle:

var color = UIColor(red: 0x00, green: 0x44, blue: 0x44, alpha: 1)
var Circle = SKShapeNode(circleOfRadius: 100 )
Circle.position = CGPointMake(frame.midX, frame.midY)
Circle.strokeColor = SKColor.blackColor()
Circle.glowWidth = 1.0
Circle.fillColor = color

let myLabel = SKLabelNode(fontNamed:"Chalkduster")
myLabel.text = "Hello, World!";
myLabel.fontSize = 60;
// Using half of the circle (center point)
myLabel.position = CGPointMake(Circle.frame.midX, Circle.frame.midY)
myLabel.fontColor = UIColor.blackColor()

Circle.addChild(myLabel)
self.addChild(Circle)

Position would then be relative to the circles frame.

Foch

myLabel.position = CGPointMake(frame.midX, frame.midY) would but it half the screen from the circles top/left corner. – Foch

Answer 3

Dharmesh Kheni's answer in Swift 3 + put label as a child of circle and label center alignments for the label to center in circle.

import SpriteKit

class GameScene: SKScene {

    var deltaPoint = CGPoint.zero
    let myLabel = SKLabelNode(fontNamed:"Chalkduster")
    var circle = SKShapeNode(circleOfRadius: 100 )

    override func didMove(to view: SKView) {

        let color = UIColor(red: 0x00, green: 0x44, blue: 0x44, alpha: 1)

        circle.position = CGPoint(x: frame.midX, y: frame.midY)
        circle.strokeColor = .black
        circle.glowWidth = 1.0
        circle.fillColor = color

        myLabel.text = "Hello, World!";
        myLabel.fontSize = 20
        myLabel.horizontalAlignmentMode = .center
        myLabel.verticalAlignmentMode = .center
        myLabel.position = CGPoint(x:circle.frame.width/2, y: circle.frame.height/2)
        myLabel.fontColor = .black

        // Add them into same scene
        self.addChild(circle)
        circle.addChild(myLabel)

    }

    override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {

        if let touch = touches.first as? UITouch {
            let currentPoint = touch.location(in: self)
            let previousPoint = touch.previousLocation(in: self)
            deltaPoint = CGPoint(x: currentPoint.x - previousPoint.x,y: currentPoint.y - previousPoint.y)
        }

    }

    override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {

        deltaPoint = CGPoint.zero
    }

    override func touchesCancelled(touches: Set<NSObject>!, withEvent event: UIEvent!) {

        deltaPoint = CGPoint.zero
    }

    override func update(currentTime: CFTimeInterval) {
        /* Called before each frame is rendered */
        let newPoint = CGPoint(x: self.myLabel.position.x + self.deltaPoint.x,y: self.myLabel.position.y + self.deltaPoint.y)

        // you can drag both item at same time
        myLabel.position = newPoint
        circle.position = newPoint

        deltaPoint = CGPoint.zero
    }
}

Tabbatha

Answer 4

You should give your label font size proportionaly to your circle size.

This is function for creating button:

func createCircleButton(position: CGPoint, buttonSize: CGFloat, yourText: String) {

    let circle = SKShapeNode( circleOfRadius: buttonSize)
    circle.position = position
    circle.fillColor = SKColor.blueColor()

    let label = SKLabelNode(fontNamed:"ArialMT")
    label.text = yourText
    label.fontSize = circle.frame.size.height / 6;
    label.fontColor = SKColor.whiteColor()

    circle.addChild(label)
    self.addChild(circle)

}

Add it like this:

self.createCircleButton(CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2), buttonSize: self.frame.size.height / 5, yourText: "Your text")

Coridon