【Unity】ボタンで画面遷移する方法【画面遷移】

タピオカミルクティでおなかを下しました。mizkyです。

本記事ではUnityでボタンを使用した画面遷移の方法を紹介します 。

1. この記事を読むことで・・・

ボタンを押して画面が遷移するアプリを作れるようになります。
環境はUnity 2019.1.12f1です。

2. 遷移元・遷移先の2つのシーン作成

まずは遷移元と遷移先のシーンを新規作成します。

シーン新規作成a

新しいシーンはHierarchyタブ内に「Untitled」と表示されるので名前を任意に変更します。

名前を付けて保存a
名前を付けて保存b

シーンを作成すると下記画像のようにProjectタブのAssets>Scenesに表示されます。

3. ビルドセッティングにシーン登録

ビルドセッティングを開き、遷移先と遷移元のシーンを登録します。
Add Open Scenesを押すと、今開いているシーンが登録されます。

ビルドセッティングにシーン追加a

遷移先・遷移元双方登録すると下記画像のようになります。
右側の番号はアプリを起動したときに起動する順番で、ドラッグで場所を入れ替えることで順序変更できます。
一番初めに起動してほしい「 init_scenes 」を0番にしてます。

ビルドセッティングにシーン追加b

4. シーンにボタンの追加

Hierarchyタブのすぐ下のCreateを押すとシーンに追加できるオブジェクトが出てきます。
この中のUIカテゴリのButtonを選択します。

ボタンの追加

ボタンを追加するとHierarchyタブ内にCanvasツリーの中にButtonオブジェクトができます。
しかしボタンを追加しても左側のプレビュー画面にボタンは現れません。
追加したボタンを確認するため、Canvasを選択した状態でInspectorタブ内のRender Modeを選択→Screen Space – Canvasを選択します。

ボタンをプレビューできるようにするa

Hierarchyタブ内のMain Cameraを Inspectorタブ内のRender Cameraドラッグアンドドロップするとプレビュー画面にボタンが現れます。
このボタンをドラッグして位置を調整します。

ボタンをプレビューできるようにするb

5. スクリプトの追加

スクリプト用のフォルダを作ります。
Assetフォルダ上で右クリックしてCreate→Folderを選択し、フォルダに名前をつけます。

新しいフォルダを作るa

新たに作成したScriptフォルダ上で右クリックしC#Scriptを作成します。

スクリプトファイルを作るa

遷移先・遷移元用の2つ作成します。

スクリプトファイルを作るb

スクリプトのアイコンをダブルクリックするとVisualStudio(以降VS)が開きます。
画像のような警告が出てもOKで大丈夫です。

vs起動a

VS起動後、下記画像のような初期コードが現れます。

initスクリプトa

赤枠のようにコードを追加してください。
遷移元スクリプトの黄色で囲んだ部分は遷移先のシーン名を記入します。

initスクリプトb

遷移先スクリプトの黄色で囲んだ部分は遷移元のシーン名を記入します。

mainスクリプトa

6. ボタンとスクリプトの紐づけ

Hierarchyタブ真下のCreateを選択し、Create Emptyをクリックし空オブジェクトを作成します。

空オブジェクト作成a

空オブジェクトを右クリックしRenameで名前を変更します。
名前変更したオブジェクトを選択した状態でスクリプトファイルをInspectorタブ内にドラッグアンドドロップします。
遷移先シーンは遷移先用スクリプトをドラッグアンドドロップし、遷移元シーンは遷移元用スクリプトをドラッグアンドドロップしてください。

空オブジェクトにスクリプト追加a
空オブジェクトにスクリプト追加b

Hierarchyタブ内Canvasツリー内のButtonを選択し、Inspectorタブ内のOnClickの「+」をクリックします。

ボタンに紐づけa

先ほど作ったオブジェクトをOnClick内の「None」の部分にドラッグアンドドロップします。

ボタンに紐づけb

OnClick内の「No Function」と書かれている箇所をクリックします。
自分が作成したスクリプト名を選択し、ButtonClicked()を選択します。
これを遷移先・遷移元双方行います。

7. 完成!

これで遷移元→遷移先への画面遷移はできるようになりました。
現状のアプリだと遷移しても同じ画面表示なので遷移したことがわかりません。
そのため遷移元と遷移先でテキストを表示させ、遷移したことがわかるようにします。

テキストa

このようにテキストを表示させます。

テキストb

動作確認するときは画面上方の再生ボタンみたいな三角形のやつをクリックします。
すると左下の赤枠の部分で実際に操作することができます。
Buttonを押してみると・・・

動作確認a

画面遷移できました。

動作確認b

コメント

タイトルとURLをコピーしました