A libGDX Label that appears as if it was being typed in real time.
License: MIT License
Founder & Game Developer at Patosaur, currently developing Grashers 
Coffee lover ☕, cat person 🐱, and author of many bad jokes 😅
rafa = {
pronouns = { "He", "Him" },
games = { "Hades", "Celeste", "Tunic", "Half-Life", "Sea of Stars" },
food = { 🍣, 🥗, ☕ },
communities = {
"Indie Games Community" = "https://discord.gg/NfqvrYB",
"libGDX" = "https://discord.com/invite/6pgDK9F",
},
directives = { "Respect, inclusion, equality", "Life comes first", "Enjoy and have fun!" }
}
I have several issues using both events and delay (WAIT=X).
With following test code :
long timeBase = System.currentTimeMillis();
TypingLabel tl = new TypingLabel("Hello{WAIT=5}{EVENT=on}{WAIT=5}{EVENT=off}bye", skin);
tl.setTypingListener(new TypingAdapter(){
@Override
public void onChar(Character ch) {
System.out.println((System.currentTimeMillis() - timeBase) + " " + ch);
}
@Override
public void event(String event) {
System.out.println((System.currentTimeMillis() - timeBase) + " " + event);
}
});It produces following trace:
109 e
143 l
176 l
209 on
209 off
209 o
243 b
10343 y
10376 e
As you can see :
Hello!
Recently I noticed this : when I restart the label in the listener it just clears the text and doesn't show anything, but if I restart it from the render method it works ....
`
stage = new Stage();
skin = new Skin(Gdx.files.internal("expee-ui.json"));
TypingConfig.DEFAULT_CLEAR_COLOR = Color.BLACK;
typingLabel = new TypingLabel("-", skin);
stage.addActor(typingLabel);
typingLabel.setPosition(300,300);
typingLabel.setTypingListener(new TypingListener() {
@Override
public void event(String event) {
}
@Override
public void end() {
typingLabel.restart("{CLEARCOLOR} HELLO GUYS I AM RESTARTED");
}
});
typingLabel.setText("{CLEARCOLOR} HELLO WORLD");
`
Arguments:
Works the same way as EASE, but tints glyphs instead. Perfect for fading glyphs in.
We could define these characters in TypingConfig and adapt the regex in the Parser class to use these instead of the hardcoded {}.
Putting the new 1.0.5 version into gradle the project is not building for me.
"Failed to resolve: com.github.rafaskb:typing-label:1.0.5"
repositories {
mavenLocal()
mavenCentral()
maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
maven { url "https://oss.sonatype.org/content/repositories/releases/" }
maven { url "https://jitpack.io" }
}
project(":core") {
apply plugin: "java"
dependencies {
compile "com.badlogicgames.gdx:gdx:$gdxVersion"
compile "com.badlogicgames.gdx:gdx-freetype:$gdxVersion"
compile "com.github.rafaskb:typing-label:1.0.5"
}
}
The returned size of getWidth and getPrefWidth does not just return the width of the plain text, but additionally includes the width of each token. This leads to way to big widths and makes it imposible to center a typing label for example.
RAINBOW
GRADIENT
FADE
I have a use case in my app where I need to apply a scene2d fade Action to a TypingLabel while it's currently applying the FADE token. However, when changing the alpha channel of the TypingLabel's color, the FADE effect is ignored.
The code below works as expected. The fading occurs normally.
TypingLabel test = new TypingLabel("", Utils.getDefaultLabelStyle(MY_GAME.smallFont));
test.getColor().a = 1f;
test.restart("{SLOWER}{FADE=0;1;2.5} THIS IS A TEST THIS IS A TEST{ENDFADE}");
However, in this code, the fading effect is ignored.
TypingLabel test = new TypingLabel("", Utils.getDefaultLabelStyle(MY_GAME.smallFont));
test.getColor().a = 0.8f;
test.restart("{SLOWER}{FADE=0;1;2.5} THIS IS A TEST THIS IS A TEST{ENDFADE}");
Is it possible to create a label which includes an external link. Kind of a text which is clickable? Could'nt find anything in the documention. Is this supported? Thanks!
The settext method does not work as intended: after a first call to draw has been done on the label with a given text A of n characters, the setText(Text B) method will only print the first n characters of Text B.
To reproduce this bug easily, I modified the TypingLabelTest class by removing all the text.append calls in the createTypingLabel method. I then added two calls to text.append("12"); and text.append("34");
In the render method, under the stage.draw() call, add
if(Gdx.input.isKeyJustPressed(Keys.ENTER)) {
// label.restart();
label.setText("This is a dummy text that will be cut");
}
Now if you launch you will see an expected "1234" appearing normally on the screen, but after pressing the enter key, only the "This" will be printed. If you click on restart the whole text appears normally.
My conclusion is that every call to the setText method must be accompanied by a label.restart call.
I don't think this is an intended feature since switching to a regular Label label object doesn't reproduce this.
TypingConfig.GLOBAL_VARS.put("FIRE", "{GRADIENT=RED;ORANGE;0.5;5}{WIND=0.5;2;2;0.9}{WAVE}{SICK}{SHAKE=0.5;0.5}");
new TypingLabel("{VAR=FIRE}Fire text!");The Parser class is the problem here. I believe that both of these imports are not fully supported by libGDX GWT:
java.util.regex.Matcher;
java.util.regex.Pattern;
Specifically it complains about the Matcher class during GWT compile.
For my purposes, I just removed the Parser class from the library, and then it builds without a problem.
There are some libraries that are supposed to provide full regex functionality for GWT but I have not tried them myself. One of them is RegExodus
i have the problem, that on "next line - \n" it is stopped for some time each new line. Furthermore the first letter on the next line is shown and after that it runs forward again.
Ive seen in the example you always make a space each line to prevent this. This is a workaround off course, but how can i fix the short pause each line?
Here is my input text and a video to show how it looks:
String text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ\n0123456789\nabcdefghijklmnopqrstuvwxyz\n!?.,";
https://www.youtube.com/watch?v=fPqUB5cO3p0
(and the example demo is not working as expected. There is behind most appends of the stringbuilder a \n missing)
If the typing label is placed inside a scene2d group that fades (change alpha value) the label doesn't change alpha accordingly. The alpha works only if the text is wrapped between {GRADIENT} or {RAINBOW} but simple colors don't change alpha anymore.
This is a screen of a group with several buttons and labels with 0.4 alpha value
Labels and buttons correctly apply parent alpha, while the typing label only works on the Treasures word which is wrapped into a {GRADIENT} tag
Hello,
if i tryed to compile a libgdx html superdev project with typing-label i get this error:
Compiling module com.tutorial.firstgame.GdxDefinitionSuperdev
[ERROR] Errors in 'jar:file:/C:/Users/alnes/.gradle/caches/modules-2/files-2.1/com.rafaskoberg.gdx/typing-label/1.2.0/1f526e60b1ce6950b5d35086c6bed55f6cbda4d1/typing-label-1.2.0-sources.jar!/com/rafaskoberg/gdx/typinglabel/effects/FadeEffect.java'
[ERROR] Line 54: color cannot be resolved or is not a field
Tracing compile failure path for type 'com.rafaskoberg.gdx.typinglabel.effects.FadeEffect'
[ERROR] Errors in 'jar:file:/C:/Users/alnes/.gradle/caches/modules-2/files-2.1/com.rafaskoberg.gdx/typing-label/1.2.0/1f526e60b1ce6950b5d35086c6bed55f6cbda4d1/typing-label-1.2.0-sources.jar!/com/rafaskoberg/gdx/typinglabel/effects/FadeEffect.java'
[ERROR] Line 54: color cannot be resolved or is not a field
[ERROR] Hint: Your source appears not to live underneath a subpackage called 'client'; no problem, but you'll need to use the <source> directive in your module to make it accessible
> Task :html:draftCompileGwt FAILED
gdxVersion=1.10.1-SNAPSHOT
freefontTypeGwtVersion=1.9.11-SNAPSHOT
regExodusVersion = 0.1.10
typingLabelVersion = 1.2.0
build.gradle core:
dependencies
api "games.rednblack.hyperlap2d:runtime-libgdx:$h2dVersion"
api "com.badlogicgames.gdx:gdx:$gdxVersion"
api "com.badlogicgames.gdx:gdx-box2d:$gdxVersion"
api "com.badlogicgames.gdx:gdx-freetype:$gdxVersion"
api "com.badlogicgames.ashley:ashley:$ashleyVersion"
implementation 'com.github.raeleus:stripe:0.0.3'
build.gradle html
dependencies
implementation project(':core')
implementation "com.badlogicgames.gdx:gdx:$gdxVersion:sources"
implementation "com.badlogicgames.gdx:gdx-backend-gwt:$gdxVersion"
implementation "com.badlogicgames.gdx:gdx-backend-gwt:$gdxVersion:sources"
implementation "games.rednblack.hyperlap2d:runtime-libgdx:$h2dVersion:sources"
implementation "com.badlogicgames.gdx:gdx-box2d:$gdxVersion:sources"
implementation "com.badlogicgames.gdx:gdx-box2d-gwt:$gdxVersion"
implementation "com.badlogicgames.gdx:gdx-box2d-gwt:$gdxVersion:sources"
implementation "com.badlogicgames.ashley:ashley:$ashleyVersion:sources"
implementation "com.github.intrigus.gdx-freetype-gwt:gdx-freetype-gwt:$freefontTypeGwtVersion"
implementation "com.github.intrigus.gdx-freetype-gwt:gdx-freetype-gwt:$freefontTypeGwtVersion:sources"
implementation "com.github.tommyettinger:regexodus:$regExodusVersion:sources"
implementation "com.rafaskoberg.gdx:typing-label:$typingLabelVersion:sources"
implementation 'com.github.raeleus:stripe:0.0.3:sources'
Gdx Xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.2//EN" "http://www.gwtproject.org/doctype/2.8.2/gwt-module.dtd">
<module rename-to="html">
<source path="" />
<inherits name="com.badlogic.gdx.backends.gdx_backends_gwt" />
<inherits name="com.ray3k.stripe" />
<extend-configuration-property name="gdx.reflect.include" value="com.badlogic.ashley" />
<inherits name="HyperLap2D" />
<inherits name="com.tutorial.firstgame.GameMain" />
<entry-point class="com.tutorial.firstgame.gwt.GwtLauncher" />
<set-configuration-property name="gdx.assetpath" value="../assets" />
<set-configuration-property name="xsiframe.failIfScriptTag" value="FALSE"/>
<!-- These two lines reduce the work GWT has to do during compilation and also shrink output size. -->
<set-property name="user.agent" value="gecko1_8, safari"/>
<collapse-property name="user.agent" values="*" />
<!-- Remove the "user.agent" lines above if you encounter issues with Safari or other Gecko browsers. -->
**_AND VERY MUCH gdx.reflect.include / gdx.reflect.exclude_**
Is this just a typo ?
With gdx version 1.10.0 it was still working.
When I start my game for the first time typing labels are showed unreadable as the image above:
Here should be written "TAP TO START".
I create the label inside constructor of my Scene2D screen:
...
TypingLabel hint = new TypingLabel("{JUMP=0.13;2;0.8}" + mAssets.getString(Strings.TAP_TO_PLAY), mAssets.mFontStyle);
GlyphLayout layout = new GlyphLayout(mAssets.mFontStyle.font, mAssets.getString(Strings.TAP_TO_PLAY));
hint.setPosition((Constants.WORLD_WIDTH - layout.width) / 2, Constants.LAND_HEIGHT);
addActor(hint);
...
If I add a {WAIT} before jump the problem appear to be solved on some devices, but on others not. So I think that timers and wait are not the right solution of this problem.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.