Libgdx Scene2d - adding an add-on to an actor (TextField)?

Question

I'm having trouble setting up an add-on or something like an actor. I can not understand the way. Think I should add something to my skin?

I have this TextField:

textboxskin = new Skin(); textboxskin.add("textfieldback", new Texture("data/textfieldback.png")); textboxskin.add("cursor", new Texture("data/cursortextfield.png")); textboxskin.add("selection", new Texture("data/selection.png")); textboxskin.add("font", font); TextFieldStyle textfieldstyle = new TextFieldStyle(); textfieldstyle.background= textboxskin.getDrawable("textfieldback"); textfieldstyle.disabledFontColor=Color.BLACK; textfieldstyle.font=textboxskin.getFont("font"); textfieldstyle.fontColor=Color.WHITE; textfieldstyle.cursor=textboxskin.getDrawable("cursor"); textfieldstyle.selection=textboxskin.getDrawable("selection"); textfieldusername = new TextField("username", textfieldstyle); 

which is as follows:

As you can see, it looks awful in the center left ...

Answer 1

Use the Table class to lay out scene2d user interfaces. To set up a table:

 stage = new Stage(); Table table = new Table(); table.setFillParent(true); stage.addActor(table); table.add(textFieldUsername).padBottom(20f); //also use padTop, padLeft, and padRight table.row(); 

In the main loop, call:

 stage.act(Gdx.graphics.getDeltaTime()); stage.draw(); 

For more information about tables, see http://code.google.com/p/table-layout/

Answer 2

EDIT: I tried to do the following and it worked in my tests:

 textfieldstyle.background.setLeftWidth(textfieldstyle.background.getLeftWidth() + 10); 

---

Searching the libgdx API I could not find a way to specify a text add-on inside the TextField component.

As a workaround, you can copy the original TextField source and create a new TextField with a different name, which provides a way to implement the add-on.

Copy the contents of the libgdx text box ( https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/scenes/scene2d/ui/TextField.java?source=cc ) to another file and let's call it MyTextField (as an example). Replace the broken TextField links with the new class name.

Create a new variable called paddingLeft, for example:

 public float paddingLeft = 0.0f; 

In the draw () method, you can add your addition to the sum to define a new position for the String. Where the code says:

 font.draw(batch, displayText, x + bgLeftWidth + textOffset, y + textY + yOffset, visibleTextStart, visibleTextEnd); 

replaced by:

 font.draw(batch, displayText, x + bgLeftWidth + textOffset + leftPadding, y + textY + yOffset, visibleTextStart, visibleTextEnd); 

(note the "+ leftPadding" in the second code)

Then, if you use skins, do not forget to refer to your TextField in the uiskin.json file:

 mypackage.MyTextField$TextFieldStyle: { default: { selection: selection, background: textfield, font: default-font, fontColor: white, cursor: cursor } } 

and use it in your code:

 MyTextField txtTest = new MyTextField("Test", skin); txtTest.leftPadding = 10.0f; 

This is not an ideal way, but it will work.

Answer 3

You can use NinePatch. This divides your texture into nine “patches” that you define their height and width, and then you pass it to the NinePatchDrawable, which you can pass to the TextButton. I believe that external “patches” act like fields and with some tuning (not tense), they would look great and fulfill your goals.

I learned about them from this post: Downloading the nine patch as a background Libgdx Scene2d looks awful