Anfängerfrage: Aspect Ratio

[Supermicha]

Moin zusammen:

für alle, die nicht viel lesen wollen:
Wie schaffe ich es, dass sich meine UI-Elemente nicht kreuz und quer bewegen, wenn ich das Spiele-Fenster hin und her skaliere?

Für alle, die etwas mehr Muße zum lesen haben:
Hallo ich bin neu hier. Ich komme eher aus dem Bereich Webentwicklung / Webdesign und kenne mich daher mit HTML/CSS/PHP und so aus...

Ich wollte jetzt mal eine GameEngine versuchen um die Probleme von browserbasierten Spielen zu umgehen...
Angefangen hab ich mit Renpy (bitte nicht lachen )

Jetzt bin ich bei Unity gelandet und versuche mich erstmal an 2D-Games...

Ich konnte mit Hilfe von Tante Google schon viele Probleme umschiffen, wobei mir immernoch Dinge wie globale Variablen fehlen, aber das ist ein anderes Thema...

Aktuell stehe ich vor dem Problem, das ich absolut keinen Plan habe, wie ich Elemente (pixelgenau) positionieren kann.
Ich positioniere ein Element über dem Hintergrund. Sobald ich (selbst im Editor) das Seitenverhältnis ändere, verschiebt sich alles und sieht echt bescheiden aus...

Dieses responsive Verhalten war eines der Hauptgründe, warum ich von browserbasierten Spielen Abstand nehmen wollte...
(In Renpy funktioniert sowas übrigens Out-of-the-Box )

Ich hab schon alles, mir bekannte, versucht...
mein Canvas hat eine feste Reference Resolution... (der Screen Match Mode scheint überhaupt nichts zu ändern...)
in den Player Settings hab ich ausschließlich 16:9 angeklickt...
und und und...

ich habe die letzen Tage nur damit verbracht, irgendwelche Foren nach Lösungen zu durchsuchen, es finden sich auch viele Threads wo Leute damit Probleme haben, aber irgendwie keine zufriedenstellenden Lösungen...

 

Ich will doch nur folgendes:
Wenn ich z.B. ein Hintergrund mit einem Haus drauf habe und direkt auf der Haustür einen UI-Text "Tür", dann soll dieser Text auch direkt auf der Haustür bleiben, egal welches Format der Bildschirm oder das Fenster hat... und nicht das der "Tür"-Text auf einmal auf dem Schornstein hängt...

Genau das gleiche Problem habe ich mit "Pop-Up"-Menüs... ich habe einem schönen Hintergrund als Bild, wo dann verschiedene UI-Elemente passend drauf angezeigt werden sollen, jedoch scheinen sich die Maße von Hintergrund und UI-Elementen wahrlos und unterschiedlich hin und her zu verändern, wenn das Fenster seine Größe ändert...

Mir wäre es wurscht, ob Unity, je nach Bildschirm-/Fenster-Format schwarze Balken horizontal oder vertikal anzeigt, oder im schlimmsten Fall das ganze Bild zieht oder staucht, nur sollen die UI-Elemente genauso mit verändert werden.........

das muss doch machbar sein...
kann mir jemand erklären, was ich falsch mache/anders machen muss??
ich bin auch dankbar für einen Link zu einem entsprechenden Turorial... (egal ob englisch oder deutsch)
ich kann auch, wenn nötig, ein paar Screenshots bringen oder so... aber ich denke, das Problem ist verständlich..... hoffe ich...

[Sascha]

Moin!

Du hast bei UI mehrere Einstellungen zum Thema relative Positionierung. Wenn du im Inspektor deine RectTransform-Komponente anschaust, dann hast du oben links so ein Kästchen, mit dem du Anker und Pivot deines Objekts einstellen kannst. Schau dir am besten dafür mal diese Seite an.

Beim Popup empfehle ich, nicht über RectTransform-Eigenschaften zu skalieren, sondern über Transform.localScale (im Inspektor "Scale"). Pixel Perfect willst du, auch wenn du es sonst an hast, während des Skalierens aus haben, sonst ruckelt's. Schließlich runden sich die Objektkanten damit auf ganze Pixel.

Den Canvas Scaler hast du dafür auch schon richtig angefasst. Hier hast du Infos über den. Sehr üblich für ein Verhalten wie bei nicht-UI-Objekten ist "Scale with Screen Size" und dann "Match Width or Height" komplett auf Height gezogen.

Wenn du ansonsten CSS und Flexbox gerne hast, kannst du UGUI auch liegen lassen und dir UI Toolkit anschauen. Das ist das neuere UI-System, das beides hat. Das ist noch Bleeding Edge, daher wird es noch nicht uneingeschränkt empfohlen, ist aber schon ganz schick imo. Hier hast du den Vergleich zwischen den UI-Systemen, als Entscheidungshilfe.

[Supermicha]

Hallo Sascha,

vielen Dank für die schnelle und umfangreiche Antwort. 👍🏼👍🏼👍🏼

Ich werde mir die Links und die empfohlenen Möglichkeiten mal in Ruhe ansehen und melde mich dann ob es so geklappt hat oder obs noch Fragen gibt...

[Supermicha]

So ich habe jetzt mal ein paar Tage rumprobiert:

@Sascha der Hinweis mit dem Anker und Pivot war super.
Ich bin immernoch kein Fan von dieser responsiven Positionierung, aber ich komme so langsam damit irgendwie zurecht. und da ich erstmal nur für mich selber programmiere, verkneife ich mir einfach das Fenster zu stark in der Größe zu ändern.

das UI Toolkit hab ich mir auch angesehen aber erstmal wieder beiseite gelegt:
mich stört das ich alles in einem extra Fenster bearbeiten muss und auf Objekte darin zugreifen zu können muss ich wieder anders vorgehen als in der "normalen" Oberfläche, dabei habe ich das System grade erst angefangen zu verstehen.