TextMeshPRO Emoji Issue with Noto Emoji

Hi everyone,

I am trying to implement emoticons with TextMeshPRO. I am following the steps of the documentation:
https://docs.unity3d.com/Packages/com.unity.textmeshpro@3.2/manual/ColorEmojis.html

I’ve tried it with the Noto Emoji Font by Google: Noto Emoji - Google Fonts
which works properly.

But when using the colored version of the font:

and following the same steps, the emoji doesn’t get rendered (see attached image). Unity does not throw or warning or something similar.

Does someone has an idea why?

Thanks to everyone!

3 Likes

same issue

I got it to work with the windows compatible version, which can be found here

also make sure you set the correct character set range

3 Likes

Bro firstly the emojis from this one are not colored. Also how do you set the “correct character set range”?

1 Like

I’ve been having the exact same problem. I managed to fix it using either the NotoColorEmoji_WindowsCompatible.ttf or NotoColorEmoji.ttf from
https://github.com/googlefonts/noto-emoji/tree/main/fonts

As stated by

I’m on a Mac, and neither of these fonts seem to be installable on my OS as fonts. In Unity, both show up as color emoji fonts when following the guide at
https://docs.unity3d.com/Packages/com.unity.textmeshpro@3.2/manual/ColorEmojis.html

I am using TMPro 3.2.0-pre.9

Here’s my inspector, with the font downloaded from https://fonts.google.com/noto/specimen/Noto+Color+Emoji on the left (NOT WORKING), NotoColorEmoji.ttf in the middle and NotoColorEmoji_WindowsCompatible.ttf on the right (BOTH WORKING AS EXPECTED):

9786558--1404129--upload_2024-4-22_18-53-49.png

Regarding the character set range, I’m no expert on font rendering at all so I might be wrong but my understanding is that Unity includes all the characters you use in your scenes by default (you will see which characters are included in the Character Table in the Inspector in the Font Asset File as in the screenshot above. Now I think if ‘Atlas Population Mode’ is set to ‘Dynamic’, Unity should do everything for you. For me, this worked perfectly until I had user input text, for which I had to enable ‘Multi Atlas Texture’ in the inspector. Honestly, I don’t know why. The below screenshot is from the NotoColorEmoji.ttf Font Asset, which works well for me now:

9786558--1404147--upload_2024-4-22_19-12-59.png

5 Likes

Hi!

Thank you for posting the solution.
I followed your steps, but I am having the following issue: the emojis are displayed as white only characters. I have tried with both WindowsCompatible and the simple one.

Regarding the font settings, everything looks fine:



Here are the settings for the input field:

What am I missing? Probably there is a minor issue, but I cannot see it.
Thank you!

1 Like

The fix was: set the shader of the material to TextMeshPro/Sprite after the asset font is created:
image
image

Best wish for your job! solved a same problem

I got the font to work but everything is grayscale, and the fix by jinn97 didn’t work either.

I also noticed there is no such thing as “Fallback Emoji Text Assets” in the project settings view that’s shown in the screenshot of the instructions

How did you get to that screen? In the font I found "NotoColorEmoji Atlas Material as a grayed out field under “Atlas & Material”, and double clicking it I’m able to change it to sprite but it has no effect. It looks a little different from your screenshot. I’m using Unity 2022.

I have now tried regenerating the atlas textures after setting it to Sprite. It made it worse; they turned from grayscale into shadows

How do you get 3.2.0? I just updated mine and it says the latest version is 3.0.9…

Edit: I finally figured out this entire discussion is prefaced around having text mesh pro 3.2.0. You have to add com.unity.textmeshpro, version 3.2.0-pre.11 and you might have to specify in project settings to allow preview packages in package manager. After that, you have to RECREATE the font and then select COLOR and then everything should work

Hi! I had the exact same problem as you, but I found the solution.
According to Unity’s documentation for TextMeshPro 3.2, you need to set a Fallback Emoji Text Asset in your TextMeshPro settings:

Edit → TextMeshPro → Settings

The text asset you need to create should not be an SDF font asset but a Color font asset:

Right click on font → Create → TextMeshPro → Font Asset → Color

This will ensure that emojis are displayed in color instead of white or grayscale.

Hope this helps!

One additional setting that might help folks, it looks like the glyphs are 128 pixels tall, so setting the “font size” in the “Update Atlas Texture” window to 128 will help match them to the surrounding font size.

1 Like