Typogenic - Advanced Text Rendering [FREE]

Good move. Thanks a lot.

 

What a great system. I have just used your system to show how text can be added to each page in my MegaBook system and it works perfectly. Will be pointing everyone at this great text system.

 

One suggestion I would have would be to automatically rebuild the mesh when the text or other values change, instead of forcing me to call the function manually. This would not only make the component easier to use, but would also enable animation of the properties using Unity's animation system. (I'm going to write this anyway, as I need to be able to animate properties for my project. I can post the changed TypogenicText.cs script when I'm done if you guys would like.)

 

Eh, here it is. All the changes are between lines 72 and 132.

 

Yeah, that would be nice. I'll take no offense if you figure out a cleaner way of doing it instead

 

I will be testing with a mobile app I am working on. Hit a stump with updating, but of course read the documentation and threw in the RebuildMesh() and it works great now, thanks for making!

 

Great Job!

 

I have just built my first build with this text system, and the text mesh is displaying the "I have no shader!" bright magenta mesh. I'm guessing it did not include the material or shader file in the build? Have you come across this when testing?

 

iOS. I tested on 1st gen iPad (iOS 5.1) and iPad 4 (iOS 7), same result on both.

 

- Demo scene works
- The text is not built in code. I've attached a screenshot of the editor showing its configuration.
- Nothing useful on the device's Console log.

 

Typogenic definitely fits a need I had here. So, in the same spirit of figuring it might be useful to someone else, I've been playing around with it and adding some things, and I thought I should run those changes by Chman and anybody else using Typogenic to see if any of this might be useful.

The additions I've made can be grouped into three main features:

1. Shadow casters - I created versions of each of the Typogenic shaders that add a separate shadow caster pass, so the text casts appropriate shadows. These shaders have a Shadow Cutoff setting to fine-tune the shape of the shadow, and I modified the custom material editor to support this setting if present in the selected shader. Outlines cast shadows while glow does not, and the textured versions of the shaders honor transparency in the texture and create matching "holes" in the shadow.
2. Mixed materials - If multiple materials are added to the Mesh Renderer for the object, the Typogenic text can include simple escape sequences (\0, \1, etc.) to switch between these materials within a single text component.
3. Clickable - The Typogenic component will react to mouse clicks, and broadcast a message indicating what index of the display text was clicked, e.g. clicking the "p" in "Example" results in an OnGlyphClicked message being broadcast indicating that the character at index 4 was clicked. As part of this functionality, I also modified the TypogenicText object so that anytime the text mesh gets rebuilt, it also looks for BoxColliders attached to the same object, and if found, resizes them to the bounds of the new text mesh so that collider can be used for click detection.

Here's a screencap of my testing project showing all three of those features in use:



Obviously there's more work being done under the hood to support this, nothing major but potentially enough to matter on a low-end or mobile device:

1. The shadow shaders just add a quick fragment shader pass and shouldn't be too bad, but my shader knowledge is still somewhat limited so I wouldn't be surprised if they can be improved. I made new shaders instead of adding shadow support to the existing ones to avoid this performance hit if shadows aren't needed.
2. The multiple material support just breaks the mesh into submeshes and assigns different materials to them, so the code itself isn't particularly more complex, but the additional materials do add more draw calls.
3. The clickable text support adds some memory overhead if used on a large block of text since it saves the bounds of each glyph for comparison later, and the hit detection iterates over those bounds so it's very fast on its own but will become slower linearly as the length of the text increases. I tested on some multiple-paragraph samples and it seemed to still work fine but I wouldn't put a whole book in there or anything. This could be refactored to calculate the glyph locations on the fly instead of saving them, if the extra processing overhead is less of a problem than the increased memory footprint, but that could also cause problems with large blocks of text.

Anyway, Typogenic is much appreciated Chman, and if anybody is interested in any of the above, just let me know.

 

Sure thing, I figured if anybody was interested I'd offer up the source. I'll take another pass over everything tonight to see if I find any remaining bugs, clean everything up, maybe even add some comments to the changes and then I'll send it your way, hopefully tomorrow. If you want to use any/all of it, by all means merge it.

 

Wow, that is really neat job! I'm really impressed, it's like magic! But I figured you could learn a little from Toolkid2D's TextMesh component for your "// Not the best way to track changes but Unity can't serialize properties".

I see that each of your text component listen to LateUpdate to check if they must rebuild their mesh. Would it be better that everytime you change something (through a set method), it puts it in the static list of components to be updated. Then have only one kind of static component listen to LateUpdate, then check the list of components that need to be updated, and update them?

I would gladly pay the asset, but I've been pretty sad to find out that I couldn't use your solution because I can't make my text flash in white or become more transparent because I don't have access to per-instance outline color. I'm talking about my case, but I believe this would be the case of many people out there too, also I really have no idea how shaders work so maybe what I'm about to say is totally invalid.

I see you have a Global Color multiplier which is on the material and that also changes the color of the outline. As usually I would use one material per type of font (outline and filling), but it is pretty frequent for me to change the overall color of it to make it fade out or flash white. Would it be better to make the border and filling bound the material, then being able to change the overall color (outline and filling) of each instance individually through a color parameter in the component?

I know that there is much branching in the selection of the type of filling, but using a shader per type of filling could fix it too, even make the textured filling more elegant to use. But I know nothing of shaders so I could be totally wrong on everything I said.

 

Since I was the one that initially made that change to it, I'll defend it. Unity can't animate properties via get/set methods, unfortunately, and (at least in my use case) I needed it to support animation.

 

The script can easily have a property which force-sets the shader's property.

 

If it was set from the script, then using material.whatever would automatically spawn a clone of the material when the property is changed.

 

Oh ok, so unity has trouble animating these, thanks for the info! Not sure if you have access to Toolkit2D, but I looked into it's text mesh more deeply, and he proceeds with a [System.Serializable] Data class that contains every data of the text field. Getters and setters of the text field change this data. I don't know much, but I know that tk2d works with any type of tweening/animation I've tried yet, and that it works with getters and setters. Of course you'd have to make an Editor script to be able to access these parameters, I don't know how much effort you are willing to put on this, but if you are looking to improve the thing, you could try looking this way

That is too bad for the gradient performance hit :/ But anyway, only a color parameter that would affect the outline as well as the filling and it would be perfect.

 

Thanks to both of you : Chman & Gnutoboz.

 

Bug: the yellow square representing word wrap area does not respond correctly with center- or right-aligned text.

My quick & dirty fixed version of OnSceneGUI in TypogenicTextEditor.cs:

Code (csharp):

1.  
2.    void OnSceneGUI()
3. {
4. TypogenicText src = (TypogenicText)target;
5.  
6. if (src.WordWrap > 0f)
7. {
8. Vector3 alignmentOffset = Vector3.zero;
9. if (src.Alignment == TTextAlignment.Center) alignmentOffset = new Vector3(-src.WordWrap * 0.5f, 0f, 0f);
10. if (src.Alignment == TTextAlignment.Right) alignmentOffset = new Vector3(-src.WordWrap, 0f, 0f);
11.  
12. Vector3v1 = src.transform.position + alignmentOffset; //topleft
13. Vector3v2 = v1 + src.transform.rotation * new Vector3(src.WordWrap, 0f, 0f); //topright
14. Vector3v3 = v1 + src.transform.rotation * new Vector3(0f, -src.Height, 0f); //bottomleft
15. Vector3v4 = v3 + src.transform.rotation * new Vector3(src.WordWrap, 0f, 0f); //bottomright
16. Handles.color = Color.yellow;
17. Handles.DrawLine(v1, v2);
18. Handles.DrawLine(v1, v3);
19. Handles.DrawLine(v4, v3);
20. Handles.DrawLine(v2, v4);
21. }
22. }

Update: It also appears to not respond correctly to transform.scale changes; haven't fixed this yet.

 

Just noticed the box also doesn't respond correctly to transform.scale changes.

 

Recommended convenience function:

Code (csharp):

1.  
2.    public Color SingleColor {
3. set {
4. FillMode = TFillMode.SingleColor;
5. ColorTopLeft = value;
6. }
7. }
8.  

Took me a few minutes to figure out how I was supposed to change the color via script.

 

Who reads those?

 

If I'm reading the fix correctly - wouldn't that only apply the immediate transform's scale? What if the parent is scaled?

Why not simply use src.transform.TransformPoint on the four corners?

 

Does the "Typogenic/Unlit Font" shader work on devices? I'm building to iPad and the shader errors out during the build process.

I getting this error:
Shader compiler: internal error compiling shader snippet type=0 platform=9: Error polling external process
Shader compiler: internal error compiling shader snippet type=0 platform=5: Error polling external process
Shader error in 'Typogenic/Unlit Font': Internal error communicating with the shader compiler process

Am I missing something? Yes I'm shader challenged. ;-)

 

I'm using that shader on iPad, iPhone, and at least one Android device without issue.

 

It's weird, it did just follow your tutorial on your website but instead of my text i do have pink squares...
any idea ?

 

works fine, thank you^^

 

Thanks for the great tool. I reviewed it 5 stars on the asset store.

Improvement suggestions:

1. The documentation should have a word document and/or PDF version because opening index.html in the editor makes it open the code in visual studio rather than the actual web page, so you have to open the folder in explorer then open the file.

2. The font creation window should try to figure out the name of the texture or font file, based on whichever one you give it (since they are saved by littera with the same name). Also, the doc should tell you to create the font using Right Click->Create instead of Assets->Create because the former creates the font in the folder where you right clicked instead of in your root assets folder.

3. TypogenicText.AutoRebuild should be exposed by the custom editor so that you can have static text in a scene that doesn't need to keep checking for rebuilds.

Some bugs:

4. The text never seems to be aligned properly, so I've had to use arbitrary position offsets everywhere.
- Left alignment has the text start a little to the right of the game object's position.
- Center alignment isn't centered, it is off to the right a bit.
- Right alignment has the object's position near the middle of the last letter instead of at its right edge.
Vertical alignment options would also be nice.

5. When building for android, it throws a warning about OnMouseUpAsButton saying that it might impact performance on handheld devices. I haven't looked into how your letter targeting thing works (because I have no use for it), but I think it should just be a public method that my scripts could call to check any screen or world position rather than something that automatically triggers on any mouse input for every text object in the scene.

6. Because you're setting HideFlags.HideAndDontSave on the mesh and recreating it in OnEnable, every time unity recompiles the scripts (because I'm editing them as I make the game), it drops the previous mesh and creates a new one. This works fine, but creating the new mesh causes unity to treat the current scene as modified. So if I save the scene, change a script, then go back to unity and try to load a different scene, it asks if I want to save the current one even though I haven't done anything since I last saved it. I think it would work fine if you don't set the hide flags and just let unity save the mesh as part of the scene. My next suggestion should help to ensure that the mesh gets rebuilt when it needs to so that you don't have to do so in OnEnable. You might not even need [ExecuteInEditMode] on the class at all since the properties and custom editor would handle everything (you might, I don't know).

And some optimizations:

7. I have a potential solution for the serialization problem:
- Use private fields for everything: "m_text, m_size, etc". This stops other scripts from directly accessing things.
- Give each field the [SerializedProperty] attribute. This makes unity serialize them as if they were public.
- Make a public property for each field that sets an isDirty bool whenever the property is changed.
- Now you don't have to check heaps of things each frame to know if the text is dirty and you don't have to have a second copy of every variable.

8. You could replace your OnDisable method with:
#if UNITY_EDITOR
void OnDisable()
{
GetComponent<MeshFilter>().mesh = null;
DestroyImmediate(m_Mesh);
}
#endif
This means that the OnDisable method won't even exist outside the editor, so unity doesn't have to waste time calling it and checking if it is the editor or not.

9. Instead of using an isDirty bool, you could use the MonoBehaviour.enabled property.
- Replace the current OnEnable with Awake, since awake gets called only once and doesn't care if the object is enabled or not. Awake doesn't need to rebuild the mesh because LateUpdate will.
- Replace OnDisable with OnDestroy.
- Those two changes mean that disabling and enabling the TypogenicText component will no longer hide and show the text. But that's fine, because you can do that by disabling and enabling the MeshRenderer anyway.
- Whenever any of the properties are changed (the ones I suggested in number 5 above), you set enabled = true.
- Now that the component is enabled, LateUpdate will get called. So it can just check if autoRebuild is true to rebuild the mesh. Then it can set enabled = false because it doesn't need to check again next frame unless something gets changed again.

 

Hello.First i want to thank you for sharing this great tool.
I am using Typogenic in my game. It is working great but on Samsung 10 inch tablets ,fonts have some display problems.

Do you have any idea ,what can cause this?

 

That black diagonal lines.Like it is outlining mesh renderer.That lines should not appears normally.