【Unity】ニコニコ動画みたいなコメント弾幕機能を作る

10325 ワード
C# Unity2D Unity Unity入門 C# テキストリンク

入力したコメントが右から左へ流れていくアレを実装します。

【環境】

・Mac OSX El Capitan
・Unity versiton:2018.3.0

【結果】

【作り方】

最終的な配置イメージ

まずはInputFieldを作成します。
InputFieldコンポーネントのLineTypeをMultiLineNewLineにします。
※SingleLineのままだと日本語入力ができないので注意！
　こちらを参考にさせていただきました。
　http://chnr.hatenablog.com/entry/2015/03/06/011559

次にシーンにTextオブジェクトを作成します。
作成したTextオブジェクトの名前をTextPrefabに変更して下記スクリプトをアタッチします。

TextPrefab.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class TextPrefab : MonoBehaviour
{
    private Vector2 startPos;
    private RectTransform rectTransform;
    public float speed;
    // Start is called before the first frame update
    void Start()
    {

        rectTransform = this.gameObject.GetComponent<RectTransform>();
        float height = Screen.height;
        float MaxHeight = height / 2;
        float MinHeight = -MaxHeight;
        float width = Screen.width;
        float textHeight = rectTransform.sizeDelta.y;
        float textWidth = rectTransform.sizeDelta.x;

        //最初の位置を画面右端にする
        startPos = new Vector2(width / 2 + textWidth/2, Random.Range(MinHeight + textHeight/2, MaxHeight + textHeight / 2));
        rectTransform.localPosition = startPos;
    }

    // Update is called once per frame
    void Update()
    {
        //speedに応じて画面右から左へ流れていく
        transform.Translate(-speed * Time.deltaTime, 0, 0);

        //画面外へ出た場合は自身を削除する
        if (transform.localPosition.x < -Screen.width / 2 - rectTransform.sizeDelta.x/2) {
            Destroy(this.gameObject);
        }
    }
}

TextコンポーネントのRaycastTargetのチェックを外します。
※チェックがついたままだと、テキストがボタンの上を通過する際にボタンが押せなくなるので注意！
シーン上のTextPrefabをプレハブ化し、シーンに残っている方は削除します。

そして、Buttonオブジェクトを作成し、下記のGenerateText.csをアタッチします。

GenerateText.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;


public class GenerateText : MonoBehaviour
{

    public GameObject textPrefab;
    private Text text;
    public InputField inputField;
    public float speed = 200;
    // Start is called before the first frame update
    void Start()
    {
        text = textPrefab.GetComponent<Text>();
        inputField = inputField.GetComponent<InputField>();
    }


    public void GenerateTextPrefab()//テキストプレハブのテキストにインプットフィールドのテキストを代入して生成し、スピードを設定する。
    {
        text.text = inputField.text;
        GameObject newTextObj = (GameObject)Instantiate(textPrefab, transform.parent);
        newTextObj.GetComponent<TextPrefab>().speed = speed;

    }
}

InspectorでTextPrefab,InputFieldを代入。
Speedは任意の値を入れてください。
（だいたい200以上がいい感じです）

ButtonコンポーネントのOnClick()の＋ボタンをクリックして新しい項を作成し、自身のButtonオブジェクトを入れます。
プルダウンからGenerateText/GenerateTextPrefabを選択します。
これでボタンを押すとTextPrefabが生成される機能が実装されました。

本家のディテールに合わせるなら、文字数に合わせて速度が変えるとよさそう。
あとは文字数に合わせてTextPrefabのサイズを変更するとベター。
実装したら追記します。