ARクマ教育アプリ進捗②

トリミング

Adobeで動的にしたい部分や、配置変えしたい部分をトリミングする。

Unity作成ステップ

①新しいSceneを作成
②Canvas 設定
③背景の設定
④ クマの画像を表示
⑤ボタンを3つ作る

目安の見た目

+-------------------------------------+
|           KumaScope ロゴ           |
|                                     |
|        🐻（クマ画像）              |
|                                     |
|  [ ARでクマを出す ]                 |
|   クマを実際の空間に表示           |
|                                     |
|  [ もしも遭遇したら ]               |
|   状況別クイズ＆シミュレーション   |
|                                     |
|  [ その他 ]                         |
+-------------------------------------+

実装

ボタン作成したら簡単にシーンに遷移するように実装、

using UnityEngine;
using UnityEngine.SceneManagement;

public class StartMenu : MonoBehaviour
{
    public void OnARBearButton()
    {
        SceneManager.LoadScene("ARScene");
    }

    public void OnEncounterButton()
    {
        SceneManager.LoadScene("QuizScene");
    }

    public void OnOtherButton()
    {
        SceneManager.LoadScene("OtherScene");
    }
}

OnClick() イベントに追加して動作確認。

TextMeshProで文字表示、一旦Noto Sans JPを使用して日本語を出す。

フォントアセットを作成してTextに適用。

日本語設定しないといけなく、
丁度良さそうなものを見つけたのでこちらを使用させていただきました。

ホーム画面一旦完成。