Ability to pull icons from a typeface and use on MRTK buttons

[pdlipman-apx]

Describe the problem

"As a user, I expect my application to run smoothly and performant at runtime."

• As a developer of a HoloLens Application, if my application uses multiple "drawables" (aka, icons) and i want to display those drawables on my buttons, then I want to construct those drawables in a way that makes them as performant from a drawcall and memory allocation perspective as possible.

Given the above two statements, then:

• if you look at how MRTK utilizes icons on things like buttons, it pulls in raster-based assets, typically 256x256 or 512x512 DXT textures per icon. This means each icon is roughly 200-something kb per asset. If you have 70 icon assets (not uncommon for things like mobile applications), then you've just eaten up a ton of memory the customer could have used for other things.

Describe the solution you'd like

• The approach I would like to see implemented in MRTK is to allow the developer the option to set either a raster-based icon on MRTK assets that use icons OR optionally, instead display icons via a text-based atlas (a unique typeface made up of font glyphs). When you use a font-based glyph, you can gang up tons of icons onto a single file and they scale well in 3D space while keeping memory low. For instance, a single 1024x1024 atlas containing over 70 glyph-based icons is roughly .5mb. (i realize these numbers vary somewhat given a variety of conditions, but you get the point).

So, if we look at an MRTK standard button for the icon field, have a toggle to display either image-based raster icons or text-based glyph icons (via a point to a text field where user can point unity to the typeface add the desired character code into the text input to display the appropriate glyph)

Describe alternatives you've considered

Sans the above, we'll probably delta off MRTK to build our own version of the above to achieve the desired result, but I'd love to see it incorporated into the toolkit so we dont have to do that in long run.

[Cameron-Micka]

Pinging @killerantz since he has a great tool that achieves most of this feature request.

[killerantz]

I built a tool a while back to do something similar for our team. A branch was created to publish with MRTK, but never followed through.

Icons should be font based and it's pretty easy these days to take graphics and create a TTF file. With that, we wanted an easy way to manage fonts as well. One issue is that different people on a project would create a text object, leave the default font or leave the default material. So we wanted an easy way for everyone on the team to create a text object with the correct font and material with one click. The same applies to Icons, we had an Icon font that we could modify as Icon design progressed.

Here's an example of the menu.

We use scriptableObjects to define which fonts show up on the drop down. Then if a user selects a text based object, they can select a font from the dropdown and the font and material are applied. Also works with multiple selected Text objects. You can also right-click on the text component in the inspector and select the font from a context menu.

Pairing the material and font is not an issue using TextMeshPro, but we enabled TextMeshPro as well to declare these are the official fonts to use. We detect which kind of text object is selected and apply the font/material or font asset.

The same system works for Icons. Import the Icon font into the project, add it to an IconSet, assign a name, there's a button to automatically generate a material. You can also create a font asset for TextMeshPro and add that to the IconSet (TMP is not shown in these images, but it exists :))

The last step is importing the glyphs (char codes) from the icon font, you can view them and even disable individual glyphs in the IconSet UI.

Using the menu shown above, select Icon Viewer

This is a sample set of icons I created and can distribute as a sample. You can pull in your own icon fonts or grab generic icon font sets from places like Fontastic.com. This UI supports multiple font sets using the drop down at the top of the window, the list of icons scroll when list gets too long and the window scales. I've had a list of over 3000 glyphs running in the viewer, we collect and use icons for prototyping.

Select a text based object in the scene and click on a glyph in the Icon Viewer and the font/material or font asset is applied and the correct char code is added to the text field.

The idea again is organization, we can go in and turn off glyphs, add new ones, so the team is always working from the latest set of approved icons.

If this is something that is interesting or a variation of it, let me know and I can prepare a new branch with the latest code.

[killerantz]

An alternate use case for the Text support is a configurable drop down with not just font, but style associated. This would allow the design team to configure styles, which would scale, adjust size and color, as well as applying font and materials from the drop down or context menu.

[Alexees]

This is pretty awesome work. And it looks nice :)

[Zee2]

Font icons are supported and recommended in MRTK3 (and MRTK2, now, I believe!)