覚えると便利!UnityでGUIを作成する方法【初心者向け】

Unityで「GUIを作成する方法」を初心者向けに解説した記事です。Unityでは、GUIをスクリプトから実装します。代表的なGUIの紹介から、実際にGUIを追加するためのスクリプトまで紹介しているので、自分で実装してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

ゲームエンジンのUnityGUIを作成する方法を初心者向けに解説した記事です。

覚えておくとゲーム開発が便利になるので、この記事を参考にして実装してみてください。

 

なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。

 

田島悠介

今回はUnityでGUIを実装する方法を見てみよう。

大石ゆかり

田島メンター!!GUIっていうのは何ですか~?

田島悠介

GUIはGraphical user interfaceの略で、ユーザーが操作を行う際に使用するグラフィカルなインターフェイスのことだよ。例えば各種メニューボタンやテキスト入力エリアなどだね。

大石ゆかり

なるほど、色々なところで必要になりそうですね。ぜひ知っておきたいです!

 

GUIとは

GUI(グラフィカルユーザインターフェース)とは、ユーザが視覚的に操作できる入出力機能です。ボタンやテキストフィールドといったGUIは、どのアプリケーションでも一般的に使用されていますね。

Unityでは、GUIをスクリプトから実装します。様々なGUIが用意されており、コードを1行記述するだけで簡単に実装できます。

なお、GUIエディタのデモビデオは公開されているので、今後さらに簡単に使えるようになるかもしれません。

 

 

代表的なGUI

UnityのGUIのうち、代表的なものを紹介しましょう。

 

TextField

1行のテキストフィールドを表示します。

ユーザはフィールド内の文字を編集することができます。

00118-300x257

UnityのGUIでテキストを表示させる方法

 

Button

シングルクリックに反応するボタンです。

ユーザがボタンを押した際のイベントをスクリプトに記述できます。

unityボタン

UnityのGUIでボタンを表示させる方法

 

Label

ラベルとして文字やテクスチャを画面に表示します。

ユーザからの操作は受け付けない表示機能のみのGUIです。

unityラベル

UnityのGUIでラベルを表示させる方法

 

Slider

マウスのドラッグ操作で値を設定するスライダー式のボタンです。

ユーザは最小値から最大値の間でスライダーを操作して、値を調節できます。

unity スライダー

UnityのGUIでSlider(スライダー)を表示させる方法

 

Texture

画像を表示させることができます。

unity Texture

UnityのGUI Textureを使って画像を表示させる方法

 

では、実際にGUIを作成してみましょう。

 

大石ゆかり

ボタンなんかは特によく使うことになりそうですね。

田島悠介

では実際に、GUIを追加する一連の手順を見ていこう。まずはオブジェクトの作成からだよ。

大石ゆかり

分かりました!

 

[PR] Unityを使ったゲーム開発で挫折しない学習方法を動画で公開中

事前準備

今回は、ラベルを例にしてGUIの追加方法を解説します。

 

まずは、スクリプトを追加するためのゲームオブジェクトを作成します。

画面上部のタブで、[GameObject]→[Create Empty]と選択します。作成したゲームオブジェクトは、名前を「MenuWindow」としました。

001 002

 

次に、スクリプトを作成します。

初めにスクリプトを保存するためのフォルダを作成しましょう。

[Project]タブで「Assets」フォルダを右クリックし、[Create]→[Folder]と選択します。作成したフォルダは、名前を「Script」としました。

003 004

 

そして、フォルダ内にスクリプトを作成します。

「Script」フォルダを右クリックし、[Create]→[Javascript]と選択します。作成したファイルは、名前を「MenuWindow」としました。

 

※注意:スクリプトファイル名を「GUI」にしてはいけません。

Unityのシステムで使用される名前のため、エラーの原因となります。

005 006

 

最後に、ゲームオブジェクトへスクリプトを追加しましょう。

[Hierarchy]タブで「MenuWindow」を選択し、[Inspector]タブで[Add Component]→[Scripts]→「MenuWindow」と選択します。

009 010

スクリプトファイルは、ゲームオブジェクトへ直接ドラッグ&ドロップして追加することもできます。

 

 

スクリプトの追加

スクリプトにコードを追加し、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の「幅」、「高さ」の順に値を設定します。

その隣の” “で囲まれた文字列は、画面に表示される文字列です。

 

では、コードを追加した状態で、ゲームを再生してみましょう。

012

ゲーム画面に「MenuWindow」と書かれたラベルが表示されました。

今回の記事は以上です。

 

田島悠介

再生したときにGameタブで上の画面が出てきたかな?

大石ゆかり

無事に表示されました!

田島悠介

表示される座標を変えたり、テキストを変更したりして実際に画面でどのように実装されるかを確認するといいよ。基本の方法が分かったら他のGUIにも挑戦してみよう。

大石ゆかり

さっそくチャレンジしてみます。ありがとうございました!

 

Unityをさらに使いこなしたい場合は、Unityにtransformの値を設定する方法も合わせてご覧ください。

[お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。