Keyshawn Keyshawn - 6 months ago 353
Swift Question

How to draw a circle of dots in swift (SpriteKit)

Hi I am new to swift and SpriteKit but I have been currently working on a game. In my game, I want to have a circle of dot objects. I have looked up everything but I cannot seem to figure it out.

What I wanted was a circle of dots each that was an individual node that could use to be able to delete them from the circle as something ran over it.

Is there a way to draw multiple shapes in a circular pattern?

I want it to look kind of like this.

Parametric Presentation of a Circle

I would appreciate any and all help. I will continue to research and try and figure stuff out. Thanks!

Answer

You can easily draw a circle of dots with few lines of code:

SpriteKit:

P.S. change the pattern parameters to obtain what do you want to do exactly..

func circleOfDots() {
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: 200,y: 200), radius: CGFloat(100), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
        let shapeNode = SKShapeNode()
        shapeNode.path = circlePath.CGPath
        shapeNode.position =  CGPoint(x:CGRectGetMidX(self.frame)-200, y:CGRectGetMidY(self.frame)-200)
        //change the fill color
        shapeNode.fillColor = UIColor.clearColor()
        //you can change the stroke color
        shapeNode.strokeColor = UIColor.redColor()
        //you can change the line width
        shapeNode.lineWidth = 6.0
        let one : CGFloat = 1
        let two : CGFloat = 10
        let pattern = [one,two]
        let dashed = CGPathCreateCopyByDashingPath(circlePath.CGPath,nil,0,pattern,2)
        shapeNode.path = dashed
        shapeNode.lineCap = CGLineCap.Round
        self.addChild(shapeNode)
    }

result:

enter image description here

Or with traditional code:

UIKit:

func circleOfDots() {
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: 200,y: 200), radius: CGFloat(100), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circlePath.CGPath
        shapeLayer.position = CGPointMake(CGRectGetMidX(self.view.bounds)-200 ,CGRectGetMidY(self.view.bounds)-200 )
        //change the fill color
        shapeLayer.fillColor = UIColor.clearColor().CGColor
        //you can change the stroke color
        shapeLayer.strokeColor = UIColor.redColor().CGColor
        //you can change the line width
        shapeLayer.lineWidth = 6.0
        let one : NSNumber = 1
        let two : NSNumber = 20
        shapeLayer.lineDashPattern = [one,two]
        shapeLayer.lineCap = kCALineCapRound
        self.view.layer.addSublayer(shapeLayer)
    }

result:

enter image description here

Finally, if you want to draw every single shape to make some animation you can also use a mathematical alghoritm like this..

SpriteKit:

func circleOfDots() {
        let radius: CGFloat = 100.0
        let numberOfCircle = 30
        for i in 0...numberOfCircle {

            let circle = SKShapeNode(circleOfRadius: 2 )
            circle.strokeColor = SKColor.clearColor()
            circle.glowWidth = 1.0
            circle.fillColor = SKColor.orangeColor()
            // You can get every single circle by name:
            circle.name = String(format:"circle%d",i)
            let angle = 2 * M_PI / Double(numberOfCircle) * Double(i)

            let circleX = radius * cos(CGFloat(angle))
            let circleY = radius * sin(CGFloat(angle))

            circle.position = CGPoint(x:circleX + frame.midX, y:circleY + frame.midY)
            addChild(circle)
        }
}

the result:

enter image description here