Moving a Sprite along a UIBezierPath - ios

I have been having some trouble moving a Sprite along a UIBezierPath. I am getting this path from my view controller and it is passing along the correct path. Any ideas on why this isn't animating? Eventually I want to be able to move multiple sprites along different bezier paths.
func play(){
let img = SKSpriteNode(imageNamed:"ball.png")
img.position = CGPoint(x: self.frame.size.width/4, y: self.frame.size.height/4)
self.addChild(img)
new_path = viewController.path //UIBezierPath is being returned
let followPath = SKAction.follow(new_path.cgPath, asOffset: true, orientToPath: false, duration: 5.0)
img.run(followPath)
}
I am trying to draw a bezier path here(Kind of like a whiteboard app)in a custom view and then access the bezier path when I want to animate it. The path seems to be passed through correctly.
private var path: UIBezierPath!
let newpath = UIBezierPath()
func initBezierPath() {
path = UIBezierPath()
path.lineCapStyle = CGLineCap.round
path.lineJoinStyle = CGLineJoin.round
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
let touch: AnyObject? = touches.first
lastPoint = touch!.location(in: self)
pointCounter = 0
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
let touch: AnyObject? = touches.first
let newPoint = touch!.location(in: self)
path.move(to: lastPoint)
path.addLine(to: newPoint)
lastPoint = newPoint
pointCounter += 1
if pointCounter == pointLimit {
pointCounter = 0
renderToImage()
setNeedsDisplay()
newpath.append(path)
path.removeAllPoints()
}
else {
setNeedsDisplay()
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
pointCounter = 0
renderToImage()
setNeedsDisplay()
newpath.append(path)
path.removeAllPoints()
}

Related

How to prevent that an accidental touch triggering the touchesBegan in swift 4.2?

I have an App that uses touchesBegan to perform an action for the user. However, sometimes touching the screen is only to leave a textField.
Is there any way to set the touchesBeagan to only start after 2 or 3 seconds while keeping the touch and if the touch is smaller than this, instead of triggering the action, the resignFirstResponder is triggered?
To help to understanding here are my touches methods:
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
Feedback.share.hapticFeedback()
startPoint = nil
guard let touch = touches.first else {return}
startPoint = touch.location(in: imageView)
//Initialize whatever you need to begin showing selected rectangle below.
rectShapeLayer.path = nil
imageView.layer.addSublayer(rectShapeLayer)
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first, let startPoint = startPoint else {return}
let currentPoint: CGPoint
if let predicted = event?.predictedTouches(for: touch), let lastPoint = predicted.last {
currentPoint = lastPoint.location(in: imageView)
} else {
currentPoint = touch.location(in: imageView)
}
let frame = rect(from: startPoint, to: currentPoint)
//Show bounding box
rectShapeLayer.path = UIBezierPath(rect: frame).cgPath
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first, let startPoint = startPoint else {return}
let currentPoint = touch.location(in: imageView)
let frame = rect(from: startPoint, to: currentPoint)
//Remove bounding box but take snapshot of selected `CGRect` by frame
rectShapeLayer.removeFromSuperlayer()
let memeImage = imageView.snapshot(rect: frame, afterScreenUpdates: true)
save(imageView: imageView, image: memeImage)
}
I found out a way to guarantee that a touch on the screen it just execute a resignFirstResponder instead of other function.
I only changed the touchesEnded(_:) method adding an "if frame.size.width < 1".
That worked well for me.
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first, let startPoint = startPoint else {return}
let currentPoint = touch.location(in: ivPhoto)
let frame = rect(from: startPoint, to: currentPoint)
rectShapeLayer.removeFromSuperlayer()
if frame.size.width < 1 {
tfTop.resignFirstResponder()
tfBottom.resignFirstResponder()
} else {
let memeImage = ivPhoto.snapshot(rect: frame, afterScreenUpdates: true)
saveCrop(cropImage: memeImage)
}
}

SpriteKit interplay between line and node: line should give a direction and speed to the node

I would like to have the following interplay between line and ball in my game: a line gives direction and speed to the ball. The longer the line, the faster the ball.
What I have now: a ball is following the line and stops at the end of it. But it shouldn't stop here. Of course, I understand that the ball is only following the path I made. But how could I change it?
Here is my code:
import SpriteKit
import GameplayKit
class GameScene: SKScene, SKPhysicsContactDelegate {
// Basic for dynamic sizes step01
var width = CGFloat()
var height = CGFloat()
var ball:SKSpriteNode!
var line:SKShapeNode!
var startPoint: CGPoint!
var location = CGPoint()
override func didMove(to view: SKView) {
self.backgroundColor = .purple
//declare dynamic size of the screen
width = self.frame.size.width
height = self.frame.size.height
self.physicsBody = SKPhysicsBody(edgeLoopFrom: frame)
self.physicsWorld.gravity = CGVector.zero
createBall()
}
func createBall(){
ball = SKSpriteNode(imageNamed: "yellowBtn")
ball.position = CGPoint(x:0, y: -(height/2.5))
ball.size = CGSize(width: width/6, height: width/6)
self.addChild(ball)
}
func drawLine(endPoint:CGPoint){
if(line != nil ){ line.removeFromParent() }
startPoint = ball.position
let path = CGMutablePath()
path.move(to: startPoint)
path.addLine(to: endPoint)
line = SKShapeNode()
line.path = path
line.lineWidth = 5
line.strokeColor = UIColor.white
self.addChild(line)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if(line != nil ){ line.removeFromParent()
for touch in (touches ) {
let location = touch.location(in: self)
drawLine(endPoint: location)
}
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in (touches ) {
let location = touch.location(in: self)
drawLine(endPoint: location)
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in (touches ) {
location = touch.location(in: self)
drawLine(endPoint: location)
}
let moveAction = SKAction.move(to: location, duration: 10)
ball.run(moveAction)
}
override func update(_ currentTime: TimeInterval) {
}
}
I have found at least a part of answer to my question: I need to calculate CGVector manually (lastPoint - firstPoint) and then apply impulse to the ball:
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in (touches ) {
location = touch.location(in: self)
drawLine(endPoint: location)
}
let dx = location.x - startPoint.x
let dy = location.y - startPoint.y
let movement = CGVector(dx: dx, dy: dy)
ball.physicsBody = SKPhysicsBody(circleOfRadius: 50)
ball.physicsBody?.applyImpulse(movement)
}
Now I should find the second part: how to set the speed of the ball accordingly to the length of the line.

Drawing lines with core graphics

I want to draw more than one straight line in core graphics. or save the line and start a new one. I used two variables for touch location and assigned touch location to them in touch Began,Moved,Ended then I used this:
override func draw(_ rect: CGRect) {
let context = UIGraphicsGetCurrentContext()
context?.setStrokeColor(UIColor(red: 0, green: 0, blue: 0, alpha: 1.0).cgColor)
context?.setLineWidth(5.0)
context?.move(to: CGPoint(x: firstTouchLocation.x, y: firstTouchLocation.y))
context?.addLine(to: CGPoint(x: lastTouchLocation.x, y: lastTouchLocation.y))
context?.strokePath()
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
firstTouchLocation = touch.location(in: self)
lastTouchLocation = firstTouchLocation
setNeedsDisplay()
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
lastTouchLocation = touch.location(in: self)
setNeedsDisplay()
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
lastTouchLocation = touch.location(in: self)
setNeedsDisplay()
}
}
Try drawing the line using CAShapeLayer like so:
func addLine(fromPoint start: CGPoint, toPoint end:CGPoint) {
let line = CAShapeLayer()
let linePath = UIBezierPath()
linePath.move(to: start)
linePath.addLine(to: end)
line.path = linePath.cgPath
line.strokeColor = UIColor.red.cgColor
line.lineWidth = 1
line.lineJoin = kCALineJoinRound
self.view.layer.addSublayer(line)
}
Hope this helps!
You got to have a model object which represent a line say ex: LineAnnotation. LineAnnotation will hold start and end points, color and many others details about the line. Hold every LineAnnotation(line) in an array. Iterate through this array and draw line one by one. In your case are drawing using latest data. Previous points which are drawn will e refreshed when you call setNeedsDisplay()
As per apples documentation(https://developer.apple.com/documentation/uikit/uiview/1622437-setneedsdisplay) setNeedsDisplay method redraws your view, so you are left with fresh view with latest line only.
To solve your problem simply pull your code in a method and call that method whenever you made a touch.
override func draw(_ rect: CGRect) {
drawLine()
}
func drawLine()
{
let context = UIGraphicsGetCurrentContext()
context?.setStrokeColor(UIColor(red: 0, green: 0, blue: 0, alpha: 1.0).cgColor)
context?.setLineWidth(5.0)
context?.move(to: CGPoint(x: firstTouchLocation.x, y: firstTouchLocation.y))
context?.addLine(to: CGPoint(x: lastTouchLocation.x, y: lastTouchLocation.y))
context?.strokePath()
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
firstTouchLocation = touch.location(in: self)
lastTouchLocation = firstTouchLocation
drawLine()
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
lastTouchLocation = touch.location(in: self)
drawLine()
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first {
lastTouchLocation = touch.location(in: self)
drawLine()
}
}

Nodes in SKShapeNode reappearing when creating another new node

Im trying to write the code for a line that draws with the drag of a finger but deletes when the finger is removed (in SpriteKit and Swift 3)
var shapeNodes = [SKShapeNode]()
var pathToDraw = CGMutablePath()
var lineNode = SKShapeNode()
func deleteAllShapeNodes() {
for node in shapeNodes {
node.removeFromParent()
}
shapeNodes.removeAll(keepingCapacity: false)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch: AnyObject in touches {
firstPoint = touch.location(in: self)
}
shapeNodes.append(lineNode)
pathToDraw.move(to: CGPoint(x: firstPoint.x, y: firstPoint.y))
lineNode.lineWidth = 4
lineNode.strokeColor = UIColor.white
lineNode.name = "Line"
lineNode.zPosition = 100000
lineNode.path = pathToDraw
self.addChild(lineNode)
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch: AnyObject in touches{
positionInScene = touch.location(in: self)
}
shapeNodes.append(lineNode)
pathToDraw.addLine(to: CGPoint(x: positionInScene.x, y: positionInScene.y))
lineNode.path = pathToDraw
firstPoint = positionInScene
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch: AnyObject in touches{
TouchEndPosition = touch.location(in: self)
}
self.deleteAllShapeNodes()
}
the first line draws and deletes perfectly but when i start drawing the second line the first line reappears.
Creating a brand-new CGMutablePath seems to be the only way to get an empty CGMutablePath.
And you are adding the only instance of SKShapeNode (kept in lineNode) into shapeNodes, it's non-sense. Your lineNode keeps all the lines you added to your pathToDraw.
Generally, you may need to learn when to instantiate objects, and when to release them.
Try this:
//### You are adding the same instance multiple times into this array, it's nonsense.
//var shapeNodes = [SKShapeNode]()
//### `pathToDraw` can be kept in the `SKShapeNode`.
//var pathToDraw = CGMutablePath()
//### In this case, this is not a good place to instantiate an `SKShapeNode`.
var lineNode: SKShapeNode?
func deleteAllShapeNodes() {
//### Release the `SKShapeNode` contained in `lineNode` to delete all lines.
lineNode?.removeFromParent()
lineNode = nil
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
let firstPoint = touches.first!.location(in: self)
self.lineNode?.removeFromParent()
//### If you want somethings which live while dragging, `touchesBegan(_:with:)` is a good place to instantiate them.
let lineNode = SKShapeNode()
//### Create an empty new `CGMutablePath` at each `touchesBegan(_:with:)`.
let pathToDraw = CGMutablePath()
self.lineNode = lineNode
pathToDraw.move(to: firstPoint)
lineNode.lineWidth = 4
lineNode.strokeColor = UIColor.white
lineNode.name = "Line"
lineNode.zPosition = 100000
//### `pathToDraw` is kept in the `SKShapeNode`.
lineNode.path = pathToDraw
self.addChild(lineNode)
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
let positionInScene = touches.first!.location(in: self)
if let lineNode = self.lineNode {
//### Modify the `CGMutablePath` kept in the `SKShapeNode`.
let pathToDraw = lineNode.path as! CGMutablePath
pathToDraw.addLine(to: positionInScene)
//### Refresh the shape of the `SKShapeNode`.
lineNode.path = pathToDraw
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
self.deleteAllShapeNodes()
}

Artefacts drawing lines in Swift Xcode

The below class attaches to a UIView and draws lines while moving a finger across the screen. However, when moving a finger very fast from left to right moving from top to bottom, the drawing temporarily shows sharp pointy edges on changing direction. This occurs both on the device and simulator.
What is causing this issue and how can this artefact be eliminated in the code so that only smooth rounded, not sharp edges are seen when changing direction fast?
class drawLine: UIView
{
var comittedSegments: Int = 0
var points = [CGPoint]()
var committedPath = UIBezierPath()
var drawPath = UIBezierPath()
var incrementalImage: UIImage?
var strokeColor:UIColor?
override func drawRect(rect: CGRect) {
autoreleasepool {
incrementalImage?.drawInRect(rect)
strokeColor = UIColor.darkGrayColor()
strokeColor?.setStroke()
drawPath.lineWidth = 20
drawPath.lineCapStyle = CGLineCap.Round
drawPath.stroke()
}
}
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
let touch: AnyObject? = touches.first
comittedSegments = 0
committedPath.removeAllPoints()
points.removeAll()
points.append( touch!.locationInView(self) )
}
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
let touch: AnyObject? = touches.first
let point = touch!.locationInView(self)
points.append( point )
if points.count == 5
{
points[3] = CGPointMake((points[2].x + points[4].x)/2.0, (points[2].y + points[4].y)/2.0)
committedPath.moveToPoint(points[0])
committedPath.addCurveToPoint(points[3], controlPoint1: points[1], controlPoint2: points[2])
comittedSegments = comittedSegments + 1
self.setNeedsDisplay()
points[0] = points[3]
points[1] = points[4]
points.removeRange(2...4)
drawPath = committedPath
}
else if points.count > 1
{
drawPath = committedPath.copy() as! UIBezierPath
drawPath.CGPath = committedPath.CGPath
drawPath.moveToPoint( points[0] )
for point in points[1..<points.count] {
drawPath.addLineToPoint(point)
}
self.setNeedsDisplay()
}
}
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
self.drawBitmap()
self.setNeedsDisplay()
committedPath.removeAllPoints()
points.removeAll()
}
override func touchesCancelled(touches: Set<UITouch>?, withEvent event: UIEvent?) {
self.touchesEnded(touches!, withEvent: event)
}
func drawBitmap() {
UIGraphicsBeginImageContextWithOptions(self.bounds.size, true, 0.0)
strokeColor?.setStroke()
if(incrementalImage == nil) {
let rectPath:UIBezierPath = UIBezierPath(rect: self.bounds)
UIColor.whiteColor().setFill()
rectPath.fill()
}
incrementalImage?.drawAtPoint(CGPointZero)
committedPath.stroke()
incrementalImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
}
}
In addition to setting lineCapStyle, set lineJoinStyle:
drawPath.lineJoinStyle = .Round
drawPath.lineCapStyle = .Round

Resources