「Unity/UIImage/Mask」の版間の差分

2021年10月30日 (土) 02:35時点における版

UIImageでマスクを使うサンプル

1. Imageを作成して、"MaskImage"と名前に変更
2. 上記オブジェクトをAddCompornentで、Maskを追加
3. Maskされる画像を、Imageで作成して、階層を、"MaskImage"の子供とする

参考：https://kan-kikuchi.hatenablog.com/entry/Mask

公式UIでは、一部分だけを切り取るようなマスクはできない。

UIImageで逆マスクを使うサンプル

1. githubにあるpluginをダウンロード、https://github.com/mob-sakai/UnmaskForUGUI
2. DLした、UnmaskForUGUI-mainをまるっとAssetsの下へ
3. 上のUIImageでマスクを使うサンプルを作る。
4. MaskImageの下に、空のGameObjectを作り、ImageとUnmaskをAddCompornentする。

参考：https://kan-kikuchi.hatenablog.com/entry/UnmaskForUGUI

画面を覆うmaskサンプル

UnmaskImageをResourcesへおいて、 UnmaskImage/Unmaskが、○のUnmask UnmaskImage/Imageが、マスクされる画像

public class MaskScene : MonoBehaviour
{
    bool cover = false;
    // Start is called before the first frame update
    void Start()
    {
        LoadUnmask();
        GameObject.Find("Button").GetComponent<Button>().onClick.AddListener(OnClick);
    }
    void LoadUnmask()
    {
        GameObject prefab = (GameObject)Resources.Load("UnmaskImage");
        Vector3 position = new Vector3(0, 0, 0);
        GameObject canvasObj = GameObject.Find("Canvas");
        GameObject obj = Instantiate(prefab, position, Quaternion.identity, canvasObj.transform);
        obj.name = "UnmaskImage";
        float canvasWidth = canvasObj.GetComponent<RectTransform>().sizeDelta.x;
        float canvasHeight = canvasObj.GetComponent<RectTransform>().sizeDelta.y;
        float maxWH = Mathf.Max(canvasWidth, canvasHeight);
        GameObject unmaskObj = obj.transform.Find("Unmask").gameObject;
        unmaskObj.GetComponent<RectTransform>().sizeDelta = new Vector2(maxWH, maxWH);
        obj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
    }
    void OnClick()
    {
        if (cover)
        {
            NotCover();
            cover = false;
        }
        else
        {
            Cover();
            cover = true;
        }
    }
    void Cover()
    {
        GameObject canvasObj = GameObject.Find("Canvas");
        float canvasWidth = canvasObj.GetComponent<RectTransform>().sizeDelta.x;
        float canvasHeight = canvasObj.GetComponent<RectTransform>().sizeDelta.y;

        GameObject unmaskImageObj = GameObject.Find("UnmaskImage");
        unmaskImageObj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
        GameObject unmaskImageImageObj = unmaskImageObj.transform.Find("Image").gameObject;
        unmaskImageImageObj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);

        GameObject unmaskObj = unmaskImageObj.transform.Find("Unmask").gameObject;
        float fromWidth = unmaskObj.GetComponent<RectTransform>().sizeDelta.x;
        float fromHeight = unmaskObj.GetComponent<RectTransform>().sizeDelta.y;
        float fromMaxWH = Mathf.Max(fromWidth, fromHeight);
        float toHeight = 1f;
        float scale = toHeight / fromMaxWH * 1.414f; // 円の半径の倍率、斜めで測定するので、二等辺三角形の高さのルート2ぐらいをかける;
        unmaskObj.transform.DOScale(new Vector3(scale, scale, 0f), 0.3f);

    }
    void NotCover()
    {
        GameObject canvasObj = GameObject.Find("Canvas");
        float canvasWidth = canvasObj.GetComponent<RectTransform>().sizeDelta.x;
        float canvasHeight = canvasObj.GetComponent<RectTransform>().sizeDelta.y;

        GameObject unmaskImageObj = GameObject.Find("UnmaskImage");
        unmaskImageObj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
        GameObject unmaskImageImageObj = unmaskImageObj.transform.Find("Image").gameObject;
        unmaskImageImageObj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);

        GameObject unmaskObj = unmaskImageObj.transform.Find("Unmask").gameObject;
        unmaskObj.GetComponent<RectTransform>().sizeDelta = new Vector2(50f, 50f);
        float fromWidth = unmaskObj.GetComponent<RectTransform>().sizeDelta.x;
        float fromHeight = unmaskObj.GetComponent<RectTransform>().sizeDelta.y;
        float fromMaxWH = Mathf.Max(fromWidth, fromHeight);
        float toHeight = canvasHeight;
        float scale = toHeight / fromMaxWH * 1.414f; // 円の半径の倍率、斜めで測定するので、二等辺三角形の高さのルート2ぐらいをかける;
        unmaskObj.transform.DOScale(new Vector3(scale, scale, 0f), 0.3f);
    }

}