Fade In/Out the Screen in Unity

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:

ABOUT THIS VIDEO

In this video we see the FADE IN/OUT effect for Unity

HERE MY UNITY PLAYLIST
ūüĎáūüŹĹ

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.

The result that we will obtain at the end. 

ūüüĘ Fade In ‚ÄĒ Fade Out Effect for Unity

Download Unity Package and Import

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

Scripts para Oscure¬≠cer pan¬≠talla en Unity

CHECK OUT THIS CRAZY EXPERIMENT

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.

creation of empty gameobject from the hierarchy in unity
Fig. 1: We start by cre­at­ing an Emp­ty GameOb­ject with the name "Game­Con­troller".

creation of empty gameobject from the hierarchy in unity
Fig. 2: We cre­at­ed Can­vas to show graph­i­cal inter­face elements.

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

hierarchy of a project in unity
Fig. 3: I give the Can­vas the name "UI" and place the con­trol object and the can­vas in the first position.

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.

creacion de gameobject image desde la jerarquia en unity para oscurecer la pantalla en unity
Fig. 4: Right-click on the UI object to cre¬≠ate an image.

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

configuration of the color for an object image in unity
Fig. 5: We make the col¬≠or of the image 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.

scaler canvas configuration in unity
Fig. 6: Con­fig­ure the Can­vasS­caler object to fit the width 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.

full hd resolution for scaler canvas in unity
Fig. 7: Intro¬≠duc¬≠ing Full¬≠HD res¬≠o¬≠lu¬≠tion, 1920 x 1080.

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.

rect component transforms from a canvas object into unity
Fig. 8: We adjust the size of the image so that it cov­ers the whole screen.

dim the screen in unity using gameobject black image
Fig. 9: We should see the back¬≠ground of the scene obstruct¬≠ed by the image.

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.

color adjustment of an object image in unity
Fig. 10: In the col¬≠or of the image we set the alpha val¬≠ue to 0.

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

creation of button gameobject from the hierarchy in unity
Fig. 11: Cre­ate a but­ton to acti­vate the black screen function.

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.

hierarchy of a project in unity
Fig. 12: The but­ton will be called "Black­out" as well as the function.

We adjust the sizes and col¬≠ors to taste.

parameter settings for an object button in unity
Fig. 13: We adjust the para¬≠me¬≠ters of the but¬≠ton 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.

black screen and button on a unity project
Fig. 14: The but­ton must be vis­i­ble even with the black screen.

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.

hierarchy of a project in unity
Fig. 15: Dupli­cate the black­out but­ton, move it down and give it the name "Pause".

empty stage with sky on the horizon and two buttons in a corner, unity project
Fig. 16: With this the scene is finished.

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".

creation of scripts in unity
Fig. 17: Let's cre­ate two Scripts to con­trol the elements.

scripts c sharp in a project in unity
Fig. 18: One script will be named "Game­Con­troller" and the oth­er "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.

add component button in unity
Fig. 19: Select the GameOb­ject Game­Con­troller and use Add­Com­po­nent to assign the Game­Con­troller Script.

window inspector for a gameobject in unity
Fig. 20: The Game­Con­troller Script is now a com­po­nent of the GameObject.

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

add component button in unity
Fig. 21: Select the GameOb­ject UI and with Add­Com­po­nent assign the UIMan­ag­er Script.

window inspector for a gameobject in unity
Fig. 22: The UIMan­ag­er Script is now a com­po­nent of the GameObject.

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.

script c sharp to darken the screen in unity
Fig. 23: Fields and ini­tial­iza­tion in the Game­Con­troller Script.

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.

script c sharp to darken the screen in unity
Fig. 24: Black­out func­tion and Pause func­tion of the Game­Con­troller 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.

script c sharp to darken the screen in unity
Fig. 25: Fields and ini­tial­iza­tion in the UIMan­ag­er Script.

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.

script c sharp to darken the screen in unity
Fig. 26: UIMan­ag­er meth­ods to dark­en the screen at runtime.

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.

window inspector for a gameobject in unity
Fig. 27: In the Black­out but­ton we exe­cute the Black­out method of GameController.

window inspector for a gameobject in unity
Fig. 28: In the Pause but­ton we exe­cute the Pause method 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.

window inspector for a gameobject in unity
Fig. 29: For the UIMan­ag­er com­po­nent we enter a val­ue for the changeStep parameter.

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.

YouTube
Scroll to Top
Secured By miniOrange