I am using to following code to make a sprite node move in a circle in Xcode spritekit.
let circleDiameter = CGFloat(100)
// center our path based on our sprites initial position
let pathCenterPoint = CGPoint(
x: object.position.x - circleDiameter,
y: object.position.y - circleDiameter/2)
// create the path our sprite will travel along
let circlePath = CGPath(ellipseIn: CGRect(origin: pathCenterPoint, size: CGSize(width: circleDiameter, height: circleDiameter)), transform: nil)
// create a followPath action for our sprite
let followCirclePath = SKAction.follow(circlePath, asOffset: false, orientToPath: false, duration: 3)
// make our sprite run this action forever
object.run(SKAction.repeatForever(followCirclePath).reversed(), withKey: “moving”)
world.addChild(object)
The problem is, the sprite node starting position is always positioned on the RIGHT side of the circle path. I know I can use .reversed() to change direction of the sprite node but that is not what I am asking.
How can I change the "starting point" to the LEFT side of the circle path?
Thanks Guys! Please refer to the picture below :D
CGPath(ellipseIn:...) is an utility method which creates a path
of an ellipse, where the "argument" or "angle" runs from 0 to 2π.
You cannot add an "offset" to the follow action, but you can define
the path in a way that it starts at the "left end" of the circle:
let circlePath = CGMutablePath()
circlePath.addArc(center: pathCenterPoint, radius: circleDiameter,
startAngle: -.pi, endAngle: .pi, clockwise: false)
Related
What I am trying to do that draw a circle node using its radius and origin points.
Is there any way to draw a circle node in SceneKit?
How can I draw that?
First approach
Use SceneKit SCNCylinder's procedural mesh to create a circle.
func circle(origin: SCNVector3, radius: CGFloat) -> SCNNode {
let cylinderNode = SCNNode()
cylinderNode.geometry = SCNCylinder(radius: radius, height: 0.001)
cylinderNode.geometry?.firstMaterial?.diffuse.contents = UIColor.red
cylinderNode.geometry?.firstMaterial?.isDoubleSided = true
cylinderNode.position = origin
cylinderNode.eulerAngles.x = .pi/2
return cylinderNode
}
sceneView.scene?.rootNode.addChildNode(circle(
origin: SCNVector3(), radius: 0.5)
)
Second approach
This approach is impractical for your particular case, because you must specify the radius in UIKit units, not in meters like in SceneKit. However, I decided to publish it as option B.
// Path
let circlePath = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0),
radius: 20,
startAngle: 0.0,
endAngle: .pi * 2,
clockwise: true)
circlePath.flatness = 0.1
// Shape
let material = SCNMaterial()
material.diffuse.contents = UIColor.systemRed
material.isDoubleSided = true
let circleShape = SCNShape(path: circlePath, extrusionDepth: 0.001)
circleShape.materials = [material]
// Node
let circleNode = SCNNode()
circleNode.geometry = circleShape
sceneView.scene?.rootNode.addChildNode(circleNode)
You could probably do something like this:
let circle = SCNPlane(width: 1.0, height: 1.0)
circle.cornerRadius = circle.width/2
hope, this is, what you are looking for.
another approch might be the SCNCylinder with a very small height or even SCNTorus with a very small pipe radius.
I am trying to make an SKPhysics body for this SKSpriteNode using a CGPath polygon.
The problem is that when I check for a collision between this node and the player node, the didBeginContact method is executed even though they did not touch each other. I believe their is something wrong with the coordinates but I cannot see the polygon lines, which makes it difficult for me too see the accuracy of the lines.
Here is the code that I am using:
let triangle = SKSpriteNode(imageNamed: "Triangle_ZigZag")
let trianglePath = CGMutablePath()
trianglePath.addLines(between: [CGPoint(x: triangle.size.width,
y: triangle.size.height),
CGPoint(x: triangle.size.width,
y: - triangle.size.height),
CGPoint(x: -triangle.size.width,
y: triangle.size.height / 2)])
trianglePath.closeSubpath()
triangle.physicsBody = SKPhysicsBody(polygonFrom: trianglePath)
Can someone please help me figure out what am I doing wrong ?
Thank You
FYI physics lines are green, so a green sprite probably isn't the best choice you can't see the lines very well.
your sprite has a centre anchorPoint or an anchorPoint of (0, 0) by default. Therefore your physics points need to take that into account. top right corner would be half the width from centre and half the height from centre etc. You have full width from centre and full height from centre, that is the issue.
trianglePath.addLines(between: [CGPoint(x: triangle.size.width / 2, y: triangle.size.height / 2), CGPoint(x: triangle.size.width / 2, y: -triangle.size.height / 2), CGPoint(x: -triangle.size.width / 2, y: 0)])
This is a wheel I have consisting of four individual sprites. My aim is to rotate them as a wheel. I have tried 'UIBezier' arccenter class but the end result is the individual sprite moving along the center but rotating its shape too, leading to an unwanted result. Here is the relavant code. the 'orientToPath' when set to true, rotates the sprite itself.
//path rotation
let dx = whlPurple.position.x - self.size.width/2
let dy = whlPurple.position.y - (whlRed.size.height/2 + (whlPurple.position.y - whlRed.size.height))
let rad = atan2(dy, dx)
let radius = sqrt((dx*dx) + (dy*dy))
let path = UIBezierPath(arcCenter: CGPoint(x: self.size.width/2, y: (whlRed.size.height/2 + (whlPurple.position.y - whlRed.size.height))), radius: radius, startAngle: rad, endAngle: rad + CGFloat(M_PI * 6), clockwise: true)
let follow = SKAction.follow(path.cgPath, asOffset: false, orientToPath: true, speed: 200)
whlPurple.run(SKAction.repeatForever(follow))
Create an SKNode and place it at the center of your circle.
Then add your sprite to it (addChild) at a position of CGPoint(x:radius,y:0). you can set the zRotation of the SKNode to chose your starting position on the circle.
When you rotate the SKNode, your sprite will move in a perfect circle. For example, to have the spites go around in 5 seconds, you can use SKAction.rotate(by: 2*pi, duration:5) and repeat that forever (on the SKNode containing the sprite (not on the sprite itself).
I am currently running the following code on a sprite node.
// the circle path's diameter
let circleDiameter = CGFloat(150)
// center our path based on our sprites initial position
let pathCenterPoint = CGPoint(
x: player.position.x - circleDiameter/2,
y: player.position.y - circleDiameter/2
)
// create the path our sprite will travel along
let circlePath = CGPath(ellipseIn: CGRect(origin: pathCenterPoint, size: CGSize(width: circleDiameter, height: circleDiameter)), transform: nil)
// create a followPath action for our sprite
let followCirclePath = SKAction.follow(circlePath, asOffset: false, orientToPath: true, duration: 4)
// make our sprite run this action forever
player.run(SKAction.repeatForever(followCirclePath))
self.addChild(player)
Currently the code works fine, however the player rotates as it moves in a circle path. Is there anyway I can stop the player sprite from rotating as well, as it moves in a circle?
Cheers :D
All you need to do is change this line:
let followCirclePath = SKAction.follow(circlePath, asOffset: false, orientToPath: true, duration: 4)
To this:
let followCirclePath = SKAction.follow(circlePath, asOffset: false, orientToPath: false, duration: 4)
Just set orientToPath to false.
For reference, this is documented by Apple in the following document:
https://developer.apple.com/reference/spritekit/skaction/1417798-follow
I am pretty new to iOS, I am facing a small problem about the CAKeyframeAnimation, I want to animate a view to a certain path of another view layer. it is already successfully animating. However, the position of the animation is not what i expected.
As you can see in my code. I create a UIView(myView) with round bounds. I want another view(square) to follow the orbit of myView's bounds. I already set the myView's centre to the middle of the screen. then I try to get the CGPath of myView and set it to CAKeyframeAnimation's path. However, the square is rotate somewhere else, not on the bounds of myView. Could anyone help me? thanks
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
let square = UIView()
square.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
square.backgroundColor = UIColor.redColor()
self.view.addSubview(square)
let bounds = CGRect(x: 0, y: 0, width: 200, height: 200)
let myView = UIView(frame: bounds)
myView.center = self.view.center
myView.layer.cornerRadius = bounds.width/2
myView.layer.borderWidth = 10
myView.layer.borderColor = UIColor.brownColor().CGColor
self.view.addSubview(myView)
var orbit = CAKeyframeAnimation(keyPath: "position")
orbit.path = CGPathCreateWithEllipseInRect(myView.layer.bounds, nil)
orbit.rotationMode = kCAAnimationRotateAuto
orbit.repeatCount = Float.infinity
orbit.duration = 5.0
square.layer.addAnimation(orbit, forKey: "orbit")
}
The frame "describes the view’s location and size in its superview’s coordinate system," whereas bounds "describes the view’s location and size in its own coordinate system."
So if you're building the path from bounds, then square would have to be a subview of myView. If you constructed the path using the frame of myView, then square could be a subview of view.
So, I find another solution, instead of create the CGPath based on some view already existed, I used
let myPath = UIBezierPath(arcCenter: myView.center, radius: bounds.width/2, startAngle: CGFloat(-(CGFloat(M_PI_2))), endAngle: CGFloat((2.0 * M_PI - M_PI_2)), clockwise: true).CGPath
in this way, I can specify the centre point of the UIBezierPath.