tommyettinger / textratypist Goto Github PK
View Code? Open in Web Editor NEWAugmented text display system for libGDX, based on typing-label
License: Apache License 2.0
Augmented text display system for libGDX, based on typing-label
License: Apache License 2.0
Hi!
When rendering a wrapped TextraLabel
that has a lot of spaces, each space will result in an extra line.
Example:
Code:
public class MyGdxGame extends ApplicationAdapter {
private Stage stage;
private Skin skin;
@Override
public void create () {
stage = new Stage(new ScreenViewport());
skin = new Skin(Gdx.files.internal("uiskin.json"));
int fitOneLineCount = 25;
int extraLines = 10;
StringBuilder text = new StringBuilder();
for (int count = 0; count < fitOneLineCount + extraLines; count++) {
text.append(' ');
}
TextraLabel textraLabel = new TextraLabel(text.toString(), skin);
textraLabel.setWrap(true);
// Runs in the next render thread so the layout is ready.
Gdx.app.postRunnable(() -> System.out.println("Lines: " + textraLabel.layout.lines()));
Table table = new Table();
table.debug();
table.add(textraLabel).prefWidth(100).row();
Stack stack = new Stack(table);
stack.setFillParent(true);
stage.addActor(stack);
}
@Override
public void render () {
ScreenUtils.clear(0, 0, 0, 1);
stage.act();
stage.draw();
}
@Override
public void dispose () {
stage.dispose();
skin.dispose();
}
}
In the code above, there will be a whole line with spaces only. When it reaches the size of the table row preferred width, each extra space (defined by extraLines
in the code) will create a new line.
Let me know if you need more information!
Regards.
Hi!
A current behavior of TextraLabel
that does not match Label
is the use of []
.
That syntax in Label
will sets the color to the previous color defined in the label. That syntax in TextraLabel
will reset the color to the label original color instead.
Example:
Code:
public class MyGdxGame extends ApplicationAdapter {
private Stage stage;
private Skin skin;
@Override
public void create () {
stage = new Stage(new ScreenViewport());
skin = new Skin(Gdx.files.internal("uiskin.json"));
Label label = new Label("[RED]test [GREEN]test[] test[]", skin);
label.getStyle().font.getData().markupEnabled = true;
TextraLabel textraLabel = new TextraLabel("[red]test [green]test[] test[]", skin);
Table table = new Table();
table.add(label).row();
table.add(textraLabel).row();
Stack stack = new Stack(table);
stack.setFillParent(true);
stage.addActor(stack);
}
@Override
public void render () {
ScreenUtils.clear(0, 0, 0, 1);
stage.act();
stage.draw();
}
@Override
public void dispose () {
stage.dispose();
skin.dispose();
}
}
The request of this issue is to make TextraLabel
's []
tag match the behavior of Label
.
Thanks!
To reproduce this, create a label like the following:
new TextraLabel("{[", skin)
This will cause an exception.
I believe the culprit line is at Font.java:
if (enableSquareBrackets && c == '[' && i < end && text.charAt(i + 1) == '+') innerSquareStart = i;
And the fix could be:
if (enableSquareBrackets && c == '[' && i + 1 < end && text.charAt(i + 1) == '+') innerSquareStart = i;
Cheers!
Dear author,
Me again, and I meet a new problem. TextraField can‘t select or set curse to be after of last char. Does this is designed on purpose?
Hi!
I'm using the TextraTypist library (which is awesome by the way!) for the labels in my game.
Something I noticed is that labels won't wrap long words properly. It looks like TextraLabel with wrap does not respect the preferred width for long words:
Code (using the default skin at https://github.com/czyzby/gdx-skins/tree/master/default/skin):
public class MyGdxGame extends ApplicationAdapter {
private Stage stage;
private Skin skin;
@Override
public void create () {
stage = new Stage(new ScreenViewport());
skin = new Skin(Gdx.files.internal("uiskin.json"));
TextraLabel label = new TextraLabel("xdddddddddddddddddddddddddddddddddddddddddddddddddddddddd", skin);
label.setWrap(true);
Table table = new Table();
table.debug();
table.add(label).prefWidth(100).row();
Stack stack = new Stack(table);
stack.setFillParent(true);
stage.addActor(stack);
}
@Override
public void render () {
ScreenUtils.clear(0, 0, 0, 1);
stage.act();
stage.draw();
}
@Override
public void dispose () {
stage.dispose();
skin.dispose();
}
}
Hello!
The following code (with the extra invalidateHierarchy
call at TextraLabel.layout
, from #13 (comment)):
package com.mygdx.game;
import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Skin;
import com.badlogic.gdx.scenes.scene2d.ui.Stack;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.utils.Align;
import com.badlogic.gdx.utils.ScreenUtils;
import com.badlogic.gdx.utils.viewport.ScreenViewport;
import com.github.tommyettinger.textra.TextraLabel;
public class MyGdxGame extends ApplicationAdapter {
private Stage stage;
private Skin skin;
@Override
public void create () {
stage = new Stage(new ScreenViewport());
skin = new Skin(Gdx.files.internal("uiskin.json"));
skin.getFont("default-font").getData().setScale(2);
TextraLabel label = new TextraLabel("This is a test. This is a test. This is a test. This is a test. This is a test.", skin) {
@Override
public void layout() {
float width = getWidth();
if (style != null && style.background != null) {
width = (width - (style.background.getLeftWidth() + style.background.getRightWidth()));
}
if (wrap && layout.getTargetWidth() != width) {
if(width != 0)
layout.setTargetWidth(width);
font.regenerateLayout(layout);
invalidateHierarchy(); // Uncomment this line to fix the issue.
}
}
};
label.setWrap(true);
label.setAlignment(Align.left);
Table table = new Table(skin);
table.setBackground("default-pane");
table.add(label).prefWidth(300).row();
Table wrappingTable = new Table();
wrappingTable.add(table).row();
wrappingTable.add().growY();
Stack stack = new Stack(wrappingTable);
stack.setFillParent(true);
stage.addActor(stack);
}
@Override
public void render () {
ScreenUtils.clear(0, 0, 0, 1);
stage.act();
stage.draw();
}
@Override
public void dispose () {
stage.dispose();
skin.dispose();
}
}
Will result in:
Without setting the font scale, the label is drawn correctly:
The example above is using libGDX 1.12.2-SNAPSHOT and textralabel 6406d6f snapshot.
This also happens to other fonts and also when setting a scale < 1. For example, without scaling:
With scale of 0.5f:
Let me know if you want me to share the second example resources or if you need more details.
Regards.
Hello, sorry but i don't understand well how to include textra typist in my project, could someone be so kind as to explain it in details? Thank you in advance.
In font, it can be int when add to mapping, but finally only consider it as char with 0xFFFF.
Therefore, if I want to add some image I like, I have to set value lower than 0xFFFF, which is limited.
Why not let glyph value could be long when searching in mapping.
is this compatible with https://github.com/maltaisn/msdf-gdx ?
Hi, and thanks for the amazing features this library provides! It's mind-blowing to realize what you can do with those old boring libGDX texts now 🙌
I ran into layout problems using Twemoji. I noticed that the emoji glyphs were misaligned when I tried them with my 9-pixels-high font. I thought, there might be something wrong with my font glyph markup, but emojis behave weird even with the default libGDX font.
val font = Font()
KnownFonts.addEmoji(font)
val label = TypingLabel("[+🤡] This is a [+😄]test message.", font)
label.setPosition(100f, 100f)
label.pack()
label.debug()
stage.addActor(label)
So clearly, there's space reserved in the text for the emoji glyphs, but they are shifted by a constant value.
Am I missing something? Or maybe there are specific requirements for the font to be compatible with Twemoji?
textratypist
version is 0.10.0
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.