How to create a blade effect like Fruit Ninja with Swift

Updated to Swift 3 - Sprite Kit Tutorial



Welcome!, seems that everybody have gone crazy about Apple's Swift, that's why today i'll show you how to create a blade effect using Swift, Now you don't have excuses to apply the blade effect in your projects.

f you have no knowledge of programming or you are new to Swift don't worry, in this tutorial i'll guide you step by step with a new project.

Shall We start?

Open X-Code 8 and select Create a New X-Code Project, select the Game template and click next.

Write the Product Name of your choice, in Language select Swift, in Game Technology select SpriteKit, in Devices select iPhone and click Next.

In Device Orientation only Landscape Left or Landscape Right must be checked.

You need to download the files that will create the blade, download the files from Github: Download SWBlade

You need to add the downloaded files to the project, right click on your project directory and select the option Add Files To, Now specify the location of the folder with name SWBlade-master, Select the folder and click the Add button.


Open GameScene.swift, lets add new content and clean it a little to look like the following.



import SpriteKit

class GameScene: SKScene {
    
  override func didMove(to view: SKView) {
    backgroundColor = .black
  }
  
  // MARK: - SWBlade Functions
  
  func presentBladeAtPosition(_ position:CGPoint) {

  }
  
  func removeBlade() {

  }
  
  // MARK: - Touch Events
 
  override func touchesBegan(_ touches: Set, with event: UIEvent?) {

  }
  
  override func touchesMoved(_ touches: Set, with event: UIEvent?) {

  }
  
  override func touchesEnded(_ touches: Set, with event: UIEvent?) {

  }
  
  override func touchesCancelled(_ touches: Set, with event: UIEvent?) {

  }
  
  // MARK: - FPS
  
  override func update(_ currentTime: TimeInterval) {

  }
}

Now let's Build and Run to check that everything it's working, if you have no errors the simulator should look like the following.



Let's add 2 new variables inside the GameScene class.



class GameScene: SKScene {
  // This optional variable will help you to easily access the blade
  var blade: SWBlade?
  
  // This will help you to update the position of the blade
  // Set the initial value to 0
  var delta: CGPoint = .zero

  .......

Now let's add new code to the functions below the MARK - SWBlade Functions



 // MARK: - SWBlade Functions
  
  // This will help you to initialize our blade
  func presentBladeAtPosition(_ position:CGPoint) {
    blade = SWBlade(position: position, target: self, color: .white)
    
    guard let blade = blade else {
      fatalError("Blade could not be created")
    }
    
    addChild(blade)
  }
  
  // This will help you to remove the blade and reset the delta value
  func removeBlade() {
    delta = .zero
    blade!.removeFromParent()
  }

Now you need to add new code to the functions below the MARK - Touch Events, all functions should look like this.



  // MARK: - Touch Events
  
  // initialize the blade at touch location
  override func touchesBegan(_ touches: Set, with event: UIEvent?) {
    guard let touch = touches.first else {
      return
    }
    let touchLocation = touch.location(in: self)
    presentBladeAtPosition(touchLocation)
  }
  
  // delta value will help you later to properly update the blade position,
  // Calculate the difference between currentPoint and previousPosition and store that value in delta
  override func touchesMoved(_ touches: Set, with event: UIEvent?) {
    guard let touch = touches.first else {
      return
    }
    let currentPoint = touch.location(in: self)
    let previousPoint = touch.previousLocation(in: self)
    delta = CGPoint(x: currentPoint.x - previousPoint.x, y: currentPoint.y - previousPoint.y)
  }
  
  // Remove the Blade if the touches have been cancelled or ended
  override func touchesEnded(_ touches: Set, with event: UIEvent?) {
    removeBlade()
  }
  
  override func touchesCancelled(_ touches: Set, with event: UIEvent?) {
    removeBlade()
  }

You need to add new code to the last function below the MARK - FPS.



  // MARK: - FPS
  
  override func update(_ currentTime: TimeInterval) {
    // if the blade is not available return
    guard let blade = blade else {
      return
    }
    
    // Here you add the delta value to the blade position
    let newPosition = CGPoint(x: blade.position.x + delta.x, y: blade.position.y + delta.y)
    // Set the new position
    blade.position = newPosition
    // it's important to reset delta at this point,
    // You are telling the blade to only update his position when touchesMoved is called
    delta = .zero
  }

Believe it or not that's all you need to do to create the blade effect, Build and Run to see the results



it's working!!


Seems that this is the end of the tutorial, now is your turn to play with the blade and integrate it into your project.

what's next?

Here you can download the Final Project

Now that you have a functional blade you should try to add collisions to it, You should try this on your own as challenge, Let me help you with some hints.

The default name of our blade is skblade, you can check collisions inside didEvaluateActions with enumerateChildNodesWithName.

Or if you want to work with Apple's Physics System SWBlade comes with a function called enablePhysics, just provide CategoryBitmask, ContactTestBitmask, CollisionBitmask and your blade will be ready to handle Physics.

i hope you find this tutorial helpful and i hope SWBlade will help you in your future projects.

If you liked this tutorial please share it with your friends or click the tweet button, that will help me to create more tutorials like this.

Feel free to leave a comment if you need help or if you just want say hi.


Go Back

  Posted on January 29, 2017 at 12:20 AM by Julio Montoya