【基本機能】UI

ユーザーにゲーム状況を伝える「UI」を利用する機能です。

画像や文字列、ボタンを表現する機能を提供します。
色々なサイズの端末に対応するため「どこを基点にして配置するか」というレイアウト機能も提供します。

どのような構成でできているか、とりあえず「画像、文字列、ボタン」を使えるようになるための手順を紹介します。

対象：初級者、ゲーム必須機能の学習者
使用バージョン：Unity 2021.3
時間：30分

1 ■構成
2 ■使い方
3 ■実践

■構成

UIは「キャンバス、UI、イベントシステム」の３要素でできています。

キャンバスに「画像、テキスト、ボタン」などのUIを配置し、
イベントシステムでボタンなどの操作受け付けを行います。

●キャンバス

UIとして表示する範囲を表すコンポーネントです。
キャンバスの子供として配置したUIが画面に表示されます。

複数のコンポーネントが必要になりますが、UI作成時に自動生成されます。
慣れない内はUnityに任せましょう。

●UI

画像やテキスト、ボタンなど、UIとして扱う要素のことです。
UIを作成すると「UIのコンポーネントが追加されたゲームオブジェクト」が作成されます。

●イベントシステム

ボタンやドロップダウン、スライダーなど、ユーザー入力を制御するコンポーネントです。

複数のコンポーネントが必要になりますが、UI作成時に自動生成されます。
慣れない内はUnityに任せましょう。

削除するとユーザー入力が無視されるので注意してください。

■使い方

●UI表示

ゲームオブジェクトの作成でUI画像の作成を行えます。
ヒエラルキー左上の「＋」をクリックし、「UI＞＊＊＊」をクリックするとUIのゲームオブジェクト郡（※）が作成されます。

※UI画像なら「Canvas、Image、EventSystem」の３つ

●UI配置

UIの姿勢制御はTransformではなく「RectTransform」で行います。

位置指定は「アンカー」からの相対位置として指定し、回転の原点として「ピボット」を使います。
アンカーとピボットは「RectTransform」コンポーネントの左上にあるアイコン「アンカープリセット」でも指摘できます。
画像でイメージしやすく、１クリック指定も可能なので慣れると楽です。

●イベント、ハンドラ

UIにはユーザーからの入力をスクリプトに渡す機能があります。

ボタンはクリックされた時、ドロップダウンやスライダーは値が変更された時など。
そういった状況変化を「イベント」と呼び、イベントを受け取る側を「ハンドラ」と呼びます。
インスペクターの「イベント」にスクリプトの「ハンドラ」を指定することで、
ユーザー操作をスクリプトに知らせ、処理を実行するようになります。

■実践

●画像表示

▷画像準備

画像として表示する画像ファイルをインポートし、スプライトに設定します。

画像ファイルをプロジェクトの「Assets」にドラッグ＆ドロップ
プロジェクトの「Assets＞画像アセット」をクリック
インスペクターのドロップダウン「テクスチャタイプ」をクリックし、「スプライト（2D と UI）」をクリック
インスペクターの「適用する」をクリック

▷画像表示

UI画像を作成し、スプライトを割り当てます。

ヒエラルキー左上の「＋」をクリックし、「UI＞画像」をクリック
インスペクターの「Image＞ソース画像」右の「○」をクリックし、スプライトをダブルクリック
CTRLキーを押しながらSキーを押す

▷UI配置

右下に寄せて表示します。

ヒエラルキーの「Canvas＞Image」をクリック
インスペクターの「Rect Transform」左上のアンカープリセットをクリックし、ALTキーを押しながら「right – bottom」をダブルクリック
CTRLキーを押しながらSキーを押す

●テキスト表示

▷テキスト作成

UIテキストを作成します。

ヒエラルキー左上の「＋」をクリックし、「UI＞テキスト – TextMeshPro」をクリック

▷TMPインポート

TextMeshProをインポートします。

TMP Importerの「Import TMP Essentials」をクリック
TMP Importer右上の「×」をクリック
CTRLキーを押しながらSキーを押す

▷UI配置

画面横幅に収めて表示します。

ヒエラルキーの「Canvas＞Text (TMP)」をクリック
インスペクターの「Rect Transform」左上のアンカープリセットをクリックし、「stretch – stretch」をダブルクリック
インスペクターの「Rect Transform＞上下左右」を(0, 0, 0, 0)とする
インスペクターの「TextMeshPro＞Text Input」下のテキスト入力に(Test)を入力
インスペクターの「TextMeshPro＞Font Size＞Auto Size」にチェックを入れる
インスペクターの「TextMeshPro＞Vertex Color」右のカラーバーをクリックし、色の16進数を(0000FF)とする
インスペクターの「TextMeshPro＞Alignment＞Center（上段の左から２番目）」をクリック
インスペクターの「TextMeshPro＞Alignment＞Middle（下段の左から２番目）」をクリック
インスペクターの「TextMeshPro＞Outline」のチェックを入れる
インスペクターの「TextMeshPro＞Outline＞Color」右のカラーバーをクリックし、色のRGBAを(
インスペクターの「TextMeshPro＞Outline＞Thickness」を(0.2)とする
CTRLキーを押しながらSキーを押す

▷日本語フォント準備

IPAフォントをダウンロードしてインポートします。

「一般社団法人文字情報技術促進協議会」の「IPA Font ダウンロード」ページにアクセス
「IPAexフォント Ver.004.01」をクリック
「IPAフォントライセンス」に同意する
「ipaexg00401.zip(4.0MB)」をクリック
「IPAexfont00401.zip」を解凍
解凍したフォルダ内の「ipaexg.ttf」をUnityのプロジェクトにドラッグ＆ドロップ
インスペクターの文字ドロップダウンをクリックし、「Custom Set」をクリック
インスペクターの「適用する」をクリック

▷フォントアセット作成

使用する日本語文字を登録し、フォントアセットを作成します。

Unityメニューの「ウィンドウ＞TextMeshPro＞フォントアセットクリエーター」をクリック
Font Asset Creatorの「Font Settings>Source Font File」右にある○をクリックし、「ipaexg」をダブルクリック
Font Asset Creatorの「Sampling Point Sizeドロップダウン」をクリックし、「Custom Size」をクリック
Font Asset Creatorの「Sampling Point Sizeドロップダウン」右のテキスト入力に(48)を入力
Font Asset Creatorの「Padding」に(8)を入力
Font Asset Creatorの「Atlas Resolution」を(8192, 8192)に変更
Font Asset Creatorの「Character Setドロップダウン」をクリックし、「Custom Characters」をクリック
kgsiさんの記事「UnityのText Mesh Proでほぼ全ての日本語を表示させる」にアクセス
「japanese_full.txt」をクリック
青枠右上の「Raw」をクリック
CTRLを押しながらAキーを押した後、CTRLを押しながらCキーを押す
Font Asset Creatorの「Custom Character List」のテキストエリアをクリックし、CTRLを押しながらVキーを押す
Font Asset Creatorの「Generate Font Atlas」をクリック
Font Asset Creatorの「Save」をクリックし、保存をクリック
Font Asset Creator右上の「×」をクリック

▷日本語表示

日本語でテキストを表示します。

ヒエラルキーの「Canvas>Text(TMP)」をクリック
インスペクターの「TextMeshPro＞Text Input」下のテキスト入力に(テスト！)を入力
インスペクターの「TextMeshPro＞Main Settings>Font Asset」右の○をクリックし、「ipaexg SDF」をダブルクリック
インスペクターの「TextMeshPro＞Main Settings>Auto Size」のチェックを外す
インスペクターの「TextMeshPro＞Main Settings>Font Size」に(32)を入力
インスペクターの「TextMeshPro＞Outline＞Thickness」に(0.1)を入力
CTRLキーを押しながらSキーを押す

●ボタン作成

▷ボタン作成

UIボタンを作成します。

ヒエラルキー左上の「＋」をクリックし、「UI＞ボタン – TextMeshPro」をクリック

▷TMPインポート

TextMeshProをインポートします。

TMP Importerの「Import TMP Essentials」をクリック
TMP Importer右上の「×」をクリック
CTRLキーを押しながらSキーを押す

▷UI配置

中央に表示します。

ヒエラルキーの「Canvas＞Button」をクリック
インスペクターの「Rect Transform」左上のアンカープリセットをクリックし、ALTキーを押しながら「center – middle」をダブルクリック
CTRLキーを押しながらSキーを押す

▷ボタン設定

クリック時にテキストを変更するように設定します。

ヒエラルキーの「Canvas>Button」をクリック
インスペクターの「Button>クリック時()」が見える所までスクロール
ヒエラルキーの「Canvas>Button」左の「▶」をクリック
ヒエラルキーの「Canvas>Button>Text (TMP)」をインスペクターの「Button>クリック時()」左下の「なし(オブジェクト)」にドラッグ＆ドロップ
インスペクターの「Button>クリック時()」右上のドロップダウンをクリックし、「TextMeshProUGUI>string text」をクリック
インスペクターの「Button>クリック時()」右下のテキスト入力に(click)を入力
CTRLキーを押しながらSキーを押す

▷動作確認

クリック時にボタンテキストが指定文字に変わることを確認します。

エディタ上中央の「▶」をクリック
ボタンをクリックする
ボタンテキストが(click)に変わることを確認
エディタ上中央の「▶」をクリック