SpriteKitでテクスチャアトラスを用いたアニメーションを実装する

歩くウパンダアニメーション

アニメーションがごく自然に盛り込まれるアップル社の代表的な製品 iPhone で更にゲームを拵えるとなればアニメーションは必要不可欠で加えて2Dゲームフレームワーク SpriteKit を採用すればぱらぱらアニメの実装が重要となってきますが、 2016年6月17日の記事で紹介したぱらぱらアニメの実装手法 、即ち UIImageView での実装では煩雑故に取り回しが良くなく塩梅悪い場面が多くなってきます。

ところでSpriteKitでは SKNode を単位としてゲーム画面中に取り込むと取り回しが良く楽にもなります。 従って当然の如くSKNode内にはぱらぱらアニメを取り込めるように設計されています。 此の機能、 テクスチャアトラス を用いたアニメーションの実装はゲーム開発には必須となるでしょう。

スポンサーリンク
日付:2014年4月1日
開発機:MacBook Air(11-inch, Mid 2013)
MacOSバージョン:OS X 10.9.2
Xcodeバージョン:5.1
言語:Objective-C
主関連アプリ:うさ犬が行く

参考にしたのはiOSゲーム開発者向けにチュートリアルを提供してくれるサイト Ray Wenderlich の2013年9月24日の記事 アニメーションとテクスチャアトラス でした。

此のページでほぼSpriteKitに於けるテクスチャアトラスを用いたアニメーションのノウハウが網羅されている上、 熊が歩くアニメーション画像データ迄用意されていたので試験的にダウンロードして試せもしたのです。 残念ながら2016年現在は日本語での情報提供は停止されているようでリンク切れとなっていますが 以下のページが英語での当該情報となっているようです。 言語は2013年当時には当然 Objective-C でしたが現在では Swift で解説されていますので英語が苦にならなければ以前よりは助かる場面も多いでしょう。

Sprite Kit Animations and Texture Atlases in Swift

手元では当時ダウンロードしたデータはファイル名が bear1@2x~ipad.png のように文字列ipadを含む連番のデータとなっていて、 此れを其の儘利用すると×印が表示されてしまって困惑しましたが、 bear1@2x.png のようにすべてファイル名からipadを削除したら上手く動いたものです。

此のファイル名の問題や、i=0としたりして指定の画像ではなく Xcodeが表示されるべき画像が見あたらず表示する警告的な×印画像が出たのを解決するのには クラスメソッド株式会社ブログ Developers.IO の2013年9月19日に配信されていた以下ページを参考にしました。

[iOS 7] Sprite Kit の Texture Atlas を使ってみた

取り敢えずこの時点では前者参考サイトに用意されていた シンプルなアニメーション の項目で実際に熊が左右にノソノソ歩くアニメーションを動かす処迄上手く運びました。 アニメーションは少し動くだけでも見ていて楽しいものです。 況して用意するのが大変なアニメーションデータが最初から用意されていて 手元の開発環境の中で動いてくれるですから 困難な開発中にも一服の清涼剤となってくれました。

Going USAINU(邦題: うさ犬が行く)
無料:カテゴリ: ゲーム: 4+ 評価
バージョン: 3.21
リリース: 2015年9月14日
更新: 2022年3月7日
サイズ : 19.7 MB
互換性: iOS 14.4 以降のiPhone、iPod touch に対応。および、macOS 11.0以降とApple M1 チップを搭載したMac に対応。