覚えると便利！UnityでGUIを作成する方法【初心者向け】
Unityで「GUIを作成する方法」を初心者向けに解説した記事です。Unityでは、GUIをスクリプトから実装します。代表的なGUIの紹介から、実際にGUIを追加するためのスクリプトまで紹介しているので、自分で実装してみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
ゲームエンジンのUnityでGUIを作成する方法を初心者向けに解説した記事です。
覚えておくとゲーム開発が便利になるので、この記事を参考にして実装してみてください。
なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。
今回はUnityでGUIを実装する方法を見てみよう。
田島メンター！！GUIっていうのは何ですか～？
GUIはGraphical user interfaceの略で、ユーザーが操作を行う際に使用するグラフィカルなインターフェイスのことだよ。例えば各種メニューボタンやテキスト入力エリアなどだね。
なるほど、色々なところで必要になりそうですね。ぜひ知っておきたいです！
GUIとは
GUI（グラフィカルユーザインターフェース）とは、ユーザが視覚的に操作できる入出力機能です。ボタンやテキストフィールドといったGUIは、どのアプリケーションでも一般的に使用されていますね。
Unityでは、GUIをスクリプトから実装します。様々なGUIが用意されており、コードを1行記述するだけで簡単に実装できます。
なお、GUIエディタのデモビデオは公開されているので、今後さらに簡単に使えるようになるかもしれません。
代表的なGUI
UnityのGUIのうち、代表的なものを紹介しましょう。
TextField
1行のテキストフィールドを表示します。
ユーザはフィールド内の文字を編集することができます。
Button
シングルクリックに反応するボタンです。
ユーザがボタンを押した際のイベントをスクリプトに記述できます。
Label
ラベルとして文字やテクスチャを画面に表示します。
ユーザからの操作は受け付けない表示機能のみのGUIです。
Slider
マウスのドラッグ操作で値を設定するスライダー式のボタンです。
ユーザは最小値から最大値の間でスライダーを操作して、値を調節できます。
UnityのGUIでSlider(スライダー)を表示させる方法
Texture
画像を表示させることができます。
UnityのGUI Textureを使って画像を表示させる方法
では、実際にGUIを作成してみましょう。
ボタンなんかは特によく使うことになりそうですね。
では実際に、GUIを追加する一連の手順を見ていこう。まずはオブジェクトの作成からだよ。
分かりました！
事前準備
今回は、ラベルを例にしてGUIの追加方法を解説します。
まずは、スクリプトを追加するためのゲームオブジェクトを作成します。
画面上部のタブで、[GameObject]→[Create Empty]と選択します。作成したゲームオブジェクトは、名前を「MenuWindow」としました。
次に、スクリプトを作成します。
初めにスクリプトを保存するためのフォルダを作成しましょう。
[Project]タブで「Assets」フォルダを右クリックし、[Create]→[Folder]と選択します。作成したフォルダは、名前を「Script」としました。
そして、フォルダ内にスクリプトを作成します。
「Script」フォルダを右クリックし、[Create]→[Javascript]と選択します。作成したファイルは、名前を「MenuWindow」としました。
※注意：スクリプトファイル名を「GUI」にしてはいけません。
Unityのシステムで使用される名前のため、エラーの原因となります。
最後に、ゲームオブジェクトへスクリプトを追加しましょう。
[Hierarchy]タブで「MenuWindow」を選択し、[Inspector]タブで[Add Component]→[Scripts]→「MenuWindow」と選択します。
スクリプトファイルは、ゲームオブジェクトへ直接ドラッグ＆ドロップして追加することもできます。
スクリプトの追加
スクリプトにコードを追加し、GUIを画面に表示させましょう。
「MenuWindow」スクリプトをテキストエディタで開き、以下のコードを追加してください。
// JavaScript
function OnGUI () {
// ラベルを表示する
GUI.Label (Rect (10,10,100,100), “MenuWindow”);
}
C#の場合は以下のようになります。
スクリプトファイルを作成する際に[C# Script]を選択し、スクリプトファイル名のクラスに追加してください。
//C#
public class MenuWindow : MonoBehaviour {
void OnGUI () {
// ラベルを表示する
GUI.Label(new Rect(10,10,100,100), “MenuWindow”);
}
}
Rectはラベルの表示位置を決める構造体です。
ゲーム画面の左上を原点にして、表示位置の「X座標」、「Y座標」、GUIの「幅」、「高さ」の順に値を設定します。
その隣の” “で囲まれた文字列は、画面に表示される文字列です。
では、コードを追加した状態で、ゲームを再生してみましょう。
ゲーム画面に「MenuWindow」と書かれたラベルが表示されました。
今回の記事は以上です。
再生したときにGameタブで上の画面が出てきたかな？
無事に表示されました！
表示される座標を変えたり、テキストを変更したりして実際に画面でどのように実装されるかを確認するといいよ。基本の方法が分かったら他のGUIにも挑戦してみよう。
さっそくチャレンジしてみます。ありがとうございました！
Unityをさらに使いこなしたい場合は、Unityにtransformの値を設定する方法も合わせてご覧ください。
[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。
