FuruiTweetUnityのuGUI(UI)の基本的な使い方をまとめます。uGUIはゲームやアプリケーションにおいてとても重要な役割を果たします。UIデザインがおしゃれなだけでそのゲームのクオリティが格段にアップする上に、ユーザビリティも向上します。uGUIの基本的な使い方を覚えてUIデザインのレベルを向上させましょう!※新しいuGUI関連記事も随時アップロードする予定です。まとめuGUIについてuGUIとはまずはじめにuGUIってなに?という方に向けて簡単にuGUIについてご説明します。uGUIとは「UnityのUI機能」のことなのですが、実は公式用語ではありません。公式ではそのまま「UI」と読んでいます。UI公式マニュアルいつからUnityのUI機能がuGUIと呼ばれるようになったかは定かではありませんが、いつしかこのように呼ばれるようになりました。uGUIでできることuGUIを使用することでゲーム・アプリケーションのUIをデザインすることができます。uGUIを使用することでデザイン性、ユーザビリティを向上させることができます。工夫するだけで以下のようなUIを簡単に作成することができます。Playからダウンロードして使用することができます。Technologies社が提供する公式のチュートリアルが存在します。このUnity公式チュートリアルではUIに関する知識を動画・テキスト形式で学ぶことができます。英語がわからない場合でも動画の場合は操作を見ながら見よう見まねで、テキストの場合はGoogle翻訳を使用しながら進めることでuGUIを効率よく学ぶことができるのでおすすめです。公式チュートリアルに移動するRectTransform(UIの配置)uGUIを使用するときに意外と苦戦するのがUIの配置に関する問題です。UIはUnityのオブジェクトで使用される「Transform」とは少し違った「RectTransform」というコンポーネントを使用して位置を決定します。RectTransformコンポーネントそのため今までと配置の設定が違うため、「アンカーって何?」「ピボットが理解できない」など使い方がよくわからないといった話をよく耳にします。アンカー位置選択画面アンカーの知識を理解していると端末の画面サイズに柔軟に対応できるUIを作成することができます。RectTranform解説ページに移動するText(テキストの基礎知識)どんなアプリケーションでもテキストを表示したいタイミングが存在するのではないでしょうか。「大きくしようとしたら表示されない」「フォントの種類が少なすぎる」など初めてテキストを使用するときには疑問がたくさんあると思います。フォントを外部から取得することで簡単にゲームにあったデザインにすることができます。テキストの知識は他のUIで使用されるテキストにも応用できる便利な知識です。外部フォント使用例このようなテキストに関する基本的な知識を詳しく解説しましたのでぜひご参考ください。Text解説ページに移動するInputField(テキスト入力処理)uGUIではテキスト入力の処理も簡単に実装することができます。InputFieldを使用することでテキスト入力を受け取って簡単に処理することができます。筆者はこのInputFieldの存在を知らずに自力でテキスト入力フォームを作ろうとして無駄に時間を割いてしまった経験があります...このUIの存在を知っているだけで役に立つことがあると思いますのでぜひご参考ください。InputField解説ページに移動するButton(ボタン入力処理)シーンの切り替えやゲームの終了など様々な場面でボタン処理を使う機会があるのではないでしょうか。uGUIはボタン処理も簡単に実装することができます。Button使用例ボタンはアプリケーションにおいてとても重要な役割を果たしますが、ここまで簡単に実装できるuGUIは開発者にとってとてもありがたいですね。Button解説ページに移動するToggle(チェックボックス)チェックボックスを利用して特定機能のOn/Offを切り替えたいということが多々あるのではないでしょうか。uGUIではチェックボックスも簡単に実装することができます。Toggle使用例uGUIではチェックボックスのことをToggleと呼びます。このToggleを使用することで特定機能のOn/Offを簡単に切り替えることができます。他のUI同様、入力処理を受け付ける関係上スクリプトの記述が必要になりますが、難しい処理はほとんどありません。Toggle解説ページに移動するDropdown(ドロップダウンオプション)チェックボックスはオンとオフの2つのオプションを選択するときに便利な機能ですが、オンオフの二択だけでなくもっと選択肢を増やしたいこともあるのではないでしょうか。そこで便利なuGUIがドロップダウンです。Dropdown使用例ドロップダウンは上記のGIFのように複数の選択肢をから一つを選択することができるUIです。オプションをたくさん準備したいけどUIをコンパクトにしたいという方におすすめです。Dropdown解説ページに移動するPanel(UIの表示管理etc...)UIをたくさん使用してしまって、画面が見づらくなってしまった経験をお持ちの方がいらっしゃるのではないでしょうか。必要なときに必要なUIをまとめて表示・非表示にしたいなど、UIをまとめて管理することができるのがパネルです。Panel使用例また、パネルには色があるため背景をぼかしてUIを見やすくする効果もあります。パネルに関しては絶対に使用しなければいけないような場面は存在しませんが、使い方を知っていると開発者・ユーザーのどちらにとってもプラスに働くと思いますのでぜひご参考ください。Panel解説ページに移動するまとめいかがでしたでしょうか。UnityのuGUIではゲーム・アプリに必要なUIを必要最低限以上に提供しています。本記事が皆様のアプリケーションのデザイン性・ユーザビリティの向上につながれば幸いです!※冒頭でもお伝えしましたが、随時新しい記事をアップロードする予定ですので乞うご期待ください。gardenお問い合わせはこちらから※「XR-Hub」商標出願中CloseTwitterでAR/VRの最新情報を受け取る。