Unityでスタートボタン、ゲーム終了ボタンのUIを作成する

今回はUnityでタイトル画面のスタートボタン、ゲーム終了ボタンのUI(ユーザインタフェース)を作成してみます。

今まではひとつのシーンにオブジェクトを作成し、ゲーム開始とともにいきなり戦闘に入っていました。
一般的なゲームではもちろんそんなことはありえません。
タイトル画面が表示され、なんらかのスタートボタンを押してゲームの中身に移動するはずです。

タイトル画面を一つのシーンとして作成し、スタートボタンを押したらゲームの中身のシーンへと移動する処理を完成させます。

スポンサーリンク

新しいシーンを作成する

まずはタイトル画面を新しいシーンに作成したいと思います。

シーン1

メニューのFile→New Sceneを選択し、新しいシーンを作成します。File→Save Scene Asと選択し、シーンを「Title」という名前で保存しておきます。

タイトル画面を構成する要素を作成

シーン2

次にヒエラルキー上で右クリック→UI→Canvasを選択します。UIはCanvas上に設置していくことになります。

シーン3

UI関連のものを作成すると必ずCanvasとEventSystemが作成されます。ボタン等が押された時のイベントを処理するのがEventSystemなので削除しないでそのままにしておきます。

シーン4

Canvasはどのように配置するか3つから選べます。デフォルトではScreen Space – Overlayとなっています。
これはシーンに配置するオブジェクト等より手前に表示されます。

Screen Space – Cameraは指定したカメラ上にスクリーンサイズで表示されます。
World Spaceはスクリーンとは関係なくゲームオブジェクトと同じように表示されます。

これはキャラクターと一緒に動くHPのバー等を作成する時に使えます。つまり普通のゲームオブジェクトと同じように扱えます。

今回はタイトル画面なのでScreen Space – Overlayを選択します。

scene5

Canvasの子要素としてUI→Panel、その子要素としてUI→TextとUI→Buttonを作成します。

Canvasは実体を持たない枠組みでPanelは実体のある枠組みという感じです。
複数のPanelを設置してそれぞれのPanelにテキストやボタンを設置し分ける事が出来ます。

シーン6

PanelのインスペクタでColorを薄緑に変更します。
PanelはCanvas全体の大きさと同じなので、タイトル画面の背景が緑色になります。

シーン7

Anchorsをクリックし、Shiftキー+Altキーを押しながらTopのCenterを選択します。
Shiftキー+Altキーを押しながら選択する事で、アンカーの移動と同時にテキストも移動します。

AlignmentをCenterとMiddleにして中央、真中にテキストを表示します。

BestFitにチェックを入れると枠の大きさに合わせてテキストサイズを合わせる事が出来ます。
(Min SizeとMax Sizeの範囲内のみ変わります。)

テキストに使用するフォントの取り扱い注意

位置が確定したので、デフォルトのテキストをタイトルの名前に変更します。

テキストに使用されているフォントはゲームに同梱する場合、使用料を取られます。
インターネットブラウザはユーザーのパソコンにあるフォントを使って表示しているのでそんなことにはなりませんが・・・

その為、無料のフォントを使わせてもらう事にします。

から無料のフォントを探してダウンロードします。
ダウンロードしたらUnityのAssetsメニューからImport New Assetでフォントをインポートします。

テキストのフォント選択でインポートしたフォントに変更します。

シーン8

Add ComponentからUI→Effects→Outlineを追加してテキストの周りに線を付けます。

シーン9

上のような感じにタイトルが出来上がりました。

ゲームのスタートボタンを作成

次はボタンを改良していきます。

上にマウスを持っていったり、逆に外したり、クリックした時の演出をわかりやすくしたいと思います。
現状ではデフォルトで多少変化しているのがわかると思います。

ボタンは作成すると子要素としてボタンに表示されるテキストが配置されます。テキストの中身を「スタート」に変更しておきます。

次にボタンの演出を作成していきます。

シーン10

ボタンのインスペクタ上でButtonのTransitionをAnimationに変更します。
これでボタンの上にマウスが来た時などにそれぞれの演出を作成する事が出来ます。

TransitionをAnimationに変更したら、Transitionの下のAuto Generate Animationをクリックします。

保存ダイアログが出るのでそのまま保存します。これがボタンのアニメーターコントローラーになります。
これでボタンのアニメーションをコントロール出来ます。

それではボタンのアニメーションを付けていきましょう。

WindowメニューからAnimationを選択します。
ボタンを指定するとアニメーションの編集が出来ます。

シーン11

NormalのところをHighlightに変更します。
Highlightはボタンの上にマウスを乗せた時です。

シーン12

Add PropertyからImage→Colorをプラスします。
アニメーションの最初と最後にダイヤマークが表示されます。

最後のダイヤマークを選択し、録画マーク(赤いをクリック)します。
フレームの0の所のダイヤマークは不要なので選択し削除します。

フレームの移動はフレームの数字が書いてあるところをドラッグすると出来ます。
インスペクタのImageのところでColorを変更します。

これでボタンの上にマウスが来た時に少しづつ赤色になります。
色の変更の他にサイズも少し大きくしてみます。

フレームの変更する位置に赤い線を置いて録画ボタンが押されている状態でインスペクタの値を変更すると、自動でプロパティが追加されます。

同じようなやり方でマウスクリック時のアニメーションも編集します。
マウスクリック時はボタンを青色にして設定しました。

シーン13

出来たボタンは上のようになります。
見た目は全然よくないですね・・・・、ボタンアニメーションをどう作るかという点だけわかっていただければと・・・。

これでボタンの演出が終了したので、最後にボタンを押したらゲームシーンに移動するという風にしたいと思います。

スタートボタンを押した時にシーンを遷移させるスクリプト

まずはボタンを押した時に実行する機能を作成します。

ヒエラルキー上で右クリック→Create Emptyを選択し、名前をGameSystemに変更し、新しいスクリプトGameSystemを作り追加します。

GameSystemにはGameStart関数を用意し、スタートボタンがクリックされたらゲームシーンに移動するようにしています。
(Gameという名前でSceneを作っている必要があります)

Application.LoadLevelでシーンの移動が行えます。
シーンの移動を行う場合FileメニューのBuildSettingsを選択し、シーンをドラッグ&ドロップして追加します。

一番上のシーンが最初に再生されるシーンとなります。

次にボタンがクリックされた時にGameSystemのGameStart関数が実行されるようにします。

シーン14

ボタンのインスペクタでOn Clickの所で+を押します。

GameObjectにGameSystemをドラッグ&ドロップしno functionとなっている個所にGameStartを選択します。

これで、ボタンが押された時にGameSystemオブジェクトのGameStart関数が実行されることになります。

Unityの実行ボタンを押して確認してみてください。
タイトル画面からゲームシーンへの移動が行われるはずです。

ゲーム終了ボタンを作成する

ゲームスタートボタンが出来たのでゲーム終了ボタンも作成してみましょう。

スタートボタンをコピーしてその下にゲームを終わるボタンを作成します。

ゲームを終わるボタンを設置

↑のような感じに配置しました。

ゲームを終わるボタンを押した時の処理をGameSystemスクリプトに追加します。

#ifやUNITY_EDITOR等はプラットフォームで処理分けする為の処理です。

Unity のマニュアルは、Unityの使い方を学ぶ手助けとなります。Unityを使って 2D や 3D ゲームを作成したり、ゲーム以外のアプリを作成したりして多くの経験を積みましょう。

詳しくはUnityのマニュアルを参照してください。

GameEnd関数は『ゲームを終わる』ボタンを押した時に実行する予定の関数で、Unityのエディターだった時は再生をやめ、
WebPlayer形式だった時はヤフーのトップページに飛ばし、それ以外の時はアプリケーションを終了します。
WebPlayer形式の出力ってそろそろ出来なくなるっぽい・・・・(^_^;)

WebGL形式で出力する事になるんですね、でもUnityが64bit版じゃないと出力出来ない・・・、それ以前にわたくしの場合パソコンが古くてファイル出力出来ない・・・(:_;)

スタンドアロン形式でゲームを配布する場合は『ゲームを終わる』ボタンを押すとウインドウが閉じるようになります。

次にゲームを終わるボタンのOnClickにGameSystemオブジェクトをドラッグ&ドロップしGameEnd関数を実行するように設定してください。

それではスタンドアロン形式で出力したゲームの『ゲームを終わる』ボタンを押して確認してみましょう。

ゲームを終わるボタンを押した時の実行結果

↑のようにゲームを終わるボタンを押すとスタンドアロン形式なのでApplication.Quit()が実行されゲームが終了します。

これでタイトル画面のスタートボタンUIとゲーム終了ボタン、シーンの遷移が出来るようになりました。
UIに関してはまったく凝って作っていないので、しょぼい感じになっていますが、
簡単?にインタラクティブなUIが作れる事がわかりました。