SpriteKitで簡単にParticleを導入してみる #iOS

UIKitをベースに作成しているアプリである状態を達成したときに、
簡単なアニメーションを入れて欲しいと言われて確認したらパーティクルで
アニメーションしてました。

仕方なく実装してみたところ、意外とアニメーションの作成も導入も簡単だったので
覚え書きも含めて書いておくことにしました。

準備

パーティクルを作成する

以下の記事を参考にさせていただきました。
【SpriteKit】爆発や雪などの表現ができる「Particle File」について

今回は適当にタップさせたところにアニメーションを入れてみようと思うので、
とりあえずSparkを選択して作成。

・Particle
Birthrateが5,000はちょっと多すぎるので、適当に500くらいに。
タップするときに弾けて欲しいが、そんなに長時間アニメーションして欲しくも無いので
Maximumを50くらいにしてすぐに生成が終了するように調整します。

・PositionRange
別にX座標にランダム性は必要無いので0に変更しておきます。

その他は適当に、記事を参考にいろいろいじってみると面白いと思います。
こんなに簡単に、XcodeからParticleが作成できるようになっているとは……。

実装

Frameworkの追加

当然ですが、「SpriteKit.framework」を追加しましょう。

SKViewの追加

ここからの実装には、以下の記事が参考になります。Swiftですが。
まだiOSでリッチな演出に疲弊してるの？

適当にUIViewを追加し、Classを「SKView」に変更します。

タップしたポイントでパーティクルを実行

本来ならSKSceneのサブクラスを作成して、そちらに全部処理を任せますが
とりあえず全部、UIViewControllerに書いてしまいます。

先ほど追加したSKViewのオブジェクトと、SKSceneのメンバ変数を追加しておきます。

#import "ViewController.h"

@import SpriteKit;
@interface ViewController ()
@property (strong, nonatomic) SKScene *sparkScene;
@property (weak, nonatomic) IBOutlet SKView *skView;

@end

SKViewは演出に使うだけなので、イベントなどを透過させます。

- (void)viewDidLoad {
    [super viewDidLoad];
    // タップイベントを透過させます
    self.skView.userInteractionEnabled = NO;
    self.skView.allowsTransparency = YES;

    self.sparkScene = [SKScene sceneWithSize:self.view.bounds.size];
    [self.sparkScene setBackgroundColor:[UIColor clearColor]];
    [self.skView presentScene:self.sparkScene];
}

適当にタップしたところでパーティクルが実行されるように実装します。
UIViewの座標は左上を(0,0)としていますが、SKViewでは左下が(0,0)になっています。
そのため、Y座標を反転させる必要があります。

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    for (UITouch *touch in touches) {
        CGPoint location = [touch locationInView:self.view];
        // 
        [self sparkOnTouchPoint:CGPointMake(location.x, self.view.bounds.size.height - location.y)];
    }
}

- (void)sparkOnTouchPoint:(CGPoint)point {
    NSString *firePath = [[NSBundle mainBundle] pathForResource:@"MyParticle" ofType:@"sks"];
    SKEmitterNode *spark = [NSKeyedUnarchiver unarchiveObjectWithFile:firePath];

    spark.position = point;

    SKAction *fadeOut = [SKAction fadeOutWithDuration:.5f];
    SKAction *remove = [SKAction removeFromParent];
    SKAction *sequence = [SKAction sequence:@[fadeOut, remove]];

    [self.sparkScene addChild:spark];

    [spark runAction:sequence];
}

これで、画面内を適当にタップすることでアニメーションが実行されるのがわかると思います
背景が白でわかりづらければUIViewControllerの背景を黒に変更してみるとわかりやすいかと。