Tag 6 – Benutzeröberfläche

veröffentlicht am: 6. Dezember 2012

Heute wollen wir nach dem Splashscreen unserer App auch noch ein cooles Menü basteln. Jedes Menü hat einen Skin, d.h. wie die Buttons, Textfelder und so weiter aussehen. Für den Anfang packen wir die fünf Dateien aus dieser Zip-Datei in einen Unterordner ui in den assets-Ordner. Später werden wir noch lernen, wie wir unser eigenes Skin basteln, aber für heute müssen wir mit diesem Default leben.

Skin skin;
skin = new Skin( Gdx.files.internal( "ui/defaultskin.json" ));

Jedes Element der Benutzeroberfläche ist ein Actor. Das heißt, wir erzeugen einfach unseren TextButton und fügen ihn der Stage hinzu.

TextButton button=new TextButton("pointless button", skin);
button.setPosition(350,200);
stage.addActor(button);

Damit die Stage auch Eingaben des Nutzers (z.b. wenn er auf den Button klickt) verarbeiten kann, müssen wir die Stage als InputProzessor angeben:

Gdx.input.setInputProcessor(stage);

Wenn wir jetzt wollen, dass etwas passiert, wenn der Button gedrückt wird, fügen wir einfach einen ClickListener hinzu.

button.addListener(new ClickListener(){
	@Override
	public void clicked(InputEvent event, float x, float y) {
		button.addAction(Actions.fadeOut(0.7f));
	}
});


Wir könnten unseren Menü-Bildschirm nun aufbauen, indem wir die Positionen der Buttons einzelnd setzen. Bei vielen Elementen möchten wir das aber nicht und wenn sich die Bildschirmauflösung ändert, kann das Berechnen der Koordinaten sehr kompliziert werden.

libgdx hat nun eine Layout-Bibliothek names TableLayout eingebaut.

Table table=new Table();
table.setSize(800,480);

TextButton startGame=new TextButton("start game",skin);
table.add(startGame).width(200).height(50);
table.row();

TextButton options=new TextButton("options",skin);
table.add(options).width(150).padTop(10).padBottom(3);
table.row();
		
TextButton credits=new TextButton("credits",skin);
table.add(credits).width(150);
table.row();
		
TextButton quit=new TextButton("quit",skin);
table.add(quit).width(100).padTop(10);

stage.addActor(table);

Alles wichtige sollte hier direkt aus dem Code ablesbar sein, da es sehr einfach ist. Bei .add() oder .row() kriegt man jedes Mal ein Cell-Objekt zurück, auf den man mit weiteren Methoden die Breite,Höhe oder den Rand um diese Zelle ändern kann.

Es gibt auch noch viele andere Elemente, die man zur Benutzeroberfläche hinzufügen kann.

TextField text=new TextField("",skin);
// [...]
String value=text.getText();

CheckBox box=new CheckBox("done",skin);
// [...]
boolean checked=box.isChecked();

String[] items={"cool","mega","awesome"};
SelectBox selectbox=new SelectBox(items, skin);
// [...]		
String selection=selectbox.getSelection();

Deine Aufgabe für heute ist es ein Optionsmenü hinzufügen und zwischen den Menüs wechseln zu können.

Das Tutorial für heute war eher kurz, da das meiste sich selbst erklärt (falls du trotzdem noch Fragen hast, schreib sie in die Kommentare!) Morgen beschäftigen wir uns dann damit mehrere Texturen in eine zu packen.

geposted in libgdx

11 Antworten zu “Tag 6 – Benutzeröberfläche”

  1. Katoffel sagt:

    Skin skin = new Skin(Gdx.files.internal(„images/menu/defaultskin.json“));

    Exception in thread „LWJGL Application“ com.badlogic.gdx.utils.GdxRuntimeException: com.badlogic.gdx.utils.SerializationException: Error reading file: images/menu/defaultskin.json
    Caused by: com.badlogic.gdx.utils.SerializationException: Error reading file: images/menu/defaultskin.json
    Caused by: com.badlogic.gdx.utils.SerializationException: Error reading file: images/menu/defaultskin.json
    Caused by: com.badlogic.gdx.utils.SerializationException: Font file not found: default.fnt

    🙁

    Eclipse asserts-Ordner ist aktualisiert. Die File Liegt wirklich da wo sie angegeben ist (images/menu/defaultskin.json)…

  2. some guy sagt:

    Download link is dead

  3. joka sagt:

    Exception in thread „LWJGL Application“ com.badlogic.gdx.utils.SerializationException: Error reading file: ui/defaultskin.json

    habe die files nochmal runtergeladen, aber ich kriege die „defaultskin.json“ nicht geladen. Könnte die korrupt sein?

    Krige die zum Testen auch hier nicht reingeladen: http://www.jsoneditoronline.org/

    Error: Parse error on line 1:
    {
    com.badlogic.gdx.gra
    –^
    Expecting ‚STRING‘, ‚}‘, got ‚undefined‘

  4. joka sagt:

    habe einfach mal das ganze GIT repository runtergeladen und dann die files daraus benutzt. Jetzt klappt es.

  5. Harkan sagt:

    ich bin noch nicht so bewandert im programmieren, gibt es irgendwo den kompletten quellcode gespeichert? weiß nie so recht wo ich mein code reinschreiben soll.

  6. DungDajHjep sagt:

    SelectBoxStyle definition is not correct. At least that section breaks the load of the json

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.