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

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.

 

Yeah, that was a really useful feature in NGUI. I hope it will be added.

 

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 )

 

The new UI supports richtext, meaning quad can be used.

 

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!

 

Is there another way for us to embed images into a paragraph of text?

 

@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.

 

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

 

"...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.

 

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.

 

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.

 

That'd be the one I dont know how out of date those are but they are at least a good starting point.

 

Just as an FYI

 

Going to keep using NGUI until this functionality is implemented into Unity's UI. Hope someone figures out something soon!

 

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..

 

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!!

 

@Tim C , any updates on this?

 

Unity 5.1 is out now... Does this work yet?

 

Bump, 5.1.2, is this still on the roadmap?

 

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.

 

An great engine but no UI !!!

 

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?

 

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.

 

The quad also needs more parameters:
1. Separate width and height for size
2. Adjustable margins
3. Maybe even custom pivot point setting

 

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.

 

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.

 

Thank you very much! We have decided to use it in our project.

 

Update for Unity 5.3
Added TextEditor so no debug mode needed anymore. Put it into Editor folder.

 

@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.

 

@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)



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

 

Thank you @w34edrtfg !

 

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!

 

Nice ! As you said there are some issues with placements but it is already cool to have this...

 

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...

 

it has been two years, and we're still not having this feature?

 

I switched to TextMeshPro and couldn't be happier.

 

any news on this?

 

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.

 

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!

 

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.)

 

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.

 

Thanks! I'll see if we can merge your changes! Always good to see contributions!

 

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.

 

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

 

It seems Unity would not invest in developing such feature so they acquire the developer. TextMeshPro is now available for free in asset store.

https://www.assetstore.unity3d.com/en/#!/content/84126

 

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.

 

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.

 

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.