📖
Unityチュートリアル：ボタンの扱いを覚えよう

2025/05/01に公開
 試験公開中
 注意書きこのチュートリアルは、Unity2022(2022.3.61f1) の環境で作成しています。

 UnityインストールUnity公式より、Unityハブをダウンロードしてインストール

https://unity.com/ja/releases/unity-6
Unityアカウントを作成して、サインインしておきましょう。
設定（Preferences)から、ライセンス（Licenses）をインストールしておきます。

無料のPersonalで問題ありません。

Inatallから、Unity22をインストールします。

※Unity22でなくても大きな問題はありません。

本チュートリアルでは、UnityRoomでの公開を前提とした設定をしています。

インストールの際に、WebGL Build Support のチェックを入れておいてください。

（後で追加も出来ます）

 テンプレートファイルをダウンロード再配布可の素材などをまとめたテンプレート用のアセットを配布しています。

ダウンロードしておいてください。

https://github.com/ksu-gamelab/Unity_tutorial/raw/main/UnityTutorial_ClickGame.unitypackage

 プロジェクト作成、テンプレートを実行New Project から

Universal 2D で新規プロジェクトを作成

ダウンロードしておいた、テンプレートファイル(FSGJ_日付.unitypackage)を、Project ビューのどこかにドラッグ＆ドロップ

Import ボタンをクリックして、インポート

 タイトルシーンを開いて実行するAsetts → Scenes → TitleScene の順にフォルダを開き、 TitleScene をダブルクリック

ゲームビューに切り替えて、実行画面サイズを変更する。

 タイトルシーンの挙動Start ボタンをクリックすると SampleStageSceneに移動、Credit ボタンをクリックすると CreditSceneに移動
・・・するはずが、実行してボタンをクリックするとエラー発生になります。

エラーの内容は、SampleStage_Sceneシーンを読み込もうとしたけれど、build profilesにそのシーンが登録されていない、という意味です。

使いたいシーンを、build profilesで追加する必要があります。

 使用するシーンを Build Profilesで追加する上部メニューから、File → Build Profiles と進み、 Build Profilesを開き、

Scene in Buildに、追加したいシーンをドラッグ＆ドロップで追加していく。

TitleScene、SampleStage_Sceneを追加。

Titleシーンを一番上に移動する。

このScene Listの一番上にあるシーンが、ゲームを起動したときに実行される。

 再度、タイトルシーンを実行して動作を確認別のシーンに移動できることを確認しましょう。

 ボタンクリックでシーン移動する仕組みタイトルシーンに配置されている２つのボタンには、クリックされたときに指定したシーンに移動する振る舞いをするコンポーネントが付いています。
Hierarchyで見えている Button_Start は、ゲームオブジェクト。

Button_Start を選択すると、 Button_Startオブジェクトの Inspectorが開く。

Inspectorは、それぞれのゲームオブジェクトに付いている、コンポーネントが表示されている。

どのコンポーネントが付いているかで、ゲームオブジェクトの見た目や振る舞いが変わってくる。
これがUnityのゲームオブジェクトとコンポーネントの基本です。

Unityは、ゲームオブジェクトにコンポーネントを付けて、コンポーネントの値を変えていくことによってゲームを作っていきます。
例えば、Start_Buttonオブジェクトがボタンになっているのは、Start_Buttonオブジェクトに Buttonコンポーネントが付いているから。

クリックすると、SampleStage_Sceneに移動するのは、Button_Scriptコンポーネントの Scene Nameの値が SampleStage_Sceneになっているから。

 SampleStage_SceneScenes → SampleStage フォルダに、SampleStage_Sceneがあるので、ダブルクリックでシーンを開く。

SampleStage_Sceneにも、最初からいくつかのゲームオブジェクトが配置されています。

 Hierarchyにゲームオブジェクトを追加するSampleStage_Sceneを実行してみましょう。

ネコとコアラの画像があります。クリックしてみても何も起こらないですね。
Hierarchyにゲームオブジェクトを追加して、取りあえず動くようにしてみましょう。
Projectビューから、 SharedDirectory → Prefabs を開くと、青いキューブ型のアイコンのファイルがいくつかあります。

青いキューブ型アイコンのBGMをHierarchyにドラッグ＆ドロップして、SampleStage_Sceneにゲームオブジェクトを追加しましょう。

BGMは、BGMを再生することが出来るゲームオブジェクトです。

Inspectorを見てみると、Audio Source コンポーネントが付いています。

Audio Source コンポーネントは、音を再生する機能を持つコンポーネントで、これが付いているBGMオブジェクトを追加したから音楽が再生される訳です。

Audio Sourceコンポーネント
Audio Resource：再生する音声ファイルをセットする
Play On Awake：チェックを入れるとシーン開始時に自動的に音声ファイルを再生
Loop：音声ファイルをループ再生
Volume：音量調整
他にも色々ありますが、今はこれだけ覚えておきましょう。
同じように、GManagerオブジェクトも追加します。

これを使うのは後になりますが、シーン間でのデータ共有をするために用意しているオブジェクトです。

細かいことは気にせずに、全てのシーンにこのオブジェクトを配置してください。

（細かいことを気にできるようになったら、自分で同じようなものを作っていけば良いです）

GManagerオブジェクトは追加して実行しても見た目の挙動は変わりません。

今はHierarchy上に存在していれば構いません。
次に、CountDownTimerオブジェクトを追加しますが、このオブジェクトはCanvasの中に追加する必要があります。ドラッグ＆ドロップする時に、 Canvasオブジェクトの上に持っていくように気をつけてください。
これで実行すると、残り時間が表示されるようになり、残り時間が0になるとタイトル画面に移動します。
このように、Herarchyに何かを追加するとゲーム画面にも反映されます。

 サンプルステージを完成させる
 背景画像を変更するCanvas内のImageオブジェクトを選択し、SourceImageを他の画像に変更してみましょう。

Imageフォルダなどに好きな画像を入れておけば、

Imageコンポーネントの Source Imageを変更することで好きな背景画像に差し替えることが出来ます。

 ボタンの画像を変更する最初から作られている、ネコとコアラの画像は実はボタンになっています。

ボタンにもImageコンポーネントが付いていて、先ほどと同じように Source Imageを変えることでボタンの画像を変えることが出来ます。好きな画像に変えてみましょう。

ネコとコアラはボタンなのでクリックすることが出来ます。

クリックしてみると、タイトルシーンに戻されます。

ネコのボタンは、クリックするとタイトルシーンに戻る機能を持つゲームオブジェクトになっています。
Inspectorを見てみると、SampleStage_Button1 のコンポーネントが付いていますね。

このコンポーネントがボタンをクリックしたときの振る舞いを決めています。

Speed の下に3つの入力欄(x, y, z)があります。

これは、ボタンの移動速度です。x に 3 を入力してゲームを再生してみましょう。

ボタンが動くようになりました。入力する数値を変えると、動くスピードが変化します。

 次のシーンに進めるようにするボタン1をクリックするとタイトルシーンに戻されました。

このままだとゲームにならないので、ボタン2をクリックすると次のステージに進めるようにしてみましょう。
HierarchyでButton2をクリックしてInspectorを開きます。

少しスクロールして、 On Click() となっている箇所を探しましょう。

SampleStage_Button2_Scriptが付いています。

Scriptの名前（灰色になっている箇所）をダブルクリックすると、SampleStage_Button2_Scriptを開けます。

最初から書かれているプログラムを消さないように注意して、

public void Button2Click()

{

SceneManager.LoadScene("Stage1_Scene");

}

と変更しましょう。

ボタン2をクリックすると、先程タイトルシーンで出たのと同じようなエラーが出ます。

つまり、ステージ2が登録されていないので、シーン移動が出来ていない状態になっています。

 自分でステージを作成するステージ2を作って移動できるようにしましょう。

 シーンを作成シーンを作成していく前に、そのシーンに必要なものをまとめておくためのフォルダを作成します。
Scenesフォルダを開き、 Projectビューの下にある + ボタンから Folderを作成します。

作成したフォルダにはStage1_Sceneと名前を付けておきましょう。

作成したStage1_Sceneフォルダに入り、新しくシーンを作成します。

Projectタブの + ボタンから [Scene] をクリック

新しく出来たシーンに Stage1_Scene の名前を付けましょう。

 Canvasを追加、設定する作成したStage1シーンを開いて、必要なゲームオブジェクトを追加していきましょう。

Hierarchyの + ボタンから、 UI → Canvas とクリックしていき、

Canvasゲームオブジェクトを追加しましょう。

続けて、Canvasの設定をしていきましょう。
Canvasを選択してInspectorを開きます。

Canvasコンポーネントの Render Mode を、 Screen Space - Overlay から、 Screen Space -Camera に変更します。

[Render Camera]の右にある二重丸をクリックして、Main Camera(Camera)を選択します。（Sceneタブを選ぶ必要があります）

[Canvas Scaler]コンポーネントの[UI Scale Mode]を、[Constant Pixel Size]から[Scale With Screen Size]に変更し、[Reference Resolution]を X 960  Y 540 に設定します（Gameビューで設定したサイズと同じにする）

これでCanvasの設定は完了です。新しいシーンを作るたびにこの操作を行います。

 背景画像を表示する背景画像を表示できるように、Imageオブジェクトを配置しましょう。
HierarchyでCanvasを選択して、 + ボタンから UI → Image でImageオブジェクトをCanvas内に作成します。

オブジェクトの名前を、Background_Imageのような分かりやすい名前に変えておきましょう。

Background_Imageを選択して、 Rect Tool で画面一杯にImageオブジェクトを広げましょう。

Imageコンポーネントの Source Image に好きな画像を入れて背景画像を変更しましょう。

 必要なオブジェクトを追加SampleStage_Sceneと同様に、 BGM、GManager、CountDownTimer オブジェクトを追加します。

ここまで出来たら、一度動作を確認しておきましょう。

残り時間が0になったら次のシーン(デフォルトだとタイトルシーン)に移動するようになっているはずです。

 ボタンを作成するCanvasオブジェクトを選択して、 UI → Legacy → Button とクリックして、ボタンオブジェクトを作成します。 Button - TextMeshPro というオブジェクトもありますが、今回はLegacy → Buttonを使用します。
名前をButton1などに変えておきましょう。

Button1オブジェクトのImageコンポーネントでボタンの画像を好きな画像に変更、

Rectツールなどで丁度いい大きさに調整してください。

Buttonオブジェクトは、子オブジェクト(自身にぶら下がっているオブジェクト)にText (Legacy) を持っています。普通のボタンなら文字があってもいいですが、今回のように画像を使う場合には無い方がいいですね。

Text (Legacy)を選択して、Inspectorの一番上のチェックを外してしまいましょう。

不要なオブジェクトは、Inspectorで非表示にすることが出来ます。

 ボタンを動かすためのスクリプト（プログラム）を作成ボタンを作りましたが、このままでは動きません。

ボタンオブジェクトに、ボタンを動かすコンポーネントが付いていないためです。
サンプルステージでは、ボタン1にはSampleStage_Button1が付いていて、このコンポーネントがボタンの振る舞いを決めていました。今作ったボタンにもこのようなコンポーネントを追加して動きを付けてあげる必要があります。
ImageやAudioSourceコンポーネント等、Unityには様々なコンポーネントが用意されていますが、自分が動かしたいようにオブジェクトを動かすコンポーネントは存在しません。
好きなように動かしたければ、自分でコンポーネントを作らないといけない訳です。

プログラムを書いてスクリプトを作ることで、独自のコンポーネントを自作することができます。
Stage1のフォルダに、C# Scriptを作成しましょう。

作成したら名前を変更します。Stage1_Button1_Script と名前を変更しましょう。

 注意：名前をつけ間違えてしまったときMonoBehaviourScriptの名前をつけ間違えてしまった場合、エラーが出てゲームが動かなくなってしまいます。デフォルトのNewMonoBehaviourScriptのまま確定させてしまった場合など、名前を間違えたときには、一度そのスクリプトを削除してしまいましょう。スクリプトの中身（プログラム）を修正すればエラーは消せますが、エラーが出る原因を理解できるまでは削除して作り直したほうが良いです。

 スクリプトを編集する作成したスクリプトをダブルクリックするとスクリプトエディターが開きます。

（Visual Studio か Visual Studio Codeが開くはずです。もし、エディターが開かない場合は「Unity VisualStudio 設定」などのキーワードで検索して開くようにしておきましょう。）
ボタンをクリックしたときに呼び出すプログラムを書いていきます。

void Update()

{
}

の下に、
public void Button1Click()

{
}

と記述しましょう。全て半角英数で記述してください。特に、カッコなどの記号が全角になっていないか、全角のスペースが書かれていないかなどに気をつけてください。
プログラムは、 ( ) や { } 等のカッコの開き閉じがセットになっています。

プログラムを書く際やコピーする場合には、カッコの対応に十分気をつけてください。閉じ括弧が足りなかったりするとエラーが出てきます。（開いたカッコは必ず閉じる）

（0 個の参照　はプログラムを書くと勝手に表示されるものです。自分で書く必要はありません。）
今書いたプログラムは、「メソッド宣言」と言います。今から、ボタンをクリックした時に行いたい動作をプログラムで書いていきますが、ボタンクリック時に行いたいことは一つではなく複数あります。これらの処理をまとめておくために、Button1Clickという名前を付けて { } で囲んでおきます。
Button1Clickメソッドのブロック（{ } の中）に、
SceneManager.LoadScene("Title_Scene");
と記述しましょう。最後のセミコロンの書き忘れに気をつけてください。
ここまで書くと、SceneManagerに赤色の下波線が出てくると思います。

これは、必要なライブラリ（部品）が不足していて、SceneManagerを使うことが出来ないから出ているエラーです。
using UnityEngine;

の下の行に、

using UnityEngine.SceneManagement;

を追加しましょう。

これで、ボタンをクリックした時に　Button1Clickメソッドを呼び出せばタイトルシーンに移動するようになります。（なって欲しいですね）

 ボタンにスクリプトを登録する・・・実行してクリックしても何も起こりませんね。
スクリプトは作っただけでは動かないので、そのスクリプトで動作させたいオブジェクトのコンポーネントに追加しなければいけません。
Button1を選択して、

Inspectorの一番下にある Add Component ボタンをクリック

Button1と検索窓に入力して、

Stage1_Button1_ScriptをButton1のコンポーネントとして追加しましょう。

ボタンオブジェクトは、スクリプトを追加するだけではなく、クリックしたときに呼び出すメソッドを指定する必要があります。
Buttonコンポーネントの、 On Click() の右下の + をクリック

None (Object) の右の◎をクリックして、 Sceneタブから Button1を探して選択

No Functionをクリックして、

Stage1_Button1_Script → Button1Click() と選択します。

つまり、さっき作ったメソッドを指定しましょう。

これで、Button1をクリックすると　Stage1_Button1_Script　に書いた Button1Click() メソッドを呼び出すことが出来るようになります。
実行して、クリックしたらタイトルシーンに移動することを確認しましょう。

 ボタンを移動させるボタンを移動させることも出来ます。（難しければ飛ばして構いません）
public class Stage1_Button1_Script : MonoBehaviour

{
の下に、

public Vector3 speed;
のプログラムを追加して、
void Update()

{
}

のカッコの中に、
transform.position += speed * Time.deltaTime;

if (transform.position.x >= 10 || transform.position.x <= -10)

{

speed *= -1;

}
のプログラムを追加してください。
transform.position += speed * Time.deltaTime;
は、このスクリプトが付いているゲームオブジェクトの、transformコンポーネントの、positionの x に、speed×Time.deltaTimeを足すの意味になります。
if (transform.position.x >= 10 || transform.position.x <= -10)

は、もしtransformのpositionのxが10以上　または　transformのpositionのxが-10以下　の意味です。この条件に合致する場合（つまり、オブジェクトの横方向の座標が 10 以上か-10以下（画面外になるくらい右か左））なら、 speed *= -1 の処理を実行します。
speedは3次元のベクトルです。-1をかけると 移動ベクトルを反転させることが出来ます。

（要するに、逆側に動くようになるということ）
Button1のInspectorで、Stage1_Button1_Scriptの Speedの X を0以外の値に変えて実行してみましょう。
ボタンが動くようになります。
実行したままButton1を選択してみましょう。
transformコンポーネントのPositionの X が増減しているのが分かります。

これは、Move Toolなどで自分でオブジェクトを動かした場合でも同じで、transformコンポーネントのPositionを変えると、ゲーム画面内でのオブジェクトの場所（座標）が変わります。
スクリプトで記述した、transform.position += speed * Time.deltaTime; のプログラムが実行されることによって、transformコンポーネントのPositionに speed 分の値が足される事になり、その結果としてオブジェクトが動いていた訳です。
このように、Unityではスクリプトによって、オブジェクトに付いているコンポーネントの値を変える事によって様々な動きを付けていきます。この、関係が分かってくると色々なことが出来るようになってきます。少しずつ慣れて行きましょう。

 Stage1_Sceneに移動するかを確認それでは、Title_Scene　→　Sample_Stage_Scene　→　Stage1_Scene　→　Title_Sceneと移動出来るようにしましょう。
Build Settingsから、Stage1_Sceneを Scenes in Buildに追加して、

Title_Sceneを開いて、タイトルから実行してみましょう。

 Stage2_Sceneを作成では、同じようにしてStage2_Sceneを作成して下さい。
フォルダを作成
シーンを作成
Canvasを作って設定
背景画像を配置し
BGM、GManager、CountDownTimer（必要に応じて）を配置
ボタンを配置して画像を変更（必要に応じてTextを非アクティブに）
ボタン用のC# Scriptを作成
ボタンにC# Scriptをアタッチ
C#スクリプトにプログラムを記述
ボタンの On Click() に記述した処理（メソッド）を割り当て
Build Settings で作ったシーンを登録
他のシーンから Stage2_Sceneに移動するようにプログラムを修正
書き出してみると複雑な工程に見えますが、一つ一つは難しくありません。

このような作業はUnityを扱う上で避けて通れないものなので、何度も繰り返して何も見なくても出来るくらいになりましょう。

 Credit_Sceneも作ってみようTitleシーン

 押したボタンを記憶出来るようにする
 GManagerについて特に説明もなく、全てのシーンに配置していたGManagerオブジェクトですが、このオブジェクトは特別な役割を持っています。
SampleStage_Sceneを開いてゲームを実行、実行中にHierarchyに作成される DontDestroyOnLoad の中にある GManagerを選択してみましょう。
このまま、ボタン1をクリックするとタイトル画面に戻されますが、Sampleが1に変わっています。
詳しい説明は省きますが、GManagerは全てのシーンで共通して利用可能なオブジェクトです。

別のシーンに移動したときに、元のシーンにあるGManagerが自動的に追加されて、Inspectorの値（変数と言います）を次のシーンにも引き継ぎます。
これを利用して、例えば、正解のボタンを押したかどうかや、正解を選んだ回数などを記録しておくことが出来ます。

 正解のボタンを押したかどうかを記録するStage1_Sceneを開いて、Stage1_Sceneで正解を押したかどうかを記録してみましょう。
Stage1_Button1_Scriptを開いて、Button1Click()の中に下記のプログラムを追加します。
GManager.instance.stage1 = 1;

修正はこれだけです。

実行してGManagerの stage1の値が1になることを確認しましょう。

 正解の回数を記録する続けて、

GManager.instance.totalScore += 1;

も追加してみましょう。

ボタンを動かすプログラムでも説明しましたが、 += は左辺の変数に右辺の値を足す事ができる演算子です（複合代入演算子と言います）。
これで実行すると、Total Scoreも増えていますね。

これを他のシーンのボタンにも追加することで、どの選択肢を選んだかや、正解を何回選んだか、等を使ったプログラムを作ることも出来ます。

 条件に応じて移動するシーンを変えるSampleStage_Sceneのボタン1のプログラムを修正して、Stage1_Sceneに移動するようにして下さい。

2つのボタン、どちらを押してもStage1に移動するようにする訳ですが、

ボタン2のスクリプトには  GManager.instance.sample = 1;  は書かれていません。

（書かないで下さい）
この状態でゲームを実行すると、

Button1をクリックすると、 GManager.instance.sample が　1の状態でStage1に移動し、

Button2をクリックすると、 GManager.instance.sample が　0の状態でStage1に移動することになります。
これを利用して、Stage1_Sceneでボタンを押した時にどのシーンに移動するかを変えてみましょう。
Stage1_Sceneを開き、Button1のスクリプトを開きます。

画像の箇所のプログラムを変更していきますが、 { } の開きとじが多くなるので、誤って閉じ括弧が少ない状態にならないように気をつけましょう。

    public void Button1Click()
    {
        GManager.instance.stage1 = 1;
        GManager.instance.totalScore += 1;

        if(GManager.instance.sample == 1)
        {
            SceneManager.LoadScene("Stage2_Scene");
        }
        else
        {
            SceneManager.LoadScene("Title_Scene");
        }
    }
if(GManager.instance.sample == 1) は、

もしも、Gmanagerのinstanceのsample が 1 と等しいなら、の意味です。
続く { から } までにかかれているプログラムが、この条件を満たす場合に動く処理になります。
else は、そうでないなら、の意味になります。

続く { から } までにかかれているプログラムが、条件を満たさなかった場合に動く処理になります。
if(GManager.instance.sample == 1)

{

SceneManager.LoadScene("Stage2_Scene");

}
もしも、Gmanagerのinstanceのsample が 1 と等しいなら、Stage2_Scene に移動する。
else

{

SceneManager.LoadScene("Title_Scene");

}
そうでないなら、Title_Sceneに移動する。
これを利用すると、ここまでのシーンでどのボタンを押したかによって、次に移動するシーンを変えることが出来ます。応用すると、クイズゲームや間違い探し、脱出ゲームなんかも作れそうですね。
試験公開中

注意書き

Unityインストール

テンプレートファイルをダウンロード

プロジェクト作成、テンプレートを実行

タイトルシーンを開いて実行する

タイトルシーンの挙動

使用するシーンを Build Profilesで追加する

再度、タイトルシーンを実行して動作を確認

ボタンクリックでシーン移動する仕組み

SampleStage_Scene

Hierarchyにゲームオブジェクトを追加する

サンプルステージを完成させる

背景画像を変更する

ボタンの画像を変更する

次のシーンに進めるようにする

自分でステージを作成する

シーンを作成

Canvasを追加、設定する

背景画像を表示する

必要なオブジェクトを追加

ボタンを作成する

ボタンを動かすためのスクリプト（プログラム）を作成

注意：名前をつけ間違えてしまったとき

スクリプトを編集する

ボタンにスクリプトを登録する

ボタンを移動させる

Stage1_Sceneに移動するかを確認

Stage2_Sceneを作成

Credit_Sceneも作ってみよう

押したボタンを記憶出来るようにする

GManagerについて

正解のボタンを押したかどうかを記録する

正解の回数を記録する

条件に応じて移動するシーンを変える

Discussion
