Implementación de la pantalla de configuración

Curso de Creación de Interfaces de Usuario con Unity

Contenido del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:46

Implementación de la pantalla de configuración

Curso de Creación de Interfaces de Usuario con Unity

Clase 28 de 29

Clase 28 / 29

Recursos

¿Cómo añadir un nuevo estado para la pantalla de opciones en Unity?

Para acercarnos a la implementación de una pantalla de opciones en nuestro juego, necesitamos comenzar con la creación de un nuevo estado en nuestro GameManager. Este nuevo estado será crucial para gestionar la transición adecuada a la pantalla de opciones.

Agregar un nuevo estado:
- En el archivo de GameManager, incluimos un nuevo GameState denominado Options.
- Incorporamos una función pública para permitir el cambio a este nuevo estado con public void Options(), estableciendo el estado del juego como GameState.Options.
- Llamamos a la función OnGameStateUpdated() para actualizar el estado del juego.

public enum GameState {
    Idle,
    Options,
    // otros estados
}

public void Options() {
    gameState = GameState.Options;
    OnGameStateUpdated();
}

Conectar el botón de la pantalla de inicio:
- Activamos todas las interfaces de usuario.
- Modificamos el script de UIStartScreen para agregar una nueva función optionsButtonClick, que llama a gameManager.instance.Options().

public void OptionsButtonClick() {
    gameManager.instance.Options();
}

Ajustar el OnClick del botón:
- En Unity, configuramos el botón Options para que su evento OnClick esté enlazado a optionsButtonClick.

¿Cómo implementar controles de audio en la pantalla de opciones?

Una vez integrado el estado de opciones, es momento de configurar los controles de audio en la pantalla. Esto permitirá a los usuarios establecer el volumen de música y efectos sonoros.

Configuración de los elementos en Unity

Agregar componente UIScreen:
- En la pantalla de UIOptions, se añade un componente UIScreen para controlar la visibilidad en el estado de Options.
Ajustar diseño de pantalla:
- Agrupar elementos correctamente y ajustar el tamaño y el espaciado de los controles de volumen.

Código para controlar el volumen

Crear script UIOptions:
- Este script se encargará de manejar los valores de los controles de audio, utilizando variables enteras para volumen y efectos sonoros (SFX).

public int volume;
public int sfx;
public TextMeshProUGUI volumeLabel;
public TextMeshProUGUI sfxLabel;

public void AddVolume() {
    volume++;
    UpdateVolumeLabel();
}

public void MinusVolume() {
    volume--;
    UpdateVolumeLabel();
}

Inicializar y actualizar etiquetas:
- Comenzamos con valores por defecto (ej., volumen de 10) y actualizamos las etiquetas con las funciones Add y Minus.
Limitar valores numéricos:
- Utilizamos Mathf.Clamp para limitar los valores entre 0 y 10 en todas las funciones relevantes al ajustar el volumen y los efectos sonoros.

volume = Mathf.Clamp(volume, 0, 10);

Configurar eventos OnClick:
- Enlazar cada botón específico para aumentar o disminuir Volume y SFX a las funciones correspondientes en UIOptions.

¿Cómo conectar la UI a la lógica de audio real?

Aunque hemos creado una pantalla que permite ver ajustes de volumen, aún es necesario conectar estos controles a la lógica interna del audio. Aquí hay algunas consideraciones:

Enlazar a AudioManager: Busca formas de integrar UIOptions con la clase AudioManager para efectuar los cambios de volumen de manera realista.
Explorar APIs de audio: Utiliza las herramientas de Unity para manipular niveles de audio en tus proyectos.

Invitación a la comunidad

¡Queremos escuchar de ti! ¿Se te ocurre alguna manera de conectar el UIOptions a la clase AudioManager para gestionar el volumen realmente? Comparte tu solución en los comentarios y ayudemos a que otros también aprendan.

Resumen

¿Cómo añadir un nuevo estado para la pantalla de opciones en Unity?

Agregar un nuevo estado:
- En el archivo de GameManager, incluimos un nuevo GameState denominado Options.
- Incorporamos una función pública para permitir el cambio a este nuevo estado con public void Options(), estableciendo el estado del juego como GameState.Options.
- Llamamos a la función OnGameStateUpdated() para actualizar el estado del juego.

public enum GameState {
    Idle,
    Options,
    // otros estados
}

public void Options() {
    gameState = GameState.Options;
    OnGameStateUpdated();
}

Conectar el botón de la pantalla de inicio:
- Activamos todas las interfaces de usuario.
- Modificamos el script de UIStartScreen para agregar una nueva función optionsButtonClick, que llama a gameManager.instance.Options().

public void OptionsButtonClick() {
    gameManager.instance.Options();
}

Ajustar el OnClick del botón:
- En Unity, configuramos el botón Options para que su evento OnClick esté enlazado a optionsButtonClick.

¿Cómo implementar controles de audio en la pantalla de opciones?

Una vez integrado el estado de opciones, es momento de configurar los controles de audio en la pantalla. Esto permitirá a los usuarios establecer el volumen de música y efectos sonoros.

Configuración de los elementos en Unity

Agregar componente UIScreen:
- En la pantalla de UIOptions, se añade un componente UIScreen para controlar la visibilidad en el estado de Options.
Ajustar diseño de pantalla:
- Agrupar elementos correctamente y ajustar el tamaño y el espaciado de los controles de volumen.

Código para controlar el volumen

Crear script UIOptions:
- Este script se encargará de manejar los valores de los controles de audio, utilizando variables enteras para volumen y efectos sonoros (SFX).

public int volume;
public int sfx;
public TextMeshProUGUI volumeLabel;
public TextMeshProUGUI sfxLabel;

public void AddVolume() {
    volume++;
    UpdateVolumeLabel();
}

public void MinusVolume() {
    volume--;
    UpdateVolumeLabel();
}

Inicializar y actualizar etiquetas:
- Comenzamos con valores por defecto (ej., volumen de 10) y actualizamos las etiquetas con las funciones Add y Minus.
Limitar valores numéricos:
- Utilizamos Mathf.Clamp para limitar los valores entre 0 y 10 en todas las funciones relevantes al ajustar el volumen y los efectos sonoros.

volume = Mathf.Clamp(volume, 0, 10);

Configurar eventos OnClick:
- Enlazar cada botón específico para aumentar o disminuir Volume y SFX a las funciones correspondientes en UIOptions.

¿Cómo conectar la UI a la lógica de audio real?

Aunque hemos creado una pantalla que permite ver ajustes de volumen, aún es necesario conectar estos controles a la lógica interna del audio. Aquí hay algunas consideraciones:

Enlazar a AudioManager: Busca formas de integrar UIOptions con la clase AudioManager para efectuar los cambios de volumen de manera realista.
Explorar APIs de audio: Utiliza las herramientas de Unity para manipular niveles de audio en tus proyectos.

Invitación a la comunidad

Juan Esteban Toquica Gonzalez

Hace 2 años

Para añadir el funcionamiento a los botones de audio hice lo siguiente

Primero añadi una referencia al AudioSource del objeto MusicSource desde el script de AudioManager y luego desde el inspector, ya que solo teniamos la referencia al sfxSource public AudioSource MusicSource
Luego en el awake del AudioManager estableci el volumen por defecto de los dos AudioSource a 0.5f (para que al iniciar el juego no se escuche ni muy duro ni muy pasito) MusicSource.volume = 0.5f; SfxSource.volume = 0.5f; Y tambien cambie a 5 el valor inicial de volume y sfx en el script de UIOptions para que la UI tambien iniciara en 5
Y luego en las 4 funciones del script UIOptions agregue una linea que por medio de la instancia del AudioManager accede a los AudioSource de los objetos hijos y establece el volumen del audio igual a la variable que indica que numero escribir (volume o sfx) dividida 10f para que asi nos de un valor entre 0 y 1, aqui como quedaria el script. public void Addvolume()
{
volume++;
volume = Mathf.Clamp(volume, 0, 10);
volumeLabel.text = volume.ToString();
AudioManager.Instance.MusicSource.volume = volume/10f;
}
public void Minusvolume()
{
volume--;
volume = Mathf.Clamp(volume, 0, 10);
volumeLabel.text = volume.ToString();
AudioManager.Instance.MusicSource.volume = volume /10f;
}
public void Addvsfx()
{
sfx++;
sfx = Mathf.Clamp(sfx, 0, 10);
sfxLabel.text = sfx.ToString();
AudioManager.Instance.SfxSource.volume = sfx/10f;
}
public void Minussfx()
{
sfx--;
sfx = Mathf.Clamp(sfx, 0, 10);
sfxLabel.text = sfx.ToString();
AudioManager.Instance.SfxSource.volume = sfx/10f;
}

Nota: recordar asignar en el inspector la referencia al MusicSource en el objeto AudioManager

Introducción y configuración inicial

Transforma la UI de tu juego Match 3 en Unity

Cargando el proyecto

Unity UI vs UI Toolkit: cuál usar en 2022

El sistema de UI de Unity

Canvas y sus modos de renderizado en Unity

El Rect Transform

Componente de imagen

Máscaras y efectos

Texto en Unity con Text Mesh Pro

Creando botones en nuestra interfaz

Otros elementos de UI

Auto layout

Scroll views

Controla grupos de UI con Canvas Group

Haciendo interfaces para el juego

Pantallas de UI para Safari Match en Unity

Importar y configurar sprites UI en Unity

Construye la Start Screen en Unity

Animando el fondo con shader graph

Agregando lógica a la pantalla de título

Scroll view de selección de niveles en Unity

Genera lista de niveles con prefabs en Unity

Corrige bugs de UI antes de añadir más features

Contador de puntos y pausa en Unity HUD

Anima iconos con DOTween en Unity

Pantalla de pausa en Unity con Layout Group

Pantalla de pausa con reseteo de escena en Unity

Rediseño visual de la pantalla Game Over en Unity

Pantalla de opciones con layouts en Unity

Implementación de la pantalla de configuración

Interfaces de Unity que parecen juegos profesionales

Implementación de la pantalla de configuración

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos