テクスチャアトラスを用いたキャラクターアニメの追加とphysicsBody

キャラクターほんまる

テクスチャアトラスを用いてiPhoneゲームアプリにアニメーションを追加する記事を 幾つか配信して来ましたが参考サイトに素材迄頼る飽く迄試験的な試行でした。

オリジナルゲームを開発するのですからオリジナルのキャラクターを用いるのは必定、 耳で羽搏き空を飛べる うさ犬 なる種族に属する ほんまる と称す右上に表示されるキャラクターを追加すべく試行するのですが ゲームとしては此のキャラクターが地面と接触すると減点となる仕様を基本とします。 従ってほんまるには勿論地面の側にも一定の仕掛けが必要となってきます。

SpriteKitでテクスチャアトラスを用いたアニメーションを移動させる

ゲーム開発に於いては勢いアニメーションに紙幅を割かざるをえませんが UIにアニメーションを有効活用するiPhoneアプリとなれば尚更でしょう。 ブログにすれば記事数は増える道理です。 本ブログには2016年6月28日の記事 で先ずキャラクターにアニメーションさせ、 2016年7月3日の記事 にてはアニメーションの向きを変えさせしめましたが、 未だ足踏みに留まる処でしたので 加えてキャラクターにiPhone画面上を縦横無尽に動き回らせたいと思うのが人情でしょう。

あちらこちらに動き回るウパンダ

例に依って参考情報の教示を受けたのは Ray Wenderlich の2013年9月24日の記事 アニメーションとテクスチャアトラス にて現在では英語に依るプログラム言語を Objective-C から Swift に書き換え2015年2月4日に配信された以下の情報ページです。

SpriteKitでテクスチャアトラスを用いたアニメーションの向きを変える

参考サイトの素材迄利用させて貰って 本ブログ2016年6月28日の記事 では取り敢えずiPhone上で動かし得たアニメーションでしたが、 その際参考にするばかりかアニメーション用画像素材迄提供を受けた Ray Wenderlich の2013年9月24日の記事 アニメーションとテクスチャアトラス では更に関連情報が記載されています。 今回はSpriteKitでテクスチャアトラスを用いたアニメーションを採用するに当たって理解を深めるために 其の内容を実践してみました。

因みに現在では Ray Wenderlich では此処で参考にした日本語の情報 は削除されていますが なお英語に依る当該ページが用意されています。 ただし此処で参考にした際は Objective-C に於ける情報でしたが現在は現状を踏まえ Swift に置き換えられた情報が提供されています。

左右にアニメーションするウパンダ

スプラッシュ画面(ローンチイメージ)を表示する

iPhoneアプリが起動された際にユーザーが最初に目にする画面が スプラッシュ画面 です。 時には凝ったスプラッシュ画面を見れば楽しくなりますし 上手にブランディング構築に利用されているのを目にすれば成る程と思わず首肯せしめられるのです。

手元の開発アプリにもスプラッシュ画面の表示は必須とはなるのですが さて最初ですので凝ったものより単なる画像、 ローンチイメージ で先ずは手堅く構築するに思い定めた次第。

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

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

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

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

SpriteKitで地面を無限スクロールする

開発するiPhoneゲームアプリでは 耳で空を飛べる特殊能力を持つキャラクターの うさ犬 を何処まで遠く飛ばせるかを競うものにしたいと考えました。 ゲーム画面としてはうさ犬を中央に配置して 地面の側をスクロールして飛んでいるように見せる ゲームとしては定番の処理を施す目論見です。

地面の無限スクロール

然うとなると地面は無限にスクロールしなければなりません。 但し無限の横幅を持つ地面の画像を用意するのは不可能です。 其処で此れ又ゲームとしては定番の処理として 一定幅の地面の画像が右からスクロールして左に消えると同時にタイミング良く同じ画像インスタンスを生成し 繰り返しスクロールさせて恰も無限に地面が続くように見せる手法を用います。

UIColorでRGBを使用する

チューブ入り絵の具

Xcodeで色を使用するに於いて最も基本的な方法は標準的フレームワーク UIKitUIColor クラスを使用します。 其の際、色を指定するのにRGB夫々に於いて値は0から1の間で示される小数である必要から 16進カラーを小数変換する (2016年5月21日)処理を施しました。

処で此の如く簡略化しても未だ煩わしく 更にコード記述を省力化出来る方法はないかと探しせば サイト成長の果実 の2011年12月3日の記事として以下リンク先に見える如き もっと手軽にWeb式RGB指定出来る方法が共有されていました。

タイトル画面でぱらぱらアニメを実装する

居眠りするウパンダ

iPhoneに限らずアップル社の製品ではアニメーションが多用され ユーザーインターフェースの一部となりユーザーの操作把握の大きな助けとなっています。 一般のアプリにおいてすら然るべくあれば況やゲームに於いてをや、 開発中のアプリはブロック崩しにて特別に大きなアニメーションは必要ありませんが タイトル画面ではプレイ画面でボール足るキャラクター ウパンダ のボールとして呼び出される前に呑気に居眠りしている様子を表現したく思いました。

而してウパンダのぱらぱらアニメを実装すべく目論んだのでしたが但し タイトル画面ではプレイ画面で利用しているアップル社純正の2Dゲーム用フレームワークの SpriteKit は読み込ませていませんから最も基本的な Cocoa TouchUIKit フレームワークでぱらぱらアニメを実装しなければなりません。

クリアされていないハイスコア表示の削除

ウパンダ、ハイスコアを主張す

人情として何時迄も同じハイスコアを表示しておきたくない場合もあるでしょうとて、 ハイスコア削除機能 を以て削除する機能を実践したのでしたが実は其の際画面遷移、 例えばハイスコアをクリアするボタンを実装した設定画面からメニュー画面に 遷移した後にクリアした筈のハイスコアが表示されてしまう問題が発生してしまいました。

原因としてはどうやらハイスコア削除及びハイスコア表示のメソッドの呼び出しのタイミングに有るようです。 タイミングとしては UIViewController のデリゲートメソッドを利用していますから 然るべきタイミングのメソッド内にてハイスコア削除若しくは表示メソッドを呼び出せば良い理屈です。

ハイスコア削除機能

ゲームに必須の機能として先ず盛り込んだ ハイスコア機能 では取り敢えず保存と表示を実現しましたが、 理由は孰れにせよ保存されたハイスコアを削除したい機会も訪れるでしょう。 例えば何の気なしに貸し与えた友人が己の手の届かぬハイスコアを叩き出し 何時になっても己の追い着けぬ高得点を見せ付けられるのが堪えられないのも又人情です。

High-Score