読者です 読者をやめる 読者になる 読者になる

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

SpriteKitでパーティクルを表示してみよう

今回のエンジニアブログ担当の近藤です。
iOS7で追加された新機能「SpriteKit」を紹介します。
今回はSpriteKit機能のひとつのパーティクルを使ってみましょう。

プロジェクト作成

Xcodeでプロジェクトを新規作成します。
SpriteKitを使うには「SpriteKit Game」テンプレートを選択します。
これでSpriteKitを使用できるプロジェクトが作成されます。
テンプレート名に「Game」の文字があるので、ゲーム開発向けの機能の様ですね。
spritekit1

ViewControllerの中身を少しのぞいてみましょう。
作成されたViewControllerのViewDidLoadメソッドでシーンを作成して、
画面いっぱいに表示させているのがわかります。
このシーン上でパーティクルやスプライトなどのオブジェクトを配置していくことで、
アプリを作っていく仕掛けになっています。
なんとなくcocos2dっぽい感じですね。
spritekit2

パーティクルの作成

次に画面に表示するパーティクルを作成します。
左側のウィンドウから右クリックメニューを開き、「New File」を選択します。
spritekit3

今回はスプライトを使うので、「SpriteKit Particle File」を選択します。
spritekit4

パーティクルの種類は8種類あります。
今回は「Spark」にしました。
spritekit5

パーティクルのファイル名を決めます。わかりやすいファイル名をつけましょう。
これでパーティクルのファイルが完成です。
spritekit6

作成したパーティクルのファイルが追加されているので、
開いてみるとアニメーションするパーティクルが表示されます。
※ここでは静止画ですがXcodeで実際に開くとアニメーションしています。
spritekit7

右側のペインでパーティクルのパラメータを変更することで、
パーティクルの色や大きさ、動きなどを細かく設定することができます。
青くしてスピードを変更してみましたが、ここは好きなように変更してください。
spritekit8

実装

パーティクルが完成したので、いよいよ実装です。
パーティクルなどのSpriteKitのオブジェクトはMyScene.mで実装することで配置できます。
下記のように書き換えてみましょう。

【MyScene.m】

#import "MyScene.h"  
  
@implementation MyScene  
SKEmitterNode *emitter;  
  
-(id)initWithSize:(CGSize)size {      
    if (self = [super initWithSize:size]) {  
        /* Setup your scene here */  
          
        self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];  
  
        //パーティクルファイルの読み込み  
        emitter = [NSKeyedUnarchiver unarchiveObjectWithFile:  
                       [[NSBundle mainBundle] pathForResource:@"sparkParticle"  
                                                              ofType:@"sks"]];  
        emitter.position = CGPointMake(160,234);  
        emitter.targetNode = self.scene;  
        [self addChild:emitter];  
          
 }  
    return self;  
}  
  
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{  
    /* Called when a touch begins */  
      
    for (UITouch *touch in touches) {  
        //ドラッグした位置にパーティクルを移動する。  
        CGPoint location = [touch locationInNode:self];  
        emitter.position = location;  
    }  
}  
  
-(void)update:(CFTimeInterval)currentTime {  
    /* Called before each frame is rendered */  
}  
  
@end  

上記のように実装すると画面上にパーティクルが表示され、
ドラッグするとパーティクルが指の動きについてきます。

spritekit9

今までiOS用のゲームを作るときはUiKitだけでリッチな表現ができず、cocos2dなどのフレームワークを使うことが多かったと思います。
しかし、SpriteKitを使うことでサードパーティのフレームワークに頼らずにゲームを作ることができるようになりました。
Androidとのクロスプラットフォームでの開発を考慮しなければ、Apple純正機能だけで開発を進められるので、より開発しやすくなるのでは?と期待しています。
今回はパーティクルを表示するところだけを紹介しましたが、次回以降でほかの機能も紹介していこうと思います。