- Home /
ASPECT RATIO FILTER IN OnGUI?
Hello, everyone! I have a simple question that causes me some trouble. We all know the "Aspect Ratio Filter" component. I have a problem with my textures, because they lose the aspect ratio and they get stretched (the position stays the same thanks to my matrix calculations in the code). Can I use something like the Aspect Ratio Filter in my OnGUI function?
Use on your Image components set the "Preserve Aspect" to true.
@Sergio7888 , what do you mean? I cannot add component to my imported texture, because there are only Import Settings there. Thank you! :))
Answer by Bunny83 · May 04, 2017 at 07:55 AM
If you draw a texture inside OnGUI it's drawn as it is. However keep in mind that Unity usually imports textures with a resolution that is a power of two. You have to import the texture with the texture type: "Editor GUI and Legacy GUI". Otherwise your texture might be stretched or distorted to fit into a power of two resolution. For example an image with the size 400x300 would most likely be imported as 512x512. So the width would be upscaled from 400 to 512. To keep the aspect ratio the height would need to be "384". However that is not a power ot two (2,4,8,16,32,64,128,256,512,1024, ...).
The requirement for power of two is hardware related. textures that are not a power of two have problems generating mipmaps. Most hardware is optimised for power of two textures. Some older GPUs even required square textures, so this was not possible: 512x256.
When you import the texture as "Editor GUI and Legacy GUI", Unity will import the texture "as it is", using any odd resolution that the texture might have. Though Unity might be forced to use power of two textures due to hardware limitation, in this case Unity will create a texture that has a size of power of two and add some padding inside the texture. Unity will automatically adjust the used texture coordinates to only show the part of the texture that contains the image information. Note that this only applied to the IMGUI system.
ps: If that doesn't solve your issues, you have to manually tinker with the projection by changing the matrix in a strange way. If you did that you should include your code.
@Bunny83 , thank you for this answer! $$anonymous$$y textures are already "Editor GUI and Legacy GUI".I still get that problem. I use $$anonymous$$atrix for making my elements stay on their positions no matter the resolution, and that works. The problem is the size and the losing of aspect ratio. I am adding two screenshots - one in 16:9, the other in 3:2. You can see what I am talking about.
Answer by toddisarockstar · May 05, 2017 at 12:33 AM
Simple math. Just divide to get the aspect ratio of your texture and apply it in your size
Texture2D tex;
tex=new Texture2D(400,250);
float ratio;
//devide to get ratio between width and height
ratio = (float)tex.height/(float)tex.width;
// simply multiply this number to the height when needed
//displays the original ratio
GUI.DrawTexture (new Rect(10,10,400,400*ratio), tex);
Hello, I have trouble implementing your idea to my code. I cannot copy my whole script here, but take a look at one line of it -
GUI.DrawTexture(new Rect(faceFrame.position.x,faceFrame.position.y, faceFrame.size.x ,faceFrame.size.y), faceFrame.texture[0] );
When I try to implement your idea, I cannot pass width and height to texture[]. I did it in another script, but there I was not able to see the texture itself (but I think it worked about the lost of ratio). I will be really thankful if you give me a hint on how to implement it. THAN$$anonymous$$ YOU! :))
Im not sure how your class is set up cause i cant see it. Assu$$anonymous$$g your code is currently working correctly to show your texture as a square box, this would shrink or stretch the height to match the original image's aspect ratio.
float ratio;
ratio = (float)faceFrame.texture[0].height/(float)faceFrame.texture[0].width;
GUI.DrawTexture(new Rect(faceFrame.position.x,faceFrame.position.y, faceFrame.size.x ,faceFrame.size.y*ratio), faceFrame.texture[0] );
all you do is devide the original images height by its width. then multiply that number to the last number in the Rect.
if you haven't done much division In C#, When dividing int numbers like texture sizes. you have to cast to floats for accuracy. but that's another question! in my first example i assigned a blank texture for example purposes just to show you that it works. that's why its grey.
Now I understand. $$anonymous$$morow when I wake up, I will try this. THAN$$anonymous$$ YOU! :))
Answer by RealGamesStudio · May 09, 2017 at 05:49 AM
@toddisarockstar , It does not work properly, I don't know why. The texture is still getting stretched in different resolution. Do you think this might happen because your works, but I am resizing GUIMatrix?
void ResizeGUIMatrix()
{
// Set matrix
Vector2 ratio = new Vector2(Screen.width/defaultScreenRes.x , Screen.height/defaultScreenRes.y );
Matrix4x4 guiMatrix = Matrix4x4.identity;
guiMatrix.SetTRS(new Vector3(1, 1, 1), Quaternion.identity, new Vector3(ratio.x, ratio.y, 1));
GUI.matrix = guiMatrix;
}
I will be really thankful if you help me! :))
Your answer
Follow this Question
Related Questions
How do I script a GUI Texture as a button, if it's being called from a public variable? [C#] 1 Answer
Changing screen resolution is cutting the very edge of my screen off 1 Answer
Touchless GUI Interface - Button Mouseover Emulation 1 Answer
Best approach to define interactive screen areas regardless of it's resolution? 3 Answers
Load a sprite as a texture from. 1 Answer