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

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

Unity 2018.1

Canvas

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

目次
1.Canvasの生成
2.Imageの生成
3.画像の設定
4.画面サイズの設定
5.画像の動的な変更

Canvasの生成

　
「Hierarchy」の「Create」
あるいはメニューの「GameObject」から
「UI」「Canvas」を選択します
　

　
Canvas と EventSystem が生成されました。

Imageの設定

　
画像を貼り付けてみましょう
「UI」「Image」
　

　
Canvasの下に生成されました。ただ大きすぎてよくわかりません。
　

　
Gameで見てみると、隅に小さく見えてはいます。
　

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

[Unity] Canvas を設定する

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

uni.gas.mixh.jp

2018-07-17 16:47

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

画像の設定

　
表示する画像を取り込みます
「Assets」の右クリックで
「Import New Asset…」
あるいは、画像ファイルをAssetsにドロップします
　

　
Assetに入った画像を選択して「Inspector」から
「Texture Type」を「Sprite (2D and UI)」に変更
下の「Apply」をクリックします
　

　
次に、HierarchyのImageを選択してImageのInspectorを表示させ「Source Image」の欄に画像ファイルをドラッグ＆ドロップ。
Rect Transform の
　
　
そうするとSceneに画像が表示されます。
　

画面サイズの設定

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

　
Scale With Screen Size に変更して「Reference Resolution」は
X:800, Y:600になったためテキストと画像が小さくなりました。

ImageはInspectorの Rect Transform のWidth, Heightを大きくします
　

　
このように拡大されました。（この例では画像は小さくなったのが元に戻った程度です）
　

画像の動的な変更

　
イベントで画像を変更させてみましょう。
別の画像をAssetsにImportしResourcesフォルダーをCreateしてその中にいれます。
　

　
画像のInspectorからTexture TypeをSpriteに変更します。
　
スクリプトを作りますが「Z」キーをたたくと画像が変わるようにします。
　
SetText.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using UnityEngine.UI;

public class SetImage : MonoBehaviour {

    public Image image;
    private Sprite sprite;


    // Use this for initialization
    void Start () {

    }

    // Update is called once per frame
    void Update () {
        // Z キーが押された時
        if (Input.GetKeyDown(KeyCode.Z))
        {
            sprite = Resources.Load<Sprite>("bag2");
            image = this.GetComponent<Image>();
            image.sprite = sprite;
        }
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class SetImage : MonoBehaviour {

public Image image;

private Sprite sprite;

// Use this for initialization

void Start () {

}

// Update is called once per frame

void Update () {

// Z キーが押された時

if (Input.GetKeyDown(KeyCode.Z))

{

sprite = Resources.Load<Sprite>("bag2");

image = this.GetComponent<Image>();

image.sprite = sprite;

}

　
このファイルを「Image」にドラッグして設定します。
　

　
Imageに設定したScriptにあるImageにこのImageを関連付けさせます。
　
　
これでGameで実行して、Zキーを叩くと画像が変更されました。
　

　
　
References:
Canvas – Unity マニュアル
 Canvas Scaler – Unity マニュアル
 基本的なレイアウト – Unity マニュアル