Search Unity

TextMesh Pro Full Emoji Support Api (emoji Sequen

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by Rafael_CS, Apr 12, 2019.

  1. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    54
    Hello guys, i want to share this improvement API to TextMeshPro

    Download Link: EmojiSequenceSearchApi_1.0.unitypackage

    This package will include all you need to support all Emojis of Android/iOS in you app (Unicode Emoji 12.0)

    The original TextMeshPro use unicode characters to try map Emojis, but this is problematic because in Android we have a huge amount of Emojis that use Char Sequence.

    Thats why you need my simple API:

    FAST GUIDE:
    • Replace your TextMeshProUGUI component to TMP_EmojiTextUGUI component in the GameObject

      upload_2019-4-12_1-29-4.png
    • Enable RichText (we need it because we use <sprite=index> tag to map the emojis).

    • Add in TMP SETTINGS (or in your TMP_EmojiTextUGUI) the spriteasset in correct format
      (generated by Sprite Importer)

      upload_2019-4-12_1-53-24.png
    PS: Already added the EmojiData_google in this project so you can use it.
    (License Apache License 2.0)

    This SpriteAsset contains all emojis from Android 9.0 in 32x32 per emoji format.

    USING CONVERSION TOOL TO GENERATE SPRITEASSETS:
    • Download a JSON and a Spritetexture from https://github.com/iamcal/emoji-data
    • Access in Unity the tool 'EmojiData to TexturePacker Json'
      (Path: "Window/TextMeshPro/Convert EmojiData to TexturePacker JSON")
    • Drop the JSON downloaded from emoji-date in the tool and configure the size/spacing/padding of the grid in SpriteSheet (default size 32x32, with spacing 2x2 and padding 1x1)
    • Hit the convert button.

      upload_2019-4-12_1-51-48.png
    • Find the generated file (with name texturepacker_<OriginalFileName>) in same folder of the json used as parameter.
    • Use generated file in Sprite Importer Tool ("Window/TextMeshPro/Sprite Importer") with the spritesheet downloaded in emoji-data
    • Save your SpriteAsset and use it in TextMeshPro (yey!)

      upload_2019-4-12_1-46-36.png
    ENJOY the Full Unicode Emoji 12.0 Support! YEY!
    • Here an example of a chat system implemented with this Api
      upload_2019-4-12_1-26-24.png

    ABOUT SEARCH ENGINE IMPLEMENTATION:
    • The emoji sequence will be extracted from TMP_Sprite.name in UTF32 or UTF16 HEX format separeted by '-' for each char (see example below)
      Ex: TMP_Sprite.name = 0023-fe0f-20e3.png

      0023-fe0f-20e3.png will generate:
      Unicode 00000023 and
      Sequence 00000023 0000fe0f 000020e3

      so this a valid CharSequence and must be included in SearchEngine because TMP_Text dont know how to handle with it
      (the sequence != unicode representation)

      But

      0023.png will generate:
      Unicode 00000023 and
      Sequence 00000023

      so this will be ignored by the searchengine (default TMP_Text can handle this case without extra overheads because the sequence == unicode representation)

      PS1: The pattern is the default names in emoji-date JSONs and in EmojiOne JSONs
      PS2: The CharSequence will be ignored if UnicodeHex == Name.ToHex() or if the Name is not in correct pattern.

    • Search engine will try cache all Emoji Sequences of a SpriteAsset in two lookup tables

    • The first table will Map the CharSequence to SpriteIndex
      (example: sequence U+1f3c4 U+200d U+2640 U+fe0f will be mapped to <Sprite=512>)

    • The second Dictionary will map all paths until the end.
      (Example: in Sequence U+1f3c4 U+200d U+2640 U+fe0f we will generate entry for all chars util the end because we need O(1) access while trying to find if a char is mapped as a sequence (or if i can give up and just leave this char in final text)

      FastPath Entries for U+1f3c4 U+200d U+2640 U+fe0f
      U+1f3c4
      U+1f3c4 U+200d
      U+1f3c4 U+200d U+2640
      U+1f3c4 U+200d U+2640 U+fe0f


    • During parse process it will check char by char, looking at FastPathDictionary. if we failed to find entry in FastPath we try to retrieve sprite from CharSequenceToSpriteIndex table (with current path checked until last iteration). If failed we leave this char alone (this is not an emoji sequence).
    • The process is very eficient because we acess all dictionaries in O(1), so the order of complexity to parse a text is O(N) while N = text.length
      (with minor extra overheads during the search).
    • The SearchEngine will only parse text when something changed in TMP_EmojiTextUGUI
    • The original text in TMP_EmojiTextUGUI will not be affected because the parse process don't save the parsed text in m_text (only in the charbuffer)

    If the creator of TextMeshPro need any help to integrate this to original TMP_Text,
    just send me a message or e-mail.
    (raf.csoares@gmail.com or raf.csoares@kyubinteractive.com)
     
    Last edited: Apr 12, 2019
    nat-soragge likes this.
  2. George-Dolbier

    George-Dolbier

    Joined:
    Sep 1, 2013
    Posts:
    9
    Most excellent, I just updated to 2019.1 and have a project of moderate size that relies heavily on TMP, (It's a sudoku derivative) and now I need emojis. So I just downloaded it, and going to give it a try. I'll email you if I have any deep technical issues.
     
    Rafael_CS likes this.
  3. David-Alaniya

    David-Alaniya

    Joined:
    Nov 9, 2014
    Posts:
    1
    Hello! Emojis are small(
    Is it possible to scale them?
     
  4. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    54
    Just download the version in 64x64 in https://github.com/iamcal/emoji-data and follow the tutorial in my post.
    But take care, Highend Mobile Devices can only run textures with 4096x4096(in low end devices this number is limited to 2048x2048).
     
  5. daniel_unity938

    daniel_unity938

    Joined:
    Jun 18, 2018
    Posts:
    4
    Generated emojis from sheet_apple_32 of emoji data doesn't work with the generated JSON, I've noticed that their table uses 0.41em as the padding.

    Is there anything i need to change to support the latest emoji data?
     
  6. igor_rst

    igor_rst

    Joined:
    Apr 20, 2017
    Posts:
    15
    Thanks for your asset! Maybe you can do it for TMP InputField too?)

    Or I can change TMP text component in InputField to this?

    upd: yeah, it works

    upd2: no :( input field shows emoji, but when try to edit error occurs
     
    Last edited: Sep 12, 2019