IMPORTANT UPDATE

I have cre­at­ed a more com­plete and sim­ple to use solu­tion, it is a Uni­ty pack­age to down­load and import, with a pre­fab that when dragged into the Can­vas auto­mat­i­cal­ly pro­duces the fade effect, you can cus­tomize sev­er­al para­me­ters in the inspec­tor. You can down­load the Uni­ty Pack­age in the link below:

New Fade IN/OUT solu­tion for Uni­ty here!

Here you have the video explain­ing the new solution:

OLD ARTICLE BELOW

Introduction

In this arti­cle we're going to see a sim­ple way to dark­en the screen in Uni­ty using an image com­po­nent. This can be very use­ful for exam­ple to use as a tran­si­tion in a scene change.

In the video below I explain how to use it, but I do not explain how it works, if you are inter­est­ed in know­ing about pro­gram­ming lev­el oper­a­tion con­tin­ue read­ing this article.

🟢 Fade In — Fade Out Effect for Unity

Download Unity Package and Import

Down­load Game­Con­troller and UIMan­ag­er scripts.

Step-by-step solution

Elements of the hierarchy

We will cre­ate all the ele­ments nec­es­sary to solve the prob­lem. First an emp­ty GameOb­ject that we will call "Game­Con­troller" and a GameOb­ject type Can­vas that is the one that will con­tain all the ele­ments of the graph­i­cal interface.

In fig­ure 3 we see these ele­ments cre­at­ed and placed at the begin­ning of the hierarchy.

Image to dim the screen

The next thing we do is cre­ate an Image as a child of GameOb­ject UI. This image will be used to block the vision of the camera.

---

In the inspec­tor in the image com­po­nent we make the col­or black.

Canvas Scaler Setup

Let's go to the GameOb­ject UI and in the inspec­tor, in the com­po­nent Can­vasS­caler we select the mode "Scale with screen size" in the field "UI Scale Mode" (fig­ure 6). With this we can make the ele­ments of the graph­i­cal inter­face mod­i­fy their size accord­ing to the size of the screen.

For the ref­er­ence res­o­lu­tion we are going to use 1920 x 1080 pix­els, which is known as Full­HD resolution.

The con­fig­u­ra­tion of the Can­vasS­caler should be done at the begin­ning, before plac­ing the ele­ments of the graph­i­cal inter­face. Oth­er­wise we will have to mod­i­fy all the ele­ments again to adjust them to the new configuration.

We return to the GameOb­ject image and adjust its size to 1920 x 1080 to cov­er the entire screen. If every­thing works well the screen should look like in fig­ure 9.

In the black col­or of the image we are going to make the Alpha com­po­nent 0, this way it will be transparent.

Now we are going to cre­ate a cou­ple of but­tons to exe­cute the func­tions that we will lat­er define in the Scripts.

Buttons

We are going to call the first one Black­out­But­ton which is the one that is going to take care of dark­en­ing the screen completely.

We adjust the sizes and col­ors to taste.

We must make sure that the but­ton is below the image in the hier­ar­chy, that way the black screen will be drawn first and then the but­ton, as we see in fig­ure 14.

Once we con­fig­ure the Black­out but­ton we are going to dupli­cate it and give it the name "Pause­But­ton", we accom­mo­date it where we like on the screen. In fig­ure 16 is my result.

C# Scripts

Now we are going to cre­ate two C# Scripts, the first one we will call "Game­Con­troller" and the sec­ond "UIMan­ag­er".

The Game­Con­troller Script is assigned to the GameOb­ject with the same name. We can select it and drag it to the inspec­tor or use the "Add Com­po­nent" button.

The UIMan­ag­er Script is assigned to the GameOb­ject "UI".

GameController Script

The Game­Con­troller Script is respon­si­ble for indi­cat­ing when the screen should be dark­ened and at what opac­i­ty val­ue it should be set. It does not con­trol the image object direct­ly, this is the respon­si­bil­i­ty of the UIManager.

Game­Con­troller will have two func­tions, one will be the Black­out func­tion which will tell the UIMan­ag­er to com­plete­ly dark­en the screen and the oth­er will be the Pause func­tion which will cause the screen to dark­en 50%.

Fields and Initialization

We are going to define a UIMan­ag­er type object to have the ref­er­ence of the UIMan­ag­er Script assigned to the GameOb­ject UI in order to be able to access its pub­lic methods.

We're also going to need two boolean vari­ables to indi­cate if black­out and pause are enabled.

In the Start method we find the ref­er­ence of the UIMan­ag­er Script assigned to the GameOb­ject UI with the instruc­tion 13 shown in fig­ure 23. Then we put in false the boolean variables.

Methods

So that the Script ful­fills the two func­tions that we said, we are going to define two pub­lic meth­ods, one will be called "Black­out­Func­tion" and the oth­er "Pause". These meth­ods will be exe­cut­ed when press­ing the but­tons of the graph­i­cal interface.

If you want to know more about meth­ods I invite you to read this arti­cle I wrote ear­li­er, talk about what a method is intu­itive­ly, there is also a video on the chan­nel.

In the Black­out­Func­tion method the first thing we do is invert the state of the boolean vari­able black­outAc­ti­vat­ed, so if it was in false now it's going to be true and visceversa.

Then we check the state of that vari­able and we will exe­cute a UIMan­ag­er Script method with the appro­pri­ate para­me­ter. At this point we have not yet writ­ten the "Set­Black­outOpac­i­ty" method of UIMan­ag­er, so if you write lines 23 and 27 of fig­ure 24 you will have an error.

In the Pause method we are going to do the same thing but instead of com­plete­ly dark­en­ing the screen we are going to make it dark­en to half the opacity.

Lines 23, 27, 37 and 41 can be writ­ten after work­ing on the UIMan­ag­er Script.

UIManager Script

This script will con­trol the para­me­ters of the image to dim the screen.

In order to do so, it will con­stant­ly exe­cute the Black­out func­tion that will grad­u­al­ly mod­i­fy the opac­i­ty of the image. In addi­tion it will have a pub­lic method called "Set­Black­outOpac­i­ty" that will allow to tell the lev­el of opac­i­ty wished, 0 means invis­i­ble black screen, 1 is com­plete­ly vis­i­ble black screen.

Fields and Initialization

To solve the behav­ior we are going to need an Image type object that we call "black­outIm­age" and that we will mark with "Seri­al­ize­Field" so that it appears in the inspector. 

We define a float called "black­outOpac­i­ty­ChangeStep" to indi­cate the mag­ni­tude of opac­i­ty change in time, we also seri­al­ize it. Final­ly we define a float called "black­out­Targe­tOpac­i­ty" that will be the val­ue that the opac­i­ty will tend to approach in each step of time.

In the Start method we make the objec­tive opac­i­ty 0. We can see all this in fig­ure 25.

Methods

We are going to define two meth­ods, Pri­vate Black­out and Pub­lic Set­Black­outOpac­i­ty. With­in the FixedUp­date method we will call the Black­out method, as shown in fig­ure 26.

In the Black­out method we first read the cur­rent state of opac­i­ty of the image object (instruc­tion 29 in fig­ure 26).

If the opac­i­ty of that object is less than the objec­tive opac­i­ty we will make it increase, if the opac­i­ty of the object is greater we will make it decrease. We achieve this with the "if" and "else if" of lines 31 and 39 respectively.

In order for the opac­i­ty to grad­u­al­ly increase or decrease we will cre­ate a new col­or to which we assign the same RGB com­po­nents but to the alpha para­me­ter we add or sub­tract the float "black­outOpac­i­ty­ChangeStep". In fig­ure 26 we can see how to solve this.

The Set­Black­outOpac­i­ty method will be pub­lic and will take a float val­ue as para­me­ter. Sim­ply assign this val­ue to the vari­able "black­out­Targe­tOpac­i­ty", as shown below in fig­ure 26.

We change the opac­i­ty val­ue in the FixedUp­date method because we don't want it to hap­pen instant­ly but grad­u­al­ly to have a Fade In/Out effect.

Last settings

To be able to exe­cute the Game­Con­troller meth­ods using the but­tons, we have to do it in the OnClick() func­tion of the but­ton component. 

Drag the GameOb­ject Game­Con­troller to the field under "Run­time Only" and using the drop-down menu select the "Black­out­Func­tion" method.

If it doesn't appear in this list, we prob­a­bly haven't defined it as public.

With the but­ton of Pause we do the same thing only that choos­ing the method Pause of GameController.

Final­ly select the GameOb­ject UI and drag the GameOb­ject Black­outIm­age (with the image com­po­nent, see fig­ure 12) to the "Black­out Image" field. For the float "Black­outOpac­i­ty­ChangeStep" we enter the val­ue 0.1.

The result is shown in Fig­ure 29.

Conclusion

In this arti­cle we saw a way to dark­en the screen in Uni­ty. To achieve this we used a black image and mod­i­fied the val­ue of Alpha, which deter­mines the opac­i­ty of the col­or. If the alpha is equal to 1 the col­or is total­ly opaque, if it is equal to 0, the col­or is total­ly transparent.

We con­fig­ure two but­tons to exe­cute pub­lic meth­ods of the Game­Con­troller Script, which tells the UIMan­ag­er object how should be the opac­i­ty of the black screen. UIMan­ag­er final­ly makes the changes in the alpha val­ue of the black screen.