GUI Textur an Bildschirm anpassen

[Djeurissen]

Tagchen,

 

mein erstes Problem fängt schon dabei an eine GUI Textur anzeigen zu lassen, wie schaffe ich es das diese Textur sich dem Bildschirm anpasst?

 

Und nein ich habe nichts hilfreiches im Internet gefunden :/

[Tiles]

Bei sowas musst du dich nach Beispieldateien richten. Ich weiss nicht mehr genau wo ich das für meins herhatte. Ich glaube das war im Lerpz Tutorial mit bei. Das Lerpz Tutorial scheint inzwischen leider offline zu sein. Naja, es war veraltet, und hat schon in Unity 3 Scherereien gemacht. Trotzdem schade.

 

Die vitale Zeile fürs skalieren auf andere Bildschirmauflösungen ist die hier:

 

// Our GUI is laid out for a 1920 x 1200 pixel display (16:10 aspect). The next line makes sure it rescales nicely to other resolutions.
GUI.matrix = Matrix4x4.TRS (Vector3(0, 0, 0), Quaternion.identity, Vector3 (Screen.height / nativeVerticalResolution, Screen.height / nativeVerticalResolution, 1));

 

Hier das komplette Script das mir in meinem Alister die Leben und die Anzahl der Bücher anzeigt:

 

// GameHUD: Platformer Tutorial Master GUI script.
// This script handles the in-game HUD
var guiSkin: GUISkin;
var nativeVerticalResolution = 1200.0;
// Health background image
var healthImage: Texture2D;
var healthImageOffset = Vector2(0, 0);
var healthyImage: Texture2D;
var healthyImageOffset = Vector2(0, 0);
// Pickups background image
var pickupImage: Texture2D;
var pickupImageOffset = Vector2(0, 0);
// the lives count is displayed in the health image as a text counter
var livesCountOffset = Vector2(425, 160);
static var lives =4;
// the lives count is displayed in the health image as a text counter
var pickupCountOffset = Vector2(16, 160);
static var pickup =0;

function OnGUI ()
{
// Set up gui skin
GUI.skin = guiSkin;
// Our GUI is laid out for a 1920 x 1200 pixel display (16:10 aspect). The next line makes sure it rescales nicely to other resolutions.
GUI.matrix = Matrix4x4.TRS (Vector3(0, 0, 0), Quaternion.identity, Vector3 (Screen.height / nativeVerticalResolution, Screen.height / nativeVerticalResolution, 1));
// Health background image
DrawHealth( healthImageOffset, healthImage);

// Pickups background image
DrawPickups( pickupImageOffset, pickupImage);

// Displays lives left as a number.
DrawLabelLivescount( livesCountOffset, lives.ToString() );

//Displays pickups as a number
DrawLabelPickupcount( pickupCountOffset , pickup.ToString() );

// Health background image
DrawHealthy( healthyImageOffset, healthyImage);
}

// Health background image
function DrawHealth (pos : Vector2, image : Texture2D)
{
var scaledResolutionWidth = nativeVerticalResolution / Screen.height * Screen.width;
GUI.Label(Rect (scaledResolutionWidth - pos.x - image.width-16,pos.y+16, image.width, image.height), image);  //position von healthhintergrund bild
}
// Pickups background image
function DrawPickups (pos : Vector2, image : Texture2D)
{

GUI.Label(Rect (pos.x+16, pos.y+16, image.width, image.height), image); // position von Pickups Hintergrundbild
}
// Number of lives left
function DrawLabelLivescount (pos : Vector2, text : String)
{
 var scaledResolutionWidth = nativeVerticalResolution / Screen.height * Screen.width;
GUI.Label(Rect (scaledResolutionWidth - pos.x, pos.y, 100, 100), text);
}
//Number of picked up items
function DrawLabelPickupcount(pos : Vector2, text : String)
{
 var scaledResolutionWidth = nativeVerticalResolution / Screen.height * Screen.width;
GUI.Label(Rect (pos.x, pos.y, 100, 100), text);
}
// Healthy background image
function DrawHealthy (pos : Vector2, image : Texture2D)
{
var scaledResolutionWidth = nativeVerticalResolution / Screen.height * Screen.width;
GUI.Label(Rect (scaledResolutionWidth - pos.x - image.width-16,pos.y+16, image.width, image.height), image);  //position von healthhintergrund bild
}

[Djeurissen]

Erstmal danke und sorry für die späte Antwort.

 

Aber ich glaube ich habe da was falsch verstanden oder erklärt :/

Also ich will das mein Sprite immer den gleichen prozentsatz an Platz einnimmt, eben je nachdem wie groß das Fenster von dem Spiel gerade ist. Wenn ich dieses Skript benutze sorgt es ja nur dafür das es eben seine größe beibehält, ich denke ich habe da was falsch erklärt oder was falsch gemacht...

 

 

Ich habe jetzt einfach mal das matrix skript als Comment gelassen, da es ja nicht das macht was ich will.

void OnGUI ()
{
 //GUI.matrix = Matrix4x4.TRS (new Vector3(0, 0, 0), Quaternion.identity, new Vector3 (Screen.height / nativeVerticalResolution, Screen.height / nativeVerticalResolution, 1));

 if(ImMenue)
 {

  GUI.Box(new Rect(0, 0, Screen.width, Screen.height), "", Layout);
  GUI.Box(new Rect(0, test2, Screen.width, Screen.height), "", Cursor);

 }
}

 

Das Layout ansich funktioniert einwandfrei, aber der Cursor bewegt sich immer zu einer anderen Stelle je nachdem wie groß das Fenster ist und das soll so nicht sein. Er soll eben immer an der selben Stelle verharren.

[schoen08]

var originalWidth = 1280.0;  // define here the original resolution
var originalHeight = 720.0; // you used to create the GUI contents
private var scale: Vector3;




function OnGUI () {
  scale.x = Screen.width/originalWidth; // calculate hor scale
   scale.y = Screen.height/originalHeight; // calculate vert scale
   scale.z = 1;
   var svMat = GUI.matrix; // save current matrix
   // substitute matrix - only scale is altered from standard
   GUI.matrix = Matrix4x4.TRS(Vector3.zero, Quaternion.identity, scale);
 GUI.enabled = true;



//deine gui


// restore matrix before returning
   GUI.matrix = svMat; // restore matrix
 GUI.enabled = true;
}

 

Bei originalWidth / Height gibst du ein Beispiel an, mit dem du arbeitest und dessen Koordinaten zum Beispiel auch im OnGUI Funktionen den "Rand" darstellen. In meinem Fall die typische Android Tablet Größe .

 

Das Script scaled dann passend zur Bildschirmauflösung deine Gui.

[Tiborius]

Hi

 

ich habe den mal hochgeholt weil es um des gleiche Problem geht und ich den Code von @schoen08 benutze.

Also ich habe den gleichen Code nur für C# auf seiner Seite gefunden und da habe ich ein paar fragen dazu.

 

float originalWidth = 1920.0f; // Hier wird die Auflösung festgelegt,
float originalHeight = 1080.0f; // in der die GUI Elemente erstellt werden
private Vector3 scale = new Vector3(0.0f,0.0f,1.0f); //Dieser Vector skaliert später unsere Matrix

void OnGUI () {
	scale.x = (float)Screen.width/originalWidth; // Berechnung der horizontalen Skalierung
	scale.y = (float)Screen.height/originalHeight; // Berechnung der vertikalen Skalierung
	// Skalierung der Matrix
	GUI.matrix = Matrix4x4.TRS(Vector3.zero, Quaternion.identity, scale);
	//
	//Hier wird ganz normal die GUI aufgebaut, basierend auf der Auflösung 1920x1080
	//
}

 

Ich versteh jetzt nicht was das "GUI.matrix" ist. Das wird auch bei mir als nicht definiert angezeigt.

[malzbie]

Grob erklärt definierst du mit der Matrix eine festgelegte GUI Anzeigegröße und Ausrichtung.

Du legst in deinem Fall fest, welche Auflösung die GUi hat also 1920x1080. Egal welche Bildschirmauflösung du tatsächlich fährst, die GUI hat intern die eingestellte Größe. Sie wird bei geringerer Screenauflösung verkleinert und bei größerer vergrößert.

Ein 64x64 Button hat intern immer 64x64 Pixel. Sichtbar ist das natürlich nur wenn du auch die voreingestellte Auflösung als Screenauflösung hast. Würdest du z.B. 1280x1024 als Auflösung haben, dann würden die Button gestaucht werden weil das Verhältnis nicht mehr stimmt. Vorher 16/9 jetzt 5/4. Die GUI tut ja immer noch so, als wären die Pixel in der Breite viel mehr, als sie jetzt wirklich sind.

Der Vorteil bei der Matrix ist aber, dass die Position der GUI Elemente und die Größe selbiger immer im Verhältnis zur Auflösung ist.

Ohne die Matrix würde ein 64x64 button immer auch echte 64x64 Pixel groß sein. Er wäre also bei eine kleinen Aflösung von z.B. 800x600 mächtig groß und bei der Auflösung 1920x1080 ganz schön klein.

 

Aber davon mal ab: Warum nutzt du noch die alte GUI?

[Tiborius]

Ich habe nur im Internet danach gesucht und da habe ich das gefunden.

 

Ich habe aber jetzt auch gesehen das es die Möglichkeit gibt das beim "Canvas Scale" einzustellen. Das hat auf meinen Handys jetzt alles gut geklappt.