SamSuka
sqwarkdemon
sqwarkdemon

patreon


[Animation Breakdown] Helltaker 2 - Part 2: "Typewriter" Text

(If you haven't given part 1 a read, I suggest you do so to keep up: Part 1: Setting up)

Talking about saving frames, one of the newer neat tricks I used in the Helltaker animation was actually something I've wanted to do for a loooong time.
Funnily enough, it wasn't even made for the Helltaker animation. It was made for the remastered Samus animation!

Anyway, this helped me save on a lot of frames. Before when I attempted this, I just did everything frame by frame which was, uh, painful.
Here's how I did it for 2B:

...not very fun.

But how did I do it for Helltaker?
Here's how I achieved it. 


- = [ "Typewriter" Text ] = -

So in another frame I created a scene called "Cutscene" and in it I stopped the frame at a specific point and started a timer.

Let me explain what this code is doing.

So right at the top we have a "stop();" command. It stops the animation at that frame.
After that you have the arrays which define the text. This is the text that will be displayed.

Now we get onto the meat of how this "ticks". Heh.
I've set up a few variables to help us through this.
txtNum is the current number of the text. It's what the program reads to know whether or not it's done.
"i" is the character number, and it will add the character at the string number. If that made sense.

Next we have the str variable - which is the string. It starts off with "Hell" to load it in.
newStr is the latest version of the string, which after the first string is posted will then get added to the new string, kind of like tacking on that extra paragraph to an essay.
oldStr is just taking the current str and storing it to be added to the new string (don't worry I'll explain better in a second).
And space is just, well, space. It adds an intent twice which is what "\n" does. "\n" means "new line" by the way.

So how does this "old string, new string, whatever" work?
It works like this:

The default starter string, in this case "Hell.", is loaded. Each character is read and after a timer it's posted one character at a time. When the string has reached its total character length, the string gets moved to the "old string" variable. The str variable is then re-loaded with the string at the current array position (controlled by txtNum) and is then tacked onto the new string along with the old string, meaning that the text is not simply overwritten in the text box.

There are two timers here: 50ms and 1500ms. 50ms is the typing speed and 1500 ms is the gap after every string is finished.

At the end it checks to see if it's reached the end of the array by the defined number (in this case it's 7), and if txtNum equals seven then after 1500ms it will go to the next frame. 


See? It's not THAT difficult, and I'm sure there are easier ways to do this too. You could probably compact this code if you wanted.


Part 03: Tile based games 


More Creators