I’m the creator of I2 Localization, and as you may know, I have been working on a new plugin named I2 SmartEdge.
It allows rendering PIXEL PERFECT texts at any Size while also ANIMATING each of the characters in a text to create beautiful transitions and add emphasis to buttons and other UI elements.
SmartEdge also allows DEFORMING a text to follow any curve and contour, similarly to the FreeTransform tool in Photoshop.
The strongest point of the plugin, is the usage of SDF and Multi-Channel Signal Distance Fields to not only render pixel perfect texts and effects but also preserve sharp corners and straight lines!
(No more blurriness when scaling the Texts! and rounded SDF texts)
SmartEdge integrates with the mayor Text and Image solutions:
Unity UI
NGUI
TextMesh Pro (allowing Animation and Deformation of texts while preserving TMPro materials)
This means that SmartEdge can be used to increase the visual quality of your project without having to do heavy modifications.
Just add a SmartEdge component to your Text and Images and you will have access to per-character animations and FreeTransform deformations.
Optionally, if you also create a custom SDF font or image with the built-in editor, then all the advanced rendering effects become enabled and modifiable at runtime.
One of my main motivations with this plugin was to expose as many parameters as possible so that designers could really fulfill their art vision.
That’s why every single effect has lots of settings and can be customized in detail.
Take for example: Shadows
Normally, SDF implementations just go with the basic parallel shadow, which simply adds an offsets to the same character. And expose only the offset and its opacity!!
With SmartEdge you still have those options; But you also can go and create a perspective shadow without needing lights in your scene or using shadow mapping.
It is still a 2D setup that also allows making the projection look like soft shadow that fades as the shadow gets farther.
Or you can go even crazier and make the shadow hollow, with separated soft edges inside and out. Or try different projection angles… as I said before, this plugin is meant to give artist the tools to show their creativity!
Nonetheless, even with all these extra settings, the plugin is really fast. There is a material manager that automatically selects the best shader and variant; while most of the variables are cached and used in an efficient way. I even went ahead and manually inlined the core code that Unity had trouble compiling for performance!
Thanks a lot for all the emails I have received!
There has been a common question that I would like to answer here: How to get an early copy of I2 SmartEdge.
As a thanks for all of you who are using I2 Localization, I have added a Bonus Content folder in the I2 Localization Beta Folder. Inside you can find the latest FULL I2 SmartEdge beta. Feel free to test it and even use it in your commercial projects! Just be aware that it is a beta version! But if you find anything misbehaving, let me know and I will fix it ASAP!
Hi!
Finally I2 SmartEdge was sent to the AssetStore!
Hopefully its just going to be a week or two until it gets approved! Fingers crossed!
BTW, During the last couple betas, I was asked a lot about a feature I had in the roadmap: Trello
So, I went ahead and implemented that. Now you can set custom separations between characters, words, lines and even paragraphs. More so, you can even create a per-text kernel to separate pair of character! Hopefully that will help you get the look you want for your game!
This works with Unity UI, NGUI and TextMeshPro. No need to add any special font, just add the component, and everything in the Transform and Animation tab is enabled and usable. If you also create a custom SDF or MSDF font, then all the render effects become available as well.
This last betas, have helped making the plugin more easy to use. Nonetheless, if you see something that can be improved or that need a better explanation, PLEASEEE! let me know! I love feedbacks and actually spend quite some time of my day chatting with developers (as most of my I2 Localization customers know)
Hi there, some feedback after trying out the new spacing options:
Can you check the global “tracking” setting for sdf fonts? The spacing seems to be different between different letters. Also, in order to see the tracking change on the font, I have to press Play in the editor.
The global “Character spacing” setting on the font doesn’t seem to affect anything.
Can you explain what the “Extra” slider does next to Softness in the Face Rendering options? I’m not seeing it in the manual and I’m not sure what happens when I move the slider around.
The Spacing options in the SmartEdge component work well. Is it possible to set the spacing options via code by accessing the SmartEdge component?
Are the kerning (spacing between specific combinations of letters) options settable per font rather than per each SmartEdge component?
Just wanted to reiterate that the MSDF fonts look beautiful at very small point sizes with supersampling enabled. Really happy about that… especially for resolution independence from very low resolutions all the way to 4K when using a Canvas that scales with screen size.
To improve compatibility, SmartEdge at the moment doesn’t use a custom font. Instead, it uses the font that the UI system uses.
e.g. Unity Fonts for UnityUI, UIFonts for NGUI and the TMPro font asset when using TMPro.
Those settings, you specified (“Character spacing”, “Tracking”) are on the Unity UI side, and are described here:
They seems to be working fine, but given that Unity doesn’t update the vertices of the UI Text using that font, you have to manually trigger an update (just enable/disable your UI.Text gameObject and the changes to the font will show).
Yes, Unity Fonts have a kerning array, but its not exposed in their editor!!!
The SmartEdge’s Font Maker, does generate that array from the ttf data and saves that in that the Unity font. Its just weird that Unity decided not to expose the kerning data (even more as they already show the CharacterInfo).
I will add a task to write a quick editor to check and edit the Kerning Array from the font!
(Trello)
Great!! I also found that dealing with the font kerning was an issue, that’s why I added the SPACING option to SmartEdge. And those do update as you interact with them! haha
These SmartEdge Spacing options should allow editing each label independently to fix any weird issue, and as soon as I finish the Font Inspector Window, you should be able to also edit the Kerning and other data of the Unity font!
Said that, I do plan to create my own Custom Font to do Dynamic SDF Fonts
(Trello)
If you like that, please vote for that feature!
That was one of the new features I added and hadn’t extended the documentation to cover it. Will do asap.
Normally, fonts can be anti-aliased by smoothing the edge (from 0.5 to 2 pixels).
Changing the softness value, makes that smoothing wider (from 0 pixels to 5 pixels). These are screen pixels, so if you scale the text, you still get 5 pixels.
But what if you want the edge to not just be smooth, but a bit soft (e.g. when creating a text that looks like a ghost). Changing the “Extra Softness” makes a fading that its not screen dependent, but text size dependent.
That way, if you set the Extra to be 5 texels, and you scale up, it will become 20 pixels or 10 depending on how scaled is the text.
Also, notice that the amount that the “Extra” can become depends on the font Spreading. If you want really wide fading, the font needs to be generated with a bigger spreading factor.
The next image shows the difference. I just exaggerated the values so they could be seen properly)
The red is using the Softness, as you see, when the text is scaled down, it softness remains the same size on screen, and looks like the softness is wider. (great for anti-aliasing, as you can set 0.5 pixels and everything will be smooth)
The blue is using the “Extra”. As you scale down, the proportion remains the same, so the number of pixels used for the softness is smaller.
As with everything in SmartEdge: Options… lots of options to play with. (Oh man, So many thing to cover in the documentation!!!)
Most of the time you don’t need that many options, but once you start playing with them it makes a huge difference!
And again, these two options come for free in the Shader! Its just an add and a multiplication that gets optimized anyway, so no performance cost at all!
Thanks for the detailed reply. Is it possible to set SmartEdge options via code? For example, all spacing options, face options (edge, softness, extra) and outline (width, color, softness).
Yes! everything can be accessed and modified at runtime.
There is a demo scene showing how to do so:
And you can see the scripts it uses here:
Basically, what you need to do is to get the SmartEdge component and then you can access the render data using GetRenderParams(),
the deformation is at smartEdge._Deformation
every effect its a subclass (_Deformation._Spacing, _Deformation._BestFit, etc)
Animations are in smartEdge._AnimationSlots
var se = text.GetComponent<SmartEdge>();
var params = se.GetRenderParams();
params._GlowOuterWidth = value;
se._Deformation._Spacing._Space_Word = 2;
se.MarkWidgetAsChanged(true, true);
se.PlayAnim("Jump");
Thanks for the above. Another observation after working with spacing:
The text no longer respects the bounds of the RectTransform when character and word spacing are enabled. If the text is left justified, when adding spacing options, the text will flow beyond the RectTransform bounds even if set to wrap. If the text is center justified, it ends up being shifted to the right of center with spacing added.
Also, is there an option to convert text to all caps or even small caps? Small caps meaning capitals are normal size, but lowercase letters are converted to smaller capitals. I’m not seeing either option in SmartEdge, unless I’m mistaken.
Thanks for reporting this issue. It is now fixed in (v1.0.0f3)
The spacing has also been extended to work with older version of unity (previously was only Unity5.3+), NGUI and TextMeshPro
I will upload it to the beta folder later today.
No, The smartEdge component is meant only to adjust render properties and deform/anim the vertices. It currently doesn’t change the text (toUppercase, etc)
Said that, There a few task in the roadmap that will add the ability of modifying the text and doing those options:
The idea I have is to add a new Tab (Render, Deform, Anim, Text) This Text tab will only be visible when the target is a label.
The Text tab will have options for the rich-text tags, modifications (toUpper, toTitleCase, etc), wrapping and justification, etc.
I sent it to the store about a week ago, but there seems to be a long waiting time now. There are publishers that are still waiting since december 30!
So, I think I will be in the review queue for at least one more week. Lets hope the AssetStore team starts speeding things up.
Yes, I have kept uploading new versions to the I2 SmartEdge Beta folder. The latest one is the v1.0.0f4
(Release Notes - Inter-illusion)
There has been lot of changes and improvements. Among the main ones are:
Improved the quality of the Outline and InnerShadows
Fixes to shaders and compile issues when on Windows Phones
Refactored how the layering system works to be faster and more extendable
Another big change is that Animations now support Randomizing the Start and Duration of the effect per character. That way, it can be semi-random and only randomize a bit around the flow, or truly random where every letter starts and last independently.
All is also now deterministic, so it takes less memory for previewing and its easier to adjust.
Here is an example in action:
There are two folders:
1- The “Bonus Content” in the I2 Localization Beta. That its meant as a preview of the plugin, and will not be further updated. Any user of I2 Localization is free to use that preview in their projects.
2- The I2 SmartEdge Beta folder. That has the latest versions. Anyone that bought the plugin have direct access to that folder so that they be always up-to-date without waiting for the AssetStore to release the new versions!
Just picked this up based on how good I2 Localization is.
The asset is great and it’s been a lot of fun tinkering with it. However, I have an issue with combining a generated font with localization. Typically in Unity UI text, if the specified font doesn’t have certain characters (Asian char sets for example), it will fall back to a default set that does contain them. This has worked well for me in my game and ensures text is always displayed no matter what the char set.
However, after generating a SDF font with SmartEdge, localized text simply shows up blank because the original font that got converted didn’t contain the chars. When generating the font, I chose “from file” and it found all the characters I needed but didn’t add them into the generated font (understandable as they’re not in the original font).
Can you recommend a way around this? One option would be for the generate font menu to have an option that allows you automatically add missing characters in the generated font based on the basic fallback font Unity UI normally uses for missing characters.
Hi,
When building an SDF font, if the ttf font you have doesn’t support some of the characters, you can specify fallback fonts. Just add them to the list at the top.
The plugin will start generating each character using the first font, if the character is not found, then it will try finding it in the second one, and so on.
However, some times you may need to generate a few smaller fonts and then switch them based on the language.
As you said, with I2 Localization you can do exactly that. find all the texts in your game for each language and generate one font for each, then create a Secondary Term in I2 Localization and switch the font at runtime based on what language you have enabled.
The next step I’m going to add is the ability to have fallback font automatically picked for the characters that are not found (not just when building the font, but actually when running the game). For this I need to implement the multimaterial support (each font has its own material). Trello
I’m currently finishing the extended RichText support that will allow me to setup exactly that. As soon as I finish it, I will add the other fallback options!!
BTW, SmartEdge was a few weeks in review, during that time I implemented A LOT of new features!! And I mean A LOTTT!
I’m still trying to catch up with the documentation of them, but if you want to try them, I uploaded the new version (1.0.1b2) to the Beta folder!
Thanks for the detailed and fast response! That’s really useful to know, I should be able to get SmartEdge integrated into my game before launch now I2 Localization was the only way I managed to get localization in my game in time too - your work has been super useful I’ll be leaving 5 star reviews for both assets.
Hi,
I wanted to share a few more things I have been working for I2 SmartEdge.
The plugin now implements its own alignment and wrapping methods and adds JUSTIFICATION.
All this new options, implement a faster method based on the geometry (while still using the character metric) but don’t require finding the preferred sizes and sampling characters for different font sizes. This greatly reduces the hitches and lags when using BestFit with Wrapping!
When selecting Justified as the Horizontal Alignment, SmartEdge will add spaces between the words and characters so that each line inside a paragraph get the same length.
Normally this space will be added to separate words, but when there are too few words in a line or the words are too big, the separation of the words look bad. In those cases is nice to also separate a bit the characters forming the words.
SmartEdge allows changing a parameter named “Justify Characters” to control how much the characters or words can be separated. When it is 0, only the words are separated. And if it become 1, then only the characters are separated and the words remain at the same distance.
The other problem of justification is that when separating characters, ALL of the characters are separated, even if the distance between the words is small. To fix this, SmartEdge introduces the “Justify Min Space” which defines the distance between the words at which the characters start been separated. Lines whose words are closer than this distance, will only separated the words. However, if the distance to fill is too big, then the characters start spreading as well.
Another thing I just added was the Text Pages, which divides the text in vertical pages, and only shows the page you have selected. This is really useful for tutorials / NPC chats, etc
Also, the latest SmartEdge includes now a modifier to change the case of the texts: It can switch between UPPERCASE, lowercase, Title Case and Sentence!
Does SmartEdges solve the famous SD/HD variants problem?
If so what is the performance (memory/cpu/gpu) tradeoff?
I’m asking because I want to know if I should consider this a solution to multiple resolutions resources for mobile devices.
Our game is 100% based on Unity’s UI and we are loading sprites at runtime based on DPI.
I’ll be leaving 5 star reviews for both assets.
