Best way to display images in text?

Help
#1

Has anyone found a decent means of displaying images in TextFields?

Our original method was modifying certain unicode characters in our font to show those images as glyphs, but then we discovered there’s a nasty bug on Chromium-based browsers on Mac that will only render the font in black when we did that, no matter what color we set it to. Only Safari would render in the correct color. We figured it wouldn’t get fixed in a timely manner given Chromium’s massive bug log, so we looked at other solutions.

Our current method is to render the images as PNGs and place them on top of TextFields. Our game searches for tokens in the text, replaces them with non-breaking spaces, then grabs the appropriate bitmap to cover the empty area. This works fine for Flash and HTML5, but non-breaking spaces seem to render as full tabs when we tested on Windows builds and throws everything off.

I think my only other option may be to render the TextField to a Bitmap first and modify that as needed specifically for Windows builds. However, I’ve found this method tends to look quite ugly in HTML5 and Flash.

If anyone has any suggestions, I’m all ears.

#2

Perhaps this would be possible using a DIV and html text rather than using the fancy canvas method of text we use for the TextField class

I think adding a StageText implementation for HTML5 (using DIVs over the game canvas) would be a nice addition to add some more flexibility… what do you think about that idea?

#3

For HTML5, I guess my main concern with that is how this would affect display list rendering. It sounds like it would work if the text were at the top of the display list, but if other elements within the canvas render are meant to overlap it or its parent, it would look weird.

For Windows/HXCPP builds, this wouldn’t help unfortunately.

#4

Maybe you can try a font icon. You can customize here : https://icomoon.io

#5

Unfortunately, we tried that already. This is how we found out about the Chromium bug on Mac that turns all the text black, no matter what color we set it to.

#6

To clarify, we had used FontCreator to customize the fonts we were using, not IcoMoon.

#7

StageText is an API that displays over the top of the display list. This is implemented in Adobe AIR and could be an API to copy for OpenFL

#8

Ah, I see. Sounds like it’d be good to have regardless, though it would not be helpful in our case because of this:

“StageText objects are not display objects and you cannot add them to the Flash display list.”

#9

When using the WebGL or Canvas target it is not possible to mix DIV-based text (which could support image tags) in within the display list because the display list is rendered to one HTML element.

The DOM target allows mixing different HTML elements together within the display list

For WebGL or Canvas the idea of StageText would allow for an easier way to layer “native” text over the top of the display list which would require some synchronization in terms of position and size but could allow for “native” text display and input without using the DOM target