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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Unity3D

Unity3Dは、ゲームや対話式の3Dアプリケーション、トレーニングシュミレーション、そして医学的・建築学的な技術を可視化する、商業用の開発プラットフォームです。

Unity

Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。

解決済

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

ulef
ulef

総合スコア20

Unity3D

Unity3Dは、ゲームや対話式の3Dアプリケーション、トレーニングシュミレーション、そして医学的・建築学的な技術を可視化する、商業用の開発プラットフォームです。

Unity

Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。

2回答

4リアクション

3クリップ

603閲覧

投稿2017/09/07 11:06

編集2017/09/08 10:50

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

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

理想的には、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に送るスクリプトを作成します。

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

C#

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氏に感謝します。

rarafy, k_fujimoto, Bongo, anz👍を押しています

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Unity3D

Unity3Dは、ゲームや対話式の3Dアプリケーション、トレーニングシュミレーション、そして医学的・建築学的な技術を可視化する、商業用の開発プラットフォームです。

Unity

Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。