Importing own Sprite atlas to TextMeshPro Unicode Emojis

Question

Hello there (TL;DR. at the end of question),

Background: I'm using Unity Unity version 2019.2.16f1 and trying to add some Emoji support since TextMeshPro has only 16 Emojis supported. There is by default a sprite atlas and a .json file in TextMeshPro (LiberationSans SDF Material), which bases on EmojiOne. When I create a GameObject and add a TextMeshPro-Component and enter the Unicode \U0001F60D into the text property via inspector, the Emoji (1F60D.png) does is displayed both in the scene and in the game.

Goal: I want to add my own Unicode Emojis (105 Emojis in total), import them into Unity and use it with TextMeshPro with Unicode.

What I've done so far: To accomplish this, I'd already created an emoji atlas with the emojis I need to support, using TexturePacker (which were used for the default emojis too) and exported the atlas (emoji.png), data file (.tpsheet) and the .json file as in the default emoji integration of TextMeshPro. I did add the TexturePackerImporter for Unity in my project. I hoped to override the default sprite atlas (.png file) and the data file (.json) in TextMeshPro, which obviously worked out. I know this would be too easy :D

Issue: I don't know how to import the emoji atlas with 105 different emojis in it in order to use it like a font. Would love to hear your suggestions and appreciate any suggestions, links, tutorials or whatever.

TL;DR.: Using TextMeshPro for Emoji visualization, which has just 16 Emojis by default. Want to import my own emoji pack and use it with Unicode (e.g.: \U0001F60D for heart-eye emoji). Created a sprite atlas and a JSON-Data-File by using TexturePacker. Don't know how to import it into TextMeshPro to use it as usual.

Answer 1

I figured out how to solve the issue and will do a step by step explanation for others: Make sure TexturePackerImport is installed and imported into your project click here to download

Put all .png files into TexturePacker
Edit Framework for Output files in the settings to -> JSON (Array)
If prompted for phaser framework, go for the option "keep JSON Array" and it will export both the sprite atlas (.png) and the configuration file (.json)
Add both in your assets folder in Unity.
In Unity go to Window -> TextMeshPro -> Sprite Importer
If TexturePackerImporter was added successfully into your project, the Import Format should be Texture Packer (keep this). Select the .json file for Sprite Data Source and the .png file for the sprite atlas. After choosing these out of your assets folder, click Create Sprite Asset.
Now in the Project-Explorer of Unity the sprite atlas should have an arrow at the right, which makes it expandable like a list. By expanding this you should be able to see each emoji you'd in your atlas separately.
Keep the sprite atlas (.png) file selected (this is important, otherwise Unity throws a warning that you haven't chosen any files) and go to Assets -> Create -> TextMeshPro -> Sprite Asset.
Now this is important -> If you select your Sprite Asset, which you'd created in the previous step, you have to make sure, that the Unicode Value in Sprite Character Table (in the Inspector) is filled (e.g.: the unicode value for 1f4a9.png should be 0x1F4A9). In my case it weren't filled automatically, which took a bit time to enter them one by one.

I hope this will help someone in the future.

Answer 2

Following @SercanSavran instructions, I ended up creating new and (to me) less confusing ones. Here you have them:

Original Post: http://answers.unity.com/answers/1687958/view.html

First, download and install Texture Packer (https://www.codeandweb.com/texturepacker/download) Then import Texture Packer into the project (https://assetstore.unity.com/packages/tools/sprite-management/texturepacker-importer-16641)

Put all .png files into TexturePacker (drag and drop to the software's GUI)
Set the "output Files" > "Framework" to → JSON (Array)
If prompted for phaser framework, go for the option "keep JSON Array"
Click "Publish sprite sheet", it will export both the sprite atlas (.png) and the configuration file (.json).
Add both in your assets folder in Unity.
In Unity go to Window → TextMeshPro → Sprite Importer
If TexturePackerImporter was added successfully into your project, the Import Format should be Texture Packer (keep this). Select the .json file for the Sprite Data Source and the .png file for the sprite atlas. After choosing these out of your assets' folder, click Create Sprite Asset.
Keep the sprite atlas (.png) file selected (this is important, otherwise Unity throws a warning that you haven't chosen any files) and go to Assets → Create → TextMeshPro → Sprite Asset.
Now this is important → If you select your Sprite Asset, which you'd created in the previous step, you have to make sure, that the Unicode Value in Sprite Character Table (in the Inspector) is filled (e.g.: the unicode value for 1f4a9.png should be 0x1F4A9). Usually, they are not filled automatically, which takes a bit time to enter them one by one.
In the TextMeshPro (text component in the object) you must set the created TMP_Sprite asset in the "Sprite Asset" field in the "Extra Settings" section, so it is used by that component.

Importing own Sprite atlas to TextMeshPro Unicode Emojis

2 Replies

Your answer

Follow this Question

Related Questions