Java-Gaming.org    
Featured games (91)
games approved by the League of Dukes
Games in Showcase (576)
games submitted by our members
Games in WIP (498)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  UIs in libgdx via scene2d.ui  (Read 13647 times)
0 Members and 1 Guest are viewing this topic.
Offline Nate

JGO Kernel


Medals: 128
Projects: 3
Exp: 14 years


Esoteric Software


« Posted 2012-07-03 07:42:45 »

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.

Offline ra4king

JGO Kernel


Medals: 322
Projects: 2
Exp: 4 years


I'm the King!


« Reply #1 - Posted 2012-07-03 10:37:10 »

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?

Offline Nate

JGO Kernel


Medals: 128
Projects: 3
Exp: 14 years


Esoteric Software


« Reply #2 - Posted 2012-07-03 11:06:11 »

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.

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline ReBirth
« Reply #3 - Posted 2012-07-03 15:59:41 »

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

Offline Nate

JGO Kernel


Medals: 128
Projects: 3
Exp: 14 years


Esoteric Software


« Reply #4 - Posted 2012-07-03 19:56:46 »

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

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.

Offline sproingie
« Reply #5 - Posted 2012-07-04 00:13:31 »

I am so going to write an implementation of Morphic with scene2d Smiley
Offline ReBirth
« Reply #6 - Posted 2012-07-04 07:52:49 »

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

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.
My question was badly formed but your reply is exactly what I want to know.

Offline xsvenson
« Reply #7 - Posted 2012-07-11 01:09:37 »

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 ?

“The First Rule of Program Optimization: Don't do it. The Second Rule of Program Optimization (for experts only!): Don't do it yet.” - Michael A. Jackson
Offline Nate

JGO Kernel


Medals: 128
Projects: 3
Exp: 14 years


Esoteric Software


« Reply #8 - Posted 2012-07-11 03:56:33 »

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 ?
The examples work. What is the problem? Run LwjglTestStarter.

Offline R.D.

Senior Member


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #9 - Posted 2012-07-11 10:11:44 »

Sooo~ Why no BorderLayout? Imho that is the easiest layout to make Cheesy Or do you want to keep the ui stuff clean from such things?
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline xsvenson
« Reply #10 - Posted 2012-07-11 14:47:23 »

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.

“The First Rule of Program Optimization: Don't do it. The Second Rule of Program Optimization (for experts only!): Don't do it yet.” - Michael A. Jackson
Offline Nate

JGO Kernel


Medals: 128
Projects: 3
Exp: 14 years


Esoteric Software


« Reply #11 - Posted 2012-07-11 15:14:22 »

Sooo~ Why no BorderLayout? Imho that is the easiest layout to make Cheesy Or do you want to keep the ui stuff clean from such things?
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:

1  
2  
3  
4  
5  
6  
7  
8  
9  
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);


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".
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?

Offline xsvenson
« Reply #12 - Posted 2012-07-11 15:21:53 »

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?

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

“The First Rule of Program Optimization: Don't do it. The Second Rule of Program Optimization (for experts only!): Don't do it yet.” - Michael A. Jackson
Offline R.D.

Senior Member


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #13 - Posted 2012-07-11 17:13:24 »

Sooo~ Why no BorderLayout? Imho that is the easiest layout to make Cheesy Or do you want to keep the ui stuff clean from such things?
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:

1  
2  
3  
4  
5  
6  
7  
8  
9  
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);



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)
Offline Nate

JGO Kernel


Medals: 128
Projects: 3
Exp: 14 years


Esoteric Software


« Reply #14 - Posted 2012-07-11 18:05:15 »

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)
Did you see the docs?
https://code.google.com/p/table-layout/

Offline R.D.

Senior Member


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #15 - Posted 2012-07-11 22:11:13 »

I'm blind as hell  Undecided
Offline Nate

JGO Kernel


Medals: 128
Projects: 3
Exp: 14 years


Esoteric Software


« Reply #16 - Posted 2012-07-31 00:18:19 »

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

Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

xsi3rr4x (15 views)
2014-04-15 18:08:23

BurntPizza (13 views)
2014-04-15 03:46:01

UprightPath (27 views)
2014-04-14 17:39:50

UprightPath (12 views)
2014-04-14 17:35:47

Porlus (29 views)
2014-04-14 15:48:38

tom_mai78101 (51 views)
2014-04-10 04:04:31

BurntPizza (110 views)
2014-04-08 23:06:04

tom_mai78101 (211 views)
2014-04-05 13:34:39

trollwarrior1 (179 views)
2014-04-04 12:06:45

CJLetsGame (185 views)
2014-04-01 02:16:10
List of Learning Resources
by Longarmx
2014-04-08 03:14:44

Good Examples
by matheus23
2014-04-05 13:51:37

Good Examples
by Grunnt
2014-04-03 15:48:46

Good Examples
by Grunnt
2014-04-03 15:48:37

Good Examples
by matheus23
2014-04-01 18:40:51

Good Examples
by matheus23
2014-04-01 18:40:34

Anonymous/Local/Inner class gotchas
by Roquen
2014-03-11 15:22:30

Anonymous/Local/Inner class gotchas
by Roquen
2014-03-11 15:05:20
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!