I’m feeling like developing some UI text FX. Pretty sure I’m gonna use Unity’s UI & Canvas. Aspects of what I’d like to make will require some creative thinking.
I’m going to do your typical sci-fi alien text. I’m going to feed my script a string, and I want the characters to appear from left to right one at a time in a fast “ripple.” Each character will do something like flash white before fading to a base UI color, or interpolate a short distance into position while fading transparency.
Initially the characters will be illegible gibberish “scifi language” characters, and they’ll randomly shuffle through several before stopping on a final english or scifi character. What I have is a font with my scifi chars.
There are lots of ways I could approach this, I was just curious how you might.
I think I am just going to target one Text component and manipulate it, but where should I store / how should I retrieve all my text? Would there be a significant advantage to learning to use ScriptableObjects for this? Maybe serialize text to a binary file and parse it?
How might I design my component for configuring this behavior… I could see having many strings that run until each break, and just referencing those strings in an array with fixed behavior for them. Maybe I want one line up, then another line, then the first to leave before the second. Maybe a just give each string index a timestamp and position to do its fixed routine and run the component start to stop? See that’s got me wanting to instantiate more Text elements again though.
I’ll come up with something, it’s just very very open-ended.
I don’t see how storing the text is a big issue. Just have a public string property on your script.
Actually coding this effect is the bigger challenge. Unity’s “rich text” markup isn’t rich enough to let you specify a different font, so if I understand correctly that your gibberish characters and the final English characters are a different font, that’s going to be problematic.
BUT, if you can get them all in one font, then I think you can do what you want just by manipulating the .text property of your Text object over time. Use the color tag to make the characters flash and fade to white as they appear, and change the last character to whatever gibberish you want before settling on the correct character.
If you can’t get them all in one font, then you’ll need to construct this character-by-character, which unfortunately is a lot harder in the new UI system than it was with the old GUI system. It’s hard to know how big a character is so you can position it properly next to the preceding character. But it’s been a while since I looked into this… so hopefully someone else can provide more details.
I tried doing almost exactly this before as just a fun little side project, and I ended up abandoning it. Unity’s UI system isn’t designed to handle something like this.
I only just today decided to dabble into Text Mesh Pro, and I’m impressed to death by it. It’s certainly a bigger tool to learn how to use, but the power it provides is simply amazing. The included font builder may be able to pack two different font sets together to achieve what Joe described above.
Thanks for that insight guys, you’re both consistently helpful in preventing me from approaching pitfalls. I may explore FontForge and mashing together my fonts, which should be practical since a project really only needs one.
Looks like if Unity has officially acquired TMP it’s a good time to learn that asset, so that’s what I’m futzing with first.
Storing the text isn’t an issue at all, I was just trying to decide how.
It might be worth mentioning that for the vast majority of the time the gibberish will resolve to… gibberish. The english bit will really only be done in some narrative cutscenes a bit like the ones in the beginning and end of classic Bethesda games. You see my hangup, develop flexibility you plan on needing like twice, heh!
I have two suggestions to do what you want. They both require you use a mono-spaced font for the human text. As @JoeStrout pointed out Unity’s UI is lacking some very useful features. Since every character in a mono-spaced font uses the same width, alignment becomes an offset from a given point.
From there you could add a particle effect displaying the alien text derived from a sprite sheet and placed over the human text. Move the particle effect by the offset and add a character to the human string.
Or method #2… Align two text objects, where one is directly over the other. The bottom text object is your human font and starts out as an empty string. The top text is your alien font. Remove a character from your alien string and add a character to your human string.
Not sure if either of these will work as you want but both can get you pretty close without a lot off bother. The key is using mono-spaced fonts to take advantage of the uniformity of the character spacing.
Yes, good idea. This is the other approach I considered (“do something with particles”) but I couldn’t quite decide how I would do it. Your description really helps because I was missing the mono-spaced text part of it. I don’t think I’m gonna go that route though, because while that’d be fine for an intro splash or a cut-scene, I don’t want it dependent on a shuriken system because I may want to use the effect in different contexts, world space, local space, screen space, and maybe a handful of them- you get the picture. If I build a font it’s a fairly trivial script cost to manipulate a string constantly, relatively speaking.
Again though thanks for the input.
Little discouraging how apeshit fonts actually are, just wow. I mean I knew, but it’s different when you’re actually staring down hundreds of glyphs, kerning, all that jazz.
The upside is that the glyphs I want to make will be easy to make, and what I’ll do is I’ll find a font I like and then I’ll over-write either the upper or lower case sets with my glyphs.
This isn’t being done just because it looks cool, it’s an integral part of establishing the setting/context of my project… (even if I chose to take the project in vastly different directions) So it’s time to figure out how to configure the guide layer in FontForge and start hammering away at my first font.
Hang in there, it’s doable! I did something similar, but on a smaller scale, for High Frontier… We show stats in various places, with units like cubic meters, square km, etc. The font I chose for the game didn’t have good superscripts for 2 and 3 (square and cube), so I made those, and then I also changed the section symbol (§) so it was a little stick figure of a person. So now my code says to draw “Area/Person (m²/§)”, and it comes out like this.
Works like a charm. Much simpler than what you’re doing, but still, take it as an existence proof that it can work!
Yeah, I understand. Mono-spaced fonts are the redheaded stepchild in typography. They produce an ugly layout, but they have their place. All uppercase is another issue in typography too, don’t trade one ugly for anther.
I’m getting a horizontal ‘Matrix’ effect vibe from your description. The actual matrix effect used a mono-spaced font.
I encourage you to proceed with your plan, but I think you’re going to run into an issue pretty quickly, and you’ll be right back where you started.
Lets assume the ‘alien’ glyphs ARE mono-spaced, as if they are not the issue is exacerbated. Now let’s work through the glyph transition from ‘alien’ to ‘human’. We start off with an ‘alien’ glyph. It is properly placed behind the preceding character as it is all part of the same font and uses the kerning metadata for positioning. Now we change the text character from ‘alien’ glyph to the letter ‘i’. Visually, it will look like the letter ‘i’ moved to the left. Now try again, ‘alien’ glyph to the letter ‘W’, and visually it will appear to move to the right.
@JoeStrout solution worked because the text was static. Using that with the animation transition makes that approach less than optimal. Sadly going back to mono-spaced fonts solve that…
I wouldn’t dismiss a particle system solution too quickly. It will work in any space and is quite versatile.
Yay for remembering to take my stimulants today! yeesh.
In my case, the “uglyness” of a mono-spaced font will fit in great There also wont be a lot of it. I suppose you also see them in lots of logos, but you’re right- (wherein I tangent about fonts)
Per-glyph margins and per-pair margin kerning might seem to add a maddening amount of work to creating a font; but none of our elegant fonts would look as good as they do without it. Luckily automatic kerning should produce workable results, but then you’ve got hints in there too (which I guess only Windows uses?) and anchors for accents… and it gets pretty nuts.
Thank you for your consideration. Yes, a “matrix” vibe is somewhat what I’m going for. Because of how the effect works, the spacing may actually make it look better - the critical thing to remember is that because I’m making the font I can control which set has a larger horizontal space.
I’d say part of being a technical artist is adapting the flaws or limitations of an implementation into features of it. It’s funny that misnomer (“it’s a feature!”) that gets thrown around by gamers and marketing is also wisdom in context.
Exactly! I’m guessing the guy who did the Matrix effect tried a horizontal version first, as reading left to right or right to left is common among most languages. I think once the realization that a mono-spaced font is required, he quickly turned the effect to vertical, because the best use for mono-spaced fonts are for lining up vertical columns. Turning a negative into a nice positive, simply by implementation. They call that brilliance.
There also wont be a lot of it. I suppose you also see them in lots of logos, but you’re right- (wherein I tangent about fonts)