UIs in libgdx via scene2d.ui

Shared Code
#1

I’ve spent the past couple weeks refactoring libgdx’s 2D scene graph, which we call scene2d. I’ve also been working on the UI framework built on top of it, called scene2d.ui. This morning all this stuff got merged into trunk and is ready to be used. This time around there is reasonable documentation for everything, so hopefully people can be productive without too much effort. If you are looking to build a UI in your game, scene2d.ui makes it easy. Some links:

http://code.google.com/p/libgdx/wiki/scene2d
The documentation for scene2d. It is a little low level if you are only interested in building UIs, but still worth at least skimming.

http://code.google.com/p/libgdx/wiki/scene2dui
The documentation for scene2d.ui.

http://code.google.com/p/libgdx/wiki/Skin
The documentation for skin, which is an optional but convenient way to control how all widgets look.

http://code.google.com/p/table-layout/
The documentation for tables, which are optional but a convenient way to layout UIs (in scene2d and Swing/Android/etc).

https://code.google.com/p/libgdx/source/browse/trunk/gdx/src/com/badlogic/gdx/scenes/scene2d
Source for scene2d.

https://code.google.com/p/libgdx/source/browse/trunk/gdx/src/com/badlogic/gdx/scenes/scene2d/ui
Source for scene2d.ui.

#2

So what direction are you guys trying to take with this UI API? Is this meant as a replacement for TWL or for better compatibility with libGDX?

#3

To answer that, I’ll talk about how scene2d.ui was born. Mario built scene2d for libgdx long ago for generic 2D scene graph stuff. At some point, Mario wanted to do a UI with scene2d. That didn’t pan out. Later, he needed UI stuff for some tools he was building, and he wrote the first version of scene2d.ui. This sparked my interest and I worked on using TableLayout with scene2d.ui. Later, Mario and I worked together at a game company for a while and made extensive use of scene2d.ui. From that, we had a laundry list of things we would do differently and finally got around to doing most of them in the past couple weeks. scene2d.ui can be used for any UI, from simple game menus to much more complex UI stuff like you see in desktop applications.

TWL is an impressive piece of software. I used it for SingSong’s UI, I wrote this wiki article, and I wrote the TWL support for libgdx. I haven’t looked at TWL for a long time though, so my opinions my be way out of date. I find TWL difficult to use, partly because it is so powerful. Layout is difficult, part of the reason I went off and wrote TableLayout (which supports TWL, or at least an old version of TWL). Making widgets was difficult, as the underlying code, while beautiful and well written, is quite complex. UIs are complex, so this is not a big surprise, but I found it hard to be productive when I needed to create widgets. Finally, making themes was difficult. XML makes me sad. The Theme Editor is ridiculously cool and extremely powerful, but it takes a lot of effort to create themes. Just see my wiki article. This is especially relevant when starting out from scratch, making the learning curve very steep at first.

So, scene2d.ui and TWL are very similar. I would say that scene2d.ui is simpler and easier to use, but is not as powerful as TWL. scene2d.ui widgets are just a few images and a little code, with a framework for events, sane layout, and other niceties for building UI. TWL has more powerful widgets, such as a textarea that parses a subset of HTML stuff.

#4

So scene2d is desktop’s term for widget, is it right?

#5

Not really sure what you mean? scene2d is libgdx’s 2D scene graph. scene2d has “actors”, which are scene graph nodes. An actor has a rectangular size, position, origin, rotation, and scale. A “widget” in scene2d is an actor that implements the Layout interface, meaning it knows how to participate in UI layout by providing a min, preferred, and max size. A widget is just a UI control, like a button, slider, table, etc. This all runs everywhere libgdx does, on the desktop, Android, etc.

#6

I am so going to write an implementation of Morphic with scene2d :slight_smile:

#7

My question was badly formed but your reply is exactly what I want to know.

#8

I took a look at this and tried to get something to work. However the examples pointed out in the ui documentation are referencing tests which seem to be now out of date.
I especially tried to get the UITest to work, to see how everything translatse to screen, however, some errors pop out which I cannot fix. I’m sure the changes are trivial to someone who knows all this stuff, I, myself, am too new for this.

May I humbly request that the OP would take a look at the examples (those linked on the ui doc page) and possibly make em work again ?

#9

The examples work. What is the problem? Run LwjglTestStarter.

#10

Sooo~ Why no BorderLayout? Imho that is the easiest layout to make :smiley: Or do you want to keep the ui stuff clean from such things?

#11

Yes, that’s what I did or tried to do.
I have libgdx 0.9.6 and looking at the trunk (updated to todays rev) for the test stuff.

The first thing is, for example, the package for the Table is wrong.
In the test, it’s defined as “com.badlogic.gdx.scenes.scene2d.ui.Table” while libgdx itself says the location is “com.badlogic.gdx.scenes.scene2d.ui.tablelayout.Table”.

While this itself is trivial to fix, it leads me to belive the tests in the trunk are out of date. This also seems to be the case for the " scene2d-new" branch.
There are more of those kind of errors, method signature mismatches, missing methords, missing objects, etc. Those are easy to fix, what I have problem with is this:

Caused by: com.badlogic.gdx.utils.SerializationException: Error reading file: data/uiskin.json
at com.badlogic.gdx.utils.Json.fromJson(Json.java:570)
at com.badlogic.gdx.scenes.scene2d.ui.Skin.load(Skin.java:227)
… 4 more
Caused by: com.badlogic.gdx.utils.GdxRuntimeException: No com.badlogic.gdx.graphics.g2d.BitmapFont resource registered with name: default.fnt
at com.badlogic.gdx.scenes.scene2d.ui.Skin.getResource(Skin.java:248)
at com.badlogic.gdx.scenes.scene2d.ui.Skin$3.read(Skin.java:523)
at com.badlogic.gdx.scenes.scene2d.ui.Skin$3.read(Skin.java:515)
at com.badlogic.gdx.utils.Json.readValue(Json.java:748)
at com.badlogic.gdx.utils.Json.readValue(Json.java:695)
at com.badlogic.gdx.scenes.scene2d.ui.Skin$1.readNamedObjects(Skin.java:481)
at com.badlogic.gdx.scenes.scene2d.ui.Skin$1.readTypeMap(Skin.java:471)
at com.badlogic.gdx.scenes.scene2d.ui.Skin$1.read(Skin.java:458)
at com.badlogic.gdx.scenes.scene2d.ui.Skin$1.read(Skin.java:446)
at com.badlogic.gdx.utils.Json.readValue(Json.java:717)
at com.badlogic.gdx.utils.Json.fromJson(Json.java:568)

As far as I understand, it should actually read the font from the skin file and create it at load, but at the same time it looks for it in the resources ?

The skin file is unmodified, the assets are there where they should be. The “default.fnt” file is present.

Any help would be appreciated.

#12

I"m not a fan of a bunch of small, specialized layouts. They often do almost what you want, but are not quite flexible enough. Eg, in BorderLayout you can’t have X pixels between west and center and Y pixels between east and center. Table is a more powerful layout that can very easily replace BorderLayout and many (most!) others while also being very flexible, plus Table is often just as easy to use. Here is a BorderLayout using Table:


Table table = new Table();
table.defaults().fill();
table.add("north").colspan(3);
table.row();
table.add("west");
table.add("center").expand();
table.add("east");
table.row();
table.add("south").colspan(3);

Table is here:
https://code.google.com/p/libgdx/source/browse/trunk/gdx/src/com/badlogic/gdx/scenes/scene2d/ui/Table.java
The imports are correct:
https://code.google.com/p/libgdx/source/browse/trunk/tests/gdx-tests/src/com/badlogic/gdx/tests/UITest.java#32
Your checkout must be incorrect, which I assume is also why you have the other problems. Maybe do a fresh checkout?

#13

Gah, didn’t think of maybe libgdx being wrong. My bad…
I’ll do a fresh checkout.

#14

That is okay. In this case I would suggest at least providing the users with some example on hoe they can achieve the layout they want with TableLayout? No must, just an idea. I will save up the code-snippet (On my own… It would have taken ages to find that out xD)

#15

Did you see the docs?
https://code.google.com/p/table-layout/

#16

I’m blind as hell :-\

#17

Added a touchpad (onscreen joystick) and a (simple) tree view. :slight_smile: