# Game GUI Programmieren



## NeoBlyzX (29. Nov 2013)

Heyho liebe Community!

Ich bin gerade dabei ein kleines Spiel zu proggen, stoße jedoch auf einige Probleme mit der GUI...

Ich habe absolut KEINE Ahnung, wie man eine GUI programiert...
Ich will aber auch keine bereit gestellten GUI Libraries benutzen (Nifty-GUI, TWL, etc.)
Ich will, dass man mehrere Panels über Tasten öffnen kann und dann mit gewissen Punkten interagieren kann. Grundlegend soll das Menü und die 'HUD' aussehen wie bei Torchlight (und 2).

P.s: Ich benutze LWJGL und das Spiel ist ein 2D-Top-Down-Pixel-Mob-Slasher 

So ein wenig Mischung aus Torchlight und League of Legends nur im Pixel-Style...

Danke im Voraus!


----------



## Gucky (30. Nov 2013)

Willst du eine GUI komplett selbst programmieren? Also das ist nahezu unmöglich.
Welche IDE benutzt du denn? Mit eclipse kann man die GUI "malen" also man nimmt sich Elemente aus einem Feld und zieht diese in sein Frame.


----------



## Ruzmanz (30. Nov 2013)

Ich würde von den genannten Libraries darauf schließen, dass er LWJGL nutzt und somit seine GUI nicht zusammenklicken kann. Ein simples Menü ist auch nicht so komplex, um es nicht selbst programmieren zu können ...

Eine GUI wird genau so programmiert wie das Spiel. Ganz grob:


```
public void update() {
  if(input == KEY_ESC_PRESSED) {
    isMenuVisible= !isMenuVisible;
  }
}

public void draw() {
  drawGround();
  drawObjects();
  drawHUD();
  if(isMenuVisible) drawMenu();
}
```

Du zeichnest Ebenen-weise die benötigten Elemente. Auf den unteresten Ebenen befindet sich das "Spiel". Über dem Spiel kommt das HUD. Wenn das Menü geöffnet wird, wird es als letztes gezeichnet, d.h. es befindet sich ganz oben auf dem Stapel.

Die einzelnen GUI-Elemente werden genau so programmiert, wie die SpielObjekt-Elemente. Zum Beispiel klickst du auf einen Charakter und es werden Informationen angezeigt. Das ist im Prinzip nichts anderes als ein Button.

Ein simpler Button hat die Attribute xPos, yPos, height, width, color. Es ist ein Rechteck, das irgendwo auf dem Bildschirm platziert ist. Deine GameLoop läuft ununterbrochen. Wenn ein Mausklick wahrgenommen wird, dann musst du schauen, ob sich die MausPosition in diesem Rechteck befindet. Ist das der Fall, wir eine spezielle Methode ausgeführt. (Nur wenn das Menü aktiviert ist). Fürs GameMenü gibt es genügend Tutorials. Das kann beliebig optimiert werden. Wenn sich die Maus in einem Rechteck befindet, ändert sich die Farbe und das ist ein "Hover-Effekt".


----------



## NeoBlyzX (30. Nov 2013)

Ok danke, jedoch habe ich noch Probleme mit dem Skalieren von Bildern bzw dem teilweisen 'ausmalen' von Bildern... Dh. Ich würde gerne einen Lebensbalken haben und der soll sich prozentual mit dem Leben in Rot färben (Also Leben = 100% -> Balken = komplett Rot(heller), Leben unter  50% Linke seite des Balkens (Restleben) Rot (dunkler) und der Rest dunkelgrau...
wie genau mach ich das?

Ich benutze btw Netbeans und LWJGL 2.9 (Version bin ich unsicher, ist aber die aktuellste)


----------



## Gucky (30. Nov 2013)

Ok. Ich glaube, ich habe das mit der GUI falsch verstanden.


----------



## NeoBlyzX (3. Dez 2013)

Wie hast du es denn verstanden?
Würde mich interessieren, da ich noch GAAANZ neu bei der grafischen Java Programmierung bin und ich gerne so viel wie möglich lernen würde!

Wie macht man zB verschiedene Menüs? (So mit "Ordnerstruktur")? So dass man von einem Menü ins nächste kommt und dann das Spiel erst richtig los geht?


----------



## BuddaKaeks (3. Dez 2013)

[OT]LWJGL 2.9 ist definitiv nicht die neuste Version, da sind wir inzwischen bei LWJGL 4.3 (4.3 ist allerdings nur so ein nightlyBuild, wie ich das verstanden habe)[/OT]


----------



## Gucky (3. Dez 2013)

Ich hab es so verstanden, dass du eine ganz normale GUI haben willst. Zwar eine, mit der du das Spiel bedienen kannst aber keine "ingame GUI".

Also. Es gibt zwei Arten von Spiele GUIs.
1. Die normal GUI, wie sie auch in Dienstprogrammen verwendet wird nur halt mit spieltechnischen Aufgeben betraut.
2. Eine selbstgemachte GUI, wie sie in z.B. Egoshootern zu finden ist. Da sieht ja nichts so aus, wie Windows es bereitstellen würde. Mit Buttons, die sich an den Blickwinkel des Spielers anpassen.


Die erste GUI ist einfach. Dazu musst einfach in deiner IDE in den visuellen Editor gehen und die GUI zusammenklicken.
Die zweite ist schon schwerer, da du erstens alles verändern musst (im Großen und Ganzen sind das trotzdem Buttons, Labels usw. aber für alles eine andere Textur und ein anderes Aussehen).


Jetzt noch mal eine grundlegende Frage: Willst du eine statische GUI, die einmal da ist und die sich nicht bewegt oder eine GUI a la Heads up Display und professionelles Spiel?


----------



## NeoBlyzX (5. Dez 2013)

Ich würde eine GUI der zweiten Variante von dir haben wollen, dh mit eigenen Buttons etc für ein professionelleres Spiel (wills ja auch nicht verkaufen oder so)... Zudem sollte ein Heads-Up-Display auch noch dabei sein, da ich ja Leben, Mana, etc visuell sichtbar machen will (keine 10.000.000.000 Zahlen )

Also: Eigenes Menü (kein Windows-Style, würde ich auch alles selber 'malen') und ein Heads-Up-Display (würde ich auch alles selber malen)

P.S.: War mir mit Heads-Up-Display nicht so sicher, da ich ja ein Top-Down Spiel programmieren will und nicht aus Ego-Perspektive... Sorry für die Umständlichkeiten 

P.P.S.: Ok, als ich LWJGL runtergeladen habe war es noch das aktuellste... Zieh mir doch direkt mal die neuste Version


----------



## BuddaKaeks (5. Dez 2013)

ok, die lwjgl version  mit der opengl version verwechselt


----------



## Gucky (5. Dez 2013)

Ich schwöre ja noch auf Swing (aus dem Grund, dass ich zu faul bin mir JavaFX runterzuladen  ). Da kannst du relativ leicht die Dinge verändern. Für die Mana und Gesundheitsanzeige nimmst du einen Ladestandsbalken, für die Zahlen Labels, für die Dinge, wo man draufklicken kann eben Buttons.

Aber ich denke in anderen Frameworks ist das nicht anders.

Für das Verändern selbst müsstest du Google zu Rate ziehen. Das hab ich nur ein mal gemacht und das Projekt eingestampft. Aber ich kann dir Ideen zu Aussehen und Anordnung liefern.


----------



## BuddaKaeks (7. Dez 2013)

Swing ist aber im gegensatz zu OpenGl sehr Langsam:

Grund: Swing ist softwaregerendert und Opengl/Lwjgl nutzt einen Hardwaregrafikbeschleuniger, sprich die GPU


----------



## NeoBlyzX (8. Dez 2013)

Kann mir denn keiner mit einem HUD und einem Menü helfen`?


----------



## Ruzmanz (8. Dez 2013)

Warum willst du das selbst machen, wenn du keinen Plan hast, wie das geht? Niemand hat Lust dir etwas zu erklären, wozu es 100 Tutorials und eine ziemlich gute Library gibt. Du willst etwas selbst machen oder lernen? Kein Problem, dann fange mal mit der Selbstbeteiligung an.


----------



## NeoBlyzX (9. Dez 2013)

keinen Plan stimmt auch nicht, ich bin lediglich neu in der grafischen Programmierung...
Ich möchte nur wissen, wie man ein Bild durch ein Zahlenverhältnis (Aktuelles Leben/Maximalen Leben = Volles Bild/X-tel Bild) verändert (so dass die aktuellen HP den Lebensbalken ausfüllen) und wie man Strings an bestimmten Stellen des Bildschirms anzeigt und man Schieberegler etc macht...

dürfte ja nicht so schwer sein, mal einen Link zu einem Tutorial zu posten oder mal Scriptstücke von seinen eigenen Kreationen freizugeben - denn ich habe schon mehrere Stunden vergeblich damit verbracht, ein Tutorial zu finden, geschweige denn eines, dass meinen Ansprüchen gerecht wird und für LWJGL zutreffend ist. (Was für'n Satz...)

Danke


----------



## Ruzmanz (9. Dez 2013)

> Ich möchte nur wissen, wie man ein Bild durch ein Zahlenverhältnis (Aktuelles Leben/Maximalen Leben = Volles Bild/X-tel Bild) verändert (so dass die aktuellen HP den Lebensbalken ausfüllen)



Kommt auf das Bild an. Nehmen wir an es ist nur ein "Rechteck". Dann zeichnest du deinen "leer"-Balken (grau) auf deinen Bildschirm (Position 0/0, Größe: 250/10, Farbe: Grau). Über deinen "leer"-Balken zeichnest du dein Mana-Balken (Position 0/0, Größe: var1/10, Farbe: Blau). Mit einem simplen Dreisatz kannst du den prozentualen Wert deiner Manaanzeige bestimmen ...



> Strings an bestimmten Stellen des Bildschirms anzeigt



Google: "JLWGL Draw String" -> Drittes Ergenis ein Video-Tutorial: Java LWJGL :: Drawing Text without Slick! - YouTube



> Schieberegler etc macht



Ist ein Balken. Wenn in diesen Balken geklickt wird, muss der "Schieberegler" (vertikales Rechteck) einfach auf die Mausposition gezeichnet werden. Zusätzlich wird der Wert des Schiebereglers anhand der Mausposition neu berechnet.



> dürfte ja nicht so schwer sein, mal einen Link zu einem Tutorial zu posten oder mal Scriptstücke von seinen eigenen Kreationen freizugeben - denn ich habe schon mehrere Stunden vergeblich damit verbracht, ein Tutorial zu finden, geschweige denn eines, dass meinen Ansprüchen gerecht wird und für LWJGL zutreffend ist. (Was für'n Satz...)



Nicht böse gemeint, aber welche Erwartungen hast du? Deine stundenlange Recherche muss sehr mühsam gewesen sein -> LWJGL Tutorial - YouTube ... gibt da alles von Menu bis HUD.


----------



## NeoBlyzX (11. Dez 2013)

Ruzmanz hat gesagt.:


> Nicht böse gemeint, aber welche Erwartungen hast du? Deine stundenlange Recherche muss sehr mühsam gewesen sein -> LWJGL Tutorial - YouTube ... gibt da alles von Menu bis HUD.


Ok YT habe ich jetzt nur zu "game programming" durchforstet und nicht so viele gute tutorials gefunden...
Hätte vielleicht konkreter suchen sollen!

Danke, du hast mir sehr geholfen!


----------

