Wie fixe ich meine GUIs oder DxDraw's

SenZe

Hey Leute,
da sich, wie ich das mitbekommen habe, bei einigen Personen die Frage aufwirft wie man es "verhindern" kann das sich seine GUIs bzw seine Draws auf verschiedenen Auflösungen ändern, habe ich mich entschlossen dieses Tutorial zu schreiben um bei einigen Licht ins dunkel zu bringen.

Ich mach das an Meinem Beispiel für ein GUI was ich mir einfach spontan Ausdenke sprich Position etc. pp. .

Vorerst was brauche ich dafür?

Ein GUI oder ein DX
Verständnis für Mathe und Logik
Wenigstens etwas Ahnung von Lua und MTA für Newbies die kein Lua können ist hier schon Schluss!

Die Praxis

Als erstes setzen wir jetzt einfach mal fest ich habe eine Auflösung von 1280 x 1024.
Damit wir diese auch beim Scripten nutzen können setzen wir dazu ganz oben (Geschmackssache) erst einmal die Variablen damit wir die unsere Auflösung bekommen.
Dazu nutzen wir die Funktion guiGetScreenSize().
Das machen wir auch gleich mal:

Lua

local sWidth, sHeight = guiGetScreenSize()

Jetzt müssen wir uns einen Rechnung überlegen mit der wir für Jede Auflösung die selben Werte setzen würden dies ist einfach als es vllt grade klingen mag für einige denn das ist eigendlich Grundschule.

Die Rechnung lautet: Die aus der Funktion resultierende Auflösung durch die Auflösung mit der Ich scripte, in meinem Fall also 1280 und 1024

Lua

local sWidth, sHeight = guiGetScreenSize()


local px = sWidth/1280
local py = sHeight/1024

Schon erhalten wir die Werte mit denen wir jetzt Arbeiten werden.

Jetzt erstellen wir einfach mal ganz kurz und knapp ein Fenster (guiCreateWindow(...)).
Desweiteren werde ich schon die Rechenoperationen mit einbauen um das Fenster richtig zu positionieren.
Mehr dazu dann unten...

Lua

function myGUI()
wdwGUI = guiCreateWindow(400*px, 400*py, 300*px, 200*py, "Fenstername", false)


end

Ihr seht ich habe unseren Wert den wir uns oben ausgerechnet haben ganz einfach mit der Position in Pixel die ich wünsche multipliziert so wird diese Position bei jeder Auflösung gleich sein.

Jetzt werde ich noch ein Label (guiCreateLabel(...))einbauen wo einfach steht "Hallo Welt".
Mehr dazu wieder unten...

Lua

function myGUI()
 wdwGUI = guiCreateWindow(400*px, 400*py, 300*px, 200*py, "Fenstername", false)
 
guiCreateLabel(1*px, 10*py, 300*px, 200*py, "Hallo Welt", false, wdwGUI)


 end

Jetzt habe ich ein Label ganz oben links in der Ecke des Fensters erstellt nun zur Erklärung denn hier kommt mit der wichtigste Teil...

Als wir das Fenster oben erstellt haben haben wir gleichzeitig auch einen Bereich erstellt der wichtig ist für Elemente Innerhalb des Fensters wie Bilder, Teste, Edit-Fields und und und.
Diese Grenzen sind die Länge und die Breite des GUI Fensters, also diese Werte die ich mit Rot markiert habe:

guiCreateWindow(400*px, 400*py, 300*px, 200*py, "Fenstername", false)

Wir können also NICHT über diese Grenzen hinweg etwas erstellen.

Um jetzt eine Position innerhalb unseres Fensters rauszubekommen ist einfach nur etwas Mathe (meißt geht das im Kopf) nötig.

Wir gehen mal von einer Position aus in einem mit absoluten Werten, festgelegten GUI

z.B. guiCreateLabel(0.4, 0.4, 0.3, 0.2, "Hallo DU :>", true)

Hier wüssten wir in Etwa wo das Label platziert wäre ABER diese möglichkeit würde ebenfalls auf verschiedenen Auflösungen anders aussehen und das wollen wir ja nicht!

Trotz dessen beachten wir einmal von der Position her die 0.4 denn die ist jetzt für unsere Rechnung wichtig um die Position unseres Elements festzulegen.

Dazu rechnen Wir wie folgt:
Unsere MaxLänge im Fenster ist 300 Pixel also ist 300 = 1.0, wir wollen aber 0.4 also Rechnen wir 300 / 10 = 30.
30 wäre dann in unserem Fall 0.1, wenn wir als jetzt 0.4 wollen rechnen Wir 30 x 4 = 120.

Also wäre 0.4 im Inneren unseres GUI-Fensters = 120 (Pixel).

So könnt Ihr alle Positionen wie bzw die Länge für ein Edit Feld oder die Höhe oder Anfangs X-Achse und Anfangs Y-Achse ausrechnen.

Es ist eigendlich ganz simpel wenn Ihrs einmal raushabt dann geht ganz schnell wie von allein.

Ich hoffe ich konnte einigen damit helfen.

Wenn Ihr Fragen dazu habt dann könnt Ihr mir die her gern stellen.

GreeZe SenZe

PS:

Kleine Unterschiede sind auch hier zu sehen aber es sieht schon sehr ähnlich aus!

Jetzt mitmachen!