Unity/UIImage/Mask
提供: 初心者エンジニアの簡易メモ
UIImageでマスクを使うサンプル
- Imageを作成して、"MaskImage"と名前に変更
- 上記オブジェクトをAddCompornentで、Maskを追加
- Maskされる画像を、Imageで作成して、階層を、"MaskImage"の子供とする
参考:https://kan-kikuchi.hatenablog.com/entry/Mask
公式UIでは、一部分だけを切り取るようなマスクはできない。
UIImageで逆マスクを使うサンプル
- githubにあるpluginをダウンロード、https://github.com/mob-sakai/UnmaskForUGUI
- DLした、UnmaskForUGUI-mainをまるっとAssetsの下へ
- 上のUIImageでマスクを使うサンプルを作る。
- 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; // 中央から画面角までの距離(三平方の定理 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); } }