Search Unity

  1. All Pro and Enterprise subscribers: find helpful & inspiring creative, tech, and business know-how in the new Unity Success Hub. Sign in to stay up to date.
    Dismiss Notice
  2. Dismiss Notice

TextMesh Pro Full Emoji Support Api (emoji Sequen

Discussion in 'UGUI & TextMesh Pro' started by Rafael_CS, Apr 12, 2019.

  1. jiraphatK

    jiraphatK

    Joined:
    Sep 29, 2018
    Posts:
    98
    Edit. Turn out I need to enable Allow Rich text editing AND maximum characters can't be 0 in the Inputfield. But in Android don't have to enable those to type emoji. Anyway, I'll leave this in case anyone has the same problem as mine

    I have problem typing emojis in IOS. The emojis was ignored completely. I can't type it and can't paste it with TMP Inputfield. But if I loaded the emoji from other source and display it with the component. It showed up fine. This problem only occurred in IOS.
     
    Last edited: Oct 12, 2020
    JJunior likes this.
  2. JJunior

    JJunior

    Joined:
    May 22, 2019
    Posts:
    20
    Confirmed. I was having the same problem on iOS, idk if only setting the maximum characters != 0 fixed it. I also updated the TMP for the latest vesrsion.
     
  3. Yeisonlop10

    Yeisonlop10

    Joined:
    Jan 10, 2018
    Posts:
    19
    Hey guys. The most recent version works very nice. But for some emojis I'm getting a square (see image) next to the emoji, Any idea how to avoid this situation? thank you.
     

    Attached Files:

    Last edited: Oct 27, 2020
  4. Yeisonlop10

    Yeisonlop10

    Joined:
    Jan 10, 2018
    Posts:
    19
    Another thing that happens is that when we use the new TMP object in 3D we have our overflow to ellipsis. We have to switch fast between overflow and ellipsis to make the emojis render. otherwise sometimes we get a correct emoji or squares and bad emoji lectures.
     
  5. tapped_rupert

    tapped_rupert

    Joined:
    Oct 27, 2020
    Posts:
    1
    Hey! We are trying to get emojis working using an InputField (Basic Chat box). We got the same error previously when trying to input emojis, and this is happening after installing your asset too. We are just using basic emojis like sunglasses.

    Code (CSharp):
    1. ArgumentException: Found a low surrogate char without a preceding high surrogate at index: 1. The input may not be in this encoding, or may not contain valid Unicode (UTF-16) characters.
    2. Parameter name: s
    Do you know what this means?
     
  6. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    118
    Thank you for creating this @Rafael_CS !!

    I'm using Unity 2020.1.13f1 with your EmojiSearch 1.0.8 and I tried \U0001f3c4\U0001f3fb which should give (man surfing light skin tone) but instead it showed \U0001f3c4 and \U0001f3fb separately.

    Is there support for modifiers? Can you provide an example please of how to get something more complex working, like:

    U+1F469 U+200D U+2764 U+FE0F U+200D U+1F48B U+200D U+1F468

    (":woman-kiss-man:"
    1f469-200d-2764-fe0f-200d-1f48b-200d-1f468.png)

    EDIT: Not sure but I suspect maybe TextMesh Pro 3.0.3 is capturing and setting the unicode individually and interfering with your script.
     
    Last edited: Nov 12, 2020
    ageana likes this.
  7. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    you can't use \U and \u feature of textmeshpro because internal TMP implementations will execute post-parser to covert \U and \u after my code, and i can't override this feature in TMP.

    Try copy the exact Unicode of a character and paste it in textbox...

    Example:
    https://emojipedia.org/family-man-man-girl-boy/
    upload_2020-11-12_21-32-19.png

    ‍‍‍
     
    Last edited: Nov 13, 2020
    firstuser likes this.
  8. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    118
    Thank you for the explanation, makes sense.

    Previously I tried doing what you suggested but thought it wasn't correct because while the emoji does show up properly in game view it's not visible in the component Text Input so it makes it a bit difficult to edit in the future, is this expected behavior?

    Not a problem if it is, I can work around it and set via code to make editing easier, just wondering if I'm missing something!
     
  9. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    Yeah, thats correct. Unfortunally this is a bug that i can't fix because, as i said, the post-parser is executed after my code and this part is hardcoded inside TMP implementation.

    This package was designed to give life to emojis in a chat receiving inputs from a mobile keyboard, so i think this limitation is acceptable
     
    firstuser likes this.
  10. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    118
    Thanks so much for the help!!!
     
    Rafael_CS likes this.
  11. makaka-org

    makaka-org

    Joined:
    Dec 1, 2013
    Posts:
    451
    Hi, Guys, Is there a way to provide multiple atlases and load use them dynamically to provide HQ emojis?
     
  12. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    @makaka-org Unfortunally TextMeshPro don't have any feature to load SpriteAtlas Glyphs on the fly like Dynamic Fonts.
     
  13. titoasty

    titoasty

    Joined:
    Dec 2, 2018
    Posts:
    14
    Hi,

    First of all, amazing work!
    It's working fine with the spritesheet you provided :)

    I tried creating a 32 spritesheet with the most recent emojis data, and I noticed a shift in glyphes:
    (I kept default parameters of spacing and padding)



    I also tried creating a 64 spritesheet and it worked!

    Oh and last thing : is it me or is it working perfectly with just the classic TextMeshPro Text?
     
  14. YinZuoyu

    YinZuoyu

    Joined:
    Aug 25, 2015
    Posts:
    41
    Is it support UI ToolKit?
     
  15. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    it works with default textmeshpro only if you don't try to display EmojiSequences (emoji sequence example https://emojipedia.org/family-man-man-girl-boy/)

    Single unicode emojis work's with default textmeshpro
     
  16. titoasty

    titoasty

    Joined:
    Dec 2, 2018
    Posts:
    14
    Amazing!

    Do you have any idea why there was this shift with 32x?
    All default options and latest emoji data
     
  17. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    118
    If it's not already, try put that spritesheet into a POT square first.
     
  18. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    118
    @Rafael_CS I started noticing this error today (only happens when an emoji is in the text field), do you have any ideas on what it could be related to?

    I am using the direct sprite name like so "Perfect! <sprite name="1f60d">" and everything shows up fine aside from this weird error.

    Code (CSharp):
    1. [Error] Material doesn't have a float or range property '_CullMode'
    2. TMP_SubMeshUI.UpdateMaterial() at Library/PackageCache/com.unity.textmeshpro@3.0.3/Scripts/Runtime/TMP_SubMeshUI.cs:710
    3. 708:   if (m_sharedMaterial.HasProperty(ShaderUtilities.ShaderTag_CullMode))
    4. 709:   {
    5. -->710:       float cullMode = textComponent.fontSharedMaterial.GetFloat(ShaderUtilities.ShaderTag_CullMode);
    6. 711:       m_sharedMaterial.SetFloat(ShaderUtilities.ShaderTag_CullMode, cullMode);
    7. 712:   }
    8.  
    9. TMP_SubMeshUI.SetMaterialDirty() at Library/PackageCache/com.unity.textmeshpro@3.0.3/Scripts/Runtime/TMP_SubMeshUI.cs:617
    10. 615:   m_materialDirty = true;
    11. -->617:   UpdateMaterial();
    12. 619:   if (m_OnDirtyMaterialCallback != null)
    13.  
    14. TMP_SubMeshUI.SetSharedMaterial() at Library/PackageCache/com.unity.textmeshpro@3.0.3/Scripts/Runtime/TMP_SubMeshUI.cs:843
    15. 842:   //SetVerticesDirty();
    16. -->843:   SetMaterialDirty();
    17. 845:   #if UNITY_EDITOR
    18.  
    19. TMP_SubMeshUI.AddSubTextObject() at Library/PackageCache/com.unity.textmeshpro@3.0.3/Scripts/Runtime/TMP_SubMeshUI.cs:240
    20. 238:   subMesh.m_spriteAsset = materialReference.spriteAsset;
    21. 239:   subMesh.m_isDefaultMaterial = materialReference.isDefaultMaterial;
    22. -->240:   subMesh.SetSharedMaterial(materialReference.material);
    23. 242:   return subMesh;
    24.  
    25. TextMeshProUGUI.SetArraySizes() at Library/PackageCache/com.unity.textmeshpro@3.0.3/Scripts/Runtime/TMPro_UGUI_Private.cs:1383
    26. 1381:   if (m_subTextObjects[i] == null)
    27. 1382:   {
    28. -->1383:       m_subTextObjects[i] = TMP_SubMeshUI.AddSubTextObject(this, m_materialReferences[i]);
    29. 1385:       // Not sure this is necessary
    30.  
    31. TMP_Text.ParseInputText() at Library/PackageCache/com.unity.textmeshpro@3.0.3/Scripts/Runtime/TMP_Text.cs:1892
    32. 1890:       }
    33. -->1892:       SetArraySizes(m_InternalParsingBuffer);
    34. 1893:       ////Profiler.EndSample();
    35. 1894:   }
    36.  
    37. TMP_EmojiTextUGUI.ParseInputTextAndEmojiCharSequence() at Library/PackageCache/com.kyub.emojisearch@7a7620d3a7/Runtime/Scripts/TMP_EmojiTextUGUI.cs:136
    38. 134:   InputSource_Internal = TextInputSources.Text;
    39. -->136:   ParseInputText();
    40. 138:   m_emojiParsingRequired = false;
    41.  
    42. TMP_EmojiTextUGUI.CalculatePreferredValues() at Library/PackageCache/com.kyub.emojisearch@7a7620d3a7/Runtime/Scripts/TMP_EmojiTextUGUI.cs:198
    43. 196:   {
    44. 197:       if (m_emojiParsingRequired)
    45. -->198:           ParseInputTextAndEmojiCharSequence();
    46. 200:       return base.CalculatePreferredValues(ref defaultFontSize, marginSize, ignoreTextAutoSizing, isWordWrappingEnabled);
    47.  
    48. TMP_Text.GetPreferredWidth() at Library/PackageCache/com.unity.textmeshpro@3.0.3/Scripts/Runtime/TMP_Text.cs:4941
    49. 4940:   m_AutoSizeIterationCount = 0;
    50. -->4941:   float preferredWidth = CalculatePreferredValues(ref fontSize, margin, false, false).x;
    51. 4943:   m_isPreferredWidthDirty = false;
    52.  
    53. TMP_Text.get_preferredWidth() at Library/PackageCache/com.unity.textmeshpro@3.0.3/Scripts/Runtime/TMP_Text.cs:1385
    54. 1383:   /// Computed preferred width of the text object.
    55. 1384:   /// </summary>
    56. -->1385:   public virtual float preferredWidth { get { m_preferredWidth = GetPreferredWidth(); return m_preferredWidth; } }
    57. 1386:   protected float m_preferredWidth;
    58. 1387:   protected float m_renderedWidth;
    59.  
    60. Canvas.SendWillRenderCanvases()
    61.  
    Using Unity 2020.1.15f1 with Kyub EmojiSearch API 1.0.8 and TextMeshPro 3.0.3
     
    Last edited: Dec 3, 2020
  19. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    118
    In case anyone else is having the same problem, the error seems to have went away after update to Unity 2020.1.16f1... no clue why! :D
     
  20. sergioabril

    sergioabril

    Joined:
    Jan 11, 2016
    Posts:
    19
    First of all, kudos for this. It's truly helpful.

    I'm having thes same problem as quoted above, but only when the EmojiTextUGUI is controlled by a TMP_InputField: on a chat, when typing flags, they would appear in pairs, even though on simple EmojiTextUGUI instances they will appear fine (as they should). Any ideas?

    I'm on Unity 2019.2, EmojiSearch 1.0.8, and TMP 2.0.1 (2.1.0 and above give me some weird spacing issue on my fonts when I apply bold attributes, so I just skipped it. Also, looks like 2.0.1 is verified for 2019.2).

    cc @Rafael_CS
     
  21. bill18ization

    bill18ization

    Joined:
    Jan 29, 2013
    Posts:
    4
    @Rafael_CS Thanks for the awesome asset man! You rock and you have saved a lot of time for a lot of developers!

    I have noticed only one small issue. The emojis are getting rendered higher than the text. So, if you look at the screenshot below, the dog emoji is showing up above 'T'. How do I get all emojis to be at the same height as all other text.

    upload_2020-12-12_6-23-56.png

    I am using the deafult LiberationSans SDF Text Mesh Pro font asset. Thanks in advance!
     
    Last edited: Dec 12, 2020
  22. firstuser

    firstuser

    Joined:
    May 5, 2016
    Posts:
    118
    Maybe a dumb question but have you tried to change the vertical alignment settings in the TMP component?
     
  23. bill18ization

    bill18ization

    Joined:
    Jan 29, 2013
    Posts:
    4
    Yes, unfortunately it does not change the position of the emoji :(
     
  24. bill18ization

    bill18ization

    Joined:
    Jan 29, 2013
    Posts:
    4
    @Rafael_CS Sorry for reposting again as it has been a couple of days and I have not yet been able to find a solution. Do you have any suggestsion that I could try. Will be possible to get the emojis bigger than the text, similar to how it shows up in Whatsapp?

    Please find my previous post below,

    I have noticed only one small issue. The emojis are getting rendered higher than the text. So, if you look at the screenshot below, the dog emoji is showing up above 'T'. How do I get all emojis to be at the same height as all other text.



    I am using the deafult LiberationSans SDF Text Mesh Pro font asset. Thanks in advance!
     
  25. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    You can control glyph position in textmeshpro font asset. For more explanations about this search in old replys of this post (page 2)

    I recommend you to use textmeshpro (version >= 2.1.0-preview2 && version <= 2.1.0-preview10) as it is the most stable versions of TMP.

    Version 2.0.1 is one of the most unstable TMP versions at all... huge amount of glitchs... so avoid using it.
     
    Last edited: Dec 17, 2020
  26. bill18ization

    bill18ization

    Joined:
    Jan 29, 2013
    Posts:
    4
    Thanks @Rafael_CS! Will give that a shot.
     
  27. realragnvaldr

    realragnvaldr

    Joined:
    Jul 21, 2019
    Posts:
    14
    Hi Rafael_CS,

    Thanks again for this package and all your support efforts! Just a note regarding sprite importing: i followed the tutorial at the first page and couldn't get it right until i found another post by you about it, where you explain about having to make the size 4096x4096 and make sure to set the texture properties in Unity to the right values.

    I would recommend to add those remarks to your very first post (or insert a note like "If you experience problems, see post #24 below for further instructions" - that can save others some time and frustrations :)

    Oh, and perhaps you can add for people who don't have that Photoshop that changing the canvas size of the image can also easily be done using Microsoft's Paint 3D: (i) open the image; (ii) click "canvas"; (iii) drag the right and bottom edges so that size becomes 4096x4096; (iv) save (the old MS Paint does not work as it doesn't keep transparency)
     
    Last edited: Dec 26, 2020
    Rafael_CS likes this.
  28. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    Done.
     
    realragnvaldr likes this.
  29. lakshaychinda

    lakshaychinda

    Joined:
    Sep 3, 2020
    Posts:
    3
    I Tried making Emoji from sprite_sheet_64.png I followed all the above steps.. But end result is Glyph ID is same in all the Emojis to every emoji is using same sprite.
    Although each image has been added using different glyph..
    AllSameGlyph.PNG GlyphTable.PNG
     
  30. lakshaychinda

    lakshaychinda

    Joined:
    Sep 3, 2020
    Posts:
    3
    Following python script I used to fix the asset file generated.
    Just Replace Path to emoji_test.asset with your path of the exported asset

    import os
    import fileinput
    pathFolder: str = 'Path to emoji_test.asset'
    text_to_search:str = "m_GlyphIndex: 0"
    count:int = 0
    with fileinput.FileInput(pathFolder, inplace=True, backup='.bak') as file:
    line:str
    for line in file:
    line = line.replace("\n","")
    if text_to_search in line:
    replacement_text = "m_GlyphIndex: " + str(count)
    print(line.replace(text_to_search, replacement_text))
    count = count + 1
    else:
    print(line)
     
    masakatsu likes this.
  31. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    Buddy, you must use emoji search spritetool... i developed this to fix textmeshpro default sprite tool... as it is not working since version 1.4..

    You don't need any python script... justuse correct sprite tool to generate the asset..
     
  32. lakshaychinda

    lakshaychinda

    Joined:
    Sep 3, 2020
    Posts:
    3
    Yes I have Used the same Tool (Yours not Text Mesh Pro's)
    Maybe its an issue with Text Mesh pro ? I am on Version 3.0.3 - October 28, 2020 for Unity 2020.1.7.f1
    ImporterTool.PNG
    But the Emoji is working fine after using the script...
    BTW Thanks For this Awesome Work !! Really Helped a lot.. This should be default with TMP..
     
    Rafael_CS likes this.
  33. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    Probably.. Seems that new textmeshpro changed things again. That's why i always recommend use 2.1.0-preview2..

    I will take a look if i can fix it in new TMP.

    Thanks in advance.
     
  34. kavitashelke515

    kavitashelke515

    Joined:
    Jul 6, 2019
    Posts:
    4
    Currently there are few more emojis in Android 11 ,9, 10 for example party emoji is not in sprite S*** showing boxes in chat any solutiom
     
  35. kavitashelke515

    kavitashelke515

    Joined:
    Jul 6, 2019
    Posts:
    4
    Please let me know how to create emoji data for 64 x 64 spritesheet
     
  36. kavitashelke515

    kavitashelke515

    Joined:
    Jul 6, 2019
    Posts:
    4
    heyy Rafel
    I m using your emoji plugin and having issue in 64x 64 google sprite sheet i m not able to create and getting the emoji data convert to texture packer json process
     
  37. unity_IhzkgerRVepvcw

    unity_IhzkgerRVepvcw

    Joined:
    Jan 11, 2021
    Posts:
    1
    Using the latest TMP version 2.0.1 and also running into this. Tried a couple fixes but would appreciate seeing what worked for you.
     
    Last edited: Feb 24, 2021
  38. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    5,787
    Latest release of the TMP package for Unity 2019.4 is version 2.1.4.

    P.S. Version 2.0.1 is pretty old.
     
    unity_IhzkgerRVepvcw likes this.
  39. aromana

    aromana

    Joined:
    Nov 11, 2018
    Posts:
    43
    Is the solution in this thread the best available solution for supporting emojis in text fields in Unity? In 2021 it seems like a pretty important feature especially for mobile users.
     
    Whitepot and firstuser like this.
  40. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    5,787
    My plan is to add support for color glyphs (emojis) in the next set of preview releases for Unity 2019.4 or newer. This new functionality will not be in the first few preview releases but it will make it there by the time those are out of preview.
     
  41. jiraphatK

    jiraphatK

    Joined:
    Sep 29, 2018
    Posts:
    98
    PLEASE and THANK YOU. It's been soooooo long without native support.
     
    firstuser likes this.
  42. marcocanala

    marcocanala

    Joined:
    Mar 25, 2020
    Posts:
    1
    Hello @Stephan_B! By any chance do you guys have a planned ETA for this update?
     
    GGsparta likes this.
  43. GGsparta

    GGsparta

    Joined:
    Aug 25, 2017
    Posts:
    6
    @Rafael_CS thank's for this great work! Any update on the compatibility with more recent versions of TMPro?
     
  44. GGsparta

    GGsparta

    Joined:
    Aug 25, 2017
    Posts:
    6
    However, I am having trouble with some emojis (v1.0.8). Following the table, every emoji defined by several code points (e.g flags, first numbers,...) could not be displayed, and are replaced with other characters/emojis.

    For instance, here is what I get when I type:
    - '' (France flag character) :
    upload_2021-4-7_10-31-41.png

    - '0️⃣' (Keycap 0 character) :
    upload_2021-4-7_10-33-29.png

    What can I do to fix this?
     
    Last edited: Apr 7, 2021
  45. LeventP

    LeventP

    Joined:
    Jul 17, 2020
    Posts:
    22
    Wasn't working for me on 3.0.3 either. The python code fixed the Glyph Id's. Thanks a lot!

     
  46. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    @GGsparta @LeventP @lakshaychinda

    BEHOLD! THE VERSION 1.1.0 OF EMOJI SEARCH IS ALIVE!

    Code (CSharp):
    1. {
    2.     "dependencies": {
    3.         "com.kyub.emojisearch": "https://gitlab-ci-token:zF563oCqvXdJmiDuMShq@gitlab.com/KyubInteractive/kyublibs.git#com.kyub.emojisearch-1.1.0",
    4.         ...
    5.     }
    6. }


    CHANGELOG VERSION 1.1.0
    • Fixed GlyphID bug while generating EmojiData.asset in Versions 3.0.1+ and 2.1.3+
    • Fixed bugs in TMP version 2.1.3+ that call native parser on every layout recalculation preventing this api to implement EmojiParser logic (this probably fixed problems in version 3.0.3+ too, feel free to comment if it is working on unity 2020)
    • Added support to Escaped UTF16 and Escaped UTF32 string
    • Ex: try add this text in TMP_EmojiTextUGUI inspector \U0001f468\u200d\U0001f468\u200d\U0001f467\u200d\U0001f466

    Enjoy!
     
    Last edited: Apr 17, 2021
  47. jiraphatK

    jiraphatK

    Joined:
    Sep 29, 2018
    Posts:
    98
    Hello, I have tried the new emoji package 1.1.0
    In unity 2020.3.4

    It work in TMP 3.01 and 3.03
    but the emoji broke in tmp 3.04 and 3.05

    Below is from tmp 3.0.1 and 3.0.3

    ==================================================================
    Below is 3.0.4 version and 3.0.5 version
     
  48. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    Thanks for the report.. i must check other locations that use ParseInput to try override the native behavior.
     
  49. jiraphatK

    jiraphatK

    Joined:
    Sep 29, 2018
    Posts:
    98
    I also found out that if the emoji is put in consecutively without space it will not parse correctly.
    Try this example

    ‍♀️‍♀️‍♀️‍♀️‍♀️‍♀️
    ‍♀️ ‍♀️ ‍♀️ ‍♀️ ‍♀️

    Emoji sequence 1.1.0
    TMP 3.0.1 , 3.03
    will show
    upload_2021-4-19_12-6-46.png
    ======================================
    Emoji sequence 1.1.0
    TMP 3.0.4 , 3.05
    will show


    ======================================
    Edit. Down grade to
    Emoji sequence 1.0.8
    TMP 3.0.1 , 3.03
    will show

    So, I'll stick with emoji package 1.0.8 and tmp 3.0.3 for now
     
    Last edited: Apr 19, 2021
  50. Rafael_CS

    Rafael_CS

    Joined:
    Sep 16, 2013
    Posts:
    141
    @jiraphatK I changed the behaviour of EmojiSearch to use new TMP TextPreProcessor... try download the new version 1.1.1

    Code (CSharp):
    1. {
    2.     "dependencies": {
    3.         "com.kyub.emojisearch": "https://gitlab-ci-token:zF563oCqvXdJmiDuMShq@gitlab.com/KyubInteractive/kyublibs.git#com.kyub.emojisearch-1.1.1",
    4.         ...
    5.     }
    6. }
     
unityunity