UnityのGUIでボタンを表示させる方法【初心者向け】

UnityのGUIで【ボタン(Button)】を追加する方法を初心者向けに解説した記事です。操作方法がこの記事でわかります。ボタンの配置、動かすためのスクリプト、テクスチャの指定まで、幅広く紹介。

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

UnityのGUIボタンを表示させる方法を初心者向けに解説した記事です。

Unityでは、様々な入出力を処理するGUIを簡単に作成できます。

 

今回は、最も一般的なGUIのひとつであるボタン(Button)を紹介します。

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

 

20160620

 

田島メンター!!GUIでボタンを設置する方法が知りたいです!

 

20163020-2

 

では、今回はButtonの実装をやってみよう。これはユーザーのクリックに反応して何らかのアクションを起こすものだよ。

 

20160620

 

ボタンの大きさを変えたり、文字を入れたりすることもできますか~?

 

20163020-2

 

大きさの変更や文字の編集も、もちろん可能になっているよ。実際に配置して確認してみよう。

 

Buttonを配置する

Buttonは、シングルクリックに反応するボタンです。
ボタンが押された際のイベントをスクリプトに記述できます。

 

では早速、作成してみましょう。

 

スクリプトファイルのOnGUI関数内に、以下のコードを追加してください。

Javascriptの場合は以下のように記述します。

// Javascript
function OnGUI () {
// ボタンを表示する
GUI.Button(Rect(20, 20, 100, 50), “Button”);
}

 

C#の場合は以下のように記述します。

//C#
public class TestButton : MonoBehaviour {
void OnGUI () {
// ボタンを表示する
GUI.Button(new Rect(20, 20, 100, 50), “Button”);
}
}

 

この状態でゲームを再生してみましょう。

001

「Button」と書かれたボタンが表示されました。

 

Button関数は第一引数(Rect構造体)へGUIの表示位置を指定します。

そして、第二引数(String)へボタンに表示する文字列を指定します。

 

20163020-2

 

ボタンを配置してみたよ。

 

20160620

 

なるほど、Rectで場所や大きさを指定して、””内の文字列がその中に入るんですね。

 

20163020-2

 

そうだね。ただ今のままではボタンをクリックしても何も起こらない状態なので、せっかくだから何かしらのアクションが実行されるようにしてみようか。

 

20160620

 

はい!

 

 

ボタンが動くようにする

このままではボタンを押しても何も起こりません。そこで、ボタンが押された際のイベントを追加することにしましょう。

Button関数の戻り値には、ユーザがボタンを押した際にTrueが返されることを利用します。

 

以下のようにスクリプトを修正してください。

// Javascript
function OnGUI () {
// ボタンを表示する
if ( GUI.Button(Rect(20, 20, 100, 50), “Button”) ) {
Debug.Log(“Button is clicked.”);
}

 

//C#
public class TestButton : MonoBehaviour {
void OnGUI () {
// ボタンを表示する
if ( GUI.Button(new Rect(20, 20, 100, 50), “Button”) ) {
Debug.Log(“Button is clicked.”);
}
}
}

 

改めてゲームを再生してみましょう。

002

これで、ボタンをクリックするとデバッグメッセージが表示されるようになりました。

 

 

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

テクスチャ(Texture)を指定する

Button関数は、第二引数へ文字列のかわりにテクスチャ(Texture)を指定することもできます。

実際にやってみましょう。

まず、Assetsフォルダの配下にTextureフォルダを作成し、画像ファイルを保存してください。

(今回はping形式で「ButtonTexture.png」という名前のファイルを作成しています)

00316

 

その後、Textureファイルの設定で、[Texture Type]を「GUI」にします。

[Texture Type]を変更し、[Apply]ボタンで決定してください。

00513

 

そして、コードを以下のように修正します。

// Javascript
public var buttonTexture : Texture;
function OnGUI () {
// ボタンを表示する
if ( GUI.Button(Rect(20, 20, 100, 50), buttonTexture) ) {
Debug.Log(“Button is clicked.”);
}

 

//C#
public class TestButton : MonoBehaviour {
public Texture buttonTexture;
void OnGUI () {
// ボタンを表示する
if ( GUI.Button(new Rect(20, 20, 100, 50), buttonTexture) ) {
Debug.Log(“Button is clicked.”);
}
}
}

 

最後に、[Inspector]タブで「ButtonTexture」へテクスチャファイルをドラッグ&ドロップしてください。

00414

 

改めてゲームを再生します。

006

ボタンにテクスチャが表示されました。

 

今回の記事は以上です。

 

20163020-2

 

最後にテクスチャを指定する方法を紹介したよ。

 

20160620

 

ボタンの中に指定した画像が表示されましたね!

 

20163020-2

 

Buttonは色々な場面で使われることになると思うので、クリック時の動作も含めてしっかり学習しておこう。

 

20160620

 

もう一度最初から見直してみます。ありがとうございました!

 

Unityの他のGUIを追加したい場合は、UnityのGUI Textでテキストを表示させる方法も合わせてご覧ください。

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