Unity:Stageシーンの改造〜ニフクラ mobile backend サンプル「シューティングゲームにランキングとゴースト機能を追加」

今回はニフクラ mobile backend のサンプルプロジェクト「シューティングゲームにランキングとゴースト機能を追加」のシーン Stage を改造します。

使用されているスクリプトベースのレガシーUI を通常のUIオブジェクトに置き換える作業を中心にいくつか変更してみました。

ニフクラ mobile backend サンプル「シューティングゲームにランキングとゴースト機能を追加」の改造記事一覧

ニフクラ mobile backend と サンプルプロジェクトについて

ニフクラ mobile backend は富士通クラウドテクノロジーズ株式会社が提供するスマートフォンアプリでよく利用される汎用的な機能をクラウドから提供するサービス。

ニフクラ mobile backend のサンプル&チュートリアル

ニフクラ mobile backend の公式サイトにはサービスの使用方法のドキュメントやサンプル、チュートリアルが用意されています。
Unity サンプル&チュートリアル一覧 ニフクラ mobile backend

サンプルプロジェクト

サンプルプロジェクトはこちらからダウンロードできます。 GitHub – NIFCloud-mbaas_NCMB2dst_comp

カメラの GUI Layer コンポーネントを削除

サンプルプロジェクトのシーン Stage を開いて [Hierarchy]ウィンドウ > Main Camera を選択。 [Inspector]ウィンドウで GUI Layer 削除します。

タイトルの置き換え

ゲームタイトルのオブジェクトはレガシーUIオブジェクトを使用しているので通常のUIオブジェクトに置き換えます。

[Hierarchy]ウィンドウ > Title を選択して削除。[Hierarchy]ウィンドウ > [Create]ボタン > UI > Text を選択。作成したオブジェクト名を Text Title に変更。

テキストオブジェクトと同時に作成されたオブジェクト Canvas はCanvas Scaler (Script) コンポーネントの設定を変更しておきます。

シーン Stage にUIオブジェクトを配置

サンプルプロジェクトでは[Leader Board]ボタンと[Ghost]ボタンがスクリプトベースのボタンで実装されていますが、これを通常のUIオブジェクトに置き換えます。それに加えてマウス左クリック(画面タップ)でゲームスタートの処理をUIボタンクリックでスタートに変更します。

[Create]ボタン > UI > Button を選択。作成したオブジェクト名を Button Start に変更。2つ複製してそれぞれ名前を Button StartWithGhost、Button LeaderBoard に変更。

オブジェクト Button StartWithGhost の[Text]コンポーネントはリッチテキストのタグを使用してのフォントサイズを調整。

変更したボタンは[Scene]ビューでこのようになっています。

[Hierarchy]ウィンドウの階層はこのようになりました。

スクリプト Manager の改造

シーン Stage を再生するとエラーが発生します。
これはスクリプト Manager のなかでタイトルオブジェクトの有効/無効でゲームプレイ中の判定処理を行っており、削除したオブジェクト Title を参照できないためです。

スクリプトの主な改造点はつぎの部分になります。

  • シーン遷移の関数変更
  • シーン切り換え時にBGMオブジェクトを削除しない(シーン SaveScore と LeaderBoard のBGMは使用しない)
  • UIオブジェクトの変数処理

コードはこのようになっています。

[Inspector]ウィンドウ > Manager (Script)コンポーネントのフィールドに必要なオブジェクトを割り当てます。

まだUIボタンに処理割り当ててないのでゲームはスタートできませんが、再生してエラーが出なければひとまずOKです。

UIボタンオブジェクトのコンポーネントで処理を設定

シーンに配置したUIオブジェクト Button Start 、Button StartWithGhost、Button LeaderBoard をクリックしたときの処理を[Inspector]ウィンドウで設定します。

スクリプト Manager の関数 public void OnClick(string buttonName) をボタンクリック時の処理に割り当て、関数内の処理を引数 buttonName で指定します。

Button Start の設定

オブジェクは Manager を指定、関数は Manager > OnClick() を指定、引数フィールドに Start を入力。

Button StartWithGhost の設定

オブジェクは Manager を指定、関数は Manager > OnClick() を指定、引数フィールドに StartWithGhost を入力。

Button LeaderBoard の設定

オブジェクは Manager を指定、関数は Manager > OnClick() を指定、引数フィールドに LeaderBoard を入力。

これでひとまずゲームをスタートできるようになりました。[START with Ghost]ボタン、[LeaderBoard]ボタンをクリックしてシーンが切り替わればOKです。

不要なBGMオブジェクトの削除

シーン Srage のスクリプト Manager でBGM オブジェクトをシーンが切り替わっても削除しない処理をしたので、他のシーンからBGMオブジェクト削除します。

SaveScore からオブジェクト bgm を削除

LeaderBoard からオブジェクト bgm を削除

[Hierarchy]ウィンドウ > Score GUI > SaveScore は使用されていない。(スクリプトがコメントアウトされている)

スコア表示の修正

レガシーUIオブジェクトのスコア表示を通常のUIオブジェクトに変更します。

[Hierarchy]ウィンドウ > Score GUI の階層をすべて選択。レガシーUIのオブジェクトは不要なのですべて削除します。

UIオブジェクトでスコア表示

シーン Stage にUIオブジェクトを配置してスコア表示を行います。
[Hierarchy]ウィンドウ > [Create]ボタン > UI > Text を選択。名前を Text Score に変更。

[Inspector]ウィンドウ > Rect Transform の設定はこのようにしました。

Text (Script)コンポーネントの設定はこのようにしました。文字整列の Paragraph > Alignment は右上寄せにしました。

スクリプト Score の修正

スクリプト Score を修正します。不要になったレガシーUIのスコア表示処理の部分をUIオブジェクトを使用した処理の置き換えます。

コンポーネントの設定

修正したスクリプト Score は Canvas に割り当て。[Inspector]ウィンドウ > Score (Score) コンポーネント > Text Score フィールドには Text Score を割り当てます。

WebGL

今回の内容をWebGLでビルドしてみました。サウンドはミュートしています。
画像クリックで再生(ファイルサイズ:約7MB)