miniatura de un articulo que explica como hacer una pantalla negra en unity o lograr un efecto fade in fade out

Fade In/Out the Screen in Unity

Introduction

In this article we’re going to see a simple way to darken the screen in Unity using an image component. This can be very useful for example to use as a transition in a scene change.

The following video shows the result that we will obtain at the end.

Video 1: Prueba de pantalla negra para función Blackout y función Pausa.



Explanatory video and downloads

The video explains how the solution works, but it is not done step by step.

Download GameController and UIManager scripts.

70 Downloads

Step-by-step solution

Elements of the hierarchy

We will create all the elements necessary to solve the problem. First an empty GameObject that we will call “GameController” and a GameObject type Canvas that is the one that will contain all the elements of the graphical interface.

creation of empty gameobject from the hierarchy in unity
Fig. 1: We start by creating an Empty GameObject with the name “GameController”.

creation of empty gameobject from the hierarchy in unity
Fig. 2: We created Canvas to show graphical interface elements.

In figure 3 we see these elements created and placed at the beginning of the hierarchy.

hierarchy of a project in unity
Fig. 3: I give the Canvas the name “UI” and place the control object and the canvas in the first position.

Image to dim the screen

The next thing we do is create an Image as a child of GameObject 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 create an image.



In the inspector in the image component we make the color black.

configuration of the color for an object image in unity
Fig. 5: We make the color of the image black.

Canvas Scaler Setup

Let’s go to the GameObject UI and in the inspector, in the component CanvasScaler we select the mode “Scale with screen size” in the field “UI Scale Mode” (figure 6). With this we can make the elements of the graphical interface modify their size according to the size of the screen.

scaler canvas configuration in unity
Fig. 6: Configure the CanvasScaler object to fit the width of the screen.

For the reference resolution we are going to use 1920 x 1080 pixels, which is known as FullHD resolution.

The configuration of the CanvasScaler should be done at the beginning, before placing the elements of the graphical interface. Otherwise we will have to modify all the elements again to adjust them to the new configuration.

full hd resolution for scaler canvas in unity
Fig. 7: Introducing FullHD resolution, 1920 x 1080.

We return to the GameObject image and adjust its size to 1920 x 1080 to cover the entire screen. If everything works well the screen should look like in figure 9.

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

dim the screen in unity using gameobject black image
Fig. 9: We should see the background of the scene obstructed by the image.

In the black color of the image we are going to make the Alpha component 0, this way it will be transparent.

color adjustment of an object image in unity
Fig. 10: In the color of the image we set the alpha value to 0.


Now we are going to create a couple of buttons to execute the functions that we will later define in the Scripts.

Buttons

creation of button gameobject from the hierarchy in unity
Fig. 11: Create a button to activate the black screen function.

We are going to call the first one BlackoutButton which is the one that is going to take care of darkening the screen completely.

hierarchy of a project in unity
Fig. 12: The button will be called “Blackout” as well as the function.

We adjust the sizes and colors to taste.

parameter settings for an object button in unity
Fig. 13: We adjust the parameters of the button to taste.

We must make sure that the button is below the image in the hierarchy, that way the black screen will be drawn first and then the button, as we see in figure 14.

black screen and button on a unity project
Fig. 14: The button must be visible even with the black screen.

Once we configure the Blackout button we are going to duplicate it and give it the name “PauseButton”, we accommodate it where we like on the screen. In figure 16 is my result.

hierarchy of a project in unity
Fig. 15: Duplicate the blackout button, 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 create two C# Scripts, the first one we will call “GameController” and the second “UIManager”.

creation of scripts in unity
Fig. 17: Let’s create two Scripts to control the elements.

scripts c sharp in a project in unity
Fig. 18: One script will be named “GameController” and the other “UIManager”.

The GameController Script is assigned to the GameObject with the same name. We can select it and drag it to the inspector or use the “Add Component” button.

add component button in unity
Fig. 19: Select the GameObject GameController and use AddComponent to assign the GameController Script.

window inspector for a gameobject in unity
Fig. 20: The GameController Script is now a component of the GameObject.

The UIManager Script is assigned to the GameObject “UI”.

add component button in unity
Fig. 21: Select the GameObject UI and with AddComponent assign the UIManager Script.

window inspector for a gameobject in unity
Fig. 22: The UIManager Script is now a component of the GameObject.


GameController Script

The GameController Script is responsible for indicating when the screen should be darkened and at what opacity value it should be set. It does not control the image object directly, this is the responsibility of the UIManager.

GameController will have two functions, one will be the Blackout function which will tell the UIManager to completely darken the screen and the other will be the Pause function which will cause the screen to darken 50%.

Fields and Initialization

We are going to define a UIManager type object to have the reference of the UIManager Script assigned to the GameObject UI in order to be able to access its public methods.

We’re also going to need two boolean variables to indicate if blackout and pause are enabled.

In the Start method we find the reference of the UIManager Script assigned to the GameObject UI with the instruction 13 shown in figure 23. Then we put in false the boolean variables.

script c sharp to darken the screen in unity
Fig. 23: Fields and initialization in the GameController Script.

Methods

So that the Script fulfills the two functions that we said, we are going to define two public methods, one will be called “BlackoutFunction” and the other “Pause”. These methods will be executed when pressing the buttons of the graphical interface.

If you want to know more about methods I invite you to read this article I wrote earlier, talk about what a method is intuitively, there is also a video on the channel.

In the BlackoutFunction method the first thing we do is invert the state of the boolean variable blackoutActivated, so if it was in false now it’s going to be true and visceversa.

Then we check the state of that variable and we will execute a UIManager Script method with the appropriate parameter. At this point we have not yet written the “SetBlackoutOpacity” method of UIManager, so if you write lines 23 and 27 of figure 24 you will have an error.

In the Pause method we are going to do the same thing but instead of completely darkening the screen we are going to make it darken to half the opacity.

Lines 23, 27, 37 and 41 can be written after working on the UIManager Script.

script c sharp to darken the screen in unity
Fig. 24: Blackout function and Pause function of the GameController Script.



UIManager Script

This script will control the parameters of the image to dim the screen.

In order to do so, it will constantly execute the Blackout function that will gradually modify the opacity of the image. In addition it will have a public method called “SetBlackoutOpacity” that will allow to tell the level of opacity wished, 0 means invisible black screen, 1 is completely visible black screen.

Fields and Initialization

To solve the behavior we are going to need an Image type object that we call “blackoutImage” and that we will mark with “SerializeField” so that it appears in the inspector.

We define a float called “blackoutOpacityChangeStep” to indicate the magnitude of opacity change in time, we also serialize it. Finally we define a float called “blackoutTargetOpacity” that will be the value that the opacity will tend to approach in each step of time.

In the Start method we make the objective opacity 0. We can see all this in figure 25.

script c sharp to darken the screen in unity
Fig. 25: Fields and initialization in the UIManager Script.

Methods

We are going to define two methods, Private Blackout and Public SetBlackoutOpacity. Within the FixedUpdate method we will call the Blackout method, as shown in figure 26.

In the Blackout method we first read the current state of opacity of the image object (instruction 29 in figure 26).

If the opacity of that object is less than the objective opacity we will make it increase, if the opacity 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 opacity to gradually increase or decrease we will create a new color to which we assign the same RGB components but to the alpha parameter we add or subtract the float “blackoutOpacityChangeStep”. In figure 26 we can see how to solve this.

The SetBlackoutOpacity method will be public and will take a float value as parameter. Simply assign this value to the variable “blackoutTargetOpacity”, as shown below in figure 26.

script c sharp to darken the screen in unity
Fig. 26: UIManager methods to darken the screen at runtime.

We change the opacity value in the FixedUpdate method because we don’t want it to happen instantly but gradually to have a Fade In/Out effect.

I invite you to watch this video in which I do three experiments to better understand the flow of the program and the order of execution of the Update and FixedUpdate methods.



Last settings

To be able to execute the GameController methods using the buttons, we have to do it in the OnClick() function of the button component.

Drag the GameObject GameController to the field under “Runtime Only” and using the drop-down menu select the “BlackoutFunction” method.

If it doesn’t appear in this list, we probably haven’t defined it as public.

With the button of Pause we do the same thing only that choosing the method Pause of GameController.

window inspector for a gameobject in unity
Fig. 27: In the Blackout button we execute the Blackout method of GameController.

window inspector for a gameobject in unity
Fig. 28: In the Pause button we execute the Pause method of GameController.

Finally select the GameObject UI and drag the GameObject BlackoutImage (with the image component, see figure 12) to the “Blackout Image” field. For the float “BlackoutOpacityChangeStep” we enter the value 0.1.

The result is shown in Figure 29.

window inspector for a gameobject in unity
Fig. 29: For the UIManager component we enter a value for the changeStep parameter.

Conclusion

In this article we saw a way to darken the screen in Unity. To achieve this we used a black image and modified the value of Alpha, which determines the opacity of the color. If the alpha is equal to 1 the color is totally opaque, if it is equal to 0, the color is totally transparent.

We configure two buttons to execute public methods of the GameController Script, which tells the UIManager object how should be the opacity of the black screen. UIManager finally makes the changes in the alpha value of the black screen.

Leave a Comment

Your email address will not be published. Required fields are marked *