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

setchi’s blog

コードに埋もれてます。

【Unity】uGUIで使えるハイパーテキストを作りました

経緯

以前 uGUI Text で Twitter のクリック可能なハッシュタグのようなものを実装しようとして挫折したのをふと思い出して再挑戦しました。

作ったもの

uGUI Text の指定した部分文字列にクリック時のコールバックや文字色を設定できる仕組みを作りました。
github.com

使い方

Text を継承した抽象クラスの HypertextBase.cs に、任意の位置の文字列に文字色とクリックされたときのコールバックを設定できるAPI を用意しているので、継承して自分の好きなように実装します。
サンプルとして正規表現によるハイパーテキストの実装例を置いてあります。

RegexHypertext.cs

uGUI-Hypertext/RegexHypertext.cs at master · setchi/uGUI-Hypertext · GitHub

こんな風に使えます。

using UnityEngine;

public class RegexExample : MonoBehaviour
{
    [SerializeField]
    RegexHypertext _text;

    const string RegexURL = "http(s)?://([\\w-]+\\.)+[\\w-]+(/[\\w- ./?%&=]*)?";
    const string RegexHashtag = "[##][A-Za-zA-Za-z一-鿆0-90-9ぁ-ヶヲ-゚ー]+";

    void Start()
    {
        _text.SetClickableByRegex(RegexURL, Color.cyan, url => Debug.Log(url));
        _text.SetClickableByRegex(RegexHashtag, Color.green, hashtag => Debug.Log(hashtag));
    }
}

結果

f:id:setchi_q:20160731232100g:plain

おわりに

現状、Canvas の Render Mode が Screen Space - Overlay の場合にしか対応できていません。今後対応予定です。
2016/08/22 追記: すべての Render Mode に対応しました。


その他、不具合・要望があれば
setchi (@setchi) | Twitter
に連絡ください!