Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

Sprite - Icons with text (e.g. emoticons)

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by Immanuel-Scholz, Sep 1, 2014.

  1. Immanuel-Scholz

    Immanuel-Scholz

    Joined:
    Jun 8, 2013
    Posts:
    217
    Hi,

    it seems that one feature we use from NGUI is missing: To have special markup in the font gets replaced by custom icons. :(

    We use this to display things like resource symbols in tooltip flow-text like "This spell costs {G} 100 and will do {FD} 10-15 damage" and {G} gets replaced by a gold coin and {FD} by a symbol for fire damage..

    Any ideas how this could be achieved with the upcoming UI?

    Can we use custom bitmap font textures where some rarely used unicode characters are replaced by icons?
    How would we import and setup these bitmap font textures?

    Ciao, Imi.
     
    rakkarage likes this.
  2. Devil_Inside

    Devil_Inside

    Joined:
    Nov 19, 2012
    Posts:
    947
    Yeah, that was a really useful feature in NGUI. I hope it will be added.
     
  3. Immanuel-Scholz

    Immanuel-Scholz

    Joined:
    Jun 8, 2013
    Posts:
    217
    Can the <quad /> richtext option be used with the new UI? (Don't have the beta here ATM, can test it later if nobody is faster ;))
     
  4. Dantus

    Dantus

    Joined:
    Oct 21, 2009
    Posts:
    5,667
    The new UI supports richtext, meaning quad can be used.
     
    rakkarage likes this.
  5. pixpusher2

    pixpusher2

    Joined:
    Oct 30, 2013
    Posts:
    121
    Just learned about this feature here. Anyone have an example of using the quad tag in richtext? I tried assigning a material for the emoticon on the Text component but it affects the look of my ordinary texts too. Does it work only with bitmap font?

    Thanks!
     
  6. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,093
    Because of how materials ect work in UI Quad is not supported. We will be addressing the inline image issue in the future.
     
  7. AntFitch

    AntFitch

    Joined:
    Jan 31, 2012
    Posts:
    243
    Is there another way for us to embed images into a paragraph of text?
     
  8. Immanuel-Scholz

    Immanuel-Scholz

    Joined:
    Jun 8, 2013
    Posts:
    217
    @TimC , did anything change on this front since September?

    If not, is there any alternative way how to embed images into floating text? Can I control the font atlassing? Or alter the font atlas after creation (and so use this to replace some unused characters with my symbols)? How would you proceed with this feature if you can't access the unity source and your life depends on it? *G* (kidding)

    Greetings, Imi.
     
  9. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,143
    Nope nothing has changed on this front. If your life depended on it you would have to derive from Text yourself and change how the OnFillVBO works. i.e. instead of just taking the verts generated by the TextGenerator you'd manipulate them and insert your icon where appropriate. Or just hide from what's threatening your life :)
     
  10. Immanuel-Scholz

    Immanuel-Scholz

    Joined:
    Jun 8, 2013
    Posts:
    217
    "...derive from Text yourself and change how the OnFillVBO works. i.e. instead of just taking the verts generated by the TextGenerator you'd manipulate them and insert your icon where appropriate..."

    Interesting.. thanks! That doesn't sound too hard.. so use some unused unicode char, find out the generated UIVertex positions for the character and replace them in the list.. right?

    I assume, that I can set the character width with Font.characterInfo?

    BTW.. chrm.. *blush*... Is the source code of uGUI available somewhere already? You know.. so I don't feel so guilty when I copy'n'paste the disassembled Text.OnFillVBO? ;). And will the magic cpp-parts be ever available someday? :) (e.g. whatever runs behind TextGenerator.Populate_Internal. This smells like another nice place to patch some stuff into)


    Another approach: What about hooking into the bitmap font atlas and replacing the sprite there for some characters? Do we have access to the font texture after import? Font.textureRebuildCallback looks promising for a nice place to hook into, but I can't find a way to grab&modify any generated texture.. (haven't looked that long, tbh..)


    Or.... I just wait until you guys are finished with the feature and use the <color> richtext until then.. :-D. A bit yellow G100 instead of a gold symbol may be sufficient for now...

    Greetings, Imi.
     
  11. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,143
    Parts of the UI source has been released although Tim is the one doing it and i personally dont know where he's been putting them (he's told me i just always forget). A search of the forums might turn up the location

    As for the magic cpp-parts i dont think we'll ever make those available just because they need to be built into the engine dll so there would be no way for a user to patch pieces (at least for now).

    you might be able to set Font.characterInfo.size though i dont know if it would work. Worth a shot though.
     
  12. Immanuel-Scholz

    Immanuel-Scholz

    Joined:
    Jun 8, 2013
    Posts:
    217
    This one looks suspiciously UI-ish... and the Text.cs contains a the OnFillVBO. ;) Thanks again (and pass my thanks to TomC). Keep up the good work!

    And of course, you are right about the C++ code when it comes to patch and recompile. :)
     
  13. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,143
    That'd be the one :) I dont know how out of date those are but they are at least a good starting point.
     
  14. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Just as an FYI

     
    AntFitch likes this.
  15. TrentSterling

    TrentSterling

    Joined:
    Jan 4, 2013
    Posts:
    77
    Going to keep using NGUI until this functionality is implemented into Unity's UI. Hope someone figures out something soon!
     
  16. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
  17. nbalexis1

    nbalexis1

    Joined:
    Jul 21, 2011
    Posts:
    89
    Hi, I found that add UIVertex into the list of FillSpriteVBO of Text will draw an image with the font texture but not the sprite.
    The UIVertex are obtained using the code in Image.FillSpriteVBO, GenerateSimpleSprite, this one.

    Is it because the UIVertex.uv0 is relevant to the altas texture?
    How can I make it work? I need help..
     
  18. ChanMOOOOR

    ChanMOOOOR

    Joined:
    May 7, 2014
    Posts:
    10
    Now i found that if you want derive from Text (in UnityEngine.UI) and modify the OnFillVBO method ,the main problem is how to make your icons added to the font texture!!!.

    For the dynamic font ,the font texture is generated at runtime .which mean we should APPEND our icons in the same way.

    Here , i came up with an idea,use Texture2D.PackTextures() to append the icons and get the Rects then get the UVs. I have't try it out, maybe this will work!!:rolleyes:
     
  19. Devil_Inside

    Devil_Inside

    Joined:
    Nov 19, 2012
    Posts:
    947
    @Tim C , any updates on this?
     
  20. jsm404x

    jsm404x

    Joined:
    Jun 11, 2015
    Posts:
    2
    Unity 5.1 is out now... Does this work yet?
     
  21. Slight0

    Slight0

    Joined:
    Dec 6, 2013
    Posts:
    20
    Bump, 5.1.2, is this still on the roadmap?
     
  22. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Here is a preview of a new feature that I am adding to TextMesh Pro which provides the ability to use different fonts and materials as well as sprites (inline graphics / emoticons) within the same text object.



    Here is a link to a video preview & overview of this new Multi Font & Material feature.

    P.S. The <sprite> tag which enables adding graphics inline with the text is already available in the current release of TextMesh Pro and works with the TextMeshProUGUI component designed to replace Unity's UI.Text component.
     
    AntFitch likes this.
  23. yudixiaok

    yudixiaok

    Joined:
    Aug 29, 2014
    Posts:
    17
    An great engine but no UI !!!
     
  24. Shawn-Halwes

    Shawn-Halwes

    Joined:
    Jul 17, 2013
    Posts:
    14
    This is over a year old. Is this feature going to be supported on the Text component used with new UI and canvas setup? If so can it please be added to the Road Map?
     
  25. phil-Unity

    phil-Unity

    Unity UI Lead Developer Unity Technologies

    Joined:
    Nov 23, 2012
    Posts:
    1,143
    It will be supported in the future but have yet to have time to work on it. We are currently looking into what we want to add to the roadmap and when it would be for.
     
  26. Agent_007

    Agent_007

    Joined:
    Dec 18, 2011
    Posts:
    899
    The quad also needs more parameters:
    1. Separate width and height for size
    2. Adjustable margins
    3. Maybe even custom pivot point setting

    ugly_emoji.png
     
  27. SmilingCatLtd

    SmilingCatLtd

    Joined:
    Jun 8, 2013
    Posts:
    6
    I'm really beating my head against the wall on this. :( This is something that is so common in games that it should just work out of the box.
     
  28. drobina

    drobina

    Joined:
    Oct 21, 2015
    Posts:
    3
    Hi everyone!
    Maybe someone will find this simple script usefull.

    Attach script to empty gameobject and add images as children. In your text use <color=#00000000>$</color> as mark for "replacement". Set inspector to debug mode to see 'Image Scale' property.

    Works for me with several icons and 'best fit' option enabled in text. Would appreciate your advice and thoughts.
     

    Attached Files:

  29. Nikolay-Lezhnev

    Nikolay-Lezhnev

    Joined:
    Nov 8, 2012
    Posts:
    6
    Thank you very much! We have decided to use it in our project.
     
  30. drobina

    drobina

    Joined:
    Oct 21, 2015
    Posts:
    3
    Update for Unity 5.3
    Added TextEditor so no debug mode needed anymore. Put it into Editor folder.
     

    Attached Files:

    luKkaSs, yuliyF and sortris like this.
  31. De-Panther

    De-Panther

    Joined:
    Dec 27, 2009
    Posts:
    288
    @drobina - nice example.
    I think that it's better to do the Icon update position in the "OnPopulateMesh" method, as it happens only when it is updated, and works better in Editor mode.
     
  32. w34edrtfg

    w34edrtfg

    Joined:
    Nov 23, 2014
    Posts:
    35
    @drobina I've tried to make a version where you can just set the icons in array for multi use (instancing them). Ofc i failed so hard, as i'm trying to make a graphic rebuild inside a graphic rebuild (loop) :p



    Doesn't work, but i will leave it here so maybe someone thinks a better approach.
     

    Attached Files:

    Last edited: Jan 7, 2016
    Usmith likes this.
  33. Usmith

    Usmith

    Joined:
    Apr 7, 2013
    Posts:
    20
  34. playemgames

    playemgames

    Joined:
    Apr 30, 2009
    Posts:
    425
    I have an edited version here although it also does hyperlinks and you can use sprites instead of images. It automatically creates the icon images for you in a list. I've basically mixed this with another script I found on the net, but it doesn't quite do the spacing right on the images for dynamic text. It basically uses the quad richtext tag for the placement of the image, but uses images in it's place. To change the color of the hyperlink, just change the hyperlink color string to the name or hex of the color you want.

    Not sure why an easy way to include this wasn't done for Text anyway, I looked into doing a custom mesh but figuring out how to handle materials for this was way too over my head, just easier to assign the image sprites and align those.

    Hope this helps someone out!
     

    Attached Files:

    Last edited: Jan 30, 2016
  35. stephane.lallee

    stephane.lallee

    Joined:
    Feb 13, 2013
    Posts:
    10
    Nice ! As you said there are some issues with placements but it is already cool to have this...
     
    playemgames likes this.
  36. blah

    blah

    Joined:
    Mar 21, 2016
    Posts:
    23
    Any progress on <quad> being available again in Unity.UI.Text with custom materials for icon sprites etc? It really is a lot more hassle to display e.g. control/button hints ingame without this...
     
  37. LLLLXXXXLLLL

    LLLLXXXXLLLL

    Joined:
    Jun 26, 2016
    Posts:
    2
    it has been two years, and we're still not having this feature? :(
     
  38. Devil_Inside

    Devil_Inside

    Joined:
    Nov 19, 2012
    Posts:
    947
    I switched to TextMeshPro and couldn't be happier.
     
    SimonDarksideJ and Stephan-B like this.
  39. shkar-noori

    shkar-noori

    Joined:
    Jun 10, 2013
    Posts:
    833
    any news on this?
     
  40. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    The ability to use Graphics (Sprites) inline with text in TextMesh Pro has been available for over 6 months now so this isn't news. However, in the next release, users will be able to use a new variant of the <sprite> tag which will allow them to use Animated Sprites inline with the text.

    Here is an example of a single text object.



    The new tag variant is as follows: <sprite="Casino Chip" anim="0, 15, 20"> where 0 is the first frame, 15 the last frame of the sequence and 20 the frame rate. Note that a negative frame rate can be used to reverse the playing order.

    Just like before, you will need to Create a Sprite Asset which will contain those sprite sequences. The sprites must be in sequential order. A Sprite Asset can contain many of these sprite sequences.
     
  41. playemgames

    playemgames

    Joined:
    Apr 30, 2009
    Posts:
    425
    I've added my changes to the open source extensions of ddreaper so that people can contribute to making this happen natively in Unity a bit easier:

    You can see it as the TextPic.cs file here:

    https://bitbucket.org/ddreaper/unit...65b7b0f3b2d0/Scripts/Controls/?at=develop_5.3

    The editor script is here as TextPicEditor.cs

    https://bitbucket.org/ddreaper/unit...4febffef0c65b7b0f3b2d0/Editor/?at=develop_5.3

    Hopefully the people at Unity can see this and help to contribute to making it a part of the Unity GUI soon!
     
  42. petersvp

    petersvp

    Joined:
    Dec 20, 2013
    Posts:
    41
    I've fired a bug about this now! Looks like the UI Text <quad>s aren't usable yet...

    P.s. And... Stephan-B, stop with your ads. We are discussing an internal feature that must be there and everybody needs.
    I know about TextMesh Pro, I tested it and, it works. It works FINE. With its pros (sprites, quality, desktop). And, however, its cons (Bad performance on Mobile in comparison with original, one license per seat + Not-Invented-Here problem and legal issues.)
     
  43. Stephan-B

    Stephan-B

    Unity Technologies

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Performance on Mobile should be on par or better than UI.Text or original Text Mesh. If you are seeing different results than please PM or email me with details so I can take a look as that should not be the case.

    In terms of my post(s), it had been over 12 months since my previous reply in this thread. I just happened to have added the ability to use animated sprites inline with the text so I am just sharing this information with Unity users who might need this functionality in the short term.
     
  44. playemgames

    playemgames

    Joined:
    Apr 30, 2009
    Posts:
    425
    Thanks! I'll see if we can merge your changes! Always good to see contributions!
     
  45. jschieck

    jschieck

    Joined:
    Nov 10, 2010
    Posts:
    366
    To fix images not being aligned properly at all pivots, change:
    Code (CSharp):
    1. if (positions.Count == m_ImagesPool.Count)
    2. {
    3.     img.rectTransform.anchoredPosition = positions[m_ImagesVertexIndex.Count - 1];
    4. }
    to:
    Code (CSharp):
    1. if (positions.Count == m_ImagesPool.Count)
    2. {
    3.     img.rectTransform.localPosition = positions[m_ImagesVertexIndex.Count - 1];
    4. }
    and then change:
    Code (CSharp):
    1. positions.Add(new Vector2((vert.position.x + size.x / 2), (vert.position.y + size.y / 2)));
    to:
    Code (CSharp):
    1. positions.Add(vert.position);
    and
    Code (CSharp):
    1. if (rt)
    2. {
    3.    rt.SetParent(rectTransform);
    4.    rt.localPosition = Vector3.zero;
    5.    rt.localRotation = Quaternion.identity;
    6.    rt.localScale = Vector3.one;
    7. }
    8.  
    to:
    Code (CSharp):
    1. if (rt)
    2. {
    3.    rt.SetParent(rectTransform);
    4.    rt.localPosition = Vector3.zero;
    5.    rt.localRotation = Quaternion.identity;
    6.    rt.localScale = Vector3.one;
    7.    rt.pivot = Vector2.zero;
    8. }
    9.  
    Images should then be aligned properly at any pivot setting.
     
  46. playemgames

    playemgames

    Joined:
    Apr 30, 2009
    Posts:
    425
    Thanks for this, I tested it, but doesn't seem to work properly in my case. Take a look at the code here and do some more testing if you can, the script posted here is outdated compared to the one on Bitbucket:

    https://bitbucket.org/ddreaper/unit...9c/Scripts/Controls/TextPic.cs?at=develop_5.3
     
    Last edited: Jan 17, 2017
  47. fafase

    fafase

    Joined:
    Jul 3, 2012
    Posts:
    156
  48. vitaly-odarchenko

    vitaly-odarchenko

    Joined:
    Mar 28, 2016
    Posts:
    2
    I'm very-very-very-very frustrated by textmeshpro, because thay don't have ttf support. I've not mentioned that on the project begging and project almost done by now and the only thing I need to do is make 10 localisations including Japanese and Korean and it's almost impossible. I want to use ttf files I don't want to bake amounts of materials. It's so much stupid and annoying to put their ads everywhere in every thred. Okay, textmeshpro, you've made your own font format. Why don't you publish some fonts? Hate that stuff so much.
     
  49. Stephan_B

    Stephan_B

    Unity Technologies

    Joined:
    Feb 26, 2017
    Posts:
    3,442
    The structure of TextMesh Pro's font assets is the same as Unity's Font which includes a data structure that contains the font metric + a material + a font atlas texture. When using Unity's font set to unicode, they are essentially identical to the TMP font assets.

    Now I presume you are referring to support for dynamic atlasing which is the ability to add character metrics data plus rastering / adding glyphs into the font atlas texture at runtime which TextMesh Pro does not currently support.

    Having Dynamic font atlasing is certainly convenient but it also comes in many cases with significant performance overhead (especially on mobile devices) and potential quality assurance issues. It also requires that you include the font source file (ttf, ttc, and otf) which can be pretty large in size when you may not have to include those.

    I certainly agree that having to create / prepare your font asset ahead of time is extra work but in the end, it yields the best possible performance and ensures that your text will look exactly as you expect including when you are using lots of material presets.

    Font files were never designed for real time use in the context of game development where every CPU and GPU cycle matters. Most developers want to use those CPU and GPU cycles for AI, Physics, Animations, game logic, particles and very little towards rendering text which is why we have to find alternative ways similar to baking lightmaps or navmeshes to achieve good visual / rendering results without the performance overhead.

    Having said all of that, I will be adding support for Dynamic Fallback with TMP which will allow populating font assets in the editor while working on the project and during play testing where those additions can be made persistent by switching the font asset from dynamic to static. At runtime, characters and glyphs missing from the font assets will still be added to the font asset but these additions will not be persistent.

    The workflow that I believe will still be best once this new system is in place is to continue to create font assets and potential fallbacks ahead of time. These should contain all the known text used in the project for different languages or language groups. This will ensure best performance and quality and then only (at least try) to rely on the dynamic fallback for whatever (few) characters a user might type in some input field or chat box. Although the new system will be able to start with an empty texture which makes it fully dynamic, that doesn't mean it is a good idea to do so.
     
    Last edited: Dec 8, 2017
    dadude123 likes this.
  50. vitaly-odarchenko

    vitaly-odarchenko

    Joined:
    Mar 28, 2016
    Posts:
    2
    nGUI has ttf support, default uGUI has ttf support and perfomance is fine. It's not perfect but it fine and I've made a lot of mobile games with them. I don't understand why creators of TextMeshPro have not left ttf support option. It's nice that they think about my perfomance problems but I wish I could choose.