Unity imageの表示、imageとテキストを変化、深度制御、imageをクリック＆長押し

imageを表示する
---

Canvasを追加し、その中にimageを追加する
![2BBC8617-A2E8-4C9E-ACBF-701BC23D1198_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/fa9ab191-2c10-78d2-3e68-5c156b808b78.jpeg)

image用のフォルダを作成し、imageを追加する。TextureTypeはSprite(2D and UI)に変更する
![1DD859A7-E188-4F8F-8569-965B5563066E_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/c8133ffb-e7aa-a3b7-eb0e-7590cf1b45ea.jpeg)


imageのSouceImageに画像をアタッチする
![0631E6E5-03CE-4D05-AA7F-4E5305A76CBF.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/bd42ea79-58d0-d5d4-2f17-b8623ee28f14.jpeg)

imageの加工

ProjectSettingから２D Spriteをインストールする
![C134120D-377C-4CD7-BAF7-FDD47AC27AF6.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/93845b4f-f4b7-832e-cdd1-5826541c1ff0.jpeg)


imageのSpiriteEditerをクリックする
![019721A6-2540-4E8F-9935-A26318AE678E.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/6ecdb596-a299-e8a5-7fb6-24be860bd78f.jpeg)


Borderのサイズを変更する
![046FBA83-24F0-4887-BE3E-3A382BDA9548.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/1178303c-ae43-e1e9-f705-9d8f1adbd31d.jpeg)


imageオブジェクトのimage TypeをSlicedに変更し、Width,Heightを変更すると中央が伸びたような画像ができる
![52A2969D-67A2-4AA9-B0FD-F9F9C102ED39.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/55afca65-4dbb-a2b6-34ed-42c5dada3dda.jpeg)


FillCenterのチェックを外すと中央がくり抜かれた画像ができる
![299D63C4-37D0-40C1-92C3-7CF441593E3E.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/d72a7825-ac1c-1f0f-f517-62e110ebc04e.jpeg)


Textを追加して、imageとTextをスクリプトから変化させる
---

Canvas内にTextを追加し、サイズと位置と色を調整する
![9C1AB07A-1226-4644-8FC7-8AF4B284C902.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/da37c652-99fe-da95-87a6-d7d9e3cd717b.jpeg)



UISample.csを作成し、下記コードを追加する



```C#:UISample
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIsample : MonoBehaviour
{
    [SerializeField]
    private Image _image;
    [SerializeField]
    private Text _text;
    
    void Start()
    {
        _image.rectTransform.sizeDelta = new Vector2(300f, 300f);
        _text.text = "テキスト変更";
        _text.color = Color.blue;
    }

    void Update()
    {
        
    }
}
```


Canvasにコンポーネントして、各項目にimageとTextをアタッチする
![DA343848-70CE-4CED-9F61-B7494D67A7D2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/dbc5c051-2b70-e1c1-8a6f-8e227662fb88.jpeg)



imageの深度制御
---

Canvasは複数置くことができる。
主にヒエラルキーの下に行くほど表示の優先順位は高いが、ここではその優先順位を変更する方法を記述します。

１つ目の方法
CanvasのRenderModeをScreenSpace-Cameraに変更し、Order in Leyerの数値を変更する（ここでは1に設定している）
![CC1D6B1B-06E7-4295-B0C5-42629A5FF4DB.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/e80af5f9-5afc-6a7b-257d-670238e3d69d.jpeg)


２つ目の方法
UI用のカメラを作成し、各Canvasをアタッチする
![3A9B79EB-FDE6-47F8-AEC0-F84B91CA54DA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/e25c0ca3-04bb-3eea-d40e-4c6f02fed49d.jpeg)


UI用カメラのDepthの値を変更する
![A25EADD5-E1D3-4188-8E11-8F310D95DCDD.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/e878ad2e-9d0a-313f-c6db-af249e419c92.jpeg)


imageをクリックできるようにする
---


imageにButtonコンポーネントをつける
![87A7C700-8C86-4920-A0F3-81A88469455C.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/38f11629-6db5-eaf1-fb6e-4bf6bd2a7b3e.jpeg)



UISample.csを作成し、下記コードを記述する



```C#:UISample
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIsample : MonoBehaviour
{
    [SerializeField]
    private Button _button;

    
    [SerializeField]
    private Button _button;

    //Use this for intialization
    void Start()
    {

        //imageをクリックするとコンソールにClickが出力される
        _button.onClick.AddListener(() => { Debug.Log("Click"); });

    }

    void Update()
    {
        
    }
}
```




imageのクリックと長押しで操作を分ける
---


UISample.cs、LongPressTrigger.cs、CustomButton.csに下記コードを記述する。


```C#:UISample
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIsample : MonoBehaviour
{
    [SerializeField]
    private CustomButton _button;

    //Use this for intialization
    void Start()
    {
        _button.OnClickAction = () =>
        {
            Debug.Log("Click");
        };
        _button.OnLongPressAction = () =>
        {
            Debug.Log("LongPress");
        };

    }

    void Update()
    {
        
    }
}
```




```C#:LongPressTrigger
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System;
using UnityEngine.EventSystems;

public class LongPressTrigger : MonoBehaviour, IPointerDownHandler, IPointerUpHandler, IPointerExitHandler
{
    //長押しと判定する時間
    public float IntervalSecond = 1f;

    //長押し時に発火するアクション
    private Action _onLongPointerDown;

    private float _executeTime;

    private void Update()
    {
        if (_executeTime > 0f && _executeTime <= Time.realtimeSinceStartup)
        {
            _onLongPointerDown();
            _executeTime = -1f;
        }
    }

    private void OnDestroy()
    {
        _onLongPointerDown = null;
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        //押下時に長押しが発火する時間を設定
        _executeTime = Time.realtimeSinceStartup + IntervalSecond;
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        _executeTime = -1f;
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        _executeTime = -1f;
    }

    public void AddLongPressAction(Action action)
    {
        _onLongPointerDown = action;
    }
}
```




```C#:CustomButton
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System;
using UnityEngine.EventSystems;

[RequireComponent(typeof(LongPressTrigger))]
public class CustomButton : MonoBehaviour, IPointerDownHandler, IPointerUpHandler, IPointerClickHandler
{
    public Action OnClickAction;
    public Action OnPressAction;
    public Action OnReleaseAction;
    public Action OnLongPressAction;

    private bool _isLongPress;

    private void Awake()
    {
        var longPressTrigger = gameObject.GetComponent<LongPressTrigger>();
        longPressTrigger.AddLongPressAction(OnLongPress);
    }

    private void OnDestroy()
    {
        OnClickAction = null;
        OnPressAction = null;
        OnReleaseAction = null;
        OnLongPressAction = null;
    }

    //プレス時のアクション
    public virtual void OnPointerDown(PointerEventData eventData)
    {
        if (enabled == false)
        {
            return;
        }
        if (OnPressAction != null)
        {
            OnPressAction();
        }
        _isLongPress = false;
    }

    //クリック時のアクション
    public virtual void OnPointerClick(PointerEventData eventData)
    {
        if (enabled == false)
        {
            return;
        }
        if (_isLongPress == false && OnClickAction != null)
        {
            OnClickAction();
        }
    }

    //リリース時のアクション
    public virtual void OnPointerUp(PointerEventData eventData)
    {
        if (enabled == false)
        {
            return;
        }
        if (_isLongPress == false && OnReleaseAction != null)
        {
            OnReleaseAction();
        }
    }

    //長押し時のアクション
    public virtual void OnLongPress()
    {
        if (enabled == false)
        {
            return;
        }
        if (OnLongPressAction != null)
        {
            OnLongPressAction();
        }
        _isLongPress = true;
    }

}
```





CanvasにUIsample.csをつけimageをアタッチする
![21C8AD17-DDB6-4C69-A055-21156BBE632B.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/12a122de-9aba-db4c-ff5d-9abf76584e8a.jpeg)



CustomButtom.csとLongPressTrigger.csをつける。
![1397B807-8BF9-4222-98C5-7A509E39AD1C.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/cacdd475-c50d-b9f8-3dea-607e0dc3f68b.jpeg)



クリックするとCkick,長押しするとLongPressとコンソールに表示される