2
\$\begingroup\$

I'm developing a game using LibGDX and in a part it has a pretty complex UI for profile selection and stuff. I have some general problems.

I'd like to know good practices when generate good looking layouts using the Scene2d that comes bundled with it. I've found examples online but they don't usually get to the level of complexity that I require. Is the use of a table recommended always? How can I set positions and widths precisely (I've managed to fake it using paddings but there has to be a better way). I'd need something like absolute positioning in CSS.

I need to use different font files, colors and sizes for instance. How can do that in the skin and the use it in my code?

I also need different designs on buttons (different backgrounds). How can I do that?

Also for some reason my text is very bad looking. How can I make it look sharp?

Thanks in advance.

\$\endgroup\$
1
\$\begingroup\$

I'm just getting into libgdx/scene2dui as well, but maybe I can offer some help.

I found using tables quite handy and accurate. It also has the benefit of relative positioning of objects. I don't know about CSS, but why would you use absolute positioning, it screws up if you want the game to be playable in different resoultions and aspect ratios and makes working on your UI really hard. If you want to add something you'd have to manually move everything else.

You create a root table and add tables to it, to which you add tables and ... eventually some things. Every Object in your UI (called Widgets: buttons, textfields, labels, images, any class extending actor) needs a Container. Tables are the containers with most control over positioning your stuff. So even if they have just one cell they are a good choice.

Position things by specifying table.add(...) with methods of the Cell class.

For example: table.add(yetAnotherTable).align(Align.topLeft).expandX().colspan(2).

You can also set the absolute size of the cell with this, even better, you can use a min, max and preffered size.

To make it short: I don't know any other reasonable way to do an UI in libgdx.

I need to use different font files, colors and sizes for instance. How can do that in the skin and the use it in my code?

As the method void add(java.lang.String name, java.lang.Object resource) suggests you can add just about everything to a skin and give it a name (string).

When you need the ressource you can call it by it's name with the appropriate method. A big benefit is that i gives you Drawables for everything that can be converted to a Drawable by calling getDrawable(java.lang.String name), which can otherwise be unhandy for some classes. Also, you can call dispose() on a whole skin. It just makes handling a lot of objects easier.

Also for some reason my text is very bad looking. How can I make it look sharp?

Do you use BitmapFonts and scale them? You need a different BitmapFont for every size. Or you just store .ttf files in your assets folder and create a new BitmapFont with the Freetype fontGenerator whenever you need it.

Check out the wiki on that

|improve this answer|||||
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.