【Unity(C#)】アセットストアのModern UI Packを使ってみた!(v1.09)【SAP】

Unity

こんにちは、ばいおです。

今回は、SAPクイズゲームの改修報告(v1.09)の記事になります。

遂にUnity Asset Storeに手を出しました!早速使ってみたのでその感想を記載していきます。

また、v1.07でタイトル画面でNCMB(ニフティクラウド mobile backend)から取得したクイズの正答率を表示する改修を加えたのですが、実は正常に作動していない場合があったことがわかりました。。

v1.09ではその点も修正したので、あわせて記載しました。

記事執筆当時のゲームはこんな感じです(動画です)。

ゲームは以下リンク先よりプレイできます。是非やってみてください!
https://unityroom.com/games/sapquiz

実際にゲームやってみての感想や改善点などがありましたら、ゲームリンク先のUnityroomにコメントを残せるので、是非コメントしてください!私が喜びます!
(ランキング機能も実装しているので、是非登録してくださいませ!)

また、クイズゲーム制作についての記事は↓にまとめていますので、あわせてご参照ください

私がゲーム作成にあたり、勉強に使用したUnity本はコチラ↓
実際にサンプルゲームを作成しながら楽しく学べるので、オススメです!

Unityの教科書 Unity 2021完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA) | 北村 愛実 |本 | 通販 | Amazon
Amazonで北村 愛実のUnityの教科書 Unity 2021完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)。アマゾンならポイント還元本が多数。北村 愛実作品ほか、お急ぎ便対象商品は当日お届けも可能。またUnityの教科書 Unity 2021完全対応版 2D&3Dスマ...

v1.09で追加・更新した機能

Unity Asset Storeで購入した「Modern UI Pack」の適用

今回Unity Asset Storeで購入したアセットは「Modern UI Pack」です。(リンク飛べます)

ずっとUIは改良しようと思ってたんですが、さすがに私の技術・センスでは限界がある。。
「Modern UI Pack」のUIはとてもオシャレですし、デモ見るだけですごいワクワクしますね。

というわけで、購入を決意するに至りました。
お値段は33$…自分のゲームをオシャレにするためなら高くない、高くない(涙)

さて、Unity Asset Storeからアセットを購入したら、まずはそのアセットをインポートしなくてはいけません。

インポート方法はググれば沢山のページがヒットしたので、特段悩むことはありませんでした。
ありがとう、偉大な先人達!

ただ、「Modern UI Pack」は「TextMeshPro」というフォントが使われており、デフォルトの状態だと日本語が使えないようだ、、、

日本語を使用するためのフォント変換方法については、下記のトマシープさんのブログが大変参考になりました。ありがとうございます><

ということで、使用準備も整ったし、早速使っていきましょう!

と思ったのですが、使い方全然わからん問題発生

Unityそんなに甘くなかった。
UnityデフォルトのUIと同じノリで使えるかと思ったけど、全然わからない。

個人的にはこのポップアップを適用したかったのだが、何故か起動せず!

アセットストアで購入したものは、オブジェクト追加するだけで魔法のように簡単に使えるようになると思っていた時代が私にもありました。

とりあえず、実装が一番簡単だったボタンは適用しました。すこしスタイリッシュになったかな。。。?

しかし、「Modern UI Pack」のボタンをソースコードで掴む方法がわからない(泣)
これができないと、このゲームの仕様上、クイズ中のボタンのUIを変えることはできない。。
デザインの一貫性が崩壊してしまいました。

まだまだ先は長そうです。

タイトル画面でNCMB(ニフティクラウド mobile backend)から取得したクイズの正答率を表示する機能の改修

長きに渡り私を苦しめてきた当機能の改修について、遂に決着が付きました。

私を苦しめていた原因、それはずばり「非同期処理」です。

NCMBからデータを取ってくるときには、「CountAsync」や「FindAsync」とやらを使わないといけないのですが、こいつが地獄の始まりでした
(※Asyncは何も悪くなく私の理解が悪いだけです。今もちゃんとわかっていないです。)

NCMBのデータの操作方法については、以下リンク先を参照。

データストア (Unity) : 基本的な使い方 | ニフクラ mobile backend
Unityアプリでの基本的なデータストアの使い方&#1...

色々ググって調べましたが、「Async」を使用すると、どうやら非同期処理となる模様。

NCMBからの正答率データ取得が非同期処理だと、クイズゲーム上何が困るか。
それは、「NCMBからのデータ取得を待たずして、ゲーム画面に計算結果が表示されてしまうこと」です。

データ取得より先に結果が画面表示されてしまうと、どうなるか。
正答率0%」で表示されます。(号泣)

これを解決するためには、データが取得できるまで、結果の画面表示を待たなくてはいけません。
これがわからず、前々回(v1.07)では、とりあえず2秒待つというパワープレイで凌ぎました。
が、凌げてないことが判明しました。2秒じゃデータ全件取得には足りなかったのです。

件数は全件取れた一方で、正答数はうまく取れない場合が多かったようなので、正答率が「2%」とか極端に低い形で出てしまっていた人もいたかも、、すみませんでした。
(実際は大体5割程度で推移しています。)

さて、ここからが今回の改修内容になります。

結論は、「2秒待つのがだめなら、10秒待てばいいじゃない」戦法を取ることにしました。

ただ、毎回10秒待つのは全くもってイケてないので、データ取得できたらその段階で画面表示するようにしました。
1秒ごとにデータが取得できたか確認して、OKなら画面表示、NGならもう1秒待つ。10秒待ってダメなら諦める。

この部分はコルーチンという機能を使用しています。
コルーチンについては、こちらのQiitaが参考になりました。

古来よりUnity非同期を実現していたコルーチンとは何者か? - Qiita
最初に どうも、ろっさむです。 引き続きUnity非同期を完全に理解するために今回はコルーチンについて見ていきたいと思います。また本記事は一度昔に個人ブログにあげていたものを修正を加えて再掲したものとなります。 Unity非...

「StartCoroutine」で「IEnumerator」を呼び出し、「yield return new WaitForSeconds (秒数);」によってデータ取得できるまで計算結果表示をせき止めています。

以下が該当部分のソースコードです。
冒頭「void fourLoadrate」はStartする際に呼び出されるようにしています。

	void fourLoadrate()
    {                                      
        Text fourrate = GameObject.Find("Canvas/4rate").GetComponent<Text> ();  
        _4query = new NCMBQuery<NCMBObject> ("fourCorrectnum");
        // 保存されているデータ件数を取得
        _4query.CountAsync((int count , NCMBException e )=>
        {
            if(e != null)
            {
                //件数取得失敗時の処理
                fourrate.text = "データ取得に\n失敗しました";
            }
            else
            {               
                //正解数を取得
                StartCoroutine(fourDelayCoroutine(count));  
            }
        });
    }

    private IEnumerator fourDelayCoroutine(int dataNum)
    {            
        int cnum = 0;
        int cnumall = 0; 
        double cnumrate = 0;
        string cnumrates;
        int counta = 0;
        int tcounta = 0;  
        bool errflg = false;   
        Text fourrate = GameObject.Find("Canvas/4rate").GetComponent<Text> ();                              
        List<int> request =  new List<int>();
        for(int i=1; i<=dataNum; i++)
        {             
            _4query.WhereEqualTo ("id", i);
            _4query.FindAsync ((List<NCMBObject> objList ,NCMBException e)=> 
            {
                if (e != null)
                {
                    //エラーコード表示
                    errflg = true;
                    return;
                }
                else
                {
                    foreach (NCMBObject obj in objList)
                    {                     
                        cnum = Convert.ToInt32(obj["correctnum"]);                   
                        cnumall = cnum + cnumall;
                        counta ++;
                    }                                       
                }
            });  
        }

        while(counta != dataNum)
        {
            yield return new WaitForSeconds(1);
            tcounta ++;
            if (tcounta == 10)
                {
                    errflg = true;
                    break;
                }
        }
        if(errflg == false)
        {
        cnumrate = Math.Round(10*(double)cnumall / dataNum,1,MidpointRounding.AwayFromZero);
        cnumrates = cnumrate.ToString();
        fourrate.text = "4択式クイズ正答率\n"+cnumrates+"%";    
        loop.gameObject.SetActive(false);
        }
    }

もし1件でも取得できなかったり、10秒待ってもダメだったらエラーフラグをオンにしています。
今ブログ書いてて気づきましたが、エラーだった時に「データ取得できませんでした」と画面表示するのを忘れていますね。次回直します。。

こいつは手強かったぜ、、、

おわりに

今回は、SAPクイズゲームの改修報告(v1.09)について記載しました。

Unity Asset Store、一筋縄ではいかないですね。。

世には素晴らしいAssetがあるので目移りしちゃいそうですが、今回買ってみたことでまだ自分が使うに足る実力がないことがよくわかりました。。

気軽に質問できる人が居ないのがなんとも辛いですね。世のゲーム作成者たちはどのようにUnityやC#を学んだのでしょうか、気になります。

クイズゲームの感想・改善点いただければとても嬉しいです!TwitterでもUnityroomコメント欄でもどこでも書いちゃってください!

ここまで読んでいただきありがとうございました。

Unityの教科書 Unity 2021完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA) | 北村 愛実 |本 | 通販 | Amazon
Amazonで北村 愛実のUnityの教科書 Unity 2021完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)。アマゾンならポイント還元本が多数。北村 愛実作品ほか、お急ぎ便対象商品は当日お届けも可能。またUnityの教科書 Unity 2021完全対応版 2D&3Dスマ...
タイトルとURLをコピーしました