How to make Full Screen Image with Canvas

На заметку

tl;dr
You can download the ready script if you don’t have time to read how it works.



At first create Canvas and make sure that it has “Canvas Scaler” component, where the UI Scale Mode option is set to Scale With Screen Size.


Add an image into that Canvas (right-click on it in scene hierarchy and choose UI → Image) and adjust it as you like (choose image itself, etc.)
Add a new script to your image.
Add Component → New Script and then Choose C sharp language and any name for your new script. I chose “UIFullscreenifier”.


Then right-click on it and choose Edit Script.



As far as we’re going to work with Rect Transform component of our Image, I’d like to get it once the script gets activated to always have it near at hand.

Thus I declare a variable to store it in inside class:

1
RectTransform rectTransform;

And I create OnEnable method of the class to get the component inside it.
If there’s no Rect Transform component, then our script just will have nothing to work with, so I remove it in this case and add a message into debug log:

123456789
void OnEnable()
{
	rectTransform = GetComponent<RectTransform>();
	if (rectTransform == null)
	{
		Debug.Log("UIFullscreenifier works only with Canvas GUI elements!");
		Destroy(this);
	}
}

На заметку

Yes, I’m aware of the RequireComponent attribute, but it would automatically add the specified component to the gameObject. In our case it would just add mess. So I decided to do it in my own way.


Now we need to also find the Canvas our element is attached to and get it’s RectTransform component. So I declare a variable for that:
1
RectTransform canvasRectTransform;

Since Canvas is usually the root in the hierarchy of a GUI, I suggest to find it through RectTransform.root. Then, if it’s not null, I get the RectTransform component just as I did with image’s own RectTransform. Thus our OnEnable function would look like this:
12345678910111213141516171819
	void OnEnable()
	{
		rectTransform = GetComponent<RectTransform>();
		if (rectTransform == null)
		{
			Debug.Log("UIFullscreenifier works only with Canvas GUI elements!");
			Destroy(this);
		}

		if(rectTransform.root != null)
		{
			canvasRectTransform = rectTransform.root.GetComponent<RectTransform>();
			if (canvasRectTransform == null)
			{
				Debug.Log("UIFullscreenifier works only with Canvas GUI elements!");
				Destroy(this);
			}
		}
	}

Okay, now since we have RectTransform components of both Canvas and Image, we can now change Image’s scale inside the Update Method. With and height are stored in RectTransform’s sizeDetla property:
1234
void Update ()
{
	rectTransform.sizeDelta = canvasRectTransform.sizeDelta;
}

Файл: UIFullscreenifier.cs
Script download link
As you see I just get size of the Canvas and put it into the Image’s size. Now it works and the Image is always fullscreen! You can test it by choosing different screen aspects in Unity player.

By the way our script also works with any GameObjects with RectTransform component like buttons, panels, etc.!

Here is the final variant of the code and download link:

12345678910111213141516171819202122232425262728293031323334353637
// UI Fullscreenifier component by Dmitry Maslov
// See comments at:
// http://maslov.co/blog/index/view/id/137

using UnityEngine;
using System.Collections;
 
public class UIFullscreenifier : MonoBehaviour
{
	RectTransform rectTransform;
	RectTransform canvasRectTransform;
 
	void OnEnable()
	{
		rectTransform = GetComponent<RectTransform>();
		if (rectTransform == null)
		{
			Debug.Log("UIFullscreenifier works only with Canvas GUI elements!");
			Destroy(this);
		}
 
		if(rectTransform.root != null)
		{
			canvasRectTransform = rectTransform.root.GetComponent<RectTransform>();
			if (canvasRectTransform == null)
			{
				Debug.Log("UIFullscreenifier works only with Canvas GUI elements!");
				Destroy(this);
			}
		}
	}
	
	void Update ()
	{
		rectTransform.sizeDelta = canvasRectTransform.sizeDelta;
    }
}

You can leave a comment with "Facebook":
Не забывайте оставлять комментарии при помощи "ВКонтакте":
Яндекс.Метрика