Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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」に変更します。
スクリーンショット 2016-03-14 13.38.31.png

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

本来なら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の背景を黒に変更してみるとわかりやすいかと。

Takumi_Mori
iOSプログラマです。稀にAndroidとかもやります。
http://d.hatena.ne.jp/corrupt/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした