facebook twitter hatena line email

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

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(画面を覆うmaskサンプル)
 
(同じ利用者による、間の6版が非表示)
行21: 行21:
 
UnmaskImage/Unmaskが、○のUnmask
 
UnmaskImage/Unmaskが、○のUnmask
 
UnmaskImage/Imageが、マスクされる画像
 
UnmaskImage/Imageが、マスクされる画像
 +
 +
UnmaskCoverImageのプレハブにUnmaskCoverImage.csを追加
 +
 +
UnmaskCoverImage.cs
 
<pre>
 
<pre>
using System.Collections;
 
using System.Collections.Generic;
 
 
using UnityEngine;
 
using UnityEngine;
using UnityEngine.UI;
 
 
using DG.Tweening;
 
using DG.Tweening;
  
public class MaskScene : MonoBehaviour
+
/**
 +
* Cover開閉
 +
* UnmaskForUGUIのplugin必須
 +
* DoTweenのplugin必須
 +
* e.g.
 +
    UnmaskCoverImage unmaskCoverImage;
 +
    GameObject prefab = (GameObject)Resources.Load("UnmaskCoverImage");
 +
    GameObject canvasObj = GameObject.Find("/Canvas");
 +
    unmaskCoverImageObj = Instantiate(prefab, Vector3.zero, Quaternion.identity, canvasObj.transform);
 +
    unmaskCoverImageObj.name = "UnmaskCoverImage";
 +
    unmaskCoverImageObj.transform.localPosition = Vector3.zero;
 +
    unmaskCoverImageObj.transform.localRotation = Quaternion.Euler(0, 0, 0);
 +
    unmaskCoverImage = unmaskCoverImageObj.GetComponent<UnmaskCoverImage>();
 +
    unmaskCoverImage.Init();
 +
    unmaskCoverImage.Open(); // 開く場合
 +
    unmaskCoverImage.Close(); // 閉じる場合
 +
Canvasから比率を計算してるのでRenderModeがWorldSpaceなCanvasが必須
 +
*/
 +
public class UnmaskCoverImage : MonoBehaviour
 
{
 
{
    bool cover = false;
+
     // UnmaskCoverImageのprefabの値で上書きされる
     // Start is called before the first frame update
+
     GameObject canvasObj;
     void Start()
+
     float canvasWidth;
     {
+
    float canvasHeight;
        LoadUnmask();
+
 
        GameObject.Find("Button").GetComponent<Button>().onClick.AddListener(OnClick);
+
     public void Init()
    }
+
     void LoadUnmask()
+
 
     {
 
     {
         GameObject prefab = (GameObject)Resources.Load("UnmaskImage");
+
         canvasObj = GameObject.Find("/Canvas");
        Vector3 position = new Vector3(0, 0, 0);
+
         canvasWidth = canvasObj.GetComponent<RectTransform>().sizeDelta.x;
        GameObject canvasObj = GameObject.Find("Canvas");
+
         canvasHeight = canvasObj.GetComponent<RectTransform>().sizeDelta.y;
         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);
 
         float maxWH = Mathf.Max(canvasWidth, canvasHeight);
         GameObject unmaskObj = obj.transform.Find("Unmask").gameObject;
+
         GameObject unmaskObj = this.transform.Find("Unmask").gameObject;
 
         unmaskObj.GetComponent<RectTransform>().sizeDelta = new Vector2(maxWH, maxWH);
 
         unmaskObj.GetComponent<RectTransform>().sizeDelta = new Vector2(maxWH, maxWH);
         obj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
+
         this.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
 
     }
 
     }
     void OnClick()
+
     public void Close()
 
     {
 
     {
         if (cover)
+
         this.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
        {
+
         GameObject unmaskImageImageObj = this.transform.Find("Image").gameObject;
            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);
 
         unmaskImageImageObj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
 
+
         GameObject unmaskObj = this.transform.Find("Unmask").gameObject;
         GameObject unmaskObj = unmaskImageObj.transform.Find("Unmask").gameObject;
+
 
         float fromWidth = unmaskObj.GetComponent<RectTransform>().sizeDelta.x;
 
         float fromWidth = unmaskObj.GetComponent<RectTransform>().sizeDelta.x;
 
         float fromHeight = unmaskObj.GetComponent<RectTransform>().sizeDelta.y;
 
         float fromHeight = unmaskObj.GetComponent<RectTransform>().sizeDelta.y;
行81: 行75:
 
         float toHeight = 1f;
 
         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 centerLength = Mathf.Sqrt(Mathf.Pow(fromWidth, 2f) + Mathf.Pow(fromHeight, 2f));
 
         float centerScale = centerLength / fromMaxWH;
 
         float centerScale = centerLength / fromMaxWH;
 
         float scale = toHeight / fromMaxWH * centerScale;
 
         float scale = toHeight / fromMaxWH * centerScale;
 
         unmaskObj.transform.DOScale(new Vector3(scale, scale, 0f), 0.3f);
 
         unmaskObj.transform.DOScale(new Vector3(scale, scale, 0f), 0.3f);
 
 
     }
 
     }
     void NotCover()
+
     public void Open()
 
     {
 
     {
         GameObject canvasObj = GameObject.Find("Canvas");
+
         this.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
        float canvasWidth = canvasObj.GetComponent<RectTransform>().sizeDelta.x;
+
         GameObject unmaskImageImageObj = this.transform.Find("Image").gameObject;
        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);
 
         unmaskImageImageObj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
 
+
         GameObject unmaskObj = this.transform.Find("Unmask").gameObject;
         GameObject unmaskObj = unmaskImageObj.transform.Find("Unmask").gameObject;
+
         unmaskObj.GetComponent<RectTransform>().sizeDelta = new Vector2(1f, 1f);
         unmaskObj.GetComponent<RectTransform>().sizeDelta = new Vector2(50f, 50f);
+
 
         float fromWidth = unmaskObj.GetComponent<RectTransform>().sizeDelta.x;
 
         float fromWidth = unmaskObj.GetComponent<RectTransform>().sizeDelta.x;
 
         float fromHeight = unmaskObj.GetComponent<RectTransform>().sizeDelta.y;
 
         float fromHeight = unmaskObj.GetComponent<RectTransform>().sizeDelta.y;
行111: 行95:
 
         float centerScale = centerLength / fromMaxWH;
 
         float centerScale = centerLength / fromMaxWH;
 
         float scale = toHeight / fromMaxWH * centerScale;
 
         float scale = toHeight / fromMaxWH * centerScale;
 
 
         unmaskObj.transform.DOScale(new Vector3(scale, scale, 0f), 0.3f);
 
         unmaskObj.transform.DOScale(new Vector3(scale, scale, 0f), 0.3f);
 
     }
 
     }
 +
 
}
 
}
 +
 
</pre>
 
</pre>
 +
 +
==unity2021のiOSで輪郭ががたがたになる問題==
 +
SpliteMeshにチェックを入れると良い。

2022年7月3日 (日) 12:17時点における最新版

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

UnmaskCoverImageのプレハブにUnmaskCoverImage.csを追加

UnmaskCoverImage.cs

using UnityEngine;
using DG.Tweening;

/**
 * Cover開閉
 * UnmaskForUGUIのplugin必須
 * DoTweenのplugin必須
 * e.g.
    UnmaskCoverImage unmaskCoverImage;
    GameObject prefab = (GameObject)Resources.Load("UnmaskCoverImage");
    GameObject canvasObj = GameObject.Find("/Canvas");
    unmaskCoverImageObj = Instantiate(prefab, Vector3.zero, Quaternion.identity, canvasObj.transform);
    unmaskCoverImageObj.name = "UnmaskCoverImage";
    unmaskCoverImageObj.transform.localPosition = Vector3.zero;
    unmaskCoverImageObj.transform.localRotation = Quaternion.Euler(0, 0, 0);
    unmaskCoverImage = unmaskCoverImageObj.GetComponent<UnmaskCoverImage>();
    unmaskCoverImage.Init();
    unmaskCoverImage.Open(); // 開く場合
    unmaskCoverImage.Close(); // 閉じる場合
 Canvasから比率を計算してるのでRenderModeがWorldSpaceなCanvasが必須
*/
public class UnmaskCoverImage : MonoBehaviour
{
    // UnmaskCoverImageのprefabの値で上書きされる
    GameObject canvasObj;
    float canvasWidth;
    float canvasHeight;

    public void Init()
    {
        canvasObj = GameObject.Find("/Canvas");
        canvasWidth = canvasObj.GetComponent<RectTransform>().sizeDelta.x;
        canvasHeight = canvasObj.GetComponent<RectTransform>().sizeDelta.y;
        float maxWH = Mathf.Max(canvasWidth, canvasHeight);
        GameObject unmaskObj = this.transform.Find("Unmask").gameObject;
        unmaskObj.GetComponent<RectTransform>().sizeDelta = new Vector2(maxWH, maxWH);
        this.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
    }
    public void Close()
    {
        this.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
        GameObject unmaskImageImageObj = this.transform.Find("Image").gameObject;
        unmaskImageImageObj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
        GameObject unmaskObj = this.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);
    }
    public void Open()
    {
        this.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
        GameObject unmaskImageImageObj = this.transform.Find("Image").gameObject;
        unmaskImageImageObj.GetComponent<RectTransform>().sizeDelta = new Vector2(canvasWidth, canvasHeight);
        GameObject unmaskObj = this.transform.Find("Unmask").gameObject;
        unmaskObj.GetComponent<RectTransform>().sizeDelta = new Vector2(1f, 1f);
        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);
    }

}

unity2021のiOSで輪郭ががたがたになる問題

SpliteMeshにチェックを入れると良い。