メニュー画面をつくる

ゲーム開発

ボタンアイコンの設置

ぼくは、アセットストアから 無料の”2D Casual UI” をダウンロードして使ったよ!

白いアイコンは、好きな色に変更できるし便利だよ~♡

インポートしたら、スプライトエディターを使って切り分けて使うよ。


ヒエラルキーに”UI>画像” を作って、
インスペクターの“ソース画像”に、ダウンロードしたアイコンをセット。

位置やサイズ、名前を設定するよ。


メニュー画面の作成

”UI>画像” を作成して、背景と同じサイズに調整して、色を変えるよ。
そしてその中に、 ”UI>ボタン” を作るんだ。

Textが出てくる度に、毎回フォント変更をするのは面倒だから、
メニューバーの「編集」→「プロジェクト設定」→「TextMesh Pro」の「設定」から、
「Default Font Asset」の項目を変更するよ。


ボタンのサイズを調整したら、必要な分複製して、等間隔に並べるよ!

まず、並べたいオブジェクトの親を選択して、(この場合は「メニュー画面」。)
インスペクターの一番下「コンポーネントを追加」から、「Vertical Layout Group」を追加するんだ。

コンポーネントを入れると、ボタンが左上に整列されるよ。

“子を整列”を「Middle Center」にして、
パディングを開いて、
上と下に余白を設定すると、、

こんな感じの配置になるんだ。

この中にまた別のオブジェクトを入れると、
さらに整列されちゃうから、
Vertical Layout Group」を削除してね!

※横方向の整列の場合は「Horizontal Layout Group」だよ。



閉じるボタンは、”UI>ボタン” の中に ”UI>画像” を入れて”ソース画像”を変更したんだ。

(この×画像も、2D Casual UIのアイコンを使ってるよ!)


スクリプトを作る

簡単なプログラミングを作っていくよ!

プロジェクト内で 右クリック → 「作成」 → 「C#スクリプト」を選択。(Unity2022.~の場合)

「NewBehaviourScript」が作成されるから、名前を変更するんだ。
ぼくは、「Menu」というスクリプト名にしたよ。

ここで設定したスクリプト名が、プログラムの中のクラス名になるから、
後からスクリプト名を変更するときは、クラス名も変更してね!

↑デフォルトで設定されているスクリプト。

デフォルトのコードは一部削除して、”クラスの中”(黄色枠)にコードを書いていくよ!

//の後はコメントを入力できるよ。


先頭の ”public” は、別のオブジェクトから呼び出すのに必要なんだ!
Scratchでも変数を作るときに、”すべてのスプライト用”か、”このスプライトのみ”かを選択するよね。

コードを入力したら、保存して、”メニューボタン“ にスクリプトをアタッチするんだ。
(メニュー画面は非表示になると、プログラムが呼び出されないから、常に表示しているメニューボタンの方にアタッチしたよ。)


スクリプトの変数に、ヒエラルキーからオブジェクトをアタッチしてね!

それから、メニューボタンのコンポーネントに「Button」を追加して、”クリック時()”の動作を設定するよ。

インスペクター中のスクリプトをアタッチしてもいいし、ヒエラルキーの”メニューボタン”をアタッチしても良いんだ。

プロジェクトから直接アタッチすると、次の操作に進めないから注意してね。

クリック時()”の中の”No Function“をクリックして、”Menu“(さっき作ったスクリプト名)→
OnMenuButton()“(作成したメゾット名)を選択するよ。

さっき作ったメゾットが”public”じゃないと、ここに表示されないんだ。。


閉じるボタン” にも同じように ”クリック時()”の動作を設定するよ。

オブジェクト作成時に、UI>ボタン で作っていると、最初からButtonのコンポーネントが入ってるよ。


メニュー画面は、ゲーム起動時は非表示になるように、
インスペクターから非表示にしておいてね。

インスペクター内の一番左上の☑の切り替えで、表示・非表示になるよ。


これで、ゲームをPlayしてみると、メニューボタンでメニュー画面が表示されて、
閉じるボタンでメニュー画面が閉じるようになるよ!



Unityは1つのスクリプトで、複数のオブジェクトが操作できるよ。
オブジェクトの親子関係が設定できるから、
メニュー画面が非表示になれば、その中のボタンも全部非表示になるんだ♪

コメント

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