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

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

Unity 5.4.2f2

 

sponsored link

Canvas

 
Canvasとは、コンポーネントであり UI が配置、描画される抽象的な領域です。
 

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」をクリックします

スクリーンショット 2016-01-05 13.24.24
次に、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を大きくします

スクリーンショット 2016-01-05 14.17.20
 

アンカーの設定

 
アンカーは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
基本的なレイアウト

ページのトップへ戻る
 
sponsored link
  • このエントリーをはてなブックマークに追加