I am creating a game, where you control using swipes and I wanted to know if it is possible to handle sideways swipes using UIGestureRecodnizer?
If so how do I do it.
In other word:
Instead of having 4 directions, how do I get 8:
From up,down,right,left to upleft,upright,downright,downleft,up,down,right,left ?
Also how do can I properly differ between a double swipe and a two single swipes, does UIGestureRecognizer have an inbuilt timeout?
This could use some cleaning up but it works:
// a uiview that tracks touches in 8 directions when swiped
class TouchRecognizer: UIView{
// used for calculating degree between touches
var startTouch: CGPoint = CGPoint(x: 0, y: 0)
var endTouch: CGPoint = CGPoint(x: 0, y: 0)
// gets initial touch
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
let touch = touches.first!
let location = touch.location(in: self)
startTouch = location
}
// gets end touch, then checks angle
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
let touch = touches.first!
let location = touch.location(in: self)
endTouch = location
HandleSwipe()
}
// Gets The Degree between the two touches
func HandleSwipe(){
let p1 = startTouch
let p2 = endTouch
let center = CGPoint(x: (p1.x), y: (p1.y + 1))
let v1 = CGVector(dx: p1.x - center.x, dy: p1.y - center.y)
let v2 = CGVector(dx: p2.x - center.x, dy: p2.y - center.y)
let angle = atan2(v2.dy, v2.dx) - atan2(v1.dy, v1.dx)
let deg = angle * CGFloat(180.0 / .pi)
PrintDirection(degree: deg)
}
// uses the degree between touches to figure out the direction user swiped
func PrintDirection(degree: CGFloat){
// if needed, adjust degree angles for optimized swiping
if(degree < 30 && degree > -10){
print("Up")
}
else if(degree > 30 && degree < 60){
print("UpRight")
}
else if(degree > 75 && degree < 120){
print("Right")
}
else if(degree > 120 && degree < 150){
print("downRight")
}
else if(degree > 150 && degree < 210){
print("Down")
}
else if(degree > 210 && degree < 240){
print("downleft")
}
else if(degree > 240 && degree < 300){
print("Left")
}
else if(degree > 300 && degree < 360){
print("upLeft")
}
else if(degree < -30 && degree > -60){
print("upLeft")
}
else if(degree < -60){
print("left")
}
}
}
Related
I am attempting to create a walking animation where the sprite moves towards a touch location that can be dragged around the screen. I have managed to get Xcode to print updated X and Y coordinates where the finger is dragged but the sprite will barely move and I haven't been able to solve this issue. The touchesMoved has correctly printed the x and y coordinates but the moveGuy function will not perform correctly.
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches { self.touchMoved(toPoint: touch.location(in: self))
let location = touch.location(in: self)
print(location)
moveGuy(location: location)
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
guyMoveEnded()
}
func moveGuy(location: CGPoint) {
var multiplierForDirection: CGFloat
// 2
let guySpeed = frame.size.width / 3.0
// 3
let moveDifference = CGPoint(x: location.x - guy.position.x, y: location.y - guy.position.y)
let distanceToMove = sqrt(moveDifference.x * moveDifference.x + moveDifference.y * moveDifference.y)
// 4
let moveDuration = distanceToMove / guySpeed
// 5
if moveDifference.x < 0 {
multiplierForDirection = -1.0
} else {
multiplierForDirection = 1.0
}
guy.xScale = abs(guy.xScale) * multiplierForDirection
// 1
if guy.action(forKey: "walkingInPlaceguy") == nil {
// if legs are not moving, start them
animateguy()
}
if guy.position == (location) {
guyMoveEnded()
}
// 2
let moveAction = SKAction.move(to: location, duration:(TimeInterval(moveDuration)))
// 3
let doneAction = SKAction.run({ [weak self] in
self?.guyMoveEnded()
})
// 4
let moveActionWithDone = SKAction.sequence([moveAction, doneAction])
guy.run(moveActionWithDone, withKey:"guyMoving")
}
I've been able to detect degrees, but I'm unsure on how to move the sprite in 360 degrees.
I don't want the sprite to be able to only move in certain sections, as shown in the picture above, but rather have it be able to move in a full circle.
Code:
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in: self)
if (ball.frame.contains(location)) {
stickActive = true
}else {
stickActive = false
}
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in: self)
if (stickActive == true) {
var v = CGVector(dx: location.x - base.position.x, dy: location.y - base.position.y)
let angle = atan2(v.dy, v.dx)
var deg = angle * CGFloat(180 / M_PI)
print(deg + 180)
let lenght:CGFloat = base.frame.size.height / 2 - 20
let xDist: CGFloat = sin(angle - 1.57079633) * lenght
let yDist: CGFloat = cos(angle - 1.57079633) * lenght
ball.position = CGPoint(x: base.position.x - xDist, y: base.position.y + yDist)
if (base.frame.contains(location)) {
ball.position = location
}else {
ball.position = CGPoint(x: base.position.x - xDist, y: base.position.y + yDist)
}
}
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
if (stickActive == true) {
let move: SKAction = SKAction.move(to: base.position, duration: 0.2)
move.timingMode = .easeOut
ball.run(move)
}
}
This is super simple, although it took me quite awhile to figure out how to do it.
TouchesBegan method:
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in: self)
if isTracking == false && DPad.contains(location) {
isTracking = true
}
}
}
TouchesMoved method:
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location: CGPoint = touch.location(in: self)
if isTracking == true {
v = CGVector(dx: location.x - DPad.position.x, dy: location.y - DPad.position.y)
let angle = atan2(v.dy, v.dx)
let deg = angle * CGFloat(180 / Double.pi)
let Length:CGFloat = DPad.frame.size.height / 2
let xDist: CGFloat = sin(angle - 1.57079633) * Length
let yDist: CGFloat = cos(angle - 1.57079633) * Length
xJoystickDelta = location.x - DPad.position.x
yJoystickDelta = location.y - DPad.position.y
if DPad.contains(location) {
thumbNode.position = location
} else {
thumbNode.position = CGPoint(x: DPad.position.x - xDist, y: DPad.position.y + yDist)
}
}
}
}
TouchesEnded method:
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
isTracking = false
thumbNode.run(SKAction.move(to: DPad.position, duration: 0.01))
xJoystickDelta = 0
yJoystickDelta = 0
}
The update(_ currentTime:) method:
if v.dx > abs(v.dy) {
yourPlayer.texture = SKTexture(imageNamed: "rightTexture")
} else if v.dx < -abs(v.dy) {
player.texture = SKTexture(imageNamed: "leftTexture")
} else if v.dy < 0 {
yourPlayer.texture = SKTexture(imageNamed: "frontTexture")
} else if v.dy > 0 {
yourPlayer.texture = SKTexture(imageNamed: "backTexture")
}
//This code moves your character where-ever you want it too
let xScale = CGFloat(4) //adjust to your preference. Higher means slower, lower means faster
let yScale = CGFloat(4) //adjust to your preference. Higher means slower, lower means faster
let xAdd = xScale * self.xJoystickDelta
let yAdd = yScale * self.yJoystickDelta
yourPlayerNode.position.x += xAdd
yourPlayerNode.position.y += yAdd
These things need to be outside your didMove(toView:) method:
var xJoystickDelta:CGFloat = 0
var yJoystickDelta:CGFloat = 0
var v = CGVector()
var isTracking:Bool = false
var DPad = SKSpriteNode()
var thumbNode = SKSpriteNode()
-Explanation-
In the touchesBegan method, the if-statement is testing to see if you are not controlling the thumbNode and if your touch is inside the DPad Node. Then it starts the tracking.
In the touchesMoved once isTracking == true it starts calculating the neccessary math and then adjusting the various things required. (its complicated, what matters most is that it works.)
In the touchesEnded method, it is testing to see when you lift your finger off of the screen, then it resets everything for the next usage.
In the update(_ current:) method, the code is calculating the angle of the CGVector and then setting a texture (or whatever you want to do) inside of the various cases. Then its calculating the position of the thumbNode inside the DPad and moving your player (or whatever you need to move) around in the scene. Adjust the xScale and yScale floats higher to slow down the movement, and lower to increase the movement of whatever you are trying to move.
-Extra neccessary stuff-
You need to set up the DPad and thumbNode inside your didMove(toView:) method:
thumbNode.size = CGSize(width: 50, height: 50)
DPad.size = CGSize(width: 150, height: 150)
DPad.position = CGPoint(x: 0, y: 0)
thumbNode.position = DPad.position
DPad.zPosition = 3
thumbNode.zPosition = 4
DPad.texture = SKTexture(imageNamed: "yourBaseTexture")
thumbNode.texture = SKTexture(imageNamed: "yourStickTexture")
self.addChild(thumbNode)
self.addChild(DPad)
You only have to move the DPad.position to wherever you want. The thumbNode will move along with it. Also, if you have any problems be sure to ask me so I can help you.
I'm trying to set a SKShapeNode that rotating around fixed point depend on user's swipe gesture. to do so i'm using the code that answered here.
when I set the node as a rectangle - it's working just fine, the problem is when I trying to set the node as a circle (as I needed it to be). I have no idea why its happening, and what makes the difference.
here is the code that works (SKShapeNode as a rectangle):
override func didMove(to view: SKView) {
let ball = SKShapeNode(rect: CGRect(x: 100, y: 100, width: 100, height: 100))
ball.fillColor = SKColor.red
ball.position = CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2)
ball.name = "BALL"
ball.physicsBody = SKPhysicsBody(circleOfRadius: 200)
ball.physicsBody?.angularDamping = 0.25
ball.physicsBody?.pinned = true
ball.physicsBody?.affectedByGravity = false
self.addChild(ball)
let om = 5.0
let er = 4.0
let omer = atan2(om, er)
print("om = \(om), er = \(er), atan2(omer) = \(omer)")
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in:self)
let node = atPoint(location)
if node.name == "BALL" {
let dx = location.x - node.position.x
let dy = location.y - node.position.y
// Store angle and current time
startingAngle = atan2(dy, dx)
startingTime = touch.timestamp
node.physicsBody?.angularVelocity = 0
}
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches{
let location = touch.location(in:self)
let node = atPoint(location)
if node.name == "BALL" {
let dx = location.x - node.position.x
let dy = location.y - node.position.y
let angle = atan2(dy, dx)
// Calculate angular velocity; handle wrap at pi/-pi
var deltaAngle = angle - startingAngle!
if abs(deltaAngle) > CGFloat.pi {
if (deltaAngle > 0) {
deltaAngle = deltaAngle - CGFloat.pi * 2
}
else {
deltaAngle = deltaAngle + CGFloat.pi * 2
}
}
let dt = CGFloat(touch.timestamp - startingTime!)
let velocity = deltaAngle / dt
node.physicsBody?.angularVelocity = velocity
// Update angle and time
startingAngle = angle
startingTime = touch.timestamp
}
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
startingAngle = nil
startingTime = nil
}
but when i change the SKShapeNode (inside my didMove function) to circle is just dont work - here is the changed code:
override func didMove(to view: SKView) {
let ball = SKShapeNode(circleOfRadius: 200)
ball.fillColor = SKColor.red
ball.position = CGPoint(x: self.frame.size.width/2, y: self.frame.size.height/2)
ball.name = "BALL"
ball.physicsBody = SKPhysicsBody(circleOfRadius: 200)
ball.physicsBody?.angularDamping = 0.25
ball.physicsBody?.pinned = true
ball.physicsBody?.affectedByGravity = false
self.addChild(ball)
}
does anyone see/ know what am I dong wrong?
How would you expect to see that the shape is turning? Do you have something inside the shapenode with a texture that you can actually see rotating?
A turning circle shapenode looks the same as a static one. In the update loop of the scene grab the ball and print its zRotation to see if it's actually turning.
override func update(_ currentTime: TimeInterval) {
var ball: SKShapeNode = childNodeWithName("BALL") as SKShapeNode
print(ball.zRotation)
}
(this code was written without access to Swift so you might have to fix the syntax a tiny bit)
Remember the zRotation is measured in radians so it might not look how you expect but it it's changing then the SKShapeNode is actually rotating, you just can't see it.
You'll have to add a child node that has something visible on it.
I'm trying to create a spinable node similar to the "prize wheel" in this question. So far I have the flinging capability, adding angular impulses on a physics body using a UIPanGestureRecognizer that works really well. I can also stop the spinning using a touch.
Now I'm trying to allow fine adjustment of the wheel using a drag or swipe gesture so if the player isn't happy with what they end up with they can manually spin/drag/rotate it to their favoured rotation.
Currently I save the location of the touch in the touchesBegan and try to increment the zRotation of my node in the update loop.
The rotation doesn't follow my finger and is jerky. I'm not sure if I'm getting an accurate enough read on the finger movement or if the change position of the finger isn't being accurately translated into radians. I suspect detecting the touch and then dealing with it in the update isn't a great solution.
Here's my code.
override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent?) {
if let touch = touches.first as? UITouch {
var location = touch.locationInView(self.view)
location = self.convertPointFromView(location)
mostRecentTouchLocation = location
let node = nodeAtPoint(location)
if node.name == Optional("left") && node.physicsBody?.angularVelocity != 0
{
node.physicsBody = SKPhysicsBody(circleOfRadius:150)
node.physicsBody?.applyAngularImpulse(0)
node.physicsBody?.pinned = true
}
}
}
override func update(currentTime: CFTimeInterval) {
/* Called before each frame is rendered */
if mostRecentTouchLocation != CGPointZero{
let node = nodeAtPoint(mostRecentTouchLocation)
if node.name == Optional("left")
{
var positionInScene:CGPoint = mostRecentTouchLocation
let deltaX:Float = Float(positionInScene.x) - Float(node.position.x)
let deltaY:Float = Float(positionInScene.y) - Float(node.position.y)
let angle:CGFloat = CGFloat(atan2f(deltaY, deltaX))
let maths:CGFloat = angle - (CGFloat(90) * (CGFloat(M_PI) / 180.0))
node.zRotation += maths
mostRecentTouchLocation = CGPointZero
}
}
}
I've spread some of the maths across multiple lines in the update to make debugging a bit easier.
I can add the PanGestureRecognizer code if needed but I'll try to keep it short for now.
EDIT
Here is my latest code based on GilderMan's recommendation. I think it's working better but the rotation is far from smooth. It's jumping in large increments and not following the finger well. Does this mean there's something wrong with my angle calculation?
override func didSimulatePhysics() {
if mostRecentTouchLocation != CGPointZero {
let node = nodeAtPoint(mostRecentTouchLocation)
if node.name == Optional("left")
{
var positionInScene:CGPoint = mostRecentTouchLocation
let deltaX:Float = Float(positionInScene.x) - Float(node.position.x)
let deltaY:Float = Float(positionInScene.y) - Float(node.position.y)
let angle:CGFloat = CGFloat(atan2f(deltaY, deltaX))
node.zRotation += angle
println(angle)
mostRecentTouchLocation = CGPointZero
}
}
}
The following code simulates a prize wheel that spins based on touch. As the user's finger moves, the wheel rotates proportionately to the speed of the finger. When the user swipes on the wheel, the wheel will spin proportionately to the velocity of the swipe. You can change the angularDamping property of the physics body to slow or increase the rate at which the wheel comes to a stop.
class GameScene: SKScene {
var startingAngle:CGFloat?
var startingTime:TimeInterval?
override func didMove(to view: SKView) {
let wheel = SKSpriteNode(imageNamed: "Spaceship")
wheel.name = "wheel"
wheel.setScale(0.5)
wheel.physicsBody = SKPhysicsBody(circleOfRadius: wheel.size.width/2)
// Change this property as needed (increase it to slow faster)
wheel.physicsBody!.angularDamping = 0.25
wheel.physicsBody?.pinned = true
wheel.physicsBody?.affectedByGravity = false
addChild(wheel)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in:self)
let node = atPoint(location)
if node.name == "wheel" {
let dx = location.x - node.position.x
let dy = location.y - node.position.y
// Store angle and current time
startingAngle = atan2(dy, dx)
startingTime = touch.timestamp
node.physicsBody?.angularVelocity = 0
}
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches{
let location = touch.location(in:self)
let node = atPoint(location)
if node.name == "wheel" {
let dx = location.x - node.position.x
let dy = location.y - node.position.y
let angle = atan2(dy, dx)
// Calculate angular velocity; handle wrap at pi/-pi
var deltaAngle = angle - startingAngle!
if abs(deltaAngle) > CGFloat.pi {
if (deltaAngle > 0) {
deltaAngle = deltaAngle - CGFloat.pi * 2
}
else {
deltaAngle = deltaAngle + CGFloat.pi * 2
}
}
let dt = CGFloat(touch.timestamp - startingTime!)
let velocity = deltaAngle / dt
node.physicsBody?.angularVelocity = velocity
// Update angle and time
startingAngle = angle
startingTime = touch.timestamp
}
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
startingAngle = nil
startingTime = nil
}
}
The zRotation of a SKNode is in radians. You can remove your conversion to degrees.
You may wish to do the angle adjustment in the didSimulatePhysics in order to compute the zRotation after physics have been applied. (This may not apply directly to this situation, but is good practice further down the line.)
I tried two set of coodes below.
Code Sample 1
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in: self)
let node = atPoint(location)
guard let safeNode = node.parent else { break }
if safeNode.name == "wheel" {
let wheel = node.parent!
let dx = location.x
let dy = location.y
startingAngle = atan2(dx, dy)
startingTime = touch.timestamp
}
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in: self)
let node = atPoint(location)
guard let safeNode = node.parent else { break }
if safeNode.name == "wheel" {
let wheel = node.parent!
if !isRotating {
let dx = location.x
let dy = location.y
let angle = atan2(dx, dy)
wheel.zRotation = -angle
//update angle and time
startingAngle = angle
startingTime = touch.timestamp
}
}
}
}
Code Sample 2
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in: self)
let node = atPoint(location)
guard let safeNode = node.parent else { break }
if safeNode.name == "wheel" {
let wheel = node.parent!
let dx = location.x
let dy = location.y
startingAngle = atan2(dx, dy)
startingTime = touch.timestamp
}
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in: self)
let node = atPoint(location)
guard let safeNode = node.parent else { break }
if safeNode.name == "wheel" {
let wheel = node.parent!
if !isRotating {
let dx = location.x
let dy = location.y
let angle = atan2(dx, dy)
let deltaAngle = angle - startingAngle!
wheel.zRotation -= deltaAngle
//update angle and time
startingAngle = angle
startingTime = touch.timestamp
}
}
}
}
The only difference between Code Sample 1 & 2 is the method of finding zRotation of the wheel.
Code Sample 1 uses wheel.zRotation = -angle. It ensures wheel follows the finger position exactly. But there is a bug that the wheel will jump position when you touch two distant locations in wheel then move your fingure. I am still unable to fix this bug.
Code Sample 2 uses wheel.zRotation -= deltaAngle to stack the change in angle of each finger movement. It supposes to generate the same result of code sample 1 but it does not exactly follow the finger movement.
I found out the reason by comparing the zPosition of Code Sample 1 and 2 with same finger movement. The deltaAngle in Code Sample 2 is slightly less (up to 8 decimal places)so the wheel does not exactly follow the fingure movement.
override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
for touch: AnyObject in touches {
let location = touch.locationInNode(self)
let previousLocation = touch.previousLocationInNode(self)
var translation = CGPointMake(location.x - previousLocation.x, location.y - previousLocation.y)
crossHair.position = CGPointMake(crossHair.position.x + translation.x * 3, crossHair.position.y + translation.y * 3)
}
}
I have a crosshair on the screen and i can move it using touchesmoved as shown above, but my problem is i don't know how to prevent it from going of the screen. there is the fmaxf & fminf but i am not entirely sure how to use them, any help would be much appreciated.
You can limit the node inside the coordinates using the following code. The following code only checks if the position of the sprite is within the bounds. I assumed the position is at the centre of the sprite.
override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
for touch: AnyObject in touches {
let location = touch.locationInNode(self)
let previousLocation = touch.previousLocationInNode(self)
var translation = CGPointMake(location.x - previousLocation.x, location.y - previousLocation.y)
var positionX : CGFloat = crossHair.position.x + translation.x * 3
var positionY : CGFloat = crossHair.position.y + translation.y * 3
if positionX < 0 {
positionX = 0
}
else if positionX > self.size.width
{
positionX = self.size.width
}
if positionY < 0 {
positionY = 0
}
else if positionY > self.size.height
{
positionY = self.size.height
}
crossHair.position = CGPointMake(positionX, positionY)
}
}
After getting the position of the crosshair, check whether it is not outside of the screen:
var x = crossHair.position.x;
var y = crossHair.position.y;
if(crossHair.position.x > self.size.width) {
x = self.size.width;
}
if(crossHair.position.x < 0) {
x = 0;
}
if(crossHair.position.y > self.size.height) {
y = self.size.height;
}
if(crossHair.position.y < 0) {
y = 0;
}
crossHair.position = CGPointMake(x,y);