GUI Scaling - World of Warcraft-like

Hello,

I’ve been trying to find some ways to implement this, but hopefully someone here would have a good idea on where to start from.
The thing I’m trying to achieve is the scaling of the GUI based on the slider in settings.
As in, GUI is at 100% it’s size at start, but the player could move this value down to 90, 80, 70, 60% of the original size. I need the GUI to scale down just like in World of Warcraft, they have that option in the Settings screen. ( http://www.blogcdn.com/wow.joystiq.com/media/2013/04/ui-scale-slider.jpg )

Thank you in advance for your replies, much appreciated!

There could be countless ways to achieve this. But the first what came to my mind is create GUI Rect initialization method. By default scale will be 1.0, so we use it at on start, or load it from playerprefs.

*Edit: i wanted you give you approximate code example but i ended up writing almost everything.

Here’s a ready code, with test scaling in Update(), without actual gui slider, but i think you can handle that yourself :wink:

using UnityEngine;
using System.Collections;

public class Test : MonoBehaviour {
private float uiScale = 1.0f;

private Rect rect_health_bar;
private Rect rect_mana_bar;
private Rect rect_compass;
//and so on

private void Start(){
	//load uiScale from playerprefs if we have such record
	InitializeGUI(uiScale);
}

private void InitializeGUI(float newScale){
	rect_health_bar = new Rect(0,0,100*newScale,20*newScale);
	rect_mana_bar = new Rect(0,0,100*newScale,20*newScale);
	rect_mana_bar.center = new Vector2(Screen.width - rect_mana_bar.width/2f, rect_mana_bar.center.y);
	//and so on
}

private void OnGUI(){
	//draw your rects
	GUI.Box(rect_health_bar, "");
	GUI.Box(rect_mana_bar, "");
	
	//create a slider which will imitate value from ~0.1 to 2.0 or something like that
	//When you draw the slider run the InitializeGUI (newSize); method and pas in the new float
}

//------TEST-----------
private float test_size = 0.1f;
private bool add = true;
private void Update(){
	InitializeGUI (test_size);

	if(add){
		test_size += Time.deltaTime/2f;
		if(test_size > 1.0) add = false;
	}
	else{
		test_size -= Time.deltaTime/2f;
		if(test_size < 0.1) add = true;
	}
}
//--------------------
}

And here’s a web demo.
https://dl.dropboxusercontent.com/u/84339701/Showcase/GUI%20scaling/test.html