質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

Unity:独自に作成したアイコンをテキスト内に表示する方法

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 1,756

ulef

score 18

前提・実現したいこと

ゲーム内テキストにてこちらの画像のような表現を実現しようと考えています。
![

おそらくこういった表示を意味する言葉があるのでしょうが、それもわからないため検索できず困っています。

理想的には、discordのチャットのように

:smile: +5:「生活が楽しくて楽しくて!」


のように入力することで自動的に参考画像のように表示されるような機能を想定しています。

すなわち、テキスト内にemojiのような感覚で「独自に作成したアイコン」を使用したいのですが、どのような方法が考えられるでしょうか。

解決しました

Bongo様のアドバイスを参考に、以下の手順で概ね理想通りの実装ができました。
ありがとうございます。

ただ、私自身マテリアル等の扱いについて曖昧なところが多く、何が起きているのかよくわからないというのが正直なところです。
不適切な箇所があるかもしれませんので、気づきましたら教えてください。


1.使用したいアイコンを貼り付けたマテリアルを作成する。
マテリアルを新規作成し、ShaderをUnlit/Transparentに設定します。
Selectから用意したアイコンを指定して完了です。

イメージ説明

2.適当なオブジェクトにText Meshコンポーネントをアタッチする。
この時自動的にMesh Rendererもくっついてきます。

3.Mesh RendererのMaterialsのSizeを増やし、Element 1以降に先程作成したマテリアルを指定する。

4.Text MeshのTextに文章を入力する。
<quad material=1/>と記述することで、指定したアイコンがそこに挿入されます。

イメージ説明

Text Meshによって生成された文字は3Dオブジェクトであり、Canvas上に普通の文字列のようには表示されないようです。
そのためCanvasを以下のように設定し、その子オブジェクトに問題のテキストを配置しました。

イメージ説明

以上の手順でこのような表示ができました。

イメージ説明

改良しました

助言を受け、より理想に近い実装を行うことができました。

アイコン一つ一つをマテリアル化していくのではなく、使うアイコンを一枚の画像にまとめたものをマテリアル化し、quadの引数から切り出して表示します。

2,3個ならともかく、アイコンが十数個とかになったらいちいち同じ数だけマテリアルを用意して…というのは非現実的ですから、こちらの方法を是非使ってください。

まだ十分なテストをしていませんが、とりあえず方法を紹介しておきます。


手順1で貼り付ける画像を以下のように、アイコンをまとめたものにします。
後に記載するスクリプトを使用する場合、この画像は必ず正方形としてください。
![イメージ説明

次に、テキスト中のキーワードをquadタグに置換してTextRendererに送るスクリプトを作成します。

以下のスクリプトはちょっと挙動が怪しくテストも十分でないので、適宜アレンジして使用してください。

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

public class FormatText : MonoBehaviour {

    [TextArea(4,10), SerializeField]
    public string text;
    public TextMesh textMesh;
    public List<string> replaceList = new List<string> ();

    //縦横の長さ(アイコン何個分?)
    public int imageSize=4;

    //アイコンのサイズ
    public int size=35;

    void OnRectTransformDimensionsChange (){
        toMeshRenderer ();
    }

    void OnValidate(){
        toMeshRenderer ();
    }

    //置換して送る
    void toMeshRenderer(){
        var s = text.ToString ();
        var iconRatio = 1f / imageSize;
        if (imageSize == 0) {
            print ("imageSizeが変");
            return;
        }

        for (int i = 0; i < replaceList.Count; i++) {
            var tate = 1-iconRatio-Mathf.Floor(1f*i / imageSize)/imageSize;
            var yoko = ((i % imageSize)*1f)/imageSize;
            s=s.Replace (replaceList[i], 
                "<quad material=1 size=" + size.ToString() 
                + " x=" + yoko.ToString() 
                + " y=" + tate.ToString() 
                + " width=" + iconRatio 
                + " height=" + iconRatio.ToString() 
                + "/>");
        }

        //textMeshが指定されてないよ!とエラーが出るのでとりあえずtry文で茶を濁しています。
        try{
            textMesh.text = s;
        }
        catch{
            print ("error");
        }
    }
}

インスペクタからtextMeshにMesh Rendererを指定し、imageSizeを設定します。(今回は4)

replaceListから各アイコンに対応するキーワードを設定して完了です。
※番号は左上から順に対応します。

イメージ説明

イメージ説明

以上で目的としていた機能を完全に実装することができました。

改めて、二度に渡り的確な助言をくださったBongo氏に感謝します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

テキストメッシュ等で、リッチテキストが使えるようです。独自アイコンをそれぞれマテリアルにして、quadタグを使ってそれらを文章中に埋め込めるのではないでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/08 01:37

    ありがとうございます!ほぼ理想通りの表示ができました。
    質問内容に手順を記載しましたのでご確認ください。

    キャンセル

  • 2017/09/08 09:47

    いい感じに表示されていますね。ご参考になったようで幸いです。
    quadタグは切り出し範囲も設定できるようですので、アイコン類をすべてまとめて一枚のテクスチャにしてしまい、quadタグで指定する座標をずらしてそれぞれのアイコンを描くこともできそうです。
    その場合、たぶんテキスト中のタグがごちゃごちゃして煩雑になりそうですので、たとえば文字列中の「:smile:」などのキーワードを対応するquadタグに置き換えるメソッドをあらかじめ作っておいて、元の文章ではquadタグの代わりにキーワードでアイコンを表現し、テキストメッシュに文章を設定する段階で置き換えメソッドを使ってタグ入り文字列に変換するといった工夫を加えると便利かもしれません。

    キャンセル

  • 2017/09/08 19:54

    アイコンごとにマテリアルを作る必要なんてなかったのですね!
    提案通り置き換えメソッドを作成しquadタグの切り分けを利用することで、完全に目的通りの実装をすることができました。(手順は質問文に追記しています。)
    今回は本当にありがとうございました。

    キャンセル

-1

すみません、コメント欄と誤り解答欄に記入してしまいましたので削除します。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る