LoginSignup
2
0

More than 5 years have passed since last update.

Unity NGUIのUIGridで非アクティブな要素のスペースを詰める

Posted at

環境

Unity:5.3.7p4
NGUI:3.8.0

はじめに

UIGridの要素をある条件の時にGameObject.SetActive(false)したところスペースだけが残ってしまいました。
そのObjectをDestroyしようとしていたところレビュアーさんから指摘があったのでまとめておきます。
ついでにScrollViewの作り方もまとめておきます。

先にまとめ

using UnityEngine;
using System.Collections.Generic;

public class NguiGridSample : MonoBehaviour {

    // グリッド
    [SerializeField]
    private UIGrid m_grid;
    // リストのオブジェクト
    private List<Transform> m_Items;

    // Use this for initialization
    void Start () {
        m_Items = m_grid.GetChildList();
    }

    /// <summary>
    /// 青アイテムを非表示にする
    /// </summary>
    public void OnHideBlueButton(){
        if (m_Items == null) {
            return;
        }
        m_Items.ForEach((item) => {
            if(item.gameObject.name == "blue"){
                item.gameObject.SetActive(false);
            }
        });
        m_grid.Reposition();
    }

    /// <summary>
    /// 全アイテム表示する
    /// </summary>
    public void OnShowButton(){
        if (m_Items == null) {
            return;
        }
        m_Items.ForEach((item) => {
            item.gameObject.SetActive(true);
        });
        m_grid.Reposition();
    }       
}

UIGrid.hideInactiveがtrueのとき

Reposition時、非アクティブな要素のスペースを詰める。
HideInactive2.gif

UIGrid.hideInactiveがfalseのとき

Reposition時、非アクティブな要素のスペースを詰めない。
HideInactive3.gif

解説

NGUIをインストールする

個人のプロジェクトにNGUIをインストールしようと思ったのですが、最新バージョンは有料しかないとのことです。
http://future-software-labo.anyagent.net/unityngui%E3%82%92%E7%84%A1%E6%96%99%E3%81%A7%E4%BD%BF%E3%81%86/
試しに無料版をインストールしてみましたがあまりの違いに諦めて、仕事用プロジェクトにローカルブランチを切って作業しました。

ScrollViewを作る

http://naochang.me/?p=146
動画が分かりやすいです。
Inspectorの設定だけでここまでできるのはすごいなー。

UIGridで並べる

UIGridの子オブジェクトして要素を1つ作り、それを複製するだけで一括で並びます。
要素はSerialize Fieldで配列として持たなくてもUIGrid.GetChildList()で一括取得できます。

今回問題だったのはInspector上にも見えているHide Inactiveの挙動でした。
on/offでそれぞれ上述のgifのような挙動になります。
スクリーンショット 2017-07-17 8.49.33.png

BoxColliderをattachするときは「option + Shift + C」が楽ちん

NGUIをインストールすると「option + Shift + C」が使えるようになります。
要素の大きさにピッタリ合うBoxColliderを設定するショートカットです。

Add ComponentからattachしたBox Collider

スクリーンショット 2017-07-17 9.46.08.png

NGUIのメニューからattachしたBox Collider(ショートカット)

スクリーンショット 2017-07-17 9.46.41.png

さいごに

単純にInspectorで設定できる項目を知らなかっただけでした...。
1から作って色々遊んで見るのは大事ですね。

作ってから気づいたのですが、gif作る時はマウスのフレームインとフレームアウトまで録画しないと無限ループに見えちゃいますね...
次から気をつけよう!(←今回のはもうやる気がない)

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0