Jump to content
Unity Insider Forum

Canvas - UI - Handy-Auflösung


Recommended Posts

Hallo,

 

ich habe gestern mit Unity begonnen. Soweit komme ich eigentlich ganz gut klar. Allerdings habe ich mit der Oberfläche noch kleinere Probleme. Mein Ziel ist erstmal zum Üben meine jetzige Java-App in Unity umzusetzen.

 

Also habe ich erstmal ein Canvas hinzugefügt und den Canvas Scaler auf Scale With Screen Size eingestellt. Die Auflösung habe ich dann auf 1080 x 1920 eingestellt, was der Auflösung von meinem Nexus 5 entspricht.

Nun würde ich gerne ein Menü erstellen, was so ca. 3/4 der Breite des Bildschirms entspricht. Also habe ich die Buttons einfach extrem in die Breite gezogen. Wenn ich mir das Ergebnis nun auf dem Smartphone anschaue, dann hat das auch gut funktioniert. Die Buttons nehmen tatsächlich ca. 75% der breite des Bildschirms ein (war ja auch zu erwarten, da ich die Auflösung des Scalers ja auf meine Smartphone-Auflösung eingestellt habe).

Der Text der Buttons ist aber ziemlich gestaucht. Und das sieht natürlich ziemlich hässlich aus.

 

Ich bin mir momentan aber gar nicht sicher ob ich Unity an dieser Stelle richtig bediene. Mich irritiert das ganze noch etwas, weil das Canvas nicht die Auflösung annimmt, welche ich eingestellt habe, sondern scheinbar die tatsächliche Größe des Canvas nur intern auf meine Auflösung mapt.

 

Daher wollte ich hier jetzt mal nachfragen wie ihr sowas machen würdet? Mein Ziel ist es eigentlich bei einer Auflösung von 1080x1920 (also ein Smartphone hochkant) ein schönes Menü zu erstellen.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Du machst das schon richtig, denn du hast ja eingestellt, dass der Button 75% der Breite einnehmen soll.

Wichtig dabei sind deine Anker, die an den Ecken des Buttons liegen und bei denen du einstellen kannst, auf welchen Ursprungspunkt sie sich beziehen.

Schau mal hier: http://docs.unity3d....asicLayout.html

 

Und natürlich wird die Textur des Button auch in die Breite gezogen, wenn du den Button selbst in die Breite ziehst.

Hast du eine Buttontextur, die erhaben ist, dann empfiehlt sich ein Sliced GUI-Sprite zu erstellen. Dein Button Sprite wird dabei in 9 Teile zerteilt. Beim Skalieren werden nur gewisse Teile in die Breite und oder höhe gezogen. So hast du einen Button, der am Rand immer gleich aussieht weil horizontale Teile nur horizontal skalieren und Vertikale nur vertikal. Lediglich die Mitte dehnt sich in beide Richtungen aus.

Hier zu sehen:

http://docs.unity3d....Components.html

Link zu diesem Kommentar
Auf anderen Seiten teilen

Erstmal vielen Dank für die Antwort. Dann bin ich ja schonmal froh, dass ich vom Grund-Gedanken her richtig arbeite.

Das mit den Ankern habe ich verstanden. Dieses Verhalten kenne ich von der .NET Entwicklungs mit Windows-Forms noch, da musste man auch Anker setzen, damit das Fenster-Layout beim resizing intakt gehalten wurde.

 

Das einzige was mich an deiner Aussage etwas verwirrt ist das hier:

 

Und natürlich wird die Textur des Button auch in die Breite gezogen, wenn du den Button selbst in die Breite ziehst.

 

Das scheint mir nämlich nicht der Fall zu sein. Ich ziehe den Button extrem in die breite. Dadurch sind ungefähr 4/5 des Buttons ohne Text. Und der Text nimmt nur einen extrem kleinen Teil des Buttons ein (die Mitte eben).

Wenn ich mir das nun auf dem Smartphone anschaue, dann ist das Layout dort noch dasselbe. 2/5 leerer Button, dann 1/5 Text und dann nochmal 2/5 leerer Button. Aber der Text in der Mitte ist eben extrem zusammengedrückt und sieht dadurch extrem hässlich aus.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Das Problem tritt ebenso im Querformat auf. Ich hab den Canvas Scaler jetzt mal mit 1920x1080 ausprobiert. Und hier jetzt mal zwei Screenshots. Einer von meinem Pc mit einer Auflösung von 1920x1080, dort sieht alles schön scharf und gut aus. Und ein zweiter Screenshot von meinem Smartphone, natürlich auch mit einer Auflösung von 1920x1080.

 

Beim Smartphone sieht man deutlich wie zusammengedrückt und unscharf das alles aussieht. Ich hab auch schon die Pixel Perfect Einstellung vom Canvas ausprobiert. Die Buttons sind auch mit dem Sprite Editor gesliced. Aber man sieht ja auch dass nicht nur die Buttons, sondern auch der ganz normale Text gestaucht wird.

 

Ich hoffe man kann die Problematik jetzt an den Screenshots gut erkennen.

post-5630-0-80585100-1444065371_thumb.png

post-5630-0-96674200-1444065374_thumb.png

Link zu diesem Kommentar
Auf anderen Seiten teilen

Ah, das meinst du. Ja da ist eindeutig etwas in der Auflösung falsch.

Es gibt ja in Unity, je nach Medium auf das gebuildet werden soll, unterschiedliche Einstellungen. Es könnte sein, dass dort irgendwelche Kompressionen an sind.

Schalte doch mal dein Projekt um. Momentan bist du ja auf PC, MAC, Linux.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Archiviert

Dieses Thema ist jetzt archiviert und für weitere Antworten gesperrt.

×
×
  • Neu erstellen...