【Unity】uGUIで複数オブジェクトを置いてボタンっぽいのつくってみたよ。

05 «1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.» 07

All archives

【Unity】uGUIで複数オブジェクトを置いてボタンっぽいのつくってみたよ。

こんにちは！金髪です。
昨日は1日外出していたため、ブログ1日ずれましたorz

ということで、次回ポケガ２のアップデートの宣伝からです。

はい！ということで、可愛い声が入るので、お楽しみに！

んでは、Unityのお話。

とっても初心なお話になります。

こんなボタン作ろうとした時の方法。

という画像を用意します。

まずはボタンのオブジェクトとしてmyButtonというGameObjectを置き、その中に黄色の絵、Text、ピンクの画像を置きます。
uGUIなのでもちろん表示する順番で並べてください。

こんな感じですね。
で、ButtonのオブジェクトをmyButtonに付けて、ButtonコンポーネントのTarget Graphicに、黄色のImageかピンクのImageをつければ完成。

他にも黄色のオブジェクトにButtonコンポーネントをつけて、Textオブジェクトと、ピンクオブジェクトのRaycast Targetのチェックを外しても同じようなのが作れます。

ただ、この方法だと、ボタンを押している時に、黄色オブジェクトまたはピンクオブジェクトの片方だけグレーアウトします。（ButtonクラスのTransitionにて押されている感じを出しているやつ）

黄色オブジェクト、ピンクオブジェクト両方を押されている時にグレーアウトするため、こんなコードを書いてみました。

[MyButton.cs]

using UnityEngine;
using UnityEngine.UI;
using System.Collections;
using UnityEngine.EventSystems;
using System;

public class MyButton : MonoBehaviour, IPointerDownHandler, IPointerUpHandler {
    public UnityEngine.UI.Image[] innerImage;

    public void OnClickButton() {
        // ボタンクリックした時の処理
    }

    public void OnPointerDown(PointerEventData eventData) {
        foreach(UnityEngine.UI.Image btnImg in innerImage) {
            btnImg.color = new UnityEngine.Color(0.5f, 0.5f, 0.5f);
        }
    }

    public void OnPointerUp(PointerEventData eventData) {
        foreach(UnityEngine.UI.Image btnImg in innerImage) {
            btnImg.color = new UnityEngine.Color(1f, 1f, 1f);
        }
    }
}