facebook twitter hatena line email

Unity/UIImage/Mask

提供: 初心者エンジニアの簡易メモ
2021年10月30日 (土) 02:56時点におけるAdmin (トーク | 投稿記録)による版

移動: 案内検索

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が、マスクされる画像

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

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;
        // 中央から画面角までの距離(三平方の定理
        Debug.Log("ruoot =" + Mathf.Sqrt(4));
        Debug.Log("jou =" + Mathf.Pow(2, 2));

        float centerLength = Mathf.Sqrt(Mathf.Pow(fromWidth, 2f) + Mathf.Pow(fromHeight, 2f));
        float centerScale = centerLength / fromMaxWH;
        float scale = toHeight / fromMaxWH * centerScale;
        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 centerLength = Mathf.Sqrt(Mathf.Pow(fromWidth, 2f) + Mathf.Pow(fromHeight, 2f));
        float centerScale = centerLength / fromMaxWH;
        float scale = toHeight / fromMaxWH * centerScale;

        unmaskObj.transform.DOScale(new Vector3(scale, scale, 0f), 0.3f);
    }
}