前回の記事でデモ画面の見方を紹介しました。
今回は実際にゲームで使うならどんな使い方をするか、紹介していきます。
今回はボタンとシーン遷移の方法について紹介をしていきます。
初心者でも分かりやすく、画像付きで、そのまま設定すれば動くように解説をしていきます。
使用するアセット
前回から同じく、Clean & Minimalist GUI Packを使用します。
完成形のデモ
Clean & Minimalist GUI Packがあれば、ノーコードで以下の実装ができます。
- シーン遷移
- 洗練されたグラデーションのボタン
- ボタンを押した時のぽちっという音（動画では音無しなので分からないですが……）
最初がアセット無しで実装した場合、次が、Clean & Minimalist GUI Pack有りで実装した場合です。アセットなしだとぱっと切り替わって、後者はじんわりとフェードしているのが分かります。
このページの中でやること(ざっくり)
- Package Managerから「Clean & Minimalist GUI Pack」をインポートする
- シーンを作成
- StartSceneを作り込む
- クリックするとStartSceneからGameSceneに遷移する
Package Managerから「Clean & Minimalist GUI Pack」をインポートする
インポートの仕方は前回の記事で解説をしているので、分からなくなったら参考にしてください。
シーンを作成
今回は「GameScene」「StartScene」を作成します。
Asset > Scenesフォルダで右クリックし、Create > Scene > Sceneをクリック。
作成したSceneの名前を「GameScene」と名前を変更する。
最初からあったSampleSceneは名前をStartSceneに変更する。
ようはこういう状態になればOK
SceneをBuild Profilesに登録していきます。GameSceneを開いた状態で、File > Build Profilesをクリック。
Scene Listをクリックし、「Add Open Scenes」をクリック。
赤枠で囲んだように、「StartScene」「GameScene」が登録され、StartSceneが「0」の状態にします。
もし、GameSceneが1になっている場合は、ドラッグすることで順番を入れ替えることができます。
StartSceneを作り込む
最小構成で動くものを作ります。
ヒエラルキーウィンドウの上で右クリック。UI（Canvas）>Canvasをクリック。
追加したCanvasをクリックし、「Render Mode」を「Screen Space - Camera」に変更。
Render Cameraの項目に、Hierarchy上にあるMain Cameraをドラッグして持ってくる。画面のようになればOK
「Assets/GUIPack-Clean&Minimalist/Demo/Prefabs/UI Elements/Button」配下にボタンのPrefabがあるので、好きなボタンを選んでコピーします。
今回は「Assets/GUIPack-Clean&Minimalist/Demo/Prefabs/UI Elements/Button/Button/Rounded/Basic/Filled/Button Rounded - Filled.prefab」を選びました。
Assets/Prefabフォルダを作成し、作成したフォルダの中に先ほどコピーしたボタンを貼り付けます。
なぜ、Assets/Prefabフォルダをわざわざ作って、その中にコピーするの？直接使えばいいじゃん！と思うかもしれませんが、
アセット内にある元Prefabをそのまま編集すると、
・アセットを再インポートしたときに変更が消える可能性がある
・どこまでがアセット標準で、どこからが自分の変更か分からなくなる
などの理由があるため、コピーをしています。
見づらかったので、背景代わりに白い四角を追加しました。これはお好みで。
コピーしてあったボタンを先ほど作成したCanvasの配下にくるようにドラッグ。
Rect Transformは以下の値を設定します。
Pos X、Pos Z 0
Pos Y -400
Width 380
Height 80
Scale 1,1,1
シーン遷移のスクリプトを追加します。
追加したボタンを選択した状態でInspector上の「Add Component」をクリック。
Scene Transition(Script)を追加し、以下の項目を設定します。わたしの場合は、画像のように設定しました。
| 項目名 | 説明 |
| Scene | 遷移先のシーン名 |
| Duration | 数字が小さいとフェード間隔が短く、大きいとフェード時間が長くなる。 |
| Color | 暗転なら黒、明転なら白などを指定する。今回は紺色を指定。 |
Clean Button(Script)内のOn Click()内にある、＋マークをクリックします。
OnClickが一つ増えたので、Hierarchyウィンドウにあるボタンを赤矢印のようにドラッグします。
赤枠で囲んだ「No Function」をクリックし「SceneTransition > PersormTransition()」を選択します。
これで設定は完了です。Playボタンをクリックして、挙動を確認してみましょう。
シーン遷移時にフェードがかかるようになり、ゲーム全体の雰囲気がぐっと引き締まります。
終わり
他のGUI素材を買ったことがないので断言はできませんが、おそらく同じ製作者のricimiさんが作られたGUI Pack系素材だったらこのやり方で同じことが出来る可能性が高い（玉虫色な言い方）と思います。
ソースコードを書くことなく、アセットのみでシーン遷移＆ボタン設置を行いました。
ソースコードを一行も書くこと無く、ちょっとおしゃれな演出付きのシーン遷移が実装できました。
ボタンのグラデーションも、いざ自分で色の配置を考えるとなると色見本とにらめっこしたり、音もゲームに使っていい音声素材を探して、どんどん凝り始めてしまったり……と、そういう手間をぐぐっと減らしてくれる素材だと思います。
手軽にスタイリッシュなデザインのゲームを作りたい方におすすめのアセットです！
関連記事
コメント