Rendering sprites within a text strings

As far as I understand, there’s no support for rendering a sprite in the middle of a text node in gui objects. I’m just wondering if anyone has a way to do it somehow?

I guess you can measure text sizes, but then you need to have some tag within the text to replace/look up the position of and that might not match the image size, etc.

Any ideas are welcome!

If it’s a solid color you could add the vector shape of the sprite to the font you are using for .

https://fontforge.github.io/en-US/

2 Likes

It’s not a solid color, it’s a resource sprite in my case. Example “You got 2 [gold bars] for doing x”.

I know the text can be rephrased, just wondering if there is a way to do it.

I would use a vector shape icon representation version of the resource sprite for now if you could… when we can dynamically change the color of text within a body of text it would be more ideal. Main issue is you would want the placement dynamic to better support localization, but I don’t think you can get the information you would need to do that right with current features. One work around would be to use two text nodes and then build the phrase string + icon + string. Get the width from the table gui.get_node provides from a text node. Only do with single line text.

It’s not supported and I have seen no one trying to build it themselves. There was a similar request a while back from a team that wanted emoticons in chat messages. Contact me on HipChat @GregorGullwi.

It’s probably much easier to do it all in GUI. Here’s an example with two text nodes around a texture. I set the pivot point to east and west to make the text stick to the edge of the texture (no width lookup needed):

3 Likes

Thanks @sicher! I’m not sure it will work well with anchoring of the text though. If the text is localized, the left most text size is unknown and it will look unaligned I think?

It would since its pivot point is to the right. Expand the text and the node grows to the left.

1 Like

Maybe it’s possible for you Defold guys to allow us to use our own bitmap-fonts instead of generating one from a TrueType / OpenType font file? Or let us access and modify the bitmap-font generated by the editor.

This way we could not only use multicolored characters (e.g. for retro games), but also add any icons we need to the font by ourselves as special characters.

https://www.zone38.net/font/bmpfonts.png

That would be a cool idea… have a list of extension glyphs and their associated textures + character codes to use.

We do support BMFonts (.fnt): link

3 Likes

Nice! :+1:

I guess the manual could need an update then… :wink:

Yup, it’s in the works by @sicher

1 Like

Things that I would want from text engine:

  1. Changing text style (font, color, maybe underscore etc) of parts of text
  2. Inline sprites
  3. Links (throwing event when clicking (EDIT: or hovering) on the part of the text)
  4. Tables with colspan and rowspan
  5. EDIT: scrollbar

Yes, it’s a lot, but I think not a lot a lot.

1 Like

What is your use case? We do have webview support that might work for you.

See http://www.defold.com/ref/webview/

Maybe, if there were any guide of what it is and how to work with it. Is it gui element? Is it GameObject property?

You can use it to open web browser overlays with HTML content in your iOS/Android app. If you need to display large amounts of text with elements it can be a good option. Press button, html file in your project is opened, can press a button on the html page to then close the overlay and return to game view. Style with CSS etc. to make it look like it is native to your game. You could make entire menus with this, but big problem is it only works with iOS/Android builds as it uses their native webview functionality. Webview could be added to desktop targets with http://www.awesomium.com/ and HTML5 could be supported too in various possible ways…

1 Like

OK, use cases… Anything with more than trivial texts. NPC interactions, in-game reference, logs etc.

For example, if you want to have NPC selling things, having a table with price column, how they look column and stats column, and scrollable if too long would be very handy. In Visual Novels you will need a long scrollable talk log. Many concepts are better expressed with icons, instead of texts. such as “I’ll give you [carrot.jpg]x3 for [gold.jpg]x10”. Or “This gun is best against [zombiehead.jpg]”. Links will allow making cross-references and tooltips. For example, “Kill [meanine.jpg|ref = meanie43] near [planet.jpg|ref = planet128]”, with tooltip showing mini-map where this planet is, and click on planet link sets your autopilot there.

1 Like

All of these are perfectly possible to build with GUI elements. And I would argue that it would probably be more flexible since you can manipulate all elements individually. Scroll them in a view, drag-drop etc. Defold users would benefit from a GUI library that helps implementing some of that functionality though.

Possible - yes, easy - no. On the other hand, if you consider long complex texts in games a bad practice, then Defold is doing great job discouraging them :slight_smile: