No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Pull request Compare This branch is even with syyama:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Unity
readme-images
.gitignore
README.MD

README.MD

『全員参加!メッセージ送信ゲーム』Unityアプリ

app_image_0

概要

  • 同僚の披露宴の余興で実施した『全員参加!メッセージ送信ゲーム』ゲーム本体のUnityアプリです
  • ゲームを動作させるためには本Unityアプリの準備の他、「クライアント側【Webアプリ】」の環境構築が必要です
  • 「クライアント側【Webアプリ】」については以下を参照してください

『全員参加!メッセージ送信ゲーム』とは?

game_image

  • 『全員参加!メッセージ送信ゲーム』は100人超の披露宴参加者全員参加で遊べるお祝いゲームです
  • 各自所有しているスマートフォンから指定URLにアクセスすることで誰でも参加できます
  • URLにアクセスしたら「名前」と「自撮り画像」を登録します
  • ゲームが開始されたら新郎新婦へのお祝いのメッセージを送ります
  • お祝いメッセージが登録されると、ゲーム本体に写真付きメッセージが表示されていきます
  • お祝いメッセージがいっぱいになると…何かが起こる!?

『全員参加!メッセージ送信ゲーム』Unityアプリ事前準備

動作までの手順

1. プロジェクトのダウンロード

2. mBaaS にアプリを作成

  • mBaaS にログインします

  • アプリの新規作成をします

    • 既に他のアプリを作成済みの場合は、左上の「+新しいアプリ」をクリックします

create_mb_app_1

  • APIキー が発行されます

create_mb_app_2

  • 後ほど使用しますので、ここは「OK」をクリックして閉じます
  • 閉じるとダッシュボード(管理画面)が表示されます

3. プロジェクトファイルの編集

  • 先ほどダウンロードし、解凍しておいたフォルダを開きます

dl_files_1

  • Unity フォルダをUnityでプロジェクトとして開きます

unity_1

  • 主なフォルダ構成としては下記の通りです

    • Image: プロジェクトで利用する画像を保存します
    • Movie: ゲームの前後の動画を保存します
    • Music: ゲーム中のBGMを保存します
    • Scene: 当プロジェクトのシーンは3つで構成されています
      • Opening: ゲームが開始するタイミングで再生される動画のシーンです
      • Main: ゲーム本編です
      • Ending: ゲームが終了したタイミングで再生される動画のシーンです
    • Scripts: 当プロジェクトで利用したスクリプトファイルを保存しています
  • 当プロジェクトには MovieMusic のファイルは含まれていませんので、必要に応じて追加してください

  • Main シーンの GameManager オブジェクトの NCMB Settings コンポーネントに mBaaS でアプリを作成した際に生成された APIキー を設定します

unity_2

  • APIキー は、mBaaS ダッシュボードの右上「アプリ設定」から確認できます

check_mb_api_key

  • 次に、GameManager.csの18行目のAPIのURLの ********** の箇所を編集します

  • YOUR_NCMB_APPLICATION_ID の部分を mBaaSのアプリIDに書き換えます

  • アプリIDは mBaaS ダッシュボードのURLに記載しています

  • 例では ********** としている箇所がアプリIDです

例)
https://console.mb.cloud.nifty.com/#/applications/**********/

4. ゲームで使用する背景の設定する

  • Main シーンの Backgroud オブジェクトの Image コンポーネントの Source Image を設定することで、ゲームで使用する背景を設定することができます
  • なお画像は Sprite として用意する必要があります

unity_3

5. ゲームのBGMの設定をする

  • Main シーンの MusicManager オブジェクトの Audio Source コンポーネントの Audio Clip を設定することで、ゲームで使用するBGMを設定することができます
  • なお、ループ再生を行うには Loop にチェックを入れておきます

unity_4

6. オープニング・エンディング動画の設定をする

  • Opening または Ending シーンの VideoPlayer オブジェクトの VideoPlayer コンポーネントの Video Clip を設定することで、オープニング・エンディングそれぞれで再生する動画を設定できます
  • 今回は動画再生と同時にBGMを流すので、Audio Source の項目に動画再生時に流す音声を設定しておきます

unity_5

遊び方 ~参加方法~

  • URLにアクセスして、名前の入力と写真ファイルの選択をします
  • 「Regist」ボタンを押します

app_image_1

  • ゲームが開始したら、お祝いメッセージを送ります
  • 「おめでとう」ボタン(ベトナム語あり)または、自由記述でメッセージを送ることができます

app_image_2

  • データストアにメッセージが登録され、Unity側でメッセージを取得し表示させます

app_image_0

解説

  • ゲーム本編の動作は GameManager.cs ですべて制御しています
  • mBaaSのデータストア上に保存されたデータをUnityから呼び出して使用しています

ポーリング処理の実装

  • Update() 関数内でデータストアから取得する処理を定期的に実行することでポーリング処理を実装しています
  • ここでは0.3秒に1回データストアにアクセスしています
  private float timeleft;

	// Update is called once per frame
	void Update () {

        // 0.3秒ごとに処理を行う
        timeleft -= Time.deltaTime;
        if (timeleft <= 0.0)
        {
            timeleft = 0.3f;

            // DataStoreからデータを取得する
            FetchDatastore();
        }
  }

メッセージとファイルストアのURLを取得

  • データストアに保存しているデータを取得します
  • query.AddAscendingOrder("createDate"); でデータストアの作成日時の降順で取得するよう設定します
  • query.Limit = 1000; でクエリを取得する件数を1000件とします(デフォルトは100件)
  • query.FindAsync 関数を使ってデータストアからデータを取得します
  • データの取得に成功すると if (dataCount == 0 || dataCount != objList.Count) でデータに追加があるかどうかを判別し、データがない場合は処理を行いません
  • さらに、追加のレコードがあった場合にそれぞれ _name, _message, _photonName の変数にセットし、レコード毎にパネルをめくる処理を行っています
    // パネルのめくれた枚数
    private int dataCount = 0;

    /// <summary>
    /// データストアからメッセージを取得する
    /// </summary>
    private void FetchDatastore()
    {
        //Scoreフィールドの降順でデータを取得
        query.AddAscendingOrder("createDate");
        query.Limit = 1000;

        //データストアでの検索を行う
        query.FindAsync((List<NCMBObject> objList, NCMBException e) => {
            if (e != null)
            {
                //検索失敗時の処理
            }
            else
            {
                if (dataCount == 0 || dataCount != objList.Count)
                {
                    for(int i = dataCount; i < objList.Count; i++)
                    {
                        // mBaaSから取得
                        string _name = objList[i]["name"] as string;
                        string _message = objList[i]["message"] as string;
                        string _photoName = objList[i]["photoName"] as string;

                        // パネルをめくる
                        StartCoroutine(CurlPannel(_name, _message, _photoName));
                    }

                    // データカウント
                    dataCount = objList.Count;
                }
            }
        });
    }

データストアから画像を取得する処理

  • パネルをめくる処理に関しては、Unity固有の実装ですので説明を割愛します、コードを参照ください
  • ファイルストアの基礎となるAPIのURLは先述の通りですが、事前に アプリID を設定しておきます
  • ファイルストアの自撮り画像はUnity標準の WWW クラスを利用することで取得できます
  • www.textureNonReadable で Texture2Dとし、テクスチャとしてセットします
    private const string BASE_URL = "https://mb.api.cloud.nifty.com/2013-09-01/applications/****************/publicFiles/";

    /// <summary>
    /// パネルをめくる処理
    /// </summary>
    public IEnumerator CurlPannel(string name, string message, string photoName)
    {

        // wwwクラスのコンストラクタに画像URLを指定
        string url = BASE_URL + photoName;
        WWW www = new WWW(url);

        // 画像ダウンロード完了を待機
        yield return www;

        // パネルにプロフィール画像をセット
        panel.SetPanelImage(www.textureNonReadable, canvas);

    }

Webアプリとの連携イメージ

  • Webアプリを通して各自所有しているスマートフォンから「名前」と「自撮り画像」を mBaaS に登録します
  • お祝いメッセージは同時アクセスが可能なようにスクリプトを通してデータストアに保存します
  • Unity側でデータストアの情報をポーリングでデータ件数を取得し、追加があればゲームを進める仕組みです
  • 詳細は ゲーム本体【Webアプリ】の解説ページ を参照ください

参考

  • 取り急ぎ作ったゲームなので、一部ソースが酷い箇所があります。何卒ご容赦ください。