Creative ▶ I2 SmartEdge◀ (Pixel Perfect EFFECTS and ANIMATIONS for your Texts & Images)

Hi Guys,

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.

1. Just add a SmartEdge component to your Text and Images and you will have access to per-character animations and FreeTransform deformations.
2. 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.

Here is a demo of the plugin in action:
WebGL DEMO

More details about its features:
Documentation

Roadmap of future features:
Vote here on the features you like!



SmartEdge is now in the final days of the beta and I'm getting ready to release it later this month.

Hope you like it!
Frank

EDIT: The Plugin was just approved and its now available in the AssetStore!!

 

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!

Here is a more detailed description of the performance in SmartEdge:
http://inter-illusion.com/assets/I2SmartEdgeManual/Performance.html

 

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: https://trello.com/c/4towZAnF/8-spacing-kernel-effect

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)

 

Congrats! Looking forward to using the official released versions. I'll make sure to post any feedback here rather than via email.

 

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.

 

Hi!

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:
https://docs.unity3d.com/Manual/class-Font.html

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!
(https://trello.com/c/7J9JKcaG/27-custom-inspector-for-ui-fonts)

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
(https://trello.com/c/mrYsprvl/23-dynamic-sdf-font)

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

Code (csharp):

1.  
2. var se = text.GetComponent<SmartEdge>();
3.  
4. var params = se.GetRenderParams();
5. params._GlowOuterWidth = value;
6.  
7. se._Deformation._Spacing._Space_Word = 2;
8.  
9. se.MarkWidgetAsChanged(true, true);
10.  
11. se.PlayAnim("Jump");
12.  

 

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.

 

Hi,

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:
https://trello.com/c/96n7S1Cz/6-enhanced-rich-text
https://trello.com/c/QSwYLVA0/26-ui-text-and-textmesh-replacement

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.

 

Hey there, any news from the Asset Store regarding when it will be available?

Did you have a chance to upload the fixed spacing issue to the beta folder? I'm still seeing only beta 18.

 

Hi

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
(http://inter-illusion.com/forum/i2-smartedge/187-release-notes)

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!

Hope that helps,
Frank

 

After several weeks waiting for review, I2 SmartEdge is finally in the AssetStore!!
Exciting times!!!!

Here is a video to show some of its features

 

Congrats! I'll be picking up a copy tomorrow.

 

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). https://trello.com/c/OoY5KOlX/15-multi-materials

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!
http://inter-illusion.com/forum/i2-smartedge/187-release-notes#1978

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!

http://inter-illusion.com/assets/I2SmartEdgeManual/Wrapping.html
​

These changes are now available in version 1.0.1b2 which can be downloaded from the beta folder.

 

Hi @Inter-Illusion

I have two questions:
1. Does SmartEdges solve the famous SD/HD variants problem?
2. 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.

 

Normally you will use SD/HD to have big textures in high resolution screens (to avoid blurriness), while having small textures in low resolution screens (to save memory).
I2 SmartEdge uses Signal Distance Fields to use an small texture (even smaller than your typical SD variant), but because of the encoded neighbor information, when the texture is scaled up/down, the borders can be reconstructed and so there is no blurriness at any size.


The plugin also supports Muti-Sampling to increase the quality even more when the texts/images are very small.
So, it will look sharp and readable when the text is big (4K monitors, etc) or small. While at the same time using smaller textures than your common SD size.

Memory: SDF textures are small and only store Alpha! MSDF textures can be even smaller but store RGB information. It depends on the quality you need, but memory wise, the assets required for SmartEdge consume less memory.
In the AssetStore version, there is an small overhead in memory for each SmartEdge component, but that is now removed in v1.0.2 (which can be downloaded from the beta folder right now!)

CPU: All the processing happens in the CPU, but this has been heavily optimized for performance (I even had to manually inline lots of the critical code because of the Unity compiler was adding extra calls!). Besides, this processing in the CPU only happens whenever the UI is modified (enabled/text changed, etc)
However, as you know the Unity UI by default has big lags and hitches when rebuilding layout/using bestfit, etc. I2 SmartEdge implements its own methods for this, so, it sets in Unity UI the cheapest/fastest combination possible, and uses a faster bestfit/wrapping method that reduces the lags a lot!

GPU: SmartEdge has LOTS of effects, and each effect has LOTS of settings, and I mean it!! LOTSSS. But I have implemented it so that most of the settings are pushed into the CPU processing (which only happens when the texts/images are enabled or modified).
And then, there is a Material Manager that checks all the settings in your SmartEdge components and automatically creates materials for you with only the features you need and in a way that most things could be batched toguether! I will be improving this, but so far it works pretty well!

So, basically, you only pay for what you use (e.g if you don't enable multisampling, then the shader is far cheaper, same for inner shadow, and so on).
Here is a better description of the performance and how to improve it.

The current version of SmartEdges uses the same algorithm to generate SDF for Texts and Images. Meaning that if your source sprite image follows the right conditions, then your IMAGES can get the same quality than the texts in the examples.

The problem is that in practice this is really hard to accomplish. And if the source texture is not right, then the SDF will have artifacts and staircasing.

For texts, I'm generating the source images from the font spline information, so that becomes as accurate as you can get, but for images its up to you to do it right. Said that, I have SVG support almost ready (which will create the source sprite automatically from the vector information inside the SVG).

The tutorial in the documenation and inspector has some of the rules you need to follow (e.g. source image should be antialiased with 1px of width, Black/white texture works the best, source should be at least 8 times the size of the resulting image, etc)

For color sprites, I implemented a LAYER system, but it was restricted to only 4 layers (colors). So I deprecated that and I'm now going to allow using any number of layers, but for that I need to finish first the Multi-Material system. (this is my main goal at the moment, so I'm finishing the RichText support which will is needed for the multi-materials).

As soon as that's ready, and I get the SVG working right, then Sprites will be easy to make and look as good as texts without too much problem.

But for the moment, SDF Sprites are enabled and usable, but you have to test and tweak the settings a bit to get it right. I will be focusing in fixing that as soon as possible.

As always, please check the roadmap and vote for the features you need, that will allow me prioritize the work!

 

A new update of SmartEdge was just approved and is now available in the AssetStore!

Also, 1.0.2 a1 is available in the Beta Folder!!!

 

I2 SmartEdge is ALL about giving the artist tools to accomplish their vision!
That's why, every single effect, animation, text modification, etc, has TONS of settings to really dig deep and let you explore!

Here is one of those examples: GLOW!


And if you think that this effect is complicated to make, think again!

See here a Making-of that effect: MakingOfLetItGO

Can you imagine, making your game's Tile pop with cool effects like that?
And HEY!!! I'm just a programmer, imagine what YOUR art skills can do!

 

Quick Update:
I have been checking all the memory usage trying to reduce as much as possible! This new version (1.0.2b1) has so many improvements in that regards, that it feels like a different system!!
Now, no matter how many SmartEdge components are there in the scene, ALL of them use a shared memory pool, which completely removes lag in the stress test where all the test is changing constantly.

Also, Animations were using lots of buffers for storing Previous and Next positions and values in general. This was used for previewing the animations when Random values where used. In the previous release I made animation use a deterministic random generator, which allowed me now to get rid of all those buffers given that I can reconstruct any point in the animation even when randoms are added at any point in the timeline!

​

I'm still rewriting the animation system using this, but so far animations use NO buffer AT ALL! They are as light-weight as they can be! I'm very excited about this changes!

Will post here a few examples once I finish the animation and also to show a few more variables I exposed to control Timing and Blending.

 

Hi great work on this so far. I was wondering would this be suitable to use in a 3d game ? I have a 3d game where I need to land on targets with numbers written on then. My issue is that if I just used a texture map on the target then the text would look blurry close up or I would have to use a very large texture. I was wondering could I use this asset on a canvas set to world space and then simply move it over the target to have sharp text in a 3d game ? My only concern is how good are the shaders it comes with because I would need text to be able to receive lighting from objects in the 3d scene so that it matched the lighting on the rest of the platform to look right. If this had a shader similar or supported the next gen sprites shader it would be incredible. I could then have glowing animated score markers for example that would match with the rest of the pbr shaders in my game.

Would this asset be suitable for that use ?

Thanks,

Ian

 

Thanks!

The SDF and MSDF shaders solves that issue for sure:
See it in 3D: https://twitter.com/InterIllusion/status/825468247931641856

The current shaders are meant for UI, and they have their own lighting. So, they wont receive the light from the scene.
However, I plan on supporting that (https://trello.com/c/DwbU8KXq/31-surface-shader-variants-to-allow-receiving-scene-ligths).
Please, give it your vote to allow me prioritizing the development!

At this moment, I'm pushing on Text Animations and I plan on moving into finishing the multimaterials right after. As part of the Multimaterials work I will be supporting alternative shaders, and then I can add the surface variant to the top of the list!

Hope that helps,
Frank

 

Hi,
I have been improving lots of things these last days!
Mainly I have focused in the Text Animations. Because of the need to preview the animations in the editor and "remember" the random values between loops, the plugin was keeping several temporal buffers that stored per-character information.
I recently modified all the simulation to be deterministic, so those buffers where not longer needed. But removing them, allowed me to refactor LOTS and LOTS of things! And I mean LOTSSS.
At this moment, the animations do almost no pre-processing (except for a few time values that are computed only when the animation start to speed up things later).

Also, the animations can now modify not only input vertices but also the final output, which means that I can tweak some of the SmartEdge values as well. For instance, I just added that no only the Alpha can be changed, but also the Alpha of individual sections like (Outline, Face, Glow, Shadow, etc)

I'm also now in the process of creating more example animations! I'm not an animator haha, but will do my best!


Another big change I'm doing (one step at a time) its to refactor the shaders for improve performance. With the recent change to the Layering system for rendering some of the character elements, I'm able now to skip sending some values through the vertices, so, I have been removing the extra code needed to handle those cases. So far, each shader has reduced around 10% of their size/cost (without counting the 30% improvement since the initial release!)

With the new slots I have available to send data in the vertices, I'm also planning in improving the way the anti-aliasing is computed by removing the need of partial derivatives! Those derivatives are nice, but when zooming too much, it can lead to 2x2 flat blocks. With the new way, the characters will be smoother and it should compute faster as there is no locking or branch misses.

I will keep updating this as soon as I get a first version of the smoothing working!

 

Yesterday I uploaded beta 1.0.2b3 to the Beta Folder!
It includes a big refactoring in the shaders to improve performance, lots of text Animation changes and a few more RichText Tags.
I will be finishing the rest of the RichText Tags now (e.g. [size=xx], ) and will move into the emoticon and multi-materials support!

 

Hi, this asset is really cool, i will keep an eye on it since it supports NGUI.

Cheers.

 

I think I misunderstood the use of this asset. I can't seem to get this asset to work unless it's a child of canvas. It does not seem to work in 3d space. I create a textmesh and place it in space, text reads fine. Then I apply smartedge component and it just turns into a bunch of white blocks. On canvas it works ok. Apparently it only works with UI text, I need this for text in 3d space not just canvas UI stuff so if it can't be used that way I would like to request a refund please. Just bought this an hour or two ago. Thanks.

 

Can you add options to set the Outline width inside AND outside separately?

I'm trying to line up an SVG (using SVGimporter) to get an nice outline (and other effects later) but it doesn't quite line up with the edge so there's a small gap in it. See the attached image as an example.

I'm looking for a fat outside edge (Paper Mario style) but I also want a slight inner edge to mask any SVG inaccuracies.

Thanks. Great asset. The text is awesome. The images leaves a bit to be desired but it's still useful. World space image effects would be good a @eepromm99 mentions, or have I just not configured it correctly for a Sprite Renderer?

 

Hello,

I'm that person who submited the 1-star review in asset store complaining that the plugin does not work.
Thank you for rapid response. I thought this plugin is abandoned.

Here is the screenshot from the minimal Unity project created from the standard 2D template:


I also get warnings when importing the plugin. Here is the project archive, SmartEdgeTest.zip
Hope it helps to resole the issue. I will be happy to change my score if it will work.

 

Hi,
I have a version in the beta folder that fixes all those issues and adds several new features. Can you send me an email to inter.illusion@gmail.com, I will grant you access to that folder.

Also, will be sending the latest version to the AssetStore, but it will take a few days to be approved.

 

Checked it, works as expected. Updated review to 5-star. Thanks for support!

 

@Inter-Illusion How can I align the last line of justified paragraph to the left? When there are little words space between them is too large.
i mean the single string of text with the \r\n in the middle which breaks it visually into 2 paragraphs.

 

Hi,
It seems there was a regression that made the justified alignment also apply to the paragraph breaks.
Will add a fix for it and upload ASAP.

Thanks for reporting this!
Frank

 

I added a fix for that issue and a few other things.

The changes can be downloaded from the beta folder (v1.0.3 a2) right now.
I will be uploading them to the AssetStore around next week.

Hope that helps
Frank

 

Hi, just a few quick questions:

- Does the MSDF font generated by SmartEdge work with Unity UI Text component without the SmartEdge component? I am trying to see if I can use SmartEdge's font generator without introducing a strong dependency.

- If not, does SmartEdge's shader also work with LWRP?

- How are text updated and rendered in runtime? TextMesh Pro replace the Unity UI Text component with its own, but SmartEdge seems to take another approach, and is somehow compatible with both. I am trying to understand how it does that.

Thx!

 

Yes and no.
No: You can create the MSDF font, but the generated texture can't be used directly because its actually a lookup texture where each pixel's channel holds the distance to one of the closest edges. So, if you add the font directly to a Unity UI element, it will render like this:

Yes: SmartEdge creates a material and applies vertex parameters to control lots of effects. But if you just need to render the plain font without having a SmartEdge component, then, create a copy of the Unity Built-in UI shader and instead of doing

Code (csharp):

1.  
2.     color = tex2D(_MainTex, uv);
3.  

replace it by

Code (csharp):

1.  
2.     color = tex2D(_MainTex, uv);
3.     float softness = 0.01;
4.     color = smoothstep(0.5-softness, 0.5+softness, max(min(color.r,color.g), min(max(color.r,color.g), color.b)));
5.  

Then, you can use the generated font in any Unity UI Text element, if you assign that material.

So, You can NOT use the generated font directly without SmartEdge, but YES, if you use that shader and you don't need an outline and other effects, you can avoid having the SmartEdge component attached.

SmartEdge shader is based on the Unity UI default shader, so it should be compatible with all the render pipelines.
Said that, if you find any incompatibility, please let me know and I will fix it ASAP.

TextMeshPro is a complete replacement of the Unity UI Text. It is basically a Graphic element that creates its own vertices and feeds them into the CanvasRenderer.

SmartEdge is a Vertex and Material Modifier
https://docs.unity3d.com/ScriptReference/UI.IMaterialModifier.html
https://docs.unity3d.com/ScriptReference/UI.IMeshModifier.html

So, it doesn't need to replace your already set Unity UI Text elements. Instead, it attaches to that object and whenever the Text element wants to render anything, it takes those vertices and material, changes the shader, sets a few parameters needed to control the effect and then render those instead.
Thats how SmartEdge is able to modify, not only Unity UI Text, but also NGUI, and apply animations to TextMeshPro.

Hope that helps,
Frank

 

@Inter-Illusion Thx a lot for the detailed answer! I have done some MSDF myself involving decal and cutouts, using msdfgen of course. I find their shader code a bit more complex than yours (more than just finding the median distance).

I was able to use your suggestion and their shader code to make a MSDF decal generated by msdfgen show up in UI, which is good news.

But I am now wondering: is your MSDF implementation largely the same or very different? Did you pre-compute those value in the texture so that you can skip those shader calculation? (because I can see your generated atlas is a bit different from msdfgen's result.)

 

The plugin use a similar algorithm than the one in msdfgen. Its not exactly the same, as the selection of the closest edge follows a different heuristic to allow for better multithreading when generating the texture. But aside some channels been swapped and a different antialiasing, it follows the same algorithm.

Also, notice that SmartEdge supports SDF, MSDF and a hybrid way MSDFA, where a normal SDF texture is stored in the alpha channel of the texture to allow for sharp edges while having glow, shadows and other soft effects use an smooth curve.
http://inter-illusion.com/assets/I2SmartEdgeManual/MultiChannelDistanceFields.html

BTW, I'm currently working in a big redesign of the the SmartEdge plugin which adds lots of features and focuses a lot in the SDF/MSDF effects for world decals/objects/sprites. I will be sharing some news in a couple weeks.

But it will help me a lot if you and other developers using the plugin can let me know what are they most interested in and where they are finding SmartEdge useful. I will be sure to prioritize my work into those areas.

hope that helps,
Frank

 

I can't get it work with generated xSDF fonts.
Here is the parameters for font generation:


When I try to set any xSDF font I see nothing.
Here is the sample project: SmartEdgeFontGenerationBug.zip
Am I missing something or is it a bug?

 

Hi,
What do you mean by "I see nothing"?
Is it that you dont' see any spreading showing outside the generated font?
Most likely its because the font size is set to 290 while the spreading to just 15px. So, when the generated SDF texture is scaled in the editor to show it in the inspector, those 15px are barely visible.

Try setting the font size to something like 15-30 or set the atlas size to 1024x1024 and let it compute a font size to fit all characters in.

 

Ok, I made my font smaller, but nothing changes:


If I set Arial (not SDF), I can see the text:


The inspector of the smart edge component to be complete:

 

Hi,

I'm not a user of your plugin yet, but I have a few questions.
I'm using Unity UI text with a custom font. Some of the characters are colored (there are icons).
What I'm trying to do is for the text to drop a shadow of particular color, which is not possible because most of the time, the shadow effects are just multiplying a color to the color of the text (that is white by default).

With your plugin, can I pick the color of the shadow, even if the text is not white ?

 

Yes, you can change the color of the shadow, its position, orientation, how much fading in the top of the shadow versus the bottom to simulate 3D shadows, etc.
Here is how the shadow settings look like:


Hope that helps,
Frank

 

I'm doing a pixel art game. Shadow would be fairly simple, hard and solid.
Do you use shader for this effect?
How different it is from the build in Shadow component ?

Thank you for your time !

 

Yes, similar to TextMeshPro, this plugin uses a custom shader to render all effects in one pass.
When you add a I2SmartEdge component to your text, the plugin automatically replaces the default UI material and uses a custom one with all the parameters needed for the effect.

Contrary to TextMeshPro where all parameters are controlled by creating separate copies of the material. SmartEdge allows you changing the parameters directly in the Text Inspector and internally it automatically handles batching and other other render optimizations.

For it to work you need to generate an SDF or MSDF texture of your font.
The plugin also uses the MSDF or MSDFA format which produces way better results for pixel art fonts than the standard SDF.

More info:
http://inter-illusion.com/assets/I2SmartEdgeManual/HowitWorks.html
http://inter-illusion.com/assets/I2SmartEdgeManual/MultiChannelDistanceFields.html

 

Hi, I am using Unity 2019.1.10f1

Everything looks OK in the Editor (Android), I am using a simple outline+shadow(simple) preset.

On My Pixel 2 phone, the Text and Images only show on some objects, there doesn't seem to be any obvious cause.

I read that your Manager class runs a coroutine and monitors for updates is it possible this is not working?

 

I made a PC build and this problem occurs there as well, so it isn't a platform specific issue for us. Perhaps something in our project?