I'm initializing and displaying an SKSpriteNode via the texture of an SKShapeNode with a certain path that represents a portion of a circle. Below is an example of a shape I'm generating using a playground:
import SpriteKit
import PlaygroundSupport
let view = SKView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
let scene = SKScene(size: view.frame.size)
view.presentScene(scene)
let radius: CGFloat = view.frame.width * 0.40
var length: CGFloat = (.pi * 2.0) / 8.0
var width: CGFloat = radius / 5.0
var path: CGPath {
let path = UIBezierPath(arcCenter: view.center, radius: radius, startAngle: 0.0, endAngle: length, clockwise: true)
path.addArc(withCenter: view.center, radius: radius - width, startAngle: length, endAngle: 0.0, clockwise: false)
path.close()
return path.cgPath
}
let shapeNode = SKShapeNode(path: path)
shapeNode.fillColor = .white
let texture = view.texture(from: shapeNode)!
let spriteNode = SKSpriteNode(texture: texture, color: .white, size: texture.size())
spriteNode.position = CGPoint(x: shapeNode.frame.midX, y: shapeNode.frame.midY)
scene.addChild(spriteNode)
PlaygroundPage.current.liveView = view
This generates this shape:
I'd like to add a small child SKSpriteNode that is centered within the width of the curved node and at the middle arc point like so:
The closest I could come is using the spriteNode's position:
let childNode = SKSpriteNode(color: .red, size: CGSize(width: 5, height: 5))
childNode.position = spriteNode.position
scene.addChild(childNode)
This produces something close, but it's using the frame, which is entirely wrong:
I'm assuming I need to do something with the path of the arc but I'm unsure how. Could someone point me in the right direction?
Thanks to the comments I avoided using the path and refreshed on some basic trig to solve:
let x = (radius - width/2) * cos(length/2) + view.center.x
let y = (radius - width/2) * sin(length/2) + view.center.y
childNode.position = CGPoint(x: x, y: y)
Related
I'm trying to smoothly animate a square into a circle in SpriteKit.
I'm creating the SKShape with a UIBezierPath using rounded corners. Then, I vary the corner radii to animate.
My problem is that I seem to have a jump in the animation, please see the gif below. Preferably using the rounded corners technique, how can I get it to be smooth?
"Jumpy" problem
let shape = SKShapeNode()
let l: CGFloat = 100.0
shape.path = UIBezierPath(roundedRect: CGRect(x: -l/2, y: -l/2, width: l, height: l), byRoundingCorners: [.topLeft, .bottomLeft, .topRight, .bottomRight], cornerRadii: CGSize(width: 0, height: 0)).cgPath
shape.position = CGPoint(x: frame.midX, y: frame.midY)
shape.fillColor = .white
addChild(shape)
let action = SKAction.customAction(withDuration: 1) { (node, t) in
let shapeNode = node as! SKShapeNode
shapeNode.path = UIBezierPath(roundedRect: CGRect(x: -l/2, y: -l/2, width: l, height: l), byRoundingCorners: [.topLeft, .bottomLeft, .topRight, .bottomRight], cornerRadii: CGSize(width: t * l / 2, height: 0)).cgPath
}
shape.run(SKAction.repeatForever(action))
Animation debugging
To debug I have created some shapes with progressively larger corner radii as you can see below. The numbers represent the ratio of the corner radii to the length of the square. As you can see there is a jump between 0.3 and 0.35. I can't see what I'm missing.
let cols = 10
let rows = 1
let l: Double = 30.0
let max: Double = l / 2
let delta: Double = l * 2
for i in 0..<rows * cols {
let s = SKShapeNode()
let c: Double = Double(i % cols)
let r: Double = floor(Double(i) / Double(cols))
let pct: Double = Double(i) / (Double(rows) * Double(cols))
let rad = pct * max
s.path = UIBezierPath(roundedRect: CGRect(x: -l/2, y: -l/2, width: l, height: l), byRoundingCorners: [.topRight, .bottomRight, .topLeft, .bottomLeft], cornerRadii: CGSize(width: pct * max, height: pct * max)).cgPath
s.position = CGPoint(x: c * delta - Double(cols) / 2.0 * delta, y: r * delta - Double(rows) / 2.0 * delta)
s.lineWidth = 1.5
s.strokeColor = .white
addChild(s)
let t = SKLabelNode(text: String(format:"%0.2f", rad / l))
t.verticalAlignmentMode = .center
t.horizontalAlignmentMode = .center
t.fontName = "SanFrancisco-Bold"
t.fontSize = 15
t.position = CGPoint(x: 0, y: -delta * 0.66)
s.addChild(t)
}
You may not find the answer using a current api. But you can draw it by yourself.
let duration = 10.0
let action = SKAction.customAction(withDuration: duration) { (node, t) in
let shapeNode = node as! SKShapeNode
let path = CGMutablePath()
let borderRadius = l/2 * t / CGFloat(duration);
path.move(to: CGPoint.init(x: -l/2, y: -l/2 + borderRadius));
path.addLine(to: CGPoint.init(x: -l/2, y: l/2 - borderRadius));
path.addArc(tangent1End: CGPoint(x: -l/2, y: l/2), tangent2End: CGPoint(x: -l/2 + borderRadius, y: l/2), radius: borderRadius)
path.addLine(to: CGPoint.init(x: l/2 - borderRadius, y: l/2 ));
path.addArc(tangent1End: CGPoint(x: l/2, y: l/2), tangent2End: CGPoint(x: l/2, y: l/2 - borderRadius), radius: borderRadius)
path.addLine(to: CGPoint.init(x: l/2, y: -l/2 + borderRadius));
path.addArc(tangent1End: CGPoint(x: l/2, y: -l/2), tangent2End: CGPoint(x: l/2 - borderRadius, y: -l/2), radius: borderRadius)
path.addLine(to: CGPoint.init(x: -l/2 + borderRadius, y: -l/2));
path.addArc(tangent1End: CGPoint(x: -l/2, y: -l/2), tangent2End: CGPoint(x: -l/2, y: -l/2 + borderRadius), radius: borderRadius)
path.closeSubpath()
shapeNode.path = path
}
The documentation of UIBezierPath.init(roundedRect:cornerRadius:) states that:
The radius of each corner oval. A value of 0 results in a rectangle without rounded corners. Values larger than half the rectangle’s width or height are clamped appropriately to half the width or height.
But I tested this and it is actually happening exactly for values larger than a third of the width/height and not at a half of it. I'm filling a bug report and will let's hope it is quickly solved.
Bug report link: https://bugs.swift.org/browse/SR-10496
I have seen a particle scattering effect on a number of websites and app design concepts on dribbble. The effect is like this:- https://www.craftedbygc.com/
The effect can also be seen as shown in this link:-
https://dribbble.com/shots/3511585-hello-dribbble
How can we achieve such an effect in an iOS application?
If you're looking for something simple, check out CAEmitterLayer and CAEmitterCell. Just do a CAEmitterLayer with an emitterShape of kCAEmitterLayerRectangle and you can crop it with yet another CAShapeLayer to get the shape you want:
Here is a sample that generates something like the above:
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
// define emitter layer as centered w 80% of smallest dimension
let image = emitterImage
let side = min(view.bounds.width, view.bounds.height) * 0.8
let origin = CGPoint(x: view.bounds.midX - side / 2, y: view.bounds.midY - side / 2)
let center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
let size = CGSize(width: side, height: side)
let rect = CGRect(origin: origin, size: size)
let emitterLayer = CAEmitterLayer()
emitterLayer.emitterShape = kCAEmitterLayerRectangle
emitterLayer.emitterSize = rect.size
emitterLayer.emitterPosition = center
// define cells
let cell = CAEmitterCell()
cell.birthRate = Float(size.width * size.height / 10)
cell.lifetime = 1
cell.velocity = 10
cell.scale = 0.1
cell.scaleSpeed = -0.1
cell.emissionRange = .pi * 2
cell.contents = image.cgImage
emitterLayer.emitterCells = [cell]
// add the layer
view.layer.addSublayer(emitterLayer)
// mask the layer
let lineWidth = side / 8
let mask = CAShapeLayer()
mask.fillColor = UIColor.clear.cgColor
mask.strokeColor = UIColor.white.cgColor
mask.lineWidth = lineWidth
mask.path = UIBezierPath(arcCenter: center, radius: (side - lineWidth) / 2, startAngle: .pi / 4, endAngle: .pi * 7 / 4, clockwise: true).cgPath
emitterLayer.mask = mask
}
var emitterImage: UIImage {
let rect = CGRect(origin: .zero, size: CGSize(width: 10, height: 10))
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0)
#colorLiteral(red: 0.5725490451, green: 0, blue: 0.2313725501, alpha: 1).setFill()
UIBezierPath(arcCenter: CGPoint(x: rect.midX, y: rect.midY), radius: rect.midX, startAngle: 0, endAngle: .pi * 2, clockwise: true).fill()
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
I don't know any easy way to produce something exactly like your examples, but you'll find third party libraries/demos out there (e.g. http://flexmonkey.blogspot.co.uk/2015/01/computing-particle-systems-in-swift.html).
SpriteKit is a good choice.It has a feature called Particle Emitter. Lots of tutorial you will find helpful just like this to make such an effect
I'm trying to create a game in which i have a object 1 rotatiing in a circle and another object appears and places itself ontop of object 1. currently the object just rotates around object 1 without stacking ontop of it. how do i get the object to stack itself on top and then follow it's orbit? here's my code now.
let player = SKSpriteNode(imageNamed: "Light")
override func didMoveToView(view: SKView) {
// 2
backgroundColor = SKColor.whiteColor()
// 3
player.position = CGPoint(x: size.width * 0.5, y: size.height * 0.5)
// 4
player.size = CGSize(width:70, height:60 )
addChild(player)
let dx = player.position.x - self.frame.width / 2
let dy = player.position.y - self.frame.height / 2
let rad = atan2(dy, dx)
circle = UIBezierPath(arcCenter: CGPoint(x: size.width / 2, y: size.height / 2), radius: 120, startAngle: rad, endAngle: rad + CGFloat(M_PI * 4), clockwise: true)
let follow = SKAction.followPath(circle.CGPath, asOffset: false, orientToPath: true, speed: 100)
player.runAction(SKAction.repeatActionForever(follow))
}
func addMonster() {
let monster = SKSpriteNode(imageNamed: "plate")
// Determine where to spawn the monster along the Y axis
let actualY = random(min: monster.size.height/1, max: size.height - monster.size.height/1)
// Position the monster slightly off-screen along the right edge,
// and along a random position along the Y axis as calculated above
monster.position = CGPoint(x: size.width * 0.5 + monster.size.width/2, y: actualY)
// Add the monster to the scene
addChild(monster)
// Determine speed of the monster
let actualDuration = random(min: CGFloat(2.0), max: CGFloat(3.0))
// Create the actions
let actionMove = SKAction.moveTo(CGPoint(x: -monster.size.width/2, y: actualY), duration: NSTimeInterval(actualDuration))
let follow = SKAction.followPath(circle.CGPath, asOffset: false, orientToPath:true, speed: 100)
monster.runAction(SKAction.repeatActionForever(follow))
}
Your verbal description appears to have something like the following in mind (you can copy and paste this into an iOS playground):
import UIKit
import SpriteKit
import XCPlayground
let scene = SKScene(size: CGSize(width: 400, height: 400))
let view = SKView(frame: CGRect(origin: .zero, size: scene.size))
view.presentScene(scene)
XCPlaygroundPage.currentPage.liveView = view
scene.backgroundColor = .darkGrayColor()
scene.anchorPoint = CGPoint(x: 0.5, y: 0.5)
let player = SKShapeNode(rectOfSize: CGSize(width: 70, height: 60), cornerRadius: 5)
let radius: CGFloat = 120
let circle = CGPathCreateWithEllipseInRect(CGRect(x: -radius, y: -radius, width: radius * 2, height: radius * 2), nil)
let followCircle = SKAction.followPath(circle, asOffset: false, orientToPath: true, speed: 100)
player.runAction(.repeatActionForever(followCircle))
let monsterSize = CGSize(width: 35, height: 30)
let monster = SKShapeNode(rectOfSize: monsterSize, cornerRadius: 4)
monster.fillColor = .redColor()
monster.runAction(.repeatActionForever(followCircle))
scene.addChild(player)
scene.addChild(monster)
Where you make use of a random(min:max:) function that is probably implemented along the lines of:
public func random(min min: CGFloat, max: CGFloat) -> CGFloat {
return min + (CGFloat(arc4random()) / CGFloat(UInt32.max)) * (max - min)
}
But you also have the code that seems to be saying:
let y = random(
min: scene.size.height / -2 + monsterSize.height / 2,
max: scene.size.height / 2 - monsterSize.height / 2
)
let xFrom = scene.size.width / 2
let xTo = scene.size.width / -2
monster.position = CGPoint(x: xFrom, y: y)
monster.runAction(
.moveToX(xTo, duration: NSTimeInterval(random(min: 2, max: 3)))
)
But this is unused. Instead the monster is set to follow the same circle path as the player. And so I am not sure really what exactly you are trying to achieve. (By the way, the simplest way of getting the monster "stack on top" of the player would be to make it the child node of the player...)
Hope some of this guesswork helps you in some way (to refine your question and code sample if nothing else).
So I am experimenting with Sprite-kit, to build circular path where the main character can follow and collect coins. I have successfully positioned my character and made him follow my circular path.
What I'm trying to achieve is the following:
red ball is the main character [done]
white polygons are the coins
// Adding the big circle
let runway = SKSpriteNode(imageNamed: "runway")
runway.position = CGPointMake(CGRectGetMidX(frame), CGRectGetMidY(frame))
addChild(runway)
// Adding the player
player = SKSpriteNode(imageNamed: "player")
player.position = CGPointMake( CGRectGetMidX(frame) , (CGRectGetMidY(frame) + runway.size.width/2) )
// Calculating the initial position of the player and creating a circular path around it
let dx = player.position.x - frame.width / 2
let dy = player.position.y - frame.height / 2
let radian = atan2(dy, dx)
let playerPath = UIBezierPath(
arcCenter: CGPoint(x: CGRectGetMidX(frame), y: CGRectGetMidY(frame)),
radius: (runway.frame.size.width / 2) - 20,
startAngle: radian,
endAngle: radian + CGFloat(M_PI * 4.0),
clockwise: true)
let follow = SKAction.followPath(playerPath.CGPath, asOffset: false, orientToPath: true, speed: 200)
player.runAction(SKAction.repeatActionForever(follow))
My problem now, is how to position my coins on that same path ??
Is there a way to generate their positions using the same path or should I create a specific path for each coin and extract the path currentPoint each time ??
Is there a simpler way to solving my problem ??
Thanks
Like I said, you need to know where is the center of the path (in your case that is CGPoint(x: frame.midX, y:frame.midY) which is "center" of the screen) and you have to know the radius (you have it already calculated when you was creating the path) and you need an angle that the ray from center (frame.midX,frame.midY) to the point on the circumference (coinX,coinY) makes with positive x axis:
import SpriteKit
class GameScene: SKScene {
let player = SKSpriteNode(color: .purpleColor(), size: CGSize(width: 30, height: 30))
override func didMoveToView(view: SKView) {
/* Setup your scene here */
// Adding the big circle
let runway = SKSpriteNode(color: .orangeColor(), size: CGSize(width: 150, height: 150))
runway.position = CGPointMake(CGRectGetMidX(frame), CGRectGetMidY(frame))
addChild(runway)
// Adding the player
player.position = CGPointMake( CGRectGetMidX(frame) , (CGRectGetMidY(frame) + runway.size.width/2) )
addChild(player)
// Calculating the initial position of the player and creating a circular path around it
let dx = player.position.x - frame.width / 2
let dy = player.position.y - frame.height / 2
let radius = (runway.frame.size.width / 2) - 20.0
let radian = atan2(dy, dx)
let playerPath = UIBezierPath(
arcCenter: CGPoint(x: CGRectGetMidX(frame), y: CGRectGetMidY(frame)),
radius: radius,
startAngle: radian,
endAngle: radian + CGFloat(M_PI * 4.0),
clockwise: true)
let follow = SKAction.followPath(playerPath.CGPath, asOffset: false, orientToPath: true, speed: 200)
player.runAction(SKAction.repeatActionForever(follow))
let numberOfCoins = 8
for i in 0...numberOfCoins {
let coin = SKSpriteNode(color: .yellowColor(), size: CGSize(width: 10, height: 10))
let angle = 2 * M_PI / Double(numberOfCoins) * Double(i)
let coinX = radius * cos(CGFloat(angle))
let coinY = radius * sin(CGFloat(angle))
coin.position = CGPoint(x:coinX + frame.midX, y:coinY + frame.midY)
addChild(coin)
}
}
}
Just a sidenote : In Sprite-Kit the angle of 0 radians specifies the positive x axis. And the positive angle is in the counterclockwise direction. The source - Building Your Scene.
The answer that Whirlwind posted is valid, but needs to be migrated to work with Xcode 11.
The following is an updated version of that answer, along with an animation showing it in action.
override func didMove(to view: SKView) {
/* Setup your scene here */
// Adding the big circle
let runway = SKSpriteNode(color: .orange, size: CGSize(width: 150, height: 150))
runway.position = CGPoint(x: frame.midX, y: frame.midY)
addChild(runway)
// Adding the player
player.position = CGPoint(x: frame.midX, y: frame.midY + runway.size.width / 2)
addChild(player)
// Calculating the initial position of the player and creating a circular path around it
let dx = player.position.x - frame.width / 2
let dy = player.position.y - frame.height / 2
let radius = (runway.frame.size.width / 2) - 20.0
let radian = atan2(dy, dx)
let playerPath = UIBezierPath(
arcCenter: CGPoint(x: frame.midX, y: frame.midY),
radius: radius,
startAngle: radian,
endAngle: radian + CGFloat(.pi * 4.0),
clockwise: true)
let follow = SKAction.follow(playerPath.cgPath, asOffset: false, orientToPath: true, speed: 200)
player.run(SKAction.repeatForever(follow))
let numberOfCoins = 8
for i in 0...numberOfCoins {
let coin = SKSpriteNode(color: .yellow, size: CGSize(width: 10, height: 10))
let angle = 2 * .pi / Double(numberOfCoins) * Double(i)
let coinX = radius * cos(CGFloat(angle))
let coinY = radius * sin(CGFloat(angle))
coin.position = CGPoint(x:coinX + frame.midX, y:coinY + frame.midY)
addChild(coin)
}
}
How it appears in action:
I'm using SpriteKit and trying to achieve the following effect using arcs
I created three SKShapeNodes and assigned UIBezierPath's CGPath property to the SKShapeNode's path property..
Here is my code:
func createCircle(){
//container contains the SKShapeNodes
self.container = SKShapeNode()
self.container.position = CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2)
//creating UIBezierPaths
let arc = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI/2) , clockwise: false)
arc.flatness = 100
self.red = SKShapeNode()
self.red.lineWidth = 20
self.red.strokeColor = SKColor.redColor()
self.red.path = arc.CGPath
let arc1 = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: CGFloat(M_PI/2), endAngle: CGFloat(0.0), clockwise: false)
self.blue = SKShapeNode()
self.blue.strokeColor = SKColor.whiteColor()
self.blue.lineWidth = 20
self.blue.path = arc1.CGPath
let arc2 = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 100, startAngle: 0.1, endAngle: CGFloat(3*M_PI/2), clockwise: false)
self.yellow = SKShapeNode()
self.yellow.strokeColor = SKColor.yellowColor()
self.yellow.lineWidth = 20
self.yellow.path = arc2.CGPath
//adding arcs to the container
self.container.addChild(red)
self.container.addChild(yellow)
self.container.addChild(blue)
//adding container to the GameScene
self.addChild(container)
}
After experimenting with the startAngle and endAngle I was able to make this:
The code output shape is not identical to the circle I want to create. How can I get the gaps that are in the desired effect image?
Using this image as a reference I was able to make changes to startAngle and endAngleof UIBezierPath arc method
Result Image