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