0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

LoadLevelActionを使用したシーン遷移

Last updated at Posted at 2021-01-16

#前提条件
LoadLevelAction.jpg
LoadLevelAction (1).jpg
例としてSTAGE1のアバター(=黄色いボール)をゴール(青緑の長方形)に移動させると、STAGE2に遷移するシチュエーションについて考えてみます。

#Unityエディタ上での準備
スクリーンショット (1972).png
1:Unity HubでUnityPlayGroundStartフォルダを読み込んだ直後の状態だ。

スクリーンショット (1973).png
2:プロジェクトエリア上で右クリック→Create→Folderを選択する。

スクリーンショット (1974).png
3:新規作成されたフォルダに任意のフォルダ名(=ここでは「Test」)を入力する。以後、このフォルダ内で作業を進めていく。

スクリーンショット (1975).png
4:プロジェクトエリアで「Assets」→「Test」を開いた状態で、メニューから「File」→「Save As」を選択する。

image.png

image.png
5:Testフォルダ内で新たにファイル名「Stage1」を入力し、シーンファイルを作る。

スクリーンショット (1977).png
6:「Stage1.unity」ファイルができたところで、もう一度同じ操作を行う。

image.png
image.png
7:今度はファイル名を「Stage2」とする。

スクリーンショット (1979).png
8:図のように「Stage1」「Stage2」という、2つのシーンファイルが作成されているか確認しよう。

image.png
9:メニューから「File」→「Build Settings」を選択する。

スクリーンショット (1981).png
10:Scenes In Build欄ですでに表示されているシーンファイルを右クリックして「Remove Selection」を選択し、すべて削除する。

スクリーンショット (1982).png
11:プロジェクトエリアから「Stage1」「Stage2」の2つのシーンファイルを順番に「Scenes in Build」欄にドラッグ&ドロップする。順番を間違えないように注意しよう。その後、XをクリックしてBuild Settingsウィンドウを閉じる。

#Stage1の制作
image.png
1:プロジェクトエリアから「Stage1」シーンファイルを選択しよう。

スクリーンショット (1989).png
2:以下の手順で設定を行う。
①プロジェクトエリアから「Assets」→「Images」→「GeometricShapes」を開き、「Square」をHierarchyにドラッグ&ドロップする。
②Inspectorでオブジェクト名を「Floor」、タグを「Ground」に設定する。
③続いてTransform」でパラメータを設定し、横に細長いブロックを作る。
④Add Componentから「Box Collider 2D」を絞り込み検索し、アタッチする。

スクリーンショット (2007).png
3:プロジェクトエリアで右クリック→「Create」→「Physics Material 2D」を選択する。

スクリーンショット (2009).png
4:作成された「Physics Material 2D」のオブジェクト名を「Ground」に変更し、InspectorでFrictionを「0.1」、Bounsnessを「0」にする。これらの値は操作性に直結するので、後ほど自分の好きなように調整しよう。

スクリーンショット (2010).png
5:作成した「Physics Material 2D」を「Floor」オブジェクトのInspectorにある「Box Collider 2D」の「Material」スロットにドラッグ&ドロップする。「Material」スロットは「Extra Options」メニューに隠れているので注意しよう。

スクリーンショット (2011).png
6:作成した「Floor」オブジェクトをプロジェクトエリアにドラッグ&ドロップしてプレファブにする。

スクリーンショット (2013).png
7:以下の手順で設定を行う。
①「Floor」と同様に、プロジェクトエリアから「Assets」→「Images」→「GeometricShapes」を開き、「Circle」をHierarchyにドラッグ&ドロップする。
②Inspectorでオブジェクト名を「Player」、タグを「Player」に設定する。
③「Transform」でパラメータを設定し、図のように配置する。
④Sprite Rendererコンポーネントで「Color」スロットをクリックし、任意の色に変更する。最後にXボタンをクリックしてColorチャートウィンドウを閉じる。

スクリーンショット (2015).png
8:以下の手順で設定を行う。
①「Player」と同様に、プロジェクトエリアから「Assets」→「Images」→「GeometricShapes」を開き、「Square」をHierarchyにドラッグ&ドロップする。
②Inspectorでオブジェクト名を「Goal」、タグを「Finish」に設定する(この演習ではFinishタグは使用しないが、念のため)。
③「Transform」でパラメータを設定し、図のように縦長に大きさを変更して、配置する。
④Sprite Rendererコンポーネントで「Color」スロットをクリックし、任意の色に変更する。最後にXボタンをクリックしてColorチャートウィンドウを閉じる。

スクリーンショット (2016).png
9:「Player」オブジェクトにCircle Collider 2Dをはじめ、必要なスクリプトをアタッチしていく。必要なスクリプトとパラメータの設定例は以下の通りだ。

スクリーンショット (2092).png
①Circle Collider 2D(円形の当たり判定を加える)
②Rigidbody 2D(オブジェクトに力を加えて移動できるようにする/ConstrainsでFreeze Rotationをオンにする)
③Move With Arrows(左右キーで移動/Movement TypeをOnly Horizontalに変更する)
④Jump(スペースキーを押したときに上向きの力を加える)
⑤Auto Move(常に下向きに力を加える)

スクリーンショット (2028).png
10:Hierarchyの「Player」オブジェクトをプロジェクトエリアにドラッグ&ドロップし、プレハブにする。

スクリーンショット (2032).png
11:同じように「Goal」オブジェクトにも必要なスクリプト(以下参照)をアタッチして設定する。

スクリーンショット (2032).png
①Box Collider 2D(四角形の当たり判定をつける/Is Triggerをオンにする)
②Condition Area(オブジェクト同士の重なりを判定する/Filter by Tagをオンにして、Tag to Check forをPlayerにする)

スクリーンショット (2033).png
12:Condition AreaのGameplay Actions欄にある+ボタンをクリックし、メニューから「LoadLevelAction」を選択する。

スクリーンショット (2034).png
13:Load Levelコンポーネントの「Scene to Load」メニューから「Stage2」を選ぶ。

スクリーンショット (2035).png
14:Hierarchyから「Goal」オブジェクトをプロジェクトエリアにドラッグ&ドロップして、プレハブにする。これでStage1は完成だ。「File」→「Save」で上書き保存しておこう。

#Stage2の制作
スクリーンショット (2036).png
1:プロジェクトエリアから「Stage2」シーンファイルをダブルクリックして選択する。

スクリーンショット (2037).png
2:プロジェクトエリアから「Goal」「Player」「Floor」プレハブをそれぞれHierarchyにドラッグ&ドロップする。

スクリーンショット (2038).png
3:複数のFloorプレハブをドラッグ&ドロップして、大きさや位置を整えたり、Goalプレハブの場所を変えたりして、レベルデザインを行う。レベルデザインが終わったら、「File」→「Save」で上書き保存しておこう。

スクリーンショット (2066).png
スクリーンショット (2067).png
4:再びStage1をダブルクリックして選択し、ゲームを実行しよう。キャラクターを右に移動させてゴールに接触すると、Stage2に遷移すれば成功だ。

##ワンポイントアドバイス 遷移先の変更
image.png
Stage2のゴールに到達すると、再びStage2の初期状態に戻る。Stage2の「Goal」プレハブにアタッチされているLoadLevelから、Sccene to loadを「Stage1」にすると、ゴールに到達後にStage1に遷移させられる。このようにScene to loadの設定を変えることで、遷移先を変更できる。

#ステージのリロード
スクリーンショット (2044).png
1:現状のままでは、アバターが床から落ちた時にゲームを一旦停止して、再度実行しなくてはならず、面倒だ。そこでキーボードの特定のキーをクリックすると、ステージの初期状態に戻るように設定してみよう。まず、「Stage1」シーンドライブをダブルクリックして選択し、Hierarchy上で右クリック→Create Emptyを選択する。

スクリーンショット (2045).png
2:新しく作成されたGameObjetを選択し、Inspectorでオブジェクト名を任意の名前(ここではGameManager)に変更する。空の(=透明の)オブジェクトなので、場所はどこでもいい。

スクリーンショット (2046).png
3:「GameManager」のInspectorでAdd Componentをクリックし、「Condition Key Press」を絞り込み検索して、アタッチしよう。

スクリーンショット (2047).png
4:Condition Key Pressコンポーネントの「Key To Press」メニューを開き、任意のキー(=ここではReturn)を選択する。

スクリーンショット (2048).png
5:Gameplay Ationsの+ボタンをクリックして、LoadLevelActionを選択する。

スクリーンショット (2049).png
6:Scene to loadで「RELOAD LEVEL」を選択しよう。

スクリーンショット (2050).png
7:ゲームを実行して、設定したキー(ここではReturn、またはEnterキー)を押すと、ステージの初期状態に戻れば成功だ。

スクリーンショット (2051).png
8:GameManagerオブジェクトをプロジェクトエリアにドラッグ&ドロップしてプレハブにする。その後、「File」→「Save」で上書き保存する。

スクリーンショット (2052).png
9:プロジェクトエリアで「Stage2」シーンファイルをダブルクリックして、エディタ上にStage2を表示させる。その後、作成したGameManagerプレハブをHierarchyにドラッグ&ドロップする。これでStage2でも特定のキーを推せば、そのステージの初期状態に戻るようになる。ぶじ完成したら上書き保存しておこう。

#タイトル画面を作成する
Condition Key PressとLoadLevelActionを組み合わせると、タイトル画面を作って、そこからゲームを開始させられる。タイトル画面→Stage1→Stage2→タイトル画面とループする構造を作ってみよう。

スクリーンショット (2053).png
1:Stage1を表示して、「File」→「Save As」を選択する。

image.png
image.png
2:「Stage1」「Stage2」と同様に、Testフォルダ内に新しく「Title」シーンファイルを作成する。

スクリーンショット (2055).png
3:MainCamera以外のオブジェクトを削除する。

スクリーンショット (2056).png
4:GameObject→UI→Textを選択する。

スクリーンショット (2057).png
5:以下の手順で設定を行う。
①Gameタブをクリックする
②HierarchyでCanbas→Textを選択する。
③オブジェクト名を「Title」に変更する。
④Rect Transformコンポーネントでパラメータを図のように設定する。
⑤Textコンポーネントで「Text」欄にゲームタイトルを入力する。その後、図のようにパラメータを設定する。
⑤Colorスロットをクリックして、カラーチャートを開き、フォントの色を変更する。終わったらXをクリックしてカラーチャートを閉じる。

スクリーンショット (2058).png
6:再びGameObject→UI→Textを選択する。

スクリーンショット (2059).png
7:以下の手順で設定を行う。
①HierarchyでCanbas→Text(新たに追加された方)を選択する。
②Rect Transformコンポーネントでパラメータを図のように設定する。
③Textコンポーネントで「Text」欄に「PUSH START」と入力する。その後、図のようにパラメータを設定する。
④Colorスロットをクリックして、カラーチャートを開き、フォントの色を変更する。終わったらXをクリックしてカラーチャートを閉じる。

スクリーンショット (2060).png
8:プロジェクトエリアから「GameManager」プレハブをHierarchyにドラッグ&ドロップする。その後、「File」→「Save」で上書き保存する。

image.png
9:「File」→「Build Settings」を選択する。

スクリーンショット (2064).png
10:プロジェクトエリアの「Title」シーンファイルを、「Scenes In Build」欄にドラッグ&ドロップする。このとき、図のように先頭になるように(Title、Stage1、Stage2の順)配置する。終わったらXをクリックしてウィンドウを閉じる。

スクリーンショット (2061).png
11:HierarchyのGameManagerプレハブを選択し、InspectorのCondition Key PressにあるKey To Pressメニューを開いて、「Space」を選択する。

スクリーンショット (2062).png
12:Load LevelコンポーネントのScene to loadメニューで「Stage1」を選択する。その後、「File」→「Save」で上書き保存する。

スクリーンショット (2095).png
13:同様に「Stage2」シーンファイルをダブルクリックして開き、「Goal」プレハブを選択後、InspectorのLoad LevelコンポーネントからScene to loadメニューで「Title」を選択する。その後、「File」→「Save」で上書き保存する。これでアバターがStage2のゴールに到達すると、タイトル画面に遷移するようになる。

image.png

image.png

image.png

image.png
14:実際にゲームを起動して遷移するか確認しよう。

スクリーンショット (2097).png
15:ぶじ遷移したら、ふたたびエディタ画面でSceneタブをクリックしよう。このように一般的な制作時にはSceneタブ、UIの設定時にはGameタブを切り替えると便利だ。

##注意 スコア類は保存されない
image.png
Unity PlayGroundのUIで表示される情報は、このままではシーンを遷移したときにリセットされてしまう。シーンを遷移してもスコアが保たれるようにするには、スクリプトの改造が必要で、本授業の範囲を超えてしまう。そのため本授業で複数のゲームステージを作りたい場合は、スコアなどを使用せず、Lifeも1にするといい(=触れたら即死)。スコアを使用したり、Lifeを1より多くしたい場合は、スクロールなどを活用して大きなステージを1つ作ることをオススメする。

#ゲームのビルド
「ゲームのビルド」とはゲームの実行ファイルを作成する行為を指す。ビルドすることでUnityエディタを必要とせずに、直接ゲームを実行させられる。PC、スマートフォン、ゲーム機などのデバイス上でゲームを実行する(=これを「実機上で再生する」などと呼ぶ)には、このビルドという工程が必要だ。

スクリーンショット (2091).png
Unityエディタで「File」→「Build Settings」を選択する。

スクリーンショット (2068).png
「Player Settings」をクリックする。

スクリーンショット (2071).png
「Player」メニューを選び、「ProjectName」欄にゲームの名称を半角英数字で入力する。これがゲームの実行ファイル名になる。次に「Resolution and Presentation」メニューを開き、「FullScreen Mode」を「Windowed」に変更し、「Default Window Width」と「Default Window Hight」を任意の数字(ここでは1280と720)に変更する。これがゲームを起動したときの、ウィンドウの解像度になる。設定が終了したら右上のXをクリックし、Project Settingsウィンドウを閉じる。

スクリーンショット (2072).png
「Build」ボタンをクリックする。

スクリーンショット (2073).png
「新しいフォルダー」をクリックし、任意のフォルダ名(ここではExe)を設定する。

image.png
image.png
Exeフォルダを開いた状態で、「フォルダーの選択」をクリックしよう。

スクリーンショット (2077).png
ゲームのビルドが開始される。

スクリーンショット (2088).png
Exeフォルダを開いて、図のようなファイルとフォルダができているか確認しよう。その後、実行ファイル(=SampleGame.exe)をダブルクリックして、ゲームが起動すればOKだ。

スクリーンショット (2083).png
スクリーンショット (2086).png
スクリーンショット (2087).png
スクリーンショット (2083).png
タイトル画面でスペースキーを押し、STAGE1からSTAGE2、そしてタイトル画面へとシーンが遷移するか確認しよう。

スクリーンショット (2089).png
他人にゲームを配布する時は、ExeフォルダをUSBメモリなどにコピーして直接わたすとスマートだ。このとき、フォルダを右クリック→圧縮→Zipを選び、Zip形式で圧縮すると、より手軽にコピーできる。

スクリーンショット (2090).png
Exe.zipが完成した状態。これをコピーするなどして配布しよう。

##ワンポイントアドバイス
スクリーンショット (2078).png
ゲームをビルドすると、図のようなエラーが出ることがある。

スクリーンショット (2080).png
その場合、Unityエディタで「Edit」→「Project Settings」→「Input Manager」→右上の歯車を右クリック→「Reset」をクリックするとエラーが修正される。最後に✕アイコンをクリックしてProject Settingsウィンドウを閉じればOKだ。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?