今回はニフクラ mobile backend のサンプルプロジェクト「シューティングゲームにランキングとゴースト機能を追加」からランキング表示を行うシーン LeaderBoard を改造します。
ニフクラ mobile backend サンプル「シューティングゲームにランキングとゴースト機能を追加」の改造記事一覧
ニフクラ mobile backend と サンプルプロジェクトについて
ニフクラ mobile backend は富士通クラウドテクノロジーズ株式会社が提供するスマートフォンアプリでよく利用される汎用的な機能をクラウドから提供するサービス。
ニフクラ mobile backend のサンプル＆チュートリアル
ニフクラ mobile backend の公式サイトにはサービスの使用方法のドキュメントやサンプル、チュートリアルが用意されています。
Unity サンプル＆チュートリアル一覧 ニフクラ mobile backend
UIオブジェクトの作成
リーダーボードのタイトルテキスト作成
[Hierarchy]ウィンドウ > [Create] > UI > Text を選択。名前を Text Title に変更します。同時に作成された Canvas を選択。[Inspector]ウィンドウ > Canvas Scaler (Script)コンポーネントの設定をこのように設定。
[Hierarchy]ウィンドウ > Canvas > Text Title を選択。[Inspector]ウィンドウ > Rect Transform の設定はこのように設定。
Text (Script)コンポーネントの設定はこのように設定。
プレイヤー名とスコア表示のテキスト作成
プレイヤーの名前とスコアを表示するUIテキストを作成します。
[Hierarchy]ウィンドウ > [Create] > UI > Text を選択。名前を Text Top0 に変更。
[Inspector]ウィンドウ > Rect Transform コンポーネントはこのように設定。
Text (Script)コンポーネントの設定はこのように設定。ゲーム実行中はサーバーから呼び出されたデータを表示しますが、レイアウトのためにダミーテキストを入力しておきます。
スコア表示のUIオブジェクト名はスクリプトから参照するので連番名とし、Text Top0～Text Top4まで5つ作成します。
タイトル画面に戻るボタンの作成
[Hierarchy]ウィンドウ > [Create] > UI > Buttonを選択。名前を Button BackToTitle に変更。[Inspector]ウィンドウ > Rect Transform コンポーネントをこのように設定。
Image (Script)コンポーネントをこのように設定。
Button (Script)コンポーネントをこのように設定。
Text (Script)コンポーネントはこのように設定。
ここまでの手順で一通り必要なUIオブジェクトができました。[Scene]ウィンドウで見るとこのようになっています。
レイアウトが確認できたら Text Top0～Text Top4 の Text (Script)コンポーネント > Text フィールドに入力していた文字はすべて削除しておきます。
スクリプト LeaderBoardManager の改造
[Hierarchy]ウィンドウ > LeaderBoardManager を選択。[Inspector]ウィンドウ > LeaderBoardManager (Script)コンポーネント > Script フィールドをダブルクリックしてエディタを開きます。
変更したコードはこのようになります。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// シーン処理のクラスを使用する宣言
using UnityEngine.SceneManagement;
// UI処理のクラスを使用する宣言
using UnityEngine.UI;
public class LeaderBoardManager : MonoBehaviour
{
// スクリプト LeaderBoard を格納する変数
private LeaderBoard lBoard;
// ランキングテキストオブジェクトを格納する配列
private GameObject[] top = new GameObject[5];
// サーバーのスコア取得読み込み判定フラグ
bool isRankFetched;
// スコア表示判定フラグ
bool isLeaderBoardFetched;
// ボタンが押されると対応する変数がtrueになる
private bool backButton;
// ゲーム開始時の処理
void Start()
{
// スクリプト LeaderBoard を変数 lBoard に格納
lBoard = new LeaderBoard();
// 繰り返し処理（5回）
for (int i = 0; i < 5; ++i)
{
// オブジェクト名"Text Top"を検索して配列 top に格納
top[i] = GameObject.Find("Text Top" + i);
}
// サーバーのスコア読み込み判定フラグ を false に設定
isRankFetched = false;
// スコア表示判定フラグ を false に設定
isLeaderBoardFetched = false;
}
// ゲーム実行中の繰り返し処理
void Update()
{
// 現在の順位の取得が完了したら1度だけ実行
if (!isRankFetched)
{
// スクリプト LeaderBoard の関数 fetchTopRankers() を実行
//（サーバーからトップ5スコアを取得）
lBoard.fetchTopRankers();
// サーバーのスコア取得判定フラグ を true に設定
isRankFetched = true;
}
// リスト topRankers が 空でなく、フラグ isLeaderBoardFetched が false の場合
if (lBoard.topRankers != null && !isLeaderBoardFetched)
{
// 繰り返し処理
for (int i = 0; i < lBoard.topRankers.Count; ++i)
{
// 配列 top の Text コンポーネントに リスト topRankers の値を格納
top[i].GetComponent().text = i + 1 + " . " + lBoard.topRankers[i].print();
}
// スコア表示判定フラグ を true に設定
isLeaderBoardFetched = true;
}
}
// UIボタンクリック時の処理
public void OnClick()
{
// シーン Stage をロードする
SceneManager.LoadScene("Stage");
}
}
UIボタンオブジェクト Button BackToTitle コンポーネントの設定
[Hierarchy]ウィンドウ > Canvas > Button BackToTitle を選択。[Inspector]ウィンドウ > Button BackToTitle (Script)コンポーネント > On Click () > Object フィールドに LeaderBoardManager をドラッグ&ドロップで割り当て。
関数リストには LeaderBoardManager > OnClick を選択。
不要なオブジェクトの削除
最後に、[Hierarchy]ウィンドウ > GUITextLeaderBoard は不要になったので削除します。
現状の問題点
ゲームオーバーになってスコア登録画面でスコアを確認してから[Sublit]ボタンクリックでリーダーボードが表示されますが、スコアがTOP5にもかかわらずランキングに表示されない場合があります。
スコアをサーバーに登録する処理と取得する処理のタイミングの問題だと思いますが、具体的な内容を調べて修正する予定です。
WebGL
今回の内容をWebGLでビルドしてみました。サウンドはミュートしています。
画像クリックで再生（ファイルサイズ：約7MB）