Bela here, and on behalf of the team: Happy Halloween everyone! It’s our favorite time of year, so we’ve been carving pumpkins, eating candy, dressing up our dog and, oh yeah, working. But game development is the closest I’ve ever come to using magic, so it’s actually right on theme. This post will get a bit technical, but I want to dive into a seemingly simple idea that took me a whole day to nail down.
The culprit, wiggly text. Here is a word bubble from the demo:
![5d0aaf344abcc.gif 5d0aaf344abcc.gif](https://i.gjcdn.net/public-data/fireside/posts/4/71/296821/media/5d0aaf344abcc-a5ajt8g9.gif)
It used to be that I’d carefully draw each word bubble or text twice, then combine them as repeating frames in Unity via sprite animation, which is what you see above.
This was time consuming and completely not reusable. Nyah and a few other characters will talk to each other, meaning a lot more word bubbles, and what if, say a week before launch, we catch a typo? Completely redraw, import and reintegrate that word bubble that’s what.
Note: I’m gonna go over my Unity hacks now, but i’ll try and keep it simple for non-unity folks.
We decided it’s time to move on to Unity’s built in text components for this purpose, but we still need to keep that same effect of wiggly-ness without my trusty sprite method. After much head scratching and stress dreaming, I figured I could use rich text tags to switch between Uppercase and Lowercase letters. I would need a special font where the uppercase and lowercase letters are roughly the same characters. I would then alternate between them via script, creating the same effect as a two frame sprite! Simple right? maybe?
Well let’s see: First is the new font. I used Caligraphr, a free website app, to hand draw each letter twice (one each for lower and uppercase) and create a font:
![5d0aaf356ab8f.gif 5d0aaf356ab8f.gif](https://i.gjcdn.net/public-data/fireside/posts/4/71/296821/media/5d0aaf356ab8f-inwsa4ji.gif)
Cool! We have a new font called “LittleBug_DoubleCaps.ttf”. Next is getting these letters to alternate between lowercase and uppercase. I did this by grabbing each letter (“char” in c#) of the text and sandwiched it between rich text tags, storing it as a string:
![5d0aaf35d4d4c.gif 5d0aaf35d4d4c.gif](https://i.gjcdn.net/public-data/fireside/posts/4/71/296821/media/5d0aaf35d4d4c-bxjvi9jh.gif)
Then, once each letter has been changed and string-i-fied, we reassemble them all into one new string and say “hey, text component, display this new modified text for us”:
![5d0aaf368f889.gif 5d0aaf368f889.gif](https://i.gjcdn.net/public-data/fireside/posts/4/71/296821/media/5d0aaf368f889-smijafrj.gif)
We repeat all that on an interval of say every .2 seconds and here’s what that modified text “OH… IS THAT RIGHT” looks like at run time (see if you can spot the individual letters sandwiched between tags):
![5d0aaf375c977.gif 5d0aaf375c977.gif](https://i.gjcdn.net/public-data/fireside/posts/4/71/296821/media/5d0aaf375c977-spjaaknm.gif)
But, Unity’s spooky magical text box understands this all as rich text tags, so it displays each letter as alternating between uppercase and lowercase, which for our custom font is just one of two naturally varied versions of the same handrawn letter.
Final result:
![5d0aaf38b02a9.gif 5d0aaf38b02a9.gif](https://i.gjcdn.net/public-data/fireside/posts/4/71/296821/media/5d0aaf38b02a9-gwcgjbyq.gif)
So, we could have left our text static and the game itself would work the same way, but what’s the fun in that?
Ok, back to dog costum - I mean work
5 comments