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

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

ニフクラ 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)コンポーネントの設定はこのように設定。

[Scene]ウィンドウで見るとこのようになっています。

プレイヤー名ラベルの作成

[Hierarchy]ウィンドウ > [Create] > UI > Text を選択。名前を Text name に変更。
[Inspector]ウィンドウ > Rect Transform コンポーネントの設定をこのように設定。

Text (Script)コンポーネントの設定はこのように設定。

スコアラベルの作成

[Hierarchy]ウィンドウ > [Create] > UI > Text を選択。名前を Text score に変更。
[Inspector]ウィンドウ > Rect Transform コンポーネントの設定をこのように設定。

Text (Script)コンポーネントはこのように設定。

プレイヤー名の入力フィールドの作成

[Hierarchy]ウィンドウ > [Create] > UI > InputField を選択。名前を InputField name に変更。
[Inspector]ウィンドウ > Rect Transform コンポーネントをこのように設定。

[Hierarchy]ウィンドウ > Canvas > InputField name > Placeholder を選択。
[Inspector]ウィンドウ > Rect Transform コンポーネントをこのように設定。

Text (Script)コンポーネントの設定はこのように設定。

[Hierarchy]ウィンドウ > Canvas > InputField name > Text を選択。
[Inspector]ウィンドウ > Rect Transform コンポーネントをこのように設定。

Text (Script)コンポーネントの設定はこのように設定。

スコア表示テキストの作成

[Hierarchy]ウィンドウ > [Create] > UI > Text を選択。名前を Text score Value に変更。
[Inspector]ウィンドウ > Rect Transform コンポーネントをこのように設定。

Text (Script)コンポーネントはこのように設定。

ランキング登録ボタンの作成

[Hierarchy]ウィンドウ > [Create] > UI > Button を選択。名前を Button Submit に変更。
[Inspector]ウィンドウ > Rect Transform コンポーネントをこのように設定。

Image (Script)コンポーネントをこのように設定。

Button (Script)コンポーネントをこのように設定。

[Hierarchy]ウィンドウ > Canvas > Button Submit > Text を選択。
[Inspector]ウィンドウ > Rect Transform コンポーネントはこのように設定。

Text (Script)コンポーネントをこのように設定。

ここまでの手順で一通り必要なUIオブジェクトができました。[Scene]ウィンドウで見るとこのようになっています。

スコア表示制御スクリプト ScoreUI を割り当てるオブジェクトの変更

[Hierarchy]ウィンドウ > GUITextSaveScore > ScoreUI を選択。名前を ScoreUI Manager に変更。ドラッグ&ドロップで GUITextSaveScore の階層から上の階層に移動します。

スコア表示制御スクリプト ScoreUI の編集

[Hierarchy]ウィンドウ > ScoreUI Manager を選択。
[Inspector]ウィンドウ > ScoreUI (Script)コンポーネント > Script フィールドをクリック。
[Project]ウィンドウでスクリプトが選択されるのでスクリプト ScoreUI をダブルクリックしてエディタを開きます。
編集したスクリプトはこのようになります。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
// シーン管理処理のクラスを使用する宣言
using UnityEngine.SceneManagement;
// UI処理のクラスを使用する宣言
using UnityEngine.UI;

public class ScoreUI : MonoBehaviour
{
    // スコア値を格納する変数
    public int score;
    // プレイヤー名のテキストコンポーネントを格納する変数
    public Text inputFieldName;
    // スコアのテキストコンポーネントを格納する変数
    public Text textScore;

    // ゲーム開始時の処理
    void Start()
    {
        // ローカルに保存されたスコア値を取得して変数 score に格納;
        score = PlayerPrefs.GetInt("Score", 1);
        // スコア値をUIテキストコンポーネントのテキスト要素に格納
        textScore.text = score.ToString();
    }

    // UIインプットフィールド入力後に実行される処理
    public void EndEditField()
    {
        // プレイヤー名の文字列を name に格納
        name = inputFieldName.text;
        // スクリプト SaveScore の save() 処理を実行
        //（name と score をサーバーに書き込む）
        FindObjectOfType().save(name, score);
    }

    // UIボタンクリック時の処理
    public void OnClick()
    {
        // シーン Stage をロード
        SceneManager.LoadScene("LeaderBoard");
    }
}

オブジェクト ScoreUI Manager のコンポーネント編集

スクリプト ScoreUI を保存したら[Hierarchy]ウィンドウ > ScoreUI Manager を選択。
[Inspector]ウィンドウ > ScoreUI (Script)コンポーネントがこのようになっていることを確認します。

Input Field Name フィールドには [Hierarchy]ウィンドウ > Canvas > InputField name > Text を割り当てます。
Text Score フィールドには [Hierarchy]ウィンドウ > Canvas > Text score Value を割り当てます。

スクリプト SaveScore コンポーネントをオブジェクト ScoreUI Manager に移動

[Hierarchy]ウィンドウ > SaveScore を選択。
[Inspector]ウィンドウ > Save Score (Script)コンポーネントのオプションボタン（歯車アイコン）> Copy Component を選択。

[Hierarchy]ウィンドウ > ScoreUI Manager を選択。
[Inspector]ウィンドウ > Score UI (Script)コンポーネントのオプションボタン（歯車アイコン）> Paste Component As New を選択。

オブジェクト ScoreUI Manager にコンポーネント Save Score (Script) を追加してこのようになりました。

InputField name の設定

[Hierarchy]ウィンドウ > Canvas > InputField name を選択。
[Inspector]ウィンドウ > InputField (Script) > On End Edit (String) の [+] ボタンをクリックしてリストを追加。

Objectフィールドに ScoreUI Manager を割り当て。関数リストは ScoreUI > EndEditField() を選択。

Button Submit の設定

[Hierarchy]ウィンドウ > Canvas > Button Submit を選択。
[Inspector]ウィンドウ > Button (Script)コンポーネント > On Click() のオブジェクトフィールドにオブジェクト ScoreUI Manager を割り当てます。
関数選択のダウンリストは ScoreUI > OnClick を選択して割り当てます。

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

最後に、[Hierarchy]ウィンドウ > GUITextSaveScore と SaveScore は不要になったので削除します。

WebGL

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