Im having trouble figuring out how to rotate my player node towards each click. Ive already got the intercept of a click on the x-z plane and set the node to move to it, and I have found out the radians of the click compared to the plane of x and z on which the character moves. After the character isn't at 0 y rotation my method doesn't work though. Im guessing theres an easier way to do this, just hoping someone can point me to some documentation or tell me what way I can figure out the difference between the clicks angle and the current orientation of the player and make him face towards the movement.
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if game.state == .tapToPlay {
startGame()
}
if game.state == .playing {
let touch = touches.first!
let location = touch.location(in: scnView)
let hitResults = scnView.hitTest(location, options: nil)
if hitResults.first?.node.name == "Grass" {
//pigNode.runAction(SCNAction.move(to: (hitResults.first?.localCoordinates)!, duration: 1.0))
let moveAction = SCNAction.move(to: (hitResults.first?.localCoordinates)!, duration: 1.0)
let location = hitResults.first?.localCoordinates
/*
pigNode.runAction(SCNAction.rotateTo(x: 0.0,
y: CGFloat(offset.y),
z: 0.0, duration: 1.0, usesShortestUnitArc: true))
let rotateAction = SCNAction.rotateTo(x: CGFloat((locationOnPlane?.x)!),
y: CGFloat((locationOnPlane?.y)!),
z: CGFloat((locationOnPlane?.z)!),
duration: 1.0, usesShortestUnitArc: true)
*/
let locationOnPlane = CGPoint(x: Double((location?.x)!), y: Double((location?.z)!))
let offset = CGPoint(x: Double(locationOnPlane.x) - Double(pigNode.position.x), y: Double(locationOnPlane.y) - Double(pigNode.position.z))
let length = sqrt(offset.x * offset.x + offset.y * offset.y)
let direction = CGPoint(x: offset.x / length, y: offset.y / length)
let rotationAngle = CGFloat(atan2(direction.y, direction.x))
let rotateAction = SCNAction.rotate(by: rotationAngle, around: SCNVector3(x: 0.0, y: 1.0, z: 0.0), duration: 1.0)
//let rotateAction = SCNAction.rotateBy(x: 0.0, y: rotationAngle, z: 0.0, duration: 1.0)
//let rotateAction = SCNAction.rotateTo(x: 0.0, y: rotationAngle, z: 0.0, duration: 1.0, usesShortestUnitArc: true)
print(rotationAngle)
print(pigNode.eulerAngles.y)
let groupAction = SCNAction.group([moveAction, rotateAction])
pigNode.runAction(groupAction)
}
}
}
Check this answer Rotate a sprite to sprite position not exact in SpriteKit with Swift this is the code for rotation
let angle = atan2(location.y - cannon.position.y , location.x - cannon.position.x)
cannon.zRotation = angle - CGFloat(M_PI_2)
I hope this helps you
Related
UIBezierpath displays somewhere else on real world
make collection of CGPoint from below code
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let location = touches.first?.location(in: self.sceneView) else {
return
}
arrayCGPoints.append(location)
}
& display Bazierpath using below code
func updateBazierPath(){
if arrayCGPoints.count > 0 {
let bezierPath = UIBezierPath()
var i : Int = 0
for varPoint in arrayCGPoints{
if i == 0 {
bezierPath.move(to: varPoint)
}
else{
bezierPath.addLine(to: varPoint)
}
i += 1
}
bezierPath.close()
}
// Add shape
let shape = SCNShape(path: bezierPath, extrusionDepth: 0.2)
let shapeNode = SCNNode(geometry: shape)
self.sceneView.scene.rootNode.addChildNode(shapeNode)
shapeNode.geometry?.firstMaterial?.isDoubleSided = true
shapeNode.geometry!.firstMaterial?.diffuse.contents = UIColor.blue
shapeNode.position.z = -0.2
shapeNode.eulerAngles.x = -.pi / 2
}
also tried convert CGPoints into meters
arrayCGPoints.append(CGPoint(x: location.x/100, y: location.y/100))
still not working
This will draw a node # 0,0,0 with an outline of what the person dragged from, translating screen coords to world. I created a separate array of SCNVector3's that are the coords in 3d space (you could drop some nodes on the screen at these points to prove the positions). Also note the append is x,z,z (not scenepoint.y). My camera is looking at 0,0,0 from 0,15,0.1. This will at least give you a visual on what was happening to z and hopefully does answer the question you asked.
If you want the resulting shape to stay lined up with exactly where the user touched, that's not solved here.
var shapeNode = SCNNode()
func updateBazierPath()
{
for vPoints in arrayCGPoints
{
let projectedPoint = gameScene.projectPoint(SCNVector3(0, 0, 0))
let scenePoint = gameScene.unprojectPoint(SCNVector3(vPoints.x, vPoints.y, CGFloat(projectedPoint.z)))
scenePoints.append(SCNVector3(scenePoint.x, scenePoint.z, scenePoint.z))
}
let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: CGFloat(scenePoints[0].x), y: CGFloat(scenePoints[0].y)))
for vCount in 1...scenePoints.count - 1
{
bezierPath.addLine(to: CGPoint(x: CGFloat(scenePoints[vCount].x), y: CGFloat(scenePoints[vCount].y)))
}
bezierPath.close()
shapeNode.removeFromParentNode()
let shape = SCNShape(path: bezierPath, extrusionDepth: 0.5)
shapeNode = SCNNode(geometry: shape)
shapeNode.geometry?.firstMaterial?.isDoubleSided = true
shapeNode.geometry!.firstMaterial?.diffuse.contents = UIColor.yellow
//let action = SCNAction.repeatForever(SCNAction.rotate(by: .pi, around: SCNVector3(1, 0, 0), duration: 5))
//shapeNode.runAction(action)
shapeNode.position = SCNVector3(0, 0, 0)
shapeNode.eulerAngles.x = -.pi / 2
gNodes.gameNodes.addChildNode(shapeNode)
}
I want to animate a view alongside a path (without CAKeyframeAnimation) instead with UIViewPropertyAnimator.
For that I have a path with start- and endpoint and a controlpoint to make a quadcurve.
let path = UIBezierPath()
path.move(to: view.center)
path.addQuadCurve(to: target.center, controlPoint: CGPoint(x: view.center.x-10, y: target.center.y+160))
My animator uses a UIView.animateKeyframes animation to animate the position alongside the path.
let animator = UIViewPropertyAnimator(duration: duration, curve: .easeIn)
animator.addAnimations {
UIView.animateKeyframes(withDuration: duration, delay: 0, options: [.calculationModeLinear], animations: {
let points = 100
for i in 1...points {
let pos = Double(i)/Double(points)
let x = self.quadBezier(pos: pos,
start: Double(view.center.x),
con: Double(view.center.x-10),
end: Double(target.center.x))
let y = self.quadBezier(pos: pos,
start: Double(view.center.y),
con: Double(target.center.y+160),
end: Double(target.center.y))
let duration = 1.0/Double(points)
let startTime = duration * Double(i)
UIView.addKeyframe(withRelativeStartTime: startTime, relativeDuration: duration) {
view.center = CGPoint(x: x, y: y)
}
}
})
}
To calculate the points I use the same function as #rmaddy, think we have the same source here.
func quadBezier(pos: Double, start: Double, con: Double, end: Double) -> Double {
let t_ = (1.0 - pos)
let tt_ = t_ * t_
let tt = pos * pos
return Double(start * tt_) + Double(2.0 * con * t_ * pos) + Double(end * tt)
}
First I thought the calulation is wrong because it felt like the calculated points going through the controlpoint or something:
But after iterating through the same forloop and adding blue points to the calculated x/y positions shows that the positions are correct.
So I wonder why my animation don't follow that path.
I found this question and posted my question as an answer but I guess nobody recognized that.
View.center is changing during animation, make it fixed then there is no problem:
try the following:
let cent = view.center
UIView.animateKeyframes(withDuration: duration, delay: 0, options: [.beginFromCurrentState], animations: {
let points = 100
for i in 1...points {
let pos = Double(i)/Double(points)
let x = self.quadBezier(pos: pos,
start: Double(cent.x), //here
con: Double(cent.x-10), //here
end: Double(square.center.x))
let y = self.quadBezier(pos: pos,
start: Double(cent.y), //here
con: Double(square.center.y+160),
end: Double(square.center.y))
let duration = 1.0 / Double(points)
let startTime = duration * Double(i)
print("Animate: \(Int(x)) : \(Int(y))")
UIView.addKeyframe(withRelativeStartTime: startTime, relativeDuration: duration) {
view.center = CGPoint(x: x, y: y)
}
}
})
}
I'm a new programmer working on a simple demo iOS program which I use SceneKit to render the scene.
I want to rotate the camera to see different perspective of the scene. But the original camera control is little bit tricky. Especially when I want to rotate the scene in one direction. e.g. if I swipe from right to left and the camera goes from right to left, then go downwards, then go upwards, then go downwards again, finally it goes left again.
What I want to achieve is that when I swipe from right to the left, the camera rotate around the z-axis. And when I swipe up and down my camera just move up and down. And I can also zoom in and out. Additionally I want to set a constraint so that the camera won't go underground.
So I come up with an idea that I fix the camera to look at the object that I focus on. Then place the object in the center of the scene. And I want to rotate the scene just around z-axis when I swipe the screen.
I assume that I use panGestureRecognizer and translate the position change to a rotation order.But how can I achieve that?
Or you have some other idea to get this results?
Here's a simple version of what I write so far. I've tried using UIPanGestureRecognizer but it didn't work, so I delete it and set allowCameraControl = true
let sceneView = SCNView(frame: self.view.frame)
self.view.addSubview(sceneView)
let scene = SCNScene()
sceneView.scene = scene
let camera = SCNCamera()
let cameraNode = SCNNode()
cameraNode.camera = camera
cameraNode.position = SCNVector3(x: -5.0, y: 5.0, z: 5.0)
let light = SCNLight()
light.type = SCNLight.LightType.spot
light.spotInnerAngle = 30
light.spotOuterAngle = 80
light.castsShadow = true
let lightNode = SCNNode()
lightNode.light = light
lightNode.position = SCNVector3(x: 1.5, y: 1.5, z: 1.5)
let ambientLight = SCNLight()
ambientLight.type = SCNLight.LightType.ambient
ambientLight.color = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1.0)
cameraNode.light = ambientLight
let cubeGeometry = SCNBox(width: 1.0, height: 1.0, length: 1.0, chamferRadius: 0.0)
let cubeNode = SCNNode(geometry: cubeGeometry)
let planeGeometry = SCNPlane(width: 50.0, height: 50.0)
let planeNode = SCNNode(geometry: planeGeometry)
planeNode.eulerAngles = SCNVector3(x: GLKMathDegreesToRadians(-90), y: 0, z: 0)
planeNode.position = SCNVector3(x: 0, y: -0.5, z: 0)
cameraNode.position = SCNVector3(x: -3.0, y: 3.0, z: 3.0)
let constraint = SCNLookAtConstraint(target: cubeNode)
constraint.isGimbalLockEnabled = true
cameraNode.constraints = [constraint]
lightNode.constraints = [constraint]
scene.rootNode.addChildNode(lightNode)
scene.rootNode.addChildNode(cameraNode)
scene.rootNode.addChildNode(cubeNode)
scene.rootNode.addChildNode(planeNode)
sceneView.allowsCameraControl = true
I solved this problem by using Spherical coordinate system.
General idea is to get the start position and the angle, then transform it to spherical coordinate system. Then you do rotation by just changing the two angle.
It's even easier to use spherical coordinate system to deal with pinch gesture. You just have to change the radius.
here's some code that I use.
func handlePan(_ gestureRecognize: UIPanGestureRecognizer) {
// retrieve scene
let carView = self.view as! SCNView
// save node data and pan gesture data
let cameraNode = carView.scene?.rootNode.childNode(withName: "Camera", recursively: true)!
//let translation = gestureRecognize.translation(in: gestureRecognize.view!)
let speed = gestureRecognize.velocity(in: gestureRecognize.view!)
var speedX = sign(Float(speed.x)) * Float(sqrt(abs(speed.x)))
var speedY = sign(Float(speed.y)) * Float(sqrt(abs(speed.y)))
if speedX.isNaN {speedX = 0}
if speedY.isNaN {speedY = 0}
// record start value
let cameraXStart = cameraNode!.position.x
let cameraYStart = cameraNode!.position.y
let cameraZStart = cameraNode!.position.z - 1.0
let cameraAngleStartZ = cameraNode!.eulerAngles.z
let cameraAngleStartX = cameraNode!.eulerAngles.x
let radiusSquare = cameraXStart * cameraXStart + cameraYStart * cameraYStart + cameraZStart * cameraZStart
// calculate delta value
let deltaAngleZ = -0.003 * Float(speedX)
let deltaAngleX = -0.003 * Float(speedY)
// get new Value
var cameraNewAngleZ = cameraAngleStartZ + deltaAngleZ
var cameraNewAngleX = cameraAngleStartX + deltaAngleX
if cameraNewAngleZ >= 100 * Float.pi {
cameraNewAngleZ = cameraNewAngleZ - 100 * Float.pi
} else if cameraNewAngleZ < -100 * Float.pi {
cameraNewAngleZ = cameraNewAngleZ + 100 * Float.pi
} else {
// set limit
if cameraNewAngleX > 1.4 {
cameraNewAngleX = 1.4
} else if cameraNewAngleX < 0.1 {
cameraNewAngleX = 0.1
}
// use angle value to get position value
let cameraNewX = sqrt(radiusSquare) * cos(cameraNewAngleZ - Float.pi/2) * cos(cameraNewAngleX - Float.pi/2)
let cameraNewY = sqrt(radiusSquare) * sin(cameraNewAngleZ - Float.pi/2) * cos(cameraNewAngleX - Float.pi/2)
let cameraNewZ = -sqrt(radiusSquare) * sin(cameraNewAngleX - Float.pi/2) + 1
if cameraNode?.camera?.usesOrthographicProjection == false {
cameraNode?.position = SCNVector3Make(cameraNewX, cameraNewY, cameraNewZ)
cameraNode?.eulerAngles = SCNVector3Make(cameraNewAngleX, 0, cameraNewAngleZ)
}
else if cameraNode?.camera?.usesOrthographicProjection == true {
cameraNode?.position = SCNVector3Make(0, 0, 10)
cameraNode?.eulerAngles = SCNVector3Make(0, 0, cameraNewAngleZ)
}
}
}
I'm having trouble trying to rotate the shape I have drawn in the following code: I tried using:
triangle.transform = triangle.transform.rotated(by: 3.14159)
but that gives me an error of "value of type 'CATransform3D' has no member 'rotated'". I'm not sure how to rotate the shape.
override func viewDidLoad() {
super.viewDidLoad()
let trianglePath = UIBezierPath()
trianglePath.move(to: CGPoint(x: UIScreen.main.bounds.size.width * 0.5, y: UIScreen.main.bounds.height * 0.5))
trianglePath.addLine(to: CGPoint(x: (UIScreen.main.bounds.size.width * 0.5) + 100, y: (UIScreen.main.bounds.height * 0.5) - 50))
trianglePath.addLine(to: CGPoint(x: (UIScreen.main.bounds.size.width * 0.5) + 100, y: (UIScreen.main.bounds.height * 0.5) + 50))
trianglePath.close()
let triangle = CAShapeLayer()
triangle.path = trianglePath.cgPath
triangle.fillColor = UIColor.gray.cgColor
self.view.layer.addSublayer(triangle)
}
Use this to rotate your triangle, you can use use CGAffineTransform
triangle.setAffineTransform(CGAffineTransform(rotationAngle: .pi))
or using CATransform3D, rotating in Z axis by pi
triangle.transform = CATransform3DMakeRotation(.pi, 0, 0, 1)
but to this work you need to adjust also your CAShapeLayer frame
triangle.frame = self.view.bounds //this do the trick
For animate after it shows
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
UIView.animate(withDuration: 0.1) {
triangle.setAffineTransform(CGAffineTransform(rotationAngle: .pi)) //this
triangle.transform = CATransform3DMakeRotation(.pi, 0, 0, 1) //or this
}
}
Hope this helps
Is it possible to animate a view in a circular path using the new iOS 10 UIViewPropertyAnimator?
I know that it can be done with CAKeyframeAnimation as per How do I animate a UIView along a circular path?
How can I achieve the same result with the new API?
I ended up with the following. Essentially, calculating the points on circle and using animateKeyFrames to move between them.
let radius = CGFloat(100.0)
let center = CGPoint(x: 150.0, y: 150.0)
let animationDuration: TimeInterval = 3.0
let animator = UIViewPropertyAnimator(duration: animationDuration, curve: .linear)
animator.addAnimations {
UIView.animateKeyframes(withDuration: animationDuration, delay: 0, options: [.calculationModeLinear], animations: {
let points = 1000
let slice = 2 * CGFloat.pi / CGFloat(points)
for i in 0..<points {
let angle = slice * CGFloat(i)
let x = center.x + radius * CGFloat(sin(angle))
let y = center.y + radius * CGFloat(cos(angle))
let duration = 1.0/Double(points)
let startTime = duration * Double(i)
UIView.addKeyframe(withRelativeStartTime: startTime, relativeDuration: duration) {
ninja.center = CGPoint(x: x, y: y)
}
}
})
}
animator.startAnimation()