【Unity】チュートリアルの「Roll a Ball」をやってみる話 #13

-
記事をご覧いただき、誠に有難うございます。

投稿主の無能です。

今回は、ゲームの最終調整をしたいと思います。

ゲームの最終調整をする

ゲーム全体を見渡し、最終調整をやっていきます。

見える部分は勿論のこと、見えない部分や気付きにくい所などを見ていきます。

文字の縁取り

文字の縁取りをして、テキストがよりハッキリと表示されるようにします。

現状だとこのようなゲーム画面です。

Gameビュー

残り時間の表示が黄色と重なって、少し見づらくなっています。

このテキストに縁取りをしていきます。

ProjectビューのAssetsフォルダ内のFontsフォルダに移ります。

Assetsフォルダ内のFontsフォルダに移る

この中にある、Fマークが付いたCorporate-Logo-Rounded SDFというファイルの左側の三角をクリックし、折りたたまれた中を見ます。

Corporate-Logo-Rounded SDFというファイルの左側の三角をクリックする

この中のCorporate-Logo-Rounded SDF Materialを選択します。

Corporate-Logo-Rounded SDF Materialを選択

するとInspectorビューはこのようになっています。

Inspectorビュー

このOutlineという項目を調整することで、縁取りが実現できます。

ProjectビューのFontsフォルダに戻ります。
Corporate-Logo-Rounded SDF MaterialをCtrl+Dキーで複製します。

Corporate-Logo-Rounded SDF MaterialをCtrl+Dキーで複製

複製した方の名前の末尾に「_White」を付けます。

名前の末尾に「_White」を付ける

InspectorビューのOutlineの項目に移ります。

InspectorビューのOutline

Colorを白にして、Thicknessを0.3にします。


これで白い縁取りが出来るようになりました。
同様に黒い縁取りを作ります。

末尾に_Whiteを付けたものをCtrl+Dキーで複製し、名前の末尾を「_Black」にします。

Ctrl+Dキーで複製し、名前の末尾を「_Black」にする

InspectorビューのOutlineの項目に行き、Colorを黒にします。

Colorを黒にする

これで黒い縁取りも出来ました。

あとはテキストに適用させていきます。

HierarchyビューのCountDownTimerテキストを選択し、Inspectorビューを見ます。

CountDownTimerテキストを選択し、Inspectorビューを見る

このMain Settings内のMaterial Presetに、先程作成した縁取りのMaterialを設定します。

Main Settings内のMaterial Presetに、先程作成した縁取りのMaterialを設定

CountDownTimerは白い縁取りを設定します。

Material Presetのプルダウンを押して、Whiteを設定します。

Material Presetのプルダウンを押して、Whiteを設定

するとCountDownTimerに白い縁取りが出来ました。

CountDownTimerに白い縁取りが出来た

同じ要領で、テキストに縁取りを付けていきます。

ゲーム画面のテキストは
  • アイテムの残数
  • ステージクリア
  • ステージ失敗
ですので、これらに縁取りを施します。

このようになります。

ステージクリア

ステージ失敗

グッと見やすくなりましたね。

次はタイトル画面です。

このようになります。

タイトル画面

これで文字の縁取りが出来ました。

次は、アプリケーションの終了です。

アプリケーションの終了

Unity Editorだとついつい忘れがちなのが、アプリケーションの終了という概念です。

Unity Editorでゲームを実行して確認するには、再生ボタンで気軽に操作できますが、PCではどうなるでしょうか？
終了できる方法が無いと、Alt（オルト）+F4キーで終了したり、タスクマネージャーで強制終了させたりと言った手段になります。

ですので、アプリケーションの終了を何らかの形で出来るようにします。

今回はEscキーを押すとアプリケーションが終了するようにします。

GameManagerスクリプトをVSで開きます。

Update関数内に、次のように記述します。


// Escキーが押されたら
if (Input.GetKey(KeyCode.Escape))
{
	// アプリケーションを終了
    Application.Quit();
}

このようになります。


今回はゲームを実行して確認出来ないので、ビルドした時に確認したいと思います。

次にTitleInputスクリプトのUpdate関数内にも、同様の記述をします。

このようになります。


ではGameManagerスクリプトとTitleInputスクリプトを保存します。

次に、Escキーで終了出来ることを知らせるテキストを追加していきます。

まずはタイトル画面ですが、このようになりました。

「Escキーでゲームを終了」というテキストを追加

QuitTextを追加

QuitTextの設定

次にゲーム画面にテキストを追加します。

落ち着いて表示出来るように、ステージクリア・失敗のUIにテキストを追加しました。
このようになりました。

ステージクリア

ステージ失敗

QuitTextを追加

QuitTextの設定

これでアプリケーションの終了が出来ました。

画面表示の調整

最後に、画面表示の調整を行います。

まず、ゲームを実行する時に最大化させるようにします。

GameビューのPlay Focusedのプルダウンを押して、Play Maximizedにします。

Play Focusedのプルダウンを押す

Play Maximizedを選択

ゲーム実行時に最大化するようになった

この状態でゲームを実行して確認します。

タイトル画面

Gameビュー

想定しているゲーム画面と違いますね。

これはCanvasの拡大・縮小がディスプレイのサイズとあっていないから、このような状態になります。

ではCanvasの設定をしていきます。

まずはタイトル画面のシーンです。

CanvasであるTitleScreenを選択して、Inspectorビューを見ます。


Inspectorビューの中にCanvas Scalerという項目があります。

これがCanvasのサイズを決めているのですが、この中のUI Scale Modeという項目で調整できます。

今はConstant Pixel Sizeとなっていて、どんな画面サイズでも同じピクセル（サイズ）で描画するような設定になっています。

Canvas Scaler

これをScale With Screen Sizeにすると、画面サイズにあわせて拡大・縮小するようになります。

Scale With Screen Sizeにする

これで画面サイズにあわせて拡大・縮小するようになった

そして、MatchをHeightにします。

MatchをHeightにする

このMatchは、アスペクト比が変わった時に、縦・横どちらのレイアウトを優先的に保持するか、というものになります。

ではゲームを実行して確認します。

タイトル画面

これで想定したタイトル画面になりました。

次にゲーム画面の調整をします。

UI_GameStatusを選択して、Canvas Scalerをタイトル画面と同様に設定します。

Canvas Scalerをタイトル画面と同様に設定

ではゲームを実行して確認します。




ゲーム画面の方も想定通りになりました！

その他の部分は、気になる方は色々設定して調整してみてください。

今回はここまで。


まとめ

本記事では
  • 文字の縁取りをした
  • アプリケーションの終了を実装した
  • 画面サイズにあわせて拡大・縮小するように設定した
という事を行いました。

次は、いよいよビルドしてみたいと思います。

本記事もご覧頂き、誠に有難うございます。
ではまた。

コメント

コメントを投稿