読者です 読者をやめる 読者になる 読者になる

ツテなしフリーランス日誌

ツテが全く無いまま会社を辞め、我が道を行くフリーランスエンジニアのブログです



【Unity】ScrollViewにログテキストを表示して、自動スクロール

ログの内容が実行画面でも見たいと思い、ScrollViewにログを表示し、自動でスクロールされるようにしました。

1. ScrollViewの作成

Hierarchyビューの Create -> UI -> Scroll View を選択してください。

f:id:kurisankaku:20170322212723p:plain

2. ContentにTextとContent Size Filterの追加

ScrollView -> Viewport -> Contentに

  • 文字を表示するために、Textを追加します。
  • 文字が増えるごとにコンテンツサイズを増やすために、Content Size Filter を追加し、可変にします。
    • Holizontal Fit -> Unconstrained
    • Vertical Fit -> PrefferedSize

f:id:kurisankaku:20170322213647p:plain

f:id:kurisankaku:20170322212924p:plain

3. ScrollViewのスクリプトを作成

AssetsフォルダにScrollView用のスクリプトを作成してください。ここでは、ManageScroll.csというスクリプトを作成するとします。

作成したら下記コードを記載してください。

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

public class ManageScroll : MonoBehaviour {

    // ScrollViewに表示するログ
    public static string Logs = "";
    // ログの差分を取得するための入れ物
    private string oldLogs = "";
    // ScrollViewのScrollRect
    private ScrollRect scrollRect;
    // ScrollViewのText
    private Text textLog;

    // Start時に各オブジェクトを取得
    void Start ()
    {
        scrollRect = this.gameObject.GetComponent<ScrollRect>();
        textLog = scrollRect.content.GetComponentInChildren<Text>();
    }

    void Update ()
    {
        // logsとoldLogsが異なるときにTextを更新
        if (scrollRect != null && Logs != oldLogs) {
            textLog.text = Logs;
            // Textが追加されたときに5フレーム後に自動でScrollViewのBottomに移動するようにする。
            StartCoroutine(DelayMethod(5, () =>
                {
                    scrollRect.verticalNormalizedPosition = 0;
                }));
            oldLogs = Logs;
        }   
    }

    //ログを表示
    public static void Log(string logText)
    {
        Logs += (logText + "\n");
        Debug.Log(logText);
    }

    // 指定したフレーム数後にActionが実行される
    private IEnumerator DelayMethod(int delayFrameCount, Action action)
    {
        for (var i = 0; i < delayFrameCount; i++)
        {
            yield return null;
        }
        action();
    }
}

4. ScrollViewにスクリプトを追加

作成したスクリプトをScrollViewに追加してください。

f:id:kurisankaku:20170322212949p:plain

5. ログを追加

作成したScrollViewにログを追加します。この例では、Buttonを押すごとに下記動作を行わせます。

  • デバッグログに時刻表示
  • ScrollViewのTextに時刻表示

Buttonオブジェクトの追加をし、Button用のスクリプトを作成します。

下記のように、ScrollViewに作成したスクリプトをOnClick時に使用するようにします。

using UnityEngine;
using System;

public class Button1 : MonoBehaviour {
    public void onClickButton1()
    {
        ManageScroll.Log(DateTime.Now.ToString ("tthh時mm分ss秒fffミリ秒"));
    }
}

ButtonのOnClickイベント操作などは、下記記事を参照してください。

www.kurisankaku.xyz

6. 実行

実行し、動作を確認してください。ボタンを押すたびに時刻が表示され、スクロールされます。

f:id:kurisankaku:20170322213009p:plain