GUI Texture scale?

Unity Engine
1

Hi !

I wanna use a semi opaque pic as GUI texture… is there a way to make that texture always fill the same percentage of the window, no matter which resolution I choose?

2

Setting the GUI Texture’s scale to non-zero values should do the trick. For example (0.5, 0.5, 0) means it will be half as wide and half as tall no matter what the resolution is as those are screen-relative coordinates.

3

Wow, cool !

Is that possible with GUI text as well? I want a little manual within a box…

Do I have to disable Pixel Correct and use scaling on the text as well ?

4

Yes you can scale GUI Text elements, but it’s not quite the same. Disable Pixel Correct to have any scale changes used, but they aren’t screen-relative sizes at all and the image is a stretch bitmap of the text (the text doesn’t scale like vector outlines). Therefore when needing resizable text scaling in particular isn’t usually the way to go.

5

Alright… please don’t get bored by my stupid questions. :wink:

I’ve used the ratio fixer script from the wiki to keep my textbox always the same scale.

But how can I make screen-relative font sizes?

6

Uncheck “pixel correct” and set the pixel offsets to zero.

7

I have a title screen with a large game logo at the top of the screen.

I need a way of scaling the guitexture/logo so that it fills the same space at different resolutions.

Setting the Scale to 0.5,0.5,0 does work however it does not constrain the dimensions - it seems to warp the image.

I need a way of scaling the image based on the screen width and height - should be a simple scaling script but I just haven’t been able to nail it as yet.

Any starters would be great thanks.

-JeffAU

8

http://www.unifycommunity.com/wiki/index.php?title=GuiRatioFixer

–Eric

9

I’m sure someone will say sheesh Jeff there is an easier way to do this…but until then here is my current best attempt:

var xpos : float;
var scaledWidth : int;
var scaledHeight : int;
var imageRatio : float;
var originalWidth : int;
var originalHeight : int;
var screenRatio : float;

function Start(){
	ScaleImage();
	
	xpos=Screen.width/2-(scaledWidth/2);
	
	transform.position = Vector3.zero;
	transform.localScale = Vector3.zero;
	guiTexture.pixelInset = Rect (xpos, Screen.height-scaledHeight, scaledWidth, scaledHeight);
	
}


function ScaleImage () {

originalWidth= guiTexture.texture.width;
originalHeight= guiTexture.texture.height;
screenRatio = (Screen.width / Screen.height);
imageRatio= (originalWidth / originalHeight);
	if(imageRatio <= screenRatio) {
		// The scaled size is based on the height
		scaledHeight = Screen.height;
		scaledWidth = (scaledHeight * imageRatio);
	} else {
		// The scaled size is based on the width
		scaledWidth = Screen.width;
		scaledHeight = (scaledWidth / imageRatio);
	}
	
}

To use the code above, create a GUITexture and drag on your Texture. Then add the script above to the GUITexture. You shouldn’t need to make any changes and your texture should scale as resolutions change.

Please post any ways to enhance this code. Now I’ll look at how to do this with GUIText

-Jeff

10

Wow Eric thanks for that - It doesn’t seem to maintain the image aspect ratio (scale proportionally) though does it?

My code below keeps the proportions in-tact … this version calls ScaleImage in the Update so you can resize the editor window to see it change rather than just on Start.

var xpos : float;
var scaledWidth : int;
var scaledHeight : int;
var imageRatio : float;
var originalWidth : int;
var originalHeight : int;
var screenRatio : float;

function Update(){
	
ScaleImage();	
	
}

function ScaleImage () {

originalWidth= guiTexture.texture.width;
originalHeight= guiTexture.texture.height;
screenRatio = (Screen.width / Screen.height);
imageRatio= (originalWidth / originalHeight);
	if(imageRatio <= screenRatio) {
		// The scaled size is based on the height
		scaledHeight = Screen.height;
		scaledWidth = (scaledHeight * imageRatio);
	} else {
		// The scaled size is based on the width
		scaledWidth = Screen.width;
		scaledHeight = (scaledWidth / imageRatio);
	}
	
	
	xpos=Screen.width/2-(scaledWidth/2);
	
	transform.position = Vector3.zero;
	transform.localScale = Vector3.zero;
	guiTexture.pixelInset = Rect (xpos, Screen.height-scaledHeight, scaledWidth, scaledHeight);
	
}
11

Well, it does maintain the aspect ratio; that’s what it’s for. There’s also: http://www.unifycommunity.com/wiki/index.php?title=GuiRatioFixer2

–Eric

12

Thanks Eric - I certainly appreciate your help. I must be doing something wrong though. My image is smaller than my screen width and height but once I add the Fixer2 script and run my game the image stretches to beyond the screen width.

My script above seems to do the job perfectly for my purpose though so I’m happy to leave it without getting the other script working. However if there is a sample project for AspectCorrection.js I’d be happy to test it and see what is different with my project and the sample.

Thanks

Jeff

13

If your script is working fine then there’s no need to do anything else, I’d say. :slight_smile:

–Eric