【アプリ開発】初心者のiPhoneアプリ開発入門 その8 アニメーションの作成
【スポンサーリンク】
今回は画像を複数枚使ったアニメーションを作成する。やっぱりアプリにはアニメーションがないと始まらない。
画像を使ったアニメーションの実装方法はいくつかあるみたいなので一例として見て欲しい。
目次：
前回のおさらい
前回は下記の記事で新規プロジェクトを作成して、縦スクロールとフリックを実装した。また、実装する際には関数を使った。今回もアニメーションの部分を関数を使って実装していくのでよくわからない人は下記を読んでからこの記事を読んでほしい。
画像の準備
アプリ実装の際のアニメーションは昔でいうパラパラ漫画的な感じで実装するため複数枚の画像が必要になる。
今回は下記のサイトから画像は拝借した。
「Download the art from BearImages Art.」という部分から画像のダウンロードが可能だ。
zip形式のファイルなので解凍を行い解凍したフォルダーの中にある「Bearimages.atlas」フォルダーを丸々プロジェクトの中に放り込もう。
これで画像の準備が完了。
アニメーションの実装 - 画像読み込み
いよいよアニメーションの実装に移る。
実装の流れとしては
- animateBearという関数を作成。
- 「SKTextureAtlas」と言うのでクマの画像フォルダーを読み込ませる。
- 解像度に適したクマの画像を格納する配列を用意
- 画像の枚数をカウント
- 解像度に適した画像の枚数分ループさせ「2」で用意した配列に格納
- これでアニメーションさせる準備が完了
一旦はここまでの内容を上記に記載した画像の拝借元のサイトを真似てプログラムで書いてみた。
今回のコードのポイントは2つ。
「i++」はもう推奨されていない
for文を使いループさせる所で元のコードでは 「i++」を使っているがこの記述方法は推奨されないというWarningが出たため「i+=1」に書き換えた。
for文で回す際に「画像枚数 / 2」を行う理由
今回のコードでは画像の枚数を取得しループを回す所で枚数分ではなく枚数の半分の回数しかループをさせないようにしている。この理由としては、今回の画像フォルダーではretina用とretina用ではない2種類の解像度の画像が準備されている。そしてこれらを同時に使う事は無いので、どちらか片方の解像度用の画像を読み込めば事が足りる。と言うことでどちらか片方で良いので半分しかループを回さないようにしている。もしこのフォルダーに3種類の解像度の画像が用意されていた場合は2ではなく3で割る事になる。
ここまでのコードが書き終わったら次はアニメーションをさせるコードと実際にクマを配置するコードを書いていく。
アニメーションの実装 - 画像を配置
さて、今度は画像の配置をしていく。
方法は今まで画像を配置していた方法と似ているが異なる点としては配置する画像は先程読み込んだクマの画像の一番最初という事。（1フレーム目）
なので実装の流れとしては下記のようになる。
- walkFramesにクマのアニメーションの画像が複数入っているので配列の1つ目（0番）を最初のコマとして格納。
- SKSpriteNodeとして1コマ目をbearとして登録
- クマの座標を指定
- クマを描画
この流れをコードにすると下記のようになる。
ここまで出来たら「didMoveToView」の一番最後に「animateBear」の関数を呼び出すコードを書き実行してみよう。
実行結果
ん？
画像が表示されない
となった人が多いのではないだろうか。
クマの画像フォルダを開きファイル名をよく見てみると「iPad」と記載されていた。
これはiPad用の画像だった模様。と言うことでXcodeの左上の方からシミュレーターをiPhoneからiPadに切り替える。
そして再実行
クマが表示された！
が、しかしどうやらシャイな用で背景の後ろに隠れているではないか。
これは以前にもあった問題でzPositionを指定し重なり順序を指定してあげれば良い。
zPositionが解らない人は下記を読んで欲しい。
今回は「groundImage.zPosition = 100」、「bear.zPosition = 200」を設定した。
実行結果が下記だ。
空飛ぶクマ（みたいな）の出来上がりだ。
ここまで来たら後はアニメーションをさせるだけ。
アニメーションの実装 - repeatActionForever
今回はrepeatActionForeverというのを使ってアニメーションを作っていく。流れとしては下記のようになる。
- 画像の入った配列を用意（既に上で準備済み）
-
animateWithTexturesを使う
- 画像毎の表示秒数を設定
- 上記をrepeatActionForeverで無限ループさせる
これを書いたコードが下記になる。
追加場所はbearをaddChildした直後だ。
これを実行すると・・・・
画像だと解りづらいがクマが歩くアニメーションをしているはずだ。
これでアニメーションの実装が完了。
まとめ
今回は複数の画像を使ってパラパラアニメ風のアニメーションを作成した。
アニメーションはゲームアプリを作る際に必須と言ってもいいほど多様するのでこの機会に是非慣れておこう。
次回は物理シミュレーションというのを使って衝突判定について書いていく予定。
コードのツッコミとかあれば大歓迎です。
では今回はこの辺で。
