coding a dialogue system similar to celeste

Unity Engine
, , ,
1

i currently have a classic dialogue system, the system i have operates something like this

write text function is called, and is given the text that it needs to type,
in this function it sets all the text to be invisible
it then calls a typer function which one by one removed the invisible tag from each of the characters in the text, so it looks like its typing

this is great for a simple typing script but not great for variation.
specifically typing effects, for instance, in celeste text doesn’t just appear but has a little fall animation like its falling into place, i would love to implement this into my game but i have no idea where to start, i don’t need someone to write the code for me or anything, i just need a basic idea on how i could even do this

2

I made something like this for one of my games, pretty simple effect. Just start a coroutine with the entire text as input, and just loop through each character adding it to the text.

1 Like
3

TextMeshPro had a pretty cool integrated solution for live typesetting.
Do not do what RadRedPanda says, not because I don’t like him, but because of the following facts:

  1. You produce a lot of chunky garbage in the memory by adding a character each time. Every string concatenated like that ends up being thrown away because strings are immutable. (Although it’s hard to avoid this one, I’m trying hard to think of a better way.)

If you really want to do it, use StringBuilder like this

static _sb = new StringBuilder();

string getStringToShow(string textToDisplay, int length) {
  if(length == 0) _sb.Clear();
  displayText.Append(textToDisplay[length]);
  return sb.ToString();
}

Obviously you’re supposed to iterate back in UI, and increase this length each time.
Although this is lousy as well.

  1. I hate when this happens
Some
Some text
Some text is
Some text is coming
Some text is coming up
Some text is coming up n
Some text is coming up ni
Some text is coming up nice
Some text is coming up nicel
Some text is coming up
nicely and then it suddenly
breaks into a new line.

TextMeshPro had a nice feature to animate this with the text being stable and it’s generated optimally. If I can find this video, I’ll link it.

4

Here’s a video. It’s old, but it was official at the time. I doubt the general approach has changed much.

Here’s a newer one (at 11:58).

5

this is very helpful for slowly displaying text like it was typed, but i also have the issue of it not looking great just appearing, in alot of games iv played, they solved this by giving each character a little animation before appearing for instance i took this video of celeste

https://www.youtube.com/watch?v=BQ47qt_lXoI

and here the text fades in and drops down, i was wondering (ontop of making the text apear which i can do now) how i would also animate the characters

6

For that I’m afraid you’ll have to delve deeper into coding. I’m positive the effect can be achieved via TM properties somehow, but I’d have to go into it myself before I could tell you exactly how.

I am also quite sure you can find animation controllers for this kind of thing on the asset store. I’m not very fond of the asset store personally, but that’s always the harder way of doing things, I suppose. I also don’t believe in that advertising assets would be in good spirit of this forum, but anyway, now that you have a solid and performant approach to animating the laid appearance, you’ve got two options to extend this further:

  1. research TM API more
  2. pay for this service to someone else

I don’t really think anyone will tell you an easy way out, UNLESS of course you’re lucky enough to meet someone who did that very thing very recently and knows exactly what the technique was.

Here’s a random asset that does what you want. These things aren’t exactly cheap and probably cover a lot more than what you need. That’s both a bad thing and a good thing.

Essentially you want a good animation tweening suite (or not, depending on your exact design) and you want to find out how to tweak properties per letter. If you have that, you can always extend the plain text-writer effect, where you selectively change the style properties per letter somehow.

Edit:
Here are two good tutorials to show you how this could be done for free.

7

thx for the tutorials, ill take a deeper look into tm api to, that first tutorial is exactly what i am looking for thank you

8

It’s nothing too great, I just knew how to google for it, but you’re welcome.

9

Oh yeah, these things are loads of fun to add suspense… I made one a few years back. It even handles chopping up the Unity Rich Text HTML stuff, like <color> and whatnot.

See package.

8683470–1170801–TypewriterWithHTMLStrings.unitypackage (5.17 KB)

1 Like