FlappyBirdのクローンを開発しよう:その13、実装:UI(準備画面) | U-CREATES.の「たぶん」まいにち制作中。

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

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

今回はプレイヤーにゲーム開始準備を知らせる準備画面のUIの実装です。外観はこれですね。







【ゲーム開始準備画面UIの仕様】
◆準備ロゴ、タップスタートロゴを表示する。
◆準備ロゴは点滅する。
◆タップロゴスタートは拍動する。

UGUIと周期関数のアルゴリズムを使えばとても簡単に実装できそうですが、UGUIはGameObjectのようにアフィン変換が可能なのでしょうか?調べてみると、どうもこれで操作可能のようです。

【ゲーム開始準備画面UIの実装:画像登録】
◆UGUIにはImageクラスという大変優れたUI画像情報を管理するAPIを提供しています。D&Dして画像をアタッチすると簡単に登録することができます。







作業時間は5分くらいだったと思います。D&Dは偉大ですね。

【ゲーム開始準備画面UIの実装:振舞】
◆他の機能と完全に同一の有限オートマトンベースアーキテクチャによる実装です。表示状態非表示状態を登録して、通知によって状態を変更しています。

【ゲーム開始準備画面UIの実装:GetReadyロゴ】
◆表示状態のフレーム処理で周期関数から取得した値で透明度を変更して点滅させています。

【ゲーム開始準備画面UIの実装:GetReadyロゴ】
◆表示状態のフレーム処理で周期関数から取得した値でスケールを変更して拍動させています。

【ゲーム開始準備画面UIの実装:画面タップ】
画面の任意の場所をタップしたら非表示状態へ遷移した後、ゲーム開始の通知をして、ゲーム画面へ遷移します。

実装も解説もたった数行です。とても簡単ですね!

【ゲーム開始準備画面UIが完成】


UIアニメーション作成も結構面白いですね。今回はスケールと透明度を編集して表現しましたが、同様に位置や角度を変更することも可能なので、イージングや曲線のアルゴリズムを組み合わせるともっといろんな表現ができそうです。