2
\$\begingroup\$

Here are two screenshots from Stellaris, where images are seamlessly integrated into the text. How can I achieve this in Unity?

enter image description here

enter image description here

\$\endgroup\$
4
  • 2
    \$\begingroup\$ I implemented something a bit like this some years ago, but never got it cleaned up enough to be a production-quality asset. I gave an overview of the strategy I used here, which might give you some leads for how you can attack this. \$\endgroup\$ – DMGregory May 1 at 19:28
  • \$\begingroup\$ Let me suggest... maybe.. maybe the best way is to do it in old and tested way. To convert text to images. This works all the time for many years already. You can create sprite-sheet with images of all the letters and write function that places image of character instead of actual character. \$\endgroup\$ – ShoulO May 3 at 20:52
  • \$\begingroup\$ Are you using the classic Text component or the newer TextMeshPro texts? \$\endgroup\$ – Philipp yesterday
  • \$\begingroup\$ @ShoulO that's effectively what the text components in Unity already do for you, so I don't think there's much to be gained by reinventing that wheel. \$\endgroup\$ – DMGregory yesterday
2
\$\begingroup\$

The regular Text component unfortunately can't do that, at least not on a UI canvas and without some nasty hacks. But TextMeshPro can. I really recommend using TextMeshPro over the classic Text component anyway, because it is superior in basically every way. The only thing which still justifies the existence of the classic Text component is backwards compatibility.

  1. Create an image asset with all the icons you need (aka "sprite atlas")
  2. Import the image as a "Texture Type: Sprite" with "Sprite Type: Multiple".
  3. Slice the image into sprites using the sprite editor (requires importing the 2D Sprite package from the package manager). Set the "Pivot" of every sprite to "Bottom Left" (otherwise the sprites will not align properly with the text).
  4. Right-click on the image asset in your project window and select Create > TextMeshPro > Sprite Asset
  5. Create a "Text - TextMeshPro" gameObject on your canvas. When you already have one, make sure that you still have "Rich Text" enabled (it's hidden under "Extra Settings").
  6. Assign that sprite asset to your TextMeshPro component. The setting is hidden under "Extra Settings". Or alternatively, if you want to use the same set of icons for all texts in the game, Go to Edit > Project Settings > Text Mesh Pro > Settings and set the default sprite asset to the asset you just created.
  7. You can now refer to sprites in your sprite asset by writing <sprite=number> into the text of your text object, where "number" is the sprite number from your sprite atlas. You can also explicitly name sprites in your TextMeshPro Sprite Asset and then refer to them as <sprite name="spritename">.

For example, if the second tooltip from the screenshot in the question were a TextMeshPro text, then its text would read something like this in the editor:

Pop Amenities Usage (<sprite name="populaton"> <color="yellow">52</color>): <color="red">52</color>
\$\endgroup\$
1
  • 1
    \$\begingroup\$ He's right about the old Text component; there's no reason to use it anymore. \$\endgroup\$ – Almo 18 hours ago

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.