【超初心者向け】Unityで脱出ゲームを作ろう!第4回「メッセージ表示」

【超初心者向け】Unityで脱出ゲームを作ろう!第4回「メッセージ表示」
さて前回の第3回の「画像配置」では背景や家具の画像を設置するところまでやりましたね。今回はメッセージの表示方法についてご説明します。 動画でも制作方法を公開していますので是非ご覧ください。
アプリ名:地下31階からの謎解き脱出ゲーム
対象:Android
アプリダウンロードはこちら(Androidのみ):
https://play.google.com/store/apps/details?id=com.hide.Escape_Game2


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

ボタン画像


まずはアイテム画像をタップしたらメッセージが表示されるよう、ボタン設定をしましょう。「Hierarchy」より「Canvasgame」 → 「PanelWalls」 → 「PanelWall2」 → 「Wall」を選択し、右クリックで「Ul」 → 「Button」を選択して名前を「Buttonbin」に変更しましょう。
「Buttonbin」を作成したら選択し、「Inspector」より「Source Image」から作成した画像の「bin.png」を選択します。そして大きさを調整するために「Set Native Size」をクリックします。
「bin」画像を配置したら、位置を移動させましょう。「Hierarchy」の上にある「Move Tool」アイコンを選択します。選択したら矢印が出てきますので、その矢印をクリックして上下左右に移動させます。今回はテーブルの上に設置しましょう。
「Hierarchy」に戻り、「Buttonbin」をクリックすると「Text」が出てきます。今回は画像のみなのでこの「Text」は削除してしまいましょう。

メッセージ表示


続いてボタンを押したらメッセージが出てくる仕掛けを作成しましょう。「Create」から「UI」→「Canvas」を選択し、Canvas名を「CanvasUl」に変更しましょう。
そして「CanvasUl」を右クリックで「Ul」 → 「Button」を選択して名前を「ButtonMessage」に変更しましょう。
続いてメッセージを表示させる場所を設定します。「Inspector」より「Rect Transform」で[PosY:-450、Width:600、Height:100]と設定します。
次に表示されるメッセージの大きさを設定します。「ButtonMessage」の「▼」をクリックして「Text」を選択します。「Inspector」の「Text」を空白にし、「Font Style」を「Bold」、「Font Size」を「30」に設定します。
タップしたら表示されるようにしたいので、「ButtonMessage」は非表示に設定しましょう。「Inspector」の上部にチェックボックスがあるので、それをクリックして非表示にしておきましょう。

メッセージ表示のスクリプト作成


さて続いては作成したメッセージボタンを押したら出てくるメッセージのスクリプトを作成しましょう。「Project」より「Assets」→「Scripts」フォルダ内で右クリックで「Create」→「C# Script」を選択し、ファイル名を「GameManager.cs」に名前を変更します。
「GameManager.cs」をダブルクリックで開き、コードを下記のように記述します。
続いて「Create」から「Create Empty」を選択し、「GameManager」と名前を記述します。
次に「Add Component」をクリックし、「Scripts」を選択し、先ほど作成したスクリプトの「GameManager」を選択します。

ボタンに関連付ける


作成した「Buttonbin」を選択し、「On Click()」の「+」を選択します。「None」の部分に「GameManager」をドラッグ&ドロップします。
そして「No Function」を選択し、「GameManager」をクリックし「PushButton_bin()」を選択します。これでボタンをタップしたらメッセージが表示されるようになります。
さて本日はここまでにしましょう。次回は部屋の切り替えボタンを作る方法をご説明します。家田君ここまで分かったかな?
イエモン「はい。わかりまちたー。」
【脱出ゲームを作ろう! 目次】