ハルシオンシステムの気ままBlog

こんにちは、坂内っす。

昨日一昨日はIndieLiveExpo2022がありましたね。

https://indie.live-expo.games/

2日目にポケガ３取り上げて頂きました。



基本今までこういうのに応募してこなかったので、何書けばいいのかとか色々わかりましぇんでしたね。

開発も中盤超えたので、このまま完成まで頑張っていこうと思いマッスル。


UnityでuGUIの複数オブジェクトを同時に透明にする場合、どうやってますか？



こんな感じでImageが複数あったり、Textがあったり。
下にある「透明にする」ボタンを押すと、3個のImage、Textを透明にします。

[Blog20220523.cs]

using UnityEngine;
using UnityEngine.UI;

public class Blog20220523 : MonoBehaviour
{

    [SerializeField] Image img1;
    [SerializeField] Image img2;
    [SerializeField] Image img3;
    [SerializeField] Text txt1;
    [SerializeField] Button btnTransparent;

    void Start()
    {
        btnTransparent.onClick.AddListener(TransparentUI);   
    }

    void TransparentUI() {
        img1.color = new Color32(255, 255, 255, 0);
        img2.color = new Color32(255, 255, 255, 0);
        img3.color = new Color32(255, 255, 255, 0);
        txt1.color = new Color32(255, 255, 255, 0);
    }
}

こんな感じで、ボタンを押すとImage3個、Text1個を透明にできます。

でも、透明にするオブジェクトが多いと、コードがどんどん増えていってしまいますよね。
Imageが100個あると、 imgX.color = new Color32(255, 255, 255, 0); という行を100個書かないといけなくなってしまいます。

そんな時にはCanvasGroupを使うといいですよね。

空のオブジェクトを作成し、その子供として消したいオブジェクトを配置します。



このCanvasGroupにはAlphaがあり、それをいじることで、子供全体のalphaが変更されます。



そうすると、コードではこのCanvasGroupのAlphaだけいじればいいだけになります。

[Blog20220523.cs]

using UnityEngine;
using UnityEngine.UI;

public class Blog20220523 : MonoBehaviour
{

    [SerializeField] CanvasGroup cg;
    [SerializeField] Button btnTransparent;

    void Start()
    {
        btnTransparent.onClick.AddListener(TransparentUI);   
    }

    void TransparentUI() {
        cg.alpha = 0f;
    }
}

これだけで上記にあった処理と同じことができます。


ということで、uGUIを使う方は、CanvasGroupを覚えておくと色々と便利です。

CanvasGroupの話でした。
では、あでゅ～ノシ

Category: 開発日記（Unity）