How to create a blade effect like Fruit Ninja

Sprite Kit Tutorial



Welcome to the first tutorial in this website, This website is intended to share iOS tutorials and give support for my apps/games available on the app store.

On january 18 i uploaded a video called iOS Sprite Kit Game like Fruit Ninja to youtube, a lot of people ask me how to create the blade effect and the requests keep coming so i decided to create this tutorial just to show how i achieved the blade effect.

This is a really simple approach to achieve the blade effect, maybe you will find more complex approaches with better results but this is the way i managed to achieve it and is your decision to use it or not.

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

Shall We start?

Create a new project, select the SpriteKit Template, the project name for this tutorial is SKBladeDemo (or write the name of your choice), in devices iPhone must be selected, click Next and the create.



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

Now open the viewController.m file and modify the viewDidLoad method to look like the following.




// Add the Scene configuration inside ViewDidLoad

- (void)viewDidLoad {
    [super viewDidLoad];

    SKView * skView = (SKView *)self.view;
    skView.showsFPS = YES;
    skView.showsNodeCount = YES;
    
    if (!skView.scene) {
        SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];
        scene.scaleMode = SKSceneScaleModeAspectFill;
        [skView presentScene:scene];
    }
}


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




@implementation MyScene

- (id)initWithSize:(CGSize)size {
    if (self = [super initWithSize:size]) {
        
    }
    
    return self;
}

#pragma mark - SKBlade Functions

- (void)presentBladeAtPosition:(CGPoint)position {

}

- (void)removeBlade {

}

#pragma mark - Touch Events

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {

}

#pragma mark - FPS

- (void)update:(CFTimeInterval)currentTime {

}

@end

Now let's Build and Run to check if everything is working, if everything is working the simulator should look like this.



Good! everything is working, Now you need to download the SKBlade files to create the blade effect, you can download the files here Download SKBlade

Just click the button with title Download Zip, Now you need to add the files to the project.

in Xcode right click on the folder with name SKBladeDemo, then choose Add Files To option.

Now specify the location of the folder with name SKBlade-master, Select the folder and click the Add button.



Now you need to import SKBlade to work with it, inside MyScene.m let's add it below the import of MyScene.h.



#import "MyScene.h"
#import "SKBlade.h"

Still in MyScene.m let's add 2 variables below implementation.




@implementation MyScene {
    // This will help us to easily access the blade
    SKBlade *blade;

    // This will help us to update the position of the blade
    CGPoint _delta;
}

Now let's add new code to the functions below the pragma mark SKBlade Functions




#pragma mark - SKBlade Functions

// This will help us to initialize the blade
- (void)presentBladeAtPosition:(CGPoint)position {
    blade = [[SKBlade alloc] initWithPosition:position TargetNode:self Color:[UIColor whiteColor]];
    
    [self addChild:blade];
}

// This will help us to remove the blade and reset the _delta value
- (void)removeBlade {
    _delta = CGPointZero;
    [blade removeFromParent];
}

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



#pragma mark - Touch Events

// initialize the blade at touch location

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    CGPoint _touchLocation = [[touches anyObject] locationInNode:self];
    [self presentBladeAtPosition:_touchLocation];
}

// _delta value will help us later to properly update the blade position,
// you calculate the diference between currentPoint and previousPosition and store that value in _delta

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    CGPoint _currentPoint = [[touches anyObject] locationInNode:self];
    CGPoint _previousPoint = [[touches anyObject] previousLocationInNode:self];
    
    _delta = CGPointMake(_currentPoint.x - _previousPoint.x, _currentPoint.y - _previousPoint.y);
}

// Remove the Blade if the touches have been cancelled or ended

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    [self removeBlade];
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    [self removeBlade];
}

You need to add new code to the last function below the pragma mark FPS.



#pragma mark - FPS

- (void)update:(CFTimeInterval)currentTime {
    // Here you add the _delta value to the blade position
    blade.position = CGPointMake(blade.position.x + _delta.x, blade.position.y + _delta.y);

    // it's important to reset _delta at this point,
    // you are telling the blade to only update his position when touchesMoved is called
    _delta = CGPointZero;
}

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 the blade is skblade, you can check collisions inside didEvaluateActions with enumerateChildNodesWithName.

Or if you want to work with Apple's Physics System SKBlade 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 SKBlade 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 June 06, 2014 at 09:55 PM by Julio Montoya