Unityの既存UIだけで棒グラフを作る(5)

今回はスライドするグラフの上に基準となるグラフを配置して、グラフを比較しやすくします。

前回までの分は以下からみてください

Unityの既存UIだけで棒グラフを作る(1)

Unityの既存UIだけで棒グラフを作る(2)

Unityの既存UIだけで棒グラフを作る(3)

Unityの既存UIだけで棒グラフを作る(4)

スクリプトをかく準備

まずScroll Viewの孫コンポーネントのContent (Viewportの中)を複製します。右クリックでDuplicateを選択すれば複製できます。名前をBaseContentに変更しておきます。

スクリプト

次に新しいScriptを作り、名前をBaseGraphにします。

BaseGraphのスクリプトを以下のようにします。基本的にGraphのスクリプトと同じです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class BaseGraph : MonoBehaviour
{
   [SerializeField]
   private GameObject baseContent;
   [SerializeField]
   private GameObject graphBar;
   private GameObject[] instances = new GameObject[100];
   // Start is called before the first frame update
   void Start()
   {
       //棒グラフの値 
       float xValue = 0.5f;
       
       //graphBar の生成
       instances[0] = Instantiate<GameObject>(graphBar);
       instances[0].transform.parent = baseContent.transform;
       instances[0].name = "Base";
           
       //bar の長さの変更
       GameObject bar = GameObject.Find("Base");
       bar.GetComponent<Slider>().value = xValue;  //intであればfloatに変換する
       // X_LavelをText に出力
       GameObject x_lavel = bar.gameObject.transform.Find("Background/X_Lavel").gameObject;
       x_lavel.GetComponent<Text>().text = "Ave";
           
       //DataをText に出力
       if (xValue >= 0.15)  //どちらのTextに出力するかifで分岐
       {
           GameObject data = bar.gameObject.transform.Find("Handle Slide Area/Handle/Data").gameObject;
           data.GetComponent<Text>().text = xValue + "%";
       }
       else
       {
           GameObject data = bar.gameObject.transform.Find("Handle Slide Area/Handle/DataUp").gameObject;
           data.GetComponent<Text>().text = xValue + "%";
       }
   }
   // Update is called once per frame
   void Update()
   {
       
   }
}

スクリプトができたらGameObjectにドロップします。その後BaseContent、Sliderをそれぞれドロップします。

画像1

最後に調整

最後にContentかBaseContentのHorizontal Layout GroupのPadding/Leftを調整します。

大きさの感覚がわかりにくければ、再生ボタンを押しながら変えていく方法もあります。

ぎこちない動画になってしまいましたが(笑)これで調整すれば完成です。

再生ボタンを押してから調整すると、停止した時に元に戻ってしまいます。その点は最後に値を変更し忘れないように注意してください。

完成したグラフの動画

最後に改めて完成したグラフの動画です。

まだまだプログラミング初心者ですので、ご意見、アドバイス等もらえると嬉しいです。よろしくい願いします。

Unityの既存UIだけで棒グラフを作る まとめ

リンクを以下にまとめました。

1 / 2 / 3 / 4 / 5


⬇︎僕が書いたプログラミング関連の記事です


いいなと思ったら応援しよう!