rafaskb / typing-label Goto Github PK

View Code? Open in Web Editor NEW

148.0 10.0 21.0 48.82 MB

A libGDX Label that appears as if it was being typed in real time.

License: MIT License

Java 100.00%

libgdx scene2d

typing-label's Introduction

TypingLabel

A libGDX Label that appears as if it was being typed in real time.

It works as a drop-in replacement for normal Scene2D Labels, and you can use optional tokens to customize the text's behavior.

Installation

Open build.gradle in project root and add this to the ext section under allprojects:

typingLabelVersion = '1.3.0'
regExodusVersion = '0.1.13' // Only if you're using HTML / GWT

Core module

Add this to your build.gradle core dependencies:

api "com.rafaskoberg.gdx:typing-label:$typingLabelVersion"

Note: Replace api with compile if you're using a Gradle version older than 3.4.

HTML dependencies

(Only if you're using HTML / GWT)

Add this to your GdxDefinition.gwt.xml file:

<inherits name="com.rafaskoberg.gdx.typinglabel.typinglabel" />

Add this to your build.gradle html dependencies:

api "com.github.tommyettinger:regexodus:$regExodusVersion:sources"
api "com.rafaskoberg.gdx:typing-label:$typingLabelVersion:sources"

Note: Replace api with compile if you're using a Gradle version older than 3.4.

Getting Started

Check the Wiki:

textratypist and SDF / MSDF Support

Multi-channel Signed Distance Field fonts allow you to prepare and load just one font file and render it in any scale you want, while mantaining the quality and cripsness of the original texture, as if you were working directly with vectors.

Since TypingLabel aims to be a replacement for regular scene2d.ui Labels though, that means it relies on BitmapFonts, which have a specific size and don't work well with scaling.

If you're using SDF fonts in your project and want TypingLabel features, then make sure to take a look at Textramode and Textratypist libraries by Tommy Ettinger. They support SDF and MSDF fonts, have much of the TypingLabel features, as well extended markup such as bold and oblique, and much more.

typing-label's People

Stargazers

Watchers

typing-label's Issues

Setting the color.a of a TypingLabel actor makes the FADE token not work properly.

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}");

Add EASE token to the wiki.

Add "setDefaultToken" to the wiki

Create FADE effect.

Arguments:

Color1 or Alpha 1
Color2 or Alpha 2
Duration

Works the same way as EASE, but tints glyphs instead. Perfect for fading glyphs in.

Add gifs of all tokens to the wiki.

next line bug

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)

1.0.5 dependencies not working

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"
  }
}

Inconsistent events ordering

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:

As you can see :

First character 'H' is missing
'on' and 'off' events appears at the same time
last letter of "Hello" appears after events (minor issue)
letter 'b' appear too soon

Add new effects to the wiki.

RAINBOW
GRADIENT
FADE

Unreadable text

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.

GWT Compatibility

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

Update wiki examples with new API (TypingGlyph)

Aligning label issue

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.

Create wiki page explaining how to create complex effects

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!");

Parent alpha not working

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

Allow users to change {} token characters

We could define these characters in TypingConfig and adapt the regex in the Parser class to use these instead of the hardcoded {}.

Create ENDCOLOR, an alias of CLEARCOLOR.

setText method not working as intended

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.

GWT Task :html:draftCompileGwt FAILED: color cannot be resolved or is not a field

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.

Restart label in Listener

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");

[question] clickable/touchable label

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!