FlappyBirdのクローンを開発しよう:その12、実装:スコア | U-CREATES.の「たぶん」まいにち制作中。

U-CREATES.の「たぶん」まいにち制作中。

◆Webサイト、スマートフォンアプリ制作をしている個人事業主のブログです。
◆オフィシャルWebサイトはこちら。
http://u-creates.com/

前回でプレイヤーと障害物を実装したので、今回からUIに取り組みます。開発予定機能が列挙されたスプレッドシートから一番簡単そうなUIを選択した結果、今回作成するのはスコア機能になりました。


【スコア機能の仕様】
・FlappyBirdが土管の間を通過したらカウントする。

たった一行です。加えてUnityはUGUIという大変便利ななUIシステムを提供しています。これは本当にすぐ実装可能そうですね。

【スコア機能の実装:画像登録】
◆スコアはテキスト形式ではなく、先日取得したスプライトシートに掲載されていた画像を利用して表示します。テキストで表現する場合、UGUIから提供されているTextクラスを利用するとフォントを指定可能です。なので、下記のようにUnityEditorでフォントを設定して、テキストへ文字列を指定するだけで簡単に意匠を凝らした文字列表現が可能です。他にも整列や色の変更も可能です。かなり便利ですね。




ですが、今回はスプライトシートに掲載されていた画像で表現するため、スコア画像もこのようにGUIからBehaviourに対して登録しています。


画像で表現した場合、ソースコードで画像の表示位置を動的に変更したりなど、テキストよりも表示処理が若干複雑になります。

【スコア機能の実装:表示】
振る舞いに登録されたスコア画像は、ゲーム開始時に表示通知された後、Builderへ渡されます。表示状態のフレーム処理でサービス層を参照して、現在のスコアを取得した後、スコアの桁数、特定桁の数値を取得した後、対応するスコア画像を表示しています。桁数の取得処理はスコアの値を10で除算するたびに桁数をカウントし、スコアを10で除算し続けて商が0になった際の合計カウント数を桁数としています。また、特定桁の数値取得は、取得したい桁数分だけスコアを10で除算し、1桁目に目的の数値を位置させた後、さらにその数値を10で除算した際の余りの値を利用して取得しています。その後、算出したスコアの桁数だけ新規でImageクラスのインスタンスを生成して、桁ごとの数値に応じた画像を指定し、画像の位置を再計算して再度整列させています。

【スコア機能の実装:カウンティング】
◆FlappyBirdが土管の間を通過したらスコアをカウントするわけですが、通過の可否は、土管オブジェクト内に配置したHitAreaオブジェクトへ設定したCollider(矩形)を利用して判定しています。


FlappyBirdがHitAreaと接触する度にスコアをサービス層経由で保存しています。何気にSEも鳴らしていますので、注意して聞いてみるといいと思います。

【スコア機能が完成】


これまでの開発で主に鳥、土管を生成してきましたが、結果的にスコアの処理が一番複雑でしたね。特に数値の桁に関しては、アルゴリズムを直接書いたりしてて、なんか.NETFrameworkベースのアプリという感じが全くしません。私がフォントファイルを作成できたらもっと簡単に高速に表現できたと思いますが、「分野特化な狭く深く」な志向と完全にズレてしまいます。志向分野以外への注力は、人間の知能の性能という点から考えても、結果的に広く浅くにしかならないのでやめときましょう。。