【Unity入門】画面サイズが変わっても同じようにUIが表示されるようにする
初期状態では画面サイズを変更した時に、TextなどのUIの表示が変わってしまいます。
画面サイズが変わっても同じように表示するには、Canvasに追加されている、Canvas ScalerコンポーネントのUI Scale Modeを『Scale With Screen Size』に変更するだけです。
この記事の目次
実際にやってみる
準備
それでは、実際に画面サイズが変わっても同じように表示されるようにしていきましょう。
以前作成した、『Unity Basics』というプロジェクトを開いてください。
『Unity Basics』を開いたら、シーンを作っていきましょう。
Scenesフォルダの中に作成します。
ProjectウィンドウでScenesフォルダを選択しましょう。
選択した状態で『＋』ボタンを押しましょう。
色々と出てくるので、『Scene』をクリックしましょう。
すると、Scenesフォルダの中に新しくSceneが作成されます。
Sceneの名前を『ScaleWithScreenSize』に変更しておきましょう。
Sceneを移動します。
ScaleWithScreenSizeをダブルクリックしましょう。
すると、Sceceを移動することができます。
Hierarchyウィンドウを見ると、現在のSceneが『ScaleWithScreenSize』に変わっていますね。
確認
画面サイズが変わった時にTextなどのUIの表示が本当に変わるのか、確認してみましょう。
まずはTextを作ってみます。
HIerarchyウィンドウで『+』ボタンを押しましょう。
すると、色々と出てくるので、UI > Textと押していきましょう。
すると、Textが作成されます。
UIはCanvas上に作成されます。
Canvasがない場合は、UIを作るときに自動で作られます。
Textの大きさが少し小さいので、大きくしておきましょう。
まずはTextオブジェクト自体を大きくします。
HierarchyウィンドウでTextを選択してください。
選択したら、InspectorウィンドウでWidthの値を『500』
Heightの値を『150』にしましょう。
これで、Textオブジェクト自体の大きさを変えることができました。
次に文字を大きくしましょう。
Textコンポーネントの
Charactorの
Font Sizeを
『100』にしてみましょう。
すると、文字が大きくなります。
文字を大きくしたら、位置を上端に移動させておきましょう。
この状態で画面を拡大してみましょう。
Gameビューの右上にある『︙』を押してください。
色々と出てくるので、『Maximize』を押します。
すると、画面が拡大されます。
Textの位置を見てみると、上端にあったTextが真ん中の方に寄っていますね。
このように、初期状態では画面サイズを変更した時にUIの表示が変わってしまいます。
4-24-1-3.画面サイズが変わっても同じようにUIが表示されるようにする
画面サイズが変わっても同じように表示されるようにしていきましょう。
画面サイズを元の大きさに戻します。
再び、右上の『︙』を押してください。
Maximizeをクリックすると、
元の大きさに戻ります。
それでは、画面サイズが変わっても同じように表示されるようにしていきましょう。
HierarchyウィンドウでCanvasを選択してください。
InspectorウィンドウでCanvas Scalerコンポーネントの
UI Scale Modeの値を変えます。
UI Scale Modeというのは、画面サイズが変わった時に、どのようにUIの大きさを変えるのか決めるための項目です。
初期状態では『Constant Pixel Size』になっています。
Constant Pixel Sizeは画面の大きさに関係なく、UIの大きさを一定に保つモードです。
今回は画面サイズが変わっても同じように表示されるようにしたいので、違うモードに変えます。
Constant Pixel Sizeをクリックしてください。
モードを選択できるので、『Scale With Screen Size』を選択しましょう。
Scale With Screen Sizeというのは、画面サイズが大きくなるにつれて、UIも大きくなるモードです。
このモードにすることにより、画面サイズが変わっても同じように表示されるようになります。
実際に同じように表示されるようになったのか、確認してみましょう。
モードを変えたことによって、Textの位置が変わってしまったので、上端に表示されるように位置を変えておきましょう。
この状態で、画面を拡大してみると、
同じように上端にTextが表示されますね。
このようにCanvas ScalerコンポーネントのUI Scale Modeを『Scale With Screen Size』に変更することによって、画面サイズが変わっても、同じように表示されるようになります。