Game
Little Bug
7 years ago

harnessing spooky unity magic: Wiggly Text


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

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

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

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

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

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

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

Loading...

Next up

The Altar We’re taking a different approach to the classic home menu: it’s an altar where all your offered items appear. Items you haven’t offered are blacked out and some special ones even open secret levels… there are 35 in all!

We have permanently lowered the price of our game Little Bug to $4.99! Enjoy <3

A Very Vertical Scene of Nyah and her Light

We've been making some weird unlockable bonus levels!

yay! we love fan art, especially this one of Nyah and Roadkill <3 so cute and so good!

Limited Run - Roadkill Shirts! (store link in article)

Open Super Secret Bonus Levels in Roadkill's Altar!

Watch the Devs play at 12pm PT today!

Who remembers cheap video game keychains?

'Tis the season to make offerings to the dead. If you see Roadkill, make sure you have something interesting in your lunchbox you can spare!