【超初心者向け】Unityで脱出ゲームを作ろう!第6回「金庫番号で開くギミック作成」

【超初心者向け】Unityで脱出ゲームを作ろう!第6回「金庫番号で開くギミック作成」
さて前回第5回の「部屋の切り替えボタン作成」では切り替えボタンを作成して部屋を左右へ移動するところまでやりましたね。今回は金庫番号で開くギミック作成についてご説明します。動画でも制作方法を公開していますので是非ご覧ください。
アプリ名:地下31階からの謎解き脱出ゲーム
対象:Android
アプリダウンロードはこちら(Androidのみ):
https://play.google.com/store/apps/details?id=com.hide.Escape_Game2


イエモン「おねげーします。」

鍵の掛かったドアボタン作成


まずは鍵のかかったドアを作成しましょう。「Hierarchy」より「Canvasgame」 → 「PanelWalls」 → 「PanelWall4」 → 「Wall」を選択し、右クリックで「Ul」 → 「Button」を選択して名前を「Buttontobira」に変更しましょう。
「Buttontobira」を作成したら選択し、「Inspector」より「Source Image」から作成した画像の「tobira.png」を選択します。そして大きさを調整するために「Set Native Size」をクリックします。
「tobira」画像を配置したら、位置を移動させましょう。「Hierarchy」の上にある「Move Tool」アイコンを選択します。選択したら矢印が出てきますので、その矢印をクリックして上下左右に移動させます。
「Hierarchy」に戻り、「Buttontobira」をクリックすると「Text」が出てきます。今回は画像のみなのでこの「Text」は削除してしまいましょう。

金庫を作成


さて続いては金庫を作成しましょう。「Hierarchy」より「Canvasgame」 → 「PanelWalls」 → 「PanelWall3」 → 「Wall」を選択し、右クリックで「Ul」 → 「Image」を選択して名前を「Imagekinco」に変更しましょう。あとは先ほどと同じように画像の選択と場所の移動です。
次に「Imagekinco」を選択し、右クリックで「Ul」 → 「Button」を選択して名前を「Button_0」に変更しましょう。
「Button_0」を作成したら選択し、「Inspector」より「Source Image」から作成した画像の「kinco_0.png」を選択します。そして大きさを調整するために「Set Native Size」をクリックします。そして位置を移動させましょう。今回も「Text」は不要なので削除します。
同じように「Button_1」「Button_2」も作成します。「Duplicate」でコピーしましょう。これで金庫の完成です。

鍵を表示させる


続いて金庫を開けたら鍵を表示させましょう。「Hierarchy」より「Canvasgame」 → 「PanelWalls」 → 「PanelWall4」 → 「Wall」を選択し、右クリックで「Ul」 → 「Button」を選択して名前を「Buttonkagi」に変更しましょう。
「Buttonkagi」を作成したら選択し、「Inspector」より「Source Image」から作成した画像の「kagi.jpg」を選択します。そして大きさを調整するために「Set Native Size」をクリックします。位置は画面真ん中ぐらいに移動させましょう。
金庫を開けたら表示されるようにしたいので、「Buttonkagi」は非表示に設定しましょう。「Inspector」の上部にチェックボックスがあるので、それをクリックして非表示にしましょう。

鍵を入手した後のアイコン画像表示


さて続いては鍵を入手した後のアイコン画像を表示させましょう。「Hierarchy」より「CanvasUl」を選択し、右クリックで「Ul」 → 「Image」を選択して名前を「ImagekagiIcon」に変更しましょう。 「Imagekagi」を作成したら選択し、「Inspector」より「Source Image」から作成した画像の「kara_box.jpg」を選択します。そして大きさを調整するために「Set Native Size」をクリックします。位置は右下の方に置きましょう。

スクリプト記述


さて画像の準備が出来たら次は、金庫の番号を合わせて開き鍵を入手するスクリプトを記述しましょう。前回作成したスクリプト「GameManager.cs」を開き、コードを下記のように記述します。
金庫の番号は下記のコードで設定します。好きな番号を入力しましょう。今回は「1」「2」「3」に番号設定しました。

スクリプト紐づけ


続いて記述したスクリプトとそれぞれの画像を紐づけていきましょう。 「Hierarchy」の「GameManager」を選択し、「Inspector」の「Game Manager(Script)」で「Hierarchy」のファイルをドラッグ&ドロップします。
続いては「Project」より、「Assets」→「Images」を選択して金庫の番号画像と鍵画像を紐づけします。

ボタンに関連付ける


次は金庫のボタンとスクリプトに関連付けをしましょう。 「Hierarchy」より作成した「Button_0」を選択し、「On Click()」の「+」を選択します。「None」の部分に「GameManager」をドラッグ&ドロップします。
そして「No Function」を選択し、「GameManager」をクリックし「PushButton_1()」を選択します。同様に「Button_1」「Button_2」を設定します。これで金庫ボタンの完成です。
続いて「Buttonkagi」「ButtonMessage」「Buttontobira」にも先ほどと同様に設定します。これで金庫番号で開くギミックの完成です。実際に動作するか「Game」を選択してプレビューで確認してみましょう。
さて本日はここまでにしましょう。次回はいよいよ最後でクリアーシーンを作る方法をご説明します。家田君ここまで分かったかな?
イエモン「はい。わかりまちたー。」
【脱出ゲームを作ろう! 目次】