SpritekitのSpritenodeに依るアニメの実装

iPhoneアプリ開発に於いてアニメーションの実装方法には UIKitフレームワークを利用したぱらぱらアニメ だったり SpriteKitで地面を無限スクロールする 類（たぐい）のものだったり SpriteKitでテクスチャアトラスを用いたアニメーション だったり updateメソッドを用いた実装 だったりと幾つか本ブログにも紹介しました。 特にゲーム開発に於いては重要な役目を果たすアニメーションでは 引き出しを多く持った方が有利なのは間違い無く 状況に応じて適材適所で手法を適用すれば宜しからんと考えます。 今回は此れ等に加えて Spritekit の Spritenode に依るアニメの実装の事例を記事にしました。

バナナを喰らって1UPするウパンダ
スポンサーリンク
日付：2014年4月10日
開発機：MacBook Air（11-inch, Mid 2013）
MacOSバージョン：OS X 10.9.2
Xcodeバージョン：5.1
言語：Objective-C
主関連アプリ：uPanda Breaks Out Fruits

利用したのは 1up通知アニメ です。 得点が基準点を超えた時点でご褒美にユーザーの利益になるべく残機を増やします。 この際画面に1upのイラストを表示しますが ユーザーの目はウパンダボールを追い掛けているでしょうので アニメーションで変化を付けユーザーに目の端で追って気付いて貰う算段です。 アニメーションとしては表示とともに拡大され少し大き過ぎるところ迄伸び切ったら 反動で少し縮んで此の幅を縮小収斂させながら繰り返す コミカルなアニメーションによく見られるタイプが好適ではないかと考えました。 風船やゴムまりのような此の手のアニメならば同じイラストの縮尺を変化させるだけの ごく軽いてまで実装できるものとの腹積もりもあります。

論理処理、残機数表示処理を施した後に処理するアニメーションの 以下が実装コードになります。

SKSpriteNode *oneup = [[SKSpriteNode alloc] initWithImageNamed:@"oneup.png"];
oneup.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMaxY(self.frame) - 100.0f);
oneup.zPosition = 3.0f;
oneup.xScale = 0.1f;
oneup.yScale = 0.1f;
oneup.alpha = 0.0f;
[self addChild:oneup];
SKAction *moveFadeIn = [SKAction fadeInWithDuration:0.7f];
SKAction *moveScale1 = [SKAction scaleTo:1.0f duration:0.7f];
SKAction *moveScale2 = [SKAction scaleTo:0.8f duration:0.2f];
SKAction *moveScale3 = [SKAction scaleTo:1.0f duration:0.2f];
SKAction *moveWait = [SKAction waitForDuration:0.5f];
SKAction *moveTransparent = [SKAction fadeAlphaTo:0.0f duration:1.0f];
SKAction *moveRemove = [SKAction removeFromParent];
SKAction *skGroup = [SKAction group:@[moveFadeIn, moveScale1]];
SKAction *skSequence = [SKAction sequence:@[moveScale2, moveScale3, moveScale2, moveScale3, moveWait, moveTransparent, moveRemove]];
[oneup runAction:skGroup];
[oneup runAction:skSequence];

SKSpriteNode として oneup なる名称のインスタンスを生成しアニメーションの出現箇所は oneup.position で画面中央の上から100ポイントとほど下がった位置を指定してあります。 アニメーション処理としてのポイントを挙げれば以下の如くなるでしょう。

  • ポイント1.
    基本アクションのインスタンスを生成して其れ等を SKAction::sequence に配列として渡して繋げる
  • ポイント2.
    SKAction::group を利用してフェードインしながら拡大するなどの同時処理を施す
  • ポイント3.
    ウェイト処理 SKAction::waitForDuration が当然の如く用意されているので利用してアニメーションのタイミングを取る
  • ポイント4.
    アニメーションの終了後は SKAction::removeFromParent で確りインスタンスを削除しておく

以上にて1upイラストは目論見通りの動きを軽やかに示してくれました。