ボタンアイコンの設置
ぼくは、アセットストアから 無料の”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つのスクリプトで、複数のオブジェクトが操作できるよ。
オブジェクトの親子関係が設定できるから、
メニュー画面が非表示になれば、その中のボタンも全部非表示になるんだ♪
コメント