[Unity] アプリのタイトル画面のにテキストと画像を配置する

タイトル画面や「Stage 1」などのようにテキストやアイコン、画像を表示したい場合は、3Dとは別のCanvasにuGUI のTextやImage を配置することで実現できます。
 

Unity 2017.1

 




Canvas

 
Canvasとは、コンポーネントであり UI が配置、描画される抽象的な領域です。画像を貼ったりTextををそこに設定してオブジェクトとは異なる設定となります。
 

 

Canvasの生成

 
「Hierarchy」の「Create」
あるいはメニューの「GameObject」から
「UI」->「Canvas」を選択します
 
スクリーンショット 2016-01-05 12.07.11
 
Canvas と EventSystem が生成されました。
 

 

Textの生成

 
同じく「UI」->「Text」で
Canvasの下にTextが作られます
 
スクリーンショット 2016-01-05 12.14.50
 
Canvasは非常に大きいのでScene初期画面では見えません
画面の拡大とシーンギズモを回転させてTextのデフォルト文字
「New Text」が見えるようにします
 
スクリーンショット 2016-01-05 12.19.14
 
ここで中央にあるのがこのTextの
位置調整をするためのアンカーになります
 
スクリーンショット 2016-01-05 13.01.18

 

Imageの設定

 
画像を貼り付けてみましょう
Textと同様に「UI」->「Image」
 
Canvasの下にImageが作られて
Scene中央に四角形が現れます
 
スクリーンショット 2016-01-05 12.58.03
 
表示する画像を取り込みます
「Assets」の右クリックで
「Import New Asset…」
あるいは、画像ファイルをAssetsにドロップします
 
スクリーンショット 2016-01-05 13.21.04
 
画像を選択して「Inspector」から
「Texture Type」を「Sprite (2D and UI)」に変更
下の「Apply」をクリックします
 

 
次に、HierarchyのImageを選択してImageのInspectorを表示させ「Source Image」の欄に画像ファイルをドラッグ&ドロップ。そうするとSceneに画像が表示されます。
 
スクリーンショット 2016-01-05 13.30.47

 

画面サイズの設定

 
ターゲットの画面サイズが決まっているのであればいいのですが、スマホなどは4:3や16:9など様々です。
 
より柔軟に画面を合わせるためにCanvas の Inspector にある「UI Scale Mode」を「Scale With Screen Size」にします。
これはターゲットの画面サイズに応じてUI要素を自動でスケーリングしてくれる機能。
 
また「Screen Match Mode」は水平垂直を拡大する「Expand」に変更。
 
スクリーンショット 2016-01-05 13.47.28
 
Scale With Screen Size に変更して「Reference Resolution」は
X:800, Y:600になったためテキストと画像が小さくなりました。
 
Text はInspectorのScaleとFontサイズを変更します
また、ImageはInspectorのRect Transform のWidth, Heightを大きくします
 

 

アンカー

 
アンカーは4つの小さな三角形のハンドルがデフォルトでUIに設定されています
 
Text はアンカーがScreen中央に設定されているため
このままでは画面から外れるか、
余白が画面アスペクト比で変化してしまいます
 
4:3 のケース(Game シーン)
 
スクリーンショット 2016-01-05 14.30.38
 
16:9 のケース
 
スクリーンショット 2016-01-05 14.30.54
 
これを解消するために
アンカーを画面中央から左下に設定します
 
スクリーンショット 2016-01-05 14.35.15
 
アンカーは bottom, left の設定です
 
スクリーンショット 2016-01-05 14.37.24
 
スクリーンショット 2016-01-05 14.37.36
 
また、画像は中央に置いておきたい場合は
アンカーを middle, center に設定して
PositionのX, Y を0にすればいいことになります
 
スクリーンショット 2016-01-05 14.40.21
 
 
References:
Canvas
Canvas Scaler
基本的なレイアウト

ページのトップへ戻る





シェアする

  • このエントリーをはてなブックマークに追加

フォローする