Complex GUIs with LibGDX

Anything libgdx related goes here!

Complex GUIs with LibGDX

Postby KateTheAwesome » Tue Mar 26, 2013 1:06 pm

Hi everybody,
I've been working on a pretty complex MMO-RTS with my brother for the past few months and while we've accomplished quite a bit with our background framework and server communication I am slowly getting frustrated with GUIs in LibGDX. Apparently it should be very easy to create a layout with Scene2D and there are plenty of tutorals how to do so. The problem is, that these tutorials are either horribly outdated and the methods used in them no longer exist or work OR that they're simply incomplete, basing their entire workings on a class (e.g. SuperAdapter) which is then not shown leaving me with no clue what "SuperAdapter.AwesomeMethod(Some arbitrary variable);" is supposed to do -.-

Oh and btw when I talk about Layouts, I mean the hard stuff, not just a button. This is one of the screen concepts:
Image
(No Katee S. doesn't stand for "Katee Sackhoff" ... it's my name XD)


So I'd have two questions really:

1. Does anybody know a good documentation that isn't completely outdated or missing large chunks of it's source code that could help me here? :P
OR
2. Is Scene2D not powerful enough for this? I tried getting into the whole TWL thing but for the newer versions of LibGDX it just seems like a real mess, their own documentation is outdated as hell and I doubt that development on that is even still going on. Does anybody know some other GOOD library, based on LibGDX or at least highly compatible with it for me (us) to use?

Thanks in advance.
Me personally: http://www.katharinasabel.de
My studio: http://www.2rsoftworks.de # #2rSoftworks @ irc.freenode.net
KateTheAwesome
 
Posts: 40
Joined: Tue Mar 26, 2013 12:54 pm
Location: Berlin, Germany

Re: Complex GUIs with LibGDX

Postby veli » Tue Mar 26, 2013 1:44 pm

I think the best demo of what scene2d is capable of is Nate's skeletal animation software Spine, written in Java/libGDX/scene2d. I can't help you with documentation, though.
veli
 
Posts: 33
Joined: Tue Jul 24, 2012 11:37 am

Re: Complex GUIs with LibGDX

Postby YaW » Tue Mar 26, 2013 2:13 pm

Well, that layout is pretty easily done with Scene2D. What problem do you have?

Basically you need a lot of Tables. They are pretty much like the Tables on HTML.

The most difficult thing about Scene2D in my opinion is to make the UI looks good, the Skin element is a bit obscure to me.
Image
YaW
 
Posts: 141
Joined: Mon May 28, 2012 9:03 am

Re: Complex GUIs with LibGDX

Postby KateTheAwesome » Tue Mar 26, 2013 2:43 pm

Well, it's been some time since I looked at it the last time. Have been busy with server communication and authentication so far.

The skin thing about Scene2D was something that was always blocking my progress. Like, I would generally get how tables were set but it always wanted some skin object from me and since I have about -1 experience with webdesign, java script or json whatever it's called I don't really know what to do with that...

All I know is that the standard documentations on the LibGDX website and the first dozen entries on google (that link all to the same tutorial xD) weren't any real help to me :/
Me personally: http://www.katharinasabel.de
My studio: http://www.2rsoftworks.de # #2rSoftworks @ irc.freenode.net
KateTheAwesome
 
Posts: 40
Joined: Tue Mar 26, 2013 12:54 pm
Location: Berlin, Germany

Re: Complex GUIs with LibGDX

Postby dave77 » Tue Mar 26, 2013 3:12 pm

Moribito has some good tutorials for Scene2D at his website.....

http://moribitotechx.blogspot.co.uk/2013/02/tutorial-show-us-good-series-jungle.html
dave77
 
Posts: 103
Joined: Tue Jan 15, 2013 4:40 pm

Re: Complex GUIs with LibGDX

Postby NateS » Tue Mar 26, 2013 3:33 pm

The official documentation is up to date.
https://code.google.com/p/libgdx/wiki/scene2d
https://code.google.com/p/libgdx/wiki/scene2dui
https://code.google.com/p/libgdx/wiki/Skin
http://code.google.com/p/table-layout/

After that, you'll have to ask more specific questions. The only question or yours I can really answer is yes, scene2d is plenty powerful enough to do your UI.
NateS
 
Posts: 1980
Joined: Fri Nov 12, 2010 11:08 am

Re: Complex GUIs with LibGDX

Postby Sako » Tue Mar 26, 2013 3:52 pm

Oh come on guys making a brand-new scene2d skin is ridiculously easy.

The steps

1) create a skin.json file in asset folder.

2) create a couple bitmapfonts using Hiero. Let's say you create "arial25" for text and "impact50" for titles. Put the fnt and png files inside asset folder.

3) at this point, you can already start writing stuff in your skin.json file. You got the bitmapfonts, so you can define styles for the labels.
Code: Select all
{
   com.badlogic.gdx.graphics.g2d.BitmapFont: {
      normaltext: { file: arial25.fnt },
      titletext: { file: impact50.fnt },
   },
   com.badlogic.gdx.graphics.Color: {
      red: { a: 1, b: 0, g: 0, r: 1 },
      green: { a: 1, b: 0, g: 1, r: 0 },
      blue: { a: 1, b: 1, g: 0, r: 0 },
      white: { a: 1, b: 1, g: 1, r: 1 },
      black: { a: 1, b: 0, g: 0, r: 0 }
   },
   com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
      default: { font: normaltext, fontColor: white },
      normal-text: { font: normaltext, fontColor: white },
      title-text: { font: titletext, fontColor: red },
   }
}


4) fire up GIMP or Photoshop and draw a square button, let's say 50x50. Put a gradient and a stroke on it so it looks nice. Save it as PNG in some external folder with the name "button".

5) make another button, identical to the first, but in another color, for the "pressed" state. If you made the button blue, make it red or something. Save with the name "button-down".

6) make another button, identical to the first, but gray, for the "disabled" state. Save with the name "button-disabled".

7) open your Android SDK folder and fire up the 9patch tool. You can find it in \sdk\tools\draw9patch.bat if you're on Windows. Open your buttons, and draw some black pixels in the middle of the top and left edges, to make it stretch gracefully. Save. You can find additional info on 9patches here.
http://developer.android.com/tools/help/draw9patch.html
http://code.google.com/p/libgdx/wiki/GraphicsNinePatch

8) use libgdx TexturePacker to create an atlas of your 3 buttons. Obviously you can pack them together with your other game graphics.

9) copy the created pack.atlas and pack.png in your asset folder.

10) now you can define button styles in your skin.json file. It becomes something like this.
Code: Select all
{
   com.badlogic.gdx.graphics.g2d.BitmapFont: {
      normaltext: { file: arial25.fnt },
      titletext: { file: impact50.fnt },
   },
   com.badlogic.gdx.graphics.Color: {
      red: { a: 1, b: 0, g: 0, r: 1 },
      green: { a: 1, b: 0, g: 1, r: 0 },
      blue: { a: 1, b: 1, g: 0, r: 0 },
      white: { a: 1, b: 1, g: 1, r: 1 },
      black: { a: 1, b: 0, g: 0, r: 0 }
   },
   com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
      default: { font: normaltext, fontColor: white },
      normal-text: { font: normaltext, fontColor: white },
      title-text: { font: titletext, fontColor: red },
   }
   com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {
      default: { up: button, down: button-down, checked: button-down, disabled: button-disabled },
      transparent: { },
   },
   com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
      default: { up: button, down: button-down, checked: button-down, disabled: button-disabled, font: normaltext, fontColor: white },
   }
}


11) repeat steps 4-10 creating more graphics for other scene2d controls you want to style with your skin. But labels and textbuttons are enough to get you started.

12) in your ApplicationListener.create() method, or whenever you load your assets, initialize the skin.
Code: Select all
AssetManager manager = new AssetManager();
...
manager.load("pack.atlas", TextureAtlas.class);
...
TextureAtlas atlas = manager.get("pack.atlas", TextureAtlas.class);
Skin skin = new Skin(Gdx.files.internal("skin.json"), atlas);


That's it. Now you can create Labels and Buttons using your styles.
Code: Select all
Label label = new Label("Speed: 50m/s", Assets.skin);
Label label = new Label("Speed: 50m/s", Assets.skin, "normal-text"); // equivalent
Label label = new Label("Character selection", Assets.skin, "title-text");

Button buttonAttack = new Button(Assets.skin, "transparent"); // invisible button
TextButton buttonStart = new TextButton("Click to play!", Assets.skin);


Hope it helps!
Last edited by Sako on Tue Mar 26, 2013 8:00 pm, edited 2 times in total.
Sako
 
Posts: 147
Joined: Sat Sep 10, 2011 11:39 am

Re: Complex GUIs with LibGDX

Postby YaW » Tue Mar 26, 2013 7:02 pm

ridiculously easy != 12 steps involving 4 diferents programs :mrgreen:
Image
YaW
 
Posts: 141
Joined: Mon May 28, 2012 9:03 am

Re: Complex GUIs with LibGDX

Postby Magnesus » Tue Mar 26, 2013 7:48 pm

Sako wrote:Let's say you create "arial25white" for text and "arial50red" for titles.


If you create all fonts while you can easily change their color later in code.
Magnesus
 
Posts: 1709
Joined: Sun Sep 25, 2011 3:50 pm

Re: Complex GUIs with LibGDX

Postby Sako » Tue Mar 26, 2013 7:54 pm

YaW wrote:ridiculously easy != 12 steps involving 4 diferents programs :mrgreen:

You have to cope with it until someone makes some kind of magic awesome engine that automates the process :mrgreen:

Magnesus wrote:If you create all fonts while you can easily change their color later in code.

Yeah bad example, let's make them 2 different font faces. I'll edit the post.
Sako
 
Posts: 147
Joined: Sat Sep 10, 2011 11:39 am

Next

Return to Libgdx

Who is online

Users browsing this forum: Google [Bot], MSN [Bot] and 1 guest