Bildschrimbreite Anpassen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Bildschrimbreite Anpassen

    Hallo,

    ich habe ein Problem mit Draw GUI, wo ich nicht genau weiter weiß, was ich da tun kann.

    Eigentlich habe ich immer stur display_set_gui_size(1920, 1080) gesetzt, damit ich eine feste Größe habe mit ich arbeiten kann.

    Jetzt stellt sich aber bei mir das Problem, dass mein Monitor nicht mehr 16:9 besitzt und natürlich die rechte Bildschirmseite sowie auch mittige Elemente nicht mehr an ihrem Platz sind.

    Da kam mir die Idee mit display_get_width() um die Elemente an ihre richtige Stelle zu bringen. Dies hatte den unangenehmen Nebeneffekt, dass meine Breite dadurch das meine Auflösung wesentlich kleiner ist als 1920 alle anderen Elemente zerstört.


    Ich hoffe, hier könnt mir bei meinem Problem weiterhelfen.

    Gruß
    Lu45
  • Benutz am besten Prozent Werte um deine GUI Elemente zu positionieren, anstatt feste Pixel Werte.

    Falls du auch die Größe von GUI Elementen anpassen willst, kannst du eine Referenz-Auflösung nehmen, z.B. 1920x1080, auf die es optimiert ist, und dann im Verhältnis zur tatsächlichen Bildschirmauflösung skalieren.

    Ansonsten erinnere ich mich, dass der GameMaker glaube ich auch Einstellungen hatte, um das Bildverhältnis bei beliebigen Größen beizubehalten und entsprechend schwarze Ränder hinzuzufügen.
  • Hallo,

    danke für deine Antwort.

    Dass man zum Positionieren Prozent angibt, habe ich nicht nie gesehen hast du ein Code Beispiel?

    Vielleicht verstehe ich das auch falsch, aber wenn ich eine Referenz-Auflösung setzte, die beispielsweise 1920x1080 (16:9) ist, bleibt die dann nicht immer 16:9, auch wenn der Monitor 4:3 oder 21:9 besitzt?

    Ja, in Game Maker gibt es eine Einstellung, womit die Seitenrender gleich bleiben, aber genau diese schwarzen Balken möchte ich ja verhindern, wie auch das rechte Elemente auf einmal in der Mitte sind. Sowie das die Texte und Images immer unterschiedliche Größe haben. (Also auf die Ansicht bezogen)
  • Also aktuell benutzt du ja feste Pixelwerte um deine Elemente auszurichten. Ein Element rechts am Rand wäre z.B. an der Position (1800, 500). Wenn sich die Auflösung jetzt ändert ist klar, dass es an genau dieser Stelle bleibt.
    Um das ganze flexibler zu machen, rechnest du die Positionen einfach in Prozentwerte um. In diesem Beispiel wäre das (1800, 500) / (1920, 1080) = (0.9375, 0.4629).
    Das heißt das Element wäre bei 93,75% der Fensterbreite und bei 46,29% der Höhe.
    Ein mittig platziertes Element hätte dann z.B. die Position (0.5, 0.5).
    Um dann die tatsächlichen Pixel Koordinaten zu berechnen, nimmst du die aktuelle Auflösung und multiplizierst sie mit dem angegebenen Prozentwert.
    Bei einer Auflösung von 2560x1080 (21:9) wäre das dann (0.9375, 0.4629) * (2560, 1080) = (2400, 499.93).

    Das gleiche machst du auch, um die Größe von Elementen anzupassen. Sagen wir mal du gehst wieder von einer Referenz-Auflösung von 1920x1080 aus und das Element ist 100 Pixel breit und 50 hoch.
    Um die passende Größe zu berechnen, berechnest du erstmal das Verhältnis der tatsächlichen Auflösung zur Referenzauflösung. Damit das Element am Ende nicht verzerrt ist, sollte man nur eine Achse als Referenzwert nehmen, z.B. die Höhe, da diese sich häufig weniger stark unterscheidet, als die Breite.
    Bei einer Auflösung von 3440×1440 wäre das dann also 1440 / 1080 = 1.33. Das heißt, die neue Größe des Elements wäre (100, 50) * 1.33 = (133, 66.5).

    Häufig haben Spiele zusätzlich in ihren Einstellungen noch die Möglichkeit ein UI Scaling auszuwählen, z.B. 1x, 2x, 4x, usw., welches dann nochmal mit rein multipliziert wird.
    Das gibt dem User nochmal etwas mehr persönliche Flexibilität was die UI Größe angeht. Könnte ja sein, dass jemand dein Spiel auf einem Fernseher 3 Meter entfernt spielt und die UI, auf diese Entfernung, standartmäßig zu klein und unleserlich ist (wie z.B. bei Red Dead Redemption 2 oder noch schlimmer, Hitman 2...). Sowas ist dann recht einfach zu implementieren, wenn du bereits so ein Scaling System nutzt.
  • Hier ein Beispiel.
    Was mir noch eingefallen ist, man kann auch für die Positionierung, anstatt Prozentwerte, den Skalierungsfaktor für die Größenanpassung nutzen, wodurch man eine konsistentere Positionierung bekommt.

    GML-Quellcode

    1. // Referenz Auflösung
    2. var ref_res_h;
    3. ref_res_h = 1080
    4. // Tatsächliche Auflösung
    5. var res_w, res_h;
    6. res_w = window_get_width()
    7. res_h = window_get_height()
    8. // Faktor um Elemente zu skalieren
    9. var scaling;
    10. scaling = res_h / ref_res_h
    11. // Größe für die Rechtecke, die im Nachfolgenden gerendert werden.
    12. var rect_w, rect_h;
    13. rect_w = 200 * scaling
    14. rect_h = 100 * scaling
    15. // Ein Rechteck 10% vom Bildschirmrand entfernt zeichnen.
    16. var rect_x, rect_y;
    17. rect_x = 0.1 * res_w
    18. rect_y = 0.1 * res_h
    19. draw_rectangle(rect_x, rect_y, rect_x + rect_w, rect_y + rect_h, false)
    20. // Ein Rechteck bei (32, 300) px mit der Größe (200, 100) px zeichnen.
    21. // Anders als oben wird hier auch der scaling Faktor zu Positionierung verwendet.
    22. var rect2_x, rect2_y;
    23. rect2_x = 32 * scaling
    24. rect2_y = 300 * scaling
    25. draw_rectangle(rect2_x, rect2_y, rect2_x + rect_w, rect2_y + rect_h, false)
    26. // Ein Rechteck bei 32px vom rechten Bildschirmrand entfernt mit der Größe (200, 100) px zeichnen.
    27. var rect3_x, rect3_y;
    28. rect3_x = res_w - (32 * scaling + rect_w)
    29. rect3_y = 32 * scaling
    30. draw_rectangle(rect3_x, rect3_y, rect3_x + rect_w, rect3_y + rect_h, false)
    Alles anzeigen
  • Nimm den Beispielcode und probier ihn aus. Einfach in ein Projekt kopieren und das Fenster größer und kleiner ziehen.

    Mit konsistenter meine ich, dass z.B. bei 32px Abstand zum Rand, es immer 32px sind, egal ob die Breite 1920 oder 2560 ist (solange die Höhe gleich bleibt). Bei prozentualer Platzierung würde dieser Abstand entsprechend variieren.
    Aber du wirst sehen was ich meine, wenn du es ausprobierst.
  • Benutzer online 1

    1 Besucher