[Unity] Canvasに Image 画像を配置しScriptで変更

タイトル画面に画像を表示したい場合は、3Dとは別のCanvasにImage を配置することで実現できます。
 
image_07

Unity 2018.1

 




Canvas

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

 

Canvasの生成

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

 

Imageの設定

 
画像を貼り付けてみましょう
「UI」「Image
 
image_02
 
Canvasの下に生成されました。ただ大きすぎてよくわかりません。
 
image_03
 
Gameで見てみると、隅に小さく見えてはいます。
 
image_04

Scene上で操作するためにはハンドツールを使って調整します。

Unityではテキストや画像、ボタンなどを画面に表示するための領域をCanvasと言います。これは他の3D Objectとは設定が異なります...

とりあえずこのような画面から始めます。
 
canvas_06

 

画像の設定

 
表示する画像を取り込みます
「Assets」の右クリックで
Import New Asset…
あるいは、画像ファイルをAssetsにドロップします
 
スクリーンショット 2016-01-05 13.21.04
 
Assetに入った画像を選択して「Inspector」から
「Texture Type」を「Sprite (2D and UI)」に変更
下の「Apply」をクリックします
 
canvas-image_02
 
次に、HierarchyのImageを選択してImageのInspectorを表示させ「Source Image」の欄に画像ファイルをドラッグ&ドロップ。
Rect Transform の
 image_05
 
そうするとSceneに画像が表示されます。
 

image_07 

画面サイズの設定

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

ImageはInspectorの Rect Transform のWidth, Heightを大きくします
 
canvas-image_05b
 
このように拡大されました。(この例では画像は小さくなったのが元に戻った程度です)
 
image_06

 

画像の動的な変更

 
イベントで画像を変更させてみましょう。
別の画像をAssetsにImportしResourcesフォルダーをCreateしてその中にいれます。
 
image_10
 
画像のInspectorからTexture TypeをSpriteに変更します。
 
スクリプトを作りますが「Z」キーをたたくと画像が変わるようにします。
 
SetText.cs

 
このファイルを「Image」にドラッグして設定します。
 
image_08b
 
Imageに設定したScriptにあるImageにこのImageを関連付けさせます。
 
image_11 
これでGameで実行して、Zキーを叩くと画像が変更されました。
 
image_12
 
 
References:
Canvas – Unity マニュアル
Canvas Scaler – Unity マニュアル
基本的なレイアウト – Unity マニュアル

誤字脱字、意味不明などのご意見は こちらから
mailフォーム
ブックマークしておきましょう
このエントリーをはてなブックマークに追加





シェアする

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

フォローする