Pantalla de game over

How to create a UI system in Unity?

Creating graphical interfaces in Unity may seem challenging, but with a little programming and design it is possible to achieve nice and functional transitions. In this class, we will focus on developing a UI system that facilitates interaction with players by displaying screens associated with different game states, such as the start or end of a game. Join me and discover how to connect your scripts and create an engaging user experience in Unity.

What are the steps to set up events in Unity?

First of all, we need to make sure that our event logic in Unity is set up properly. One of the most powerful events is the Unity Event, which allows us to have different sections of the code listen and respond appropriately to changes in game state.

1. Edit the Game Manager:

   • Add a new Unity event with parameters. This is done by adding Public Unity Event On Game State Updated followed by the parameter type, which in this case is Game State.

   • Modify the Update function to trigger this event when the game changes state, for example, when a game is lost.

   if (currentState == GameState.GameOver) { OnGameStateUpdated?.Invoke(currentState);}

   This allows other scripts to subscribe to the event and act accordingly.

How to create and configure a UI interface screen?

Once we solve the event part, the next thing is to create a base UI screen that reacts when the game state changes.

1. Create a C# script for UIScreen:

   • Create a new script called UIScreen where you will define the necessary properties like RectTransform, CanvasGroup and the GameState property.

   public RectTransform containerRect;public CanvasGroup containerCanvas;public Image background;public GameManager.GameState visible State;public float transitionTime;

2. Subscribe to the event from the UIScreen script:

   • Inside the Start function, subscribe the script to the OnGameStateUpdated event.

   void Start() { GameManager.instance.OnGameStateUpdated.AddListener(GameStateUpdated);}

3. Defines the initial behavior and its transitions:

   • Implements the GameStateUpdated function to show or hide screens depending on the state of the game.

   void GameStateUpdated(GameManager.GameState newState) { if (newState == visibleState) { ShowScreen(); } else { HideScreen(); } }}

How to implement animations in Unity?

Visual transitions enhance the user experience, and using DOTween, you can make smooth animations in interfaces.

1. Configure animations in ShowScreen and HideScreen:

   • ShowScreen: activates visual elements and animates properties such as opacity and position.

   void ShowScreen() { background.enabled = true; containerCanvas.alpha = 0; containerRect.anchoredPosition = new Vector2(0, 100); containerCanvas.DOFade(1, transitionTime); containerRect.DOAnchorPos(Vector2.zero, transitionTime);}

   • HideScreen: Focuses on inverse animations and ends up disabling the elements.

   void HideScreen() { containerCanvas.DOFade(0, transitionTime * 0.5f); containerRect.DOAnchorPos(new Vector2(0, -100), transitionTime * 0.5f).OnComplete((() => { background.enabled = false; containerRect.gameObject.SetActive(false); });} ).

With these configurations, you have implemented an effective system that shows and hides screens based on the state of the game. We encourage you to try and practice these steps in Unity to refine your GUI development skills - go ahead and learn!