TypingLabel - Simulates text being typed in real time.

Any community contributions to libgdx go here! Some may get included in the core API when permission is granted.

TypingLabel - Simulates text being typed in real time.

Postby RafaSKB » Sun Feb 12, 2017 5:38 pm

TypingLabel is an extension of the Scene2d Label widget, but it shows the text letter by letter, as if it was being typed in real-time.

Text effects like these are easily found in other game engines and frameworks, but I couldn't find anything similar for libGDX, so I decided to make one and share with everyone who might need it.

Image

Features:
- Control the text speed with tokens.
- Fine tune the speed of specific characters, like ! and ?.
- Variable tokens that can be assigned at runtime.
- Color tokens, just like libGDX's color markup language.
- Event tokens that are fired as soon the text typing reaches it.
- Special effects, such as shake, jump and wave.
- You can pause, resume, restart the label and even skip to the end.
- Respects the final layout of the message, so alignment and text wrapping works the way it should.

Here's a simple example of how to use it:
Code: Select all
// Create some text with tokens
String text = "{COLOR=GREEN}Hello,{WAIT} world!"
    + "{COLOR=ORANGE}{SLOWER} Did you know orange is my favorite color?";

// Create a TypingLabel instance with your custom text
TypingLabel label = new TypingLabel(text, skin);

// Add the actor to any widget like you normally would
stage.add(label);


Instructions and more examples can be found at the Github page:
https://github.com/rafaskb/typing-label

Any questions, suggestions or bug reports, just let me know. :mrgreen:
Last edited by RafaSKB on Mon Feb 13, 2017 6:54 am, edited 1 time in total.
Typing Label - Label that appears as if it was being typed in real time. https://github.com/rafaskb/typing-label/
Grashers - A trash-themed roguelike in space, soon on Steam. - http://www.grashers.com
RafaSKB
 
Posts: 115
Joined: Sat Aug 01, 2015 5:14 am
Location: São Paulo, Brazil

Re: TypingLabel - Simulates text being typed in real time.

Postby wizered67 » Mon Feb 13, 2017 1:28 am

This looks really nice! I've been working on a dialogue system and had written code to update the text of a regular label, but this seems much better. I'll definitely consider using this instead!
wizered67
 
Posts: 19
Joined: Wed May 25, 2016 6:32 am

Re: TypingLabel - Simulates text being typed in real time.

Postby RafaSKB » Mon Feb 13, 2017 7:18 am

Hey wizered67, thanks!
I just checked your VisualNovel project and it looks great! Seems like both libs will go really well together. :)
Typing Label - Label that appears as if it was being typed in real time. https://github.com/rafaskb/typing-label/
Grashers - A trash-themed roguelike in space, soon on Steam. - http://www.grashers.com
RafaSKB
 
Posts: 115
Joined: Sat Aug 01, 2015 5:14 am
Location: São Paulo, Brazil

Re: TypingLabel - Simulates text being typed in real time.

Postby wizered67 » Tue Feb 14, 2017 8:24 pm

Thanks :) At some point in the future I'll try to integrate this with my project and I'll let you know then if I have any questions!

I really like idea of the event tokens. Originally I was thinking I would need to find a way to add new tokens to get this working with my project, but now I'm thinking I could utilize event tokens instead. For example, right now in my project I let users embed commands in messages with the syntax @c{command_name}. I could use the event tokens to emulate this without actually adding a new token, just by doing runtime replacement of all @c{command_name}'s with something like {EVENT=COMMAND:command_name} before the text is sent to the label. Then I could just use a typing listener to match all events of that form and automatically execute the command. Actually, doing something like this could allow me to add any number of new tags just by using EVENT tags, which is really nice!

It's not a huge deal, but I did have one possible suggestion. I'm not sure how relevant it would be for other games, but it would be useful for me if there was a way to provide custom behavior when replacing a variable. I don't know how difficult this would be for you, but the ideal solution for me would probably be a method in TypingListener that takes in a variable name and returns the text to replace it with. The default behavior could be to just use the variable map like you have, but it would be useful to be able to add custom behavior. The reason I ask is because I'm integrating scripting languages into my project and each scripting language already has a map of variable names to values. It would be useful if I could just lookup and return the value from these maps, instead of having to call setVariable(s) every time a value is changed. Actually I could probably work around it pretty easily, so if it's a lot of trouble then don't worry at all, it would just be helpful in my very specific use case.

Also, I just wanted to clarify, when you say "Respects the final layout of the message, so alignment and text wrapping works the way it should" does that mean that it can automatically wrap and that it will never go to a new line in the middle of a word (ie splitting a word between two lines).

Thanks again so much for this excellent library!
wizered67
 
Posts: 19
Joined: Wed May 25, 2016 6:32 am

Re: TypingLabel - Simulates text being typed in real time.

Postby RafaSKB » Tue Feb 14, 2017 11:30 pm

I'm glad you like the event tokens, implementations like what you suggested are exactly what I had in mind, you can pass any event name and customize your process from there. :D

As for the variable replacement listener, I like the idea too, and it shouldn't be hard to implement at all. I guess that's a good solution for the problem and gives a lot of control and flexibility to the user, probably much better than passing a map to the label haha.

----

Also, I just wanted to clarify, when you say "Respects the final layout of the message, so alignment and text wrapping works the way it should" does that mean that it can automatically wrap and that it will never go to a new line in the middle of a word (ie splitting a word between two lines).


That's right. Behind the curtains this library first applies the final text to the label, forcing it to layout and have the proper dimensions calculated, then glyphs are removed and added as the text progresses without changing the main layout. The main reason I did it this way was to preserve the size and dimensions of the actor and not start typing a long word at the end of a line, just to wrap it all to the next one when it runs out of space. Instead the long word automatically goes to the next line, even if there's space for a glyph or two at the end of the previous one.
Typing Label - Label that appears as if it was being typed in real time. https://github.com/rafaskb/typing-label/
Grashers - A trash-themed roguelike in space, soon on Steam. - http://www.grashers.com
RafaSKB
 
Posts: 115
Joined: Sat Aug 01, 2015 5:14 am
Location: São Paulo, Brazil

Re: TypingLabel - Simulates text being typed in real time.

Postby wizered67 » Wed Feb 15, 2017 12:11 am

Thanks so much! Between event tokens and the variable replacement listener, there is a lot of flexibility with customization. Should be perfect for what I need!
RafaSKB wrote:That's right. Behind the curtains this library first applies the final text to the label, forcing it to layout and have the proper dimensions calculated, then glyphs are removed and added as the text progresses without changing the main layout. The main reason I did it this way was to preserve the size and dimensions of the actor and not start typing a long word at the end of a line, just to wrap it all to the next one when it runs out of space. Instead the long word automatically goes to the next line, even if there's space for a glyph or two at the end of the previous one.

Ah, that's a really good idea. Getting scrolling text working was one of the first things I did in my project and at the time I didn't really know what I was doing. I ended up doing something like adding the next word, checking if the label had to go to a new line and adding a \n if it did, then removing the word and adding the next character of it. In addition to being clunky, it had the side effect of screwing up color tags. Applying the whole text to the label is a much, much better solution.
wizered67
 
Posts: 19
Joined: Wed May 25, 2016 6:32 am

Re: TypingLabel - Simulates text being typed in real time.

Postby raeleus » Wed Feb 15, 2017 2:19 pm

Wow, that looks very useful. Thanks for sharing.
Play Forward Gunner!
Create skins visually with Skin Composer.
raeleus
 
Posts: 388
Joined: Wed Aug 07, 2013 10:57 pm

Re: TypingLabel - Simulates text being typed in real time.

Postby RafaSKB » Wed Feb 22, 2017 8:02 pm

raeleus wrote:Wow, that looks very useful. Thanks for sharing.


My pleasure :D

wizered67 wrote:Thanks so much! Between event tokens and the variable replacement listener, there is a lot of flexibility with customization. Should be perfect for what I need!


Added the variable replacement we talked about (See commit). It works like this:

Code: Select all
String text = "Would you like to buy {VAR=item} for only {VAR=price}?";
TypingLabel label = new TypingLabel(text, skin);

label.setTypingListener(new TypingAdapter() {
    public String variableReplacement (String variable)  {
        if("item".equals(variable)) return "an Obsidian Sword";
        if("price".equals(variable)) return "{SHAKE}25,000 coins{ENDSHAKE}";
        return "-- Unknown Variable --";
    }
});


Does this work? :)
It's still not on Maven though. There's another bug I want to fix before pushing a new version.
Typing Label - Label that appears as if it was being typed in real time. https://github.com/rafaskb/typing-label/
Grashers - A trash-themed roguelike in space, soon on Steam. - http://www.grashers.com
RafaSKB
 
Posts: 115
Joined: Sat Aug 01, 2015 5:14 am
Location: São Paulo, Brazil

Re: TypingLabel - Simulates text being typed in real time.

Postby wizered67 » Thu Feb 23, 2017 8:55 pm

Sounds great to me! I'll probably wait until it ends up on Maven, but once I get around to implementing this I'll let you know how it goes!
wizered67
 
Posts: 19
Joined: Wed May 25, 2016 6:32 am

Re: TypingLabel - Simulates text being typed in real time.

Postby wizered67 » Sat Feb 25, 2017 12:40 am

I had some extra time, so I went ahead and tried to implement the current version in my project. However, I was getting a weird problem with the characters overlapping and generally looking weird. After some time debugging, I was able to reproduce it in the test example you provided. The bug seems to occur when the label has had automatic wrapping turned on with setWrap(true). For example, when I turned on automatic wrapping and removed all \n's in the example, this is what happened (the last sentence in particular is what got messed up).
Image

I'd really appreciate it if you could take a look at fixing this when you have the time. Thanks so much!
wizered67
 
Posts: 19
Joined: Wed May 25, 2016 6:32 am

Next

Return to Libgdx Contributions

Who is online

Users browsing this forum: No registered users and 1 guest