Diseño responsivo

Curso de Animación y Arte de Videojuegos 2D

Contenido del curso

Conocer los fundamentos técnicos de los videojuegos

Conceptualizar personajes y escenarios del videojuego

Crear el arte conceptual del videojuego

Aplicar principios de animación a un personaje

Integrar Assets del videojuego a Unity

Implementar UI responsiva del videojuego

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:53

Diseño responsivo

Curso de Animación y Arte de Videojuegos 2D

Clase 27 de 30

Clase 27 / 30

Recursos

¿Qué es el diseño responsive?

El diseño responsive es esencial en el desarrollo moderno de videojuegos. Este concepto se refiere a la capacidad de ajustar automáticamente las imágenes y otros elementos visuales a diferentes tamaños de pantalla, como los de los distintos modelos de iPhone. Adoptar un enfoque de diseño responsive permite que los juegos se adapten armoniosamente tanto a un iPhone 5 como a un iPhone 10, que tienen dimensiones de pantalla significativamente diferentes.

¿Cómo funcionan los puntos de referencia en diseño responsive?

Un componente clave del diseño responsive son los puntos de referencia. Estos puntos actúan como anclas que fijan elementos visuales en la pantalla, ayudando a que el diseño sea adaptable.

Ancho y alto: El diseño requiere definir dimensiones específicas para cada elemento.
Anclajes (Anchors): Son las flechas que se establecen alrededor de un elemento, los cuales determinan su posición respecto a la pantalla.

¿Cómo crear contenedores en diseño responsive?

Los contenedores son un elemento crucial para el manejo del diseño adaptable. Se utilizan para agrupar elementos y asegurar su correcta adaptación a diferentes tamaños de pantalla.

.container {
    width: 100%;
    height: auto;
    background-color: #f0f0f0;
}

Pasos para configurar contenedores:

Ocultar los elementos no necesarios temporalmente.
Crear un contenedor para cada grupo de elementos.
Asignar dimensiones específicas y colores temporales para visualización.
Ajustar los anclajes para cada contenedor según las necesidades del diseño.

¿Cómo probar diferentes relaciones de aspecto?

Probar cómo se ve tu diseño en diferentes relaciones de aspecto te ayuda a obtener un diseño más universal. Aunque el diseño inicial puede estar creado en una resolución específica como 16:9, es crucial verificar cómo se comporta en otras configuraciones como 4:3.

Pasos para probar relaciones de aspecto:

Cambiar la relación de aspecto en las preferencias de visualización.
Ajustar donde sea necesario las posiciones y los tamaños de los elementos.
Verificar que los anclajes mantienen los elementos en las posiciones deseadas.

¿Cómo optimizar íconos y elementos dentro de los contenedores?

Una vez que los contenedores se comportan correctamente, es momento de ajustar los elementos internos. Asegúrate de que todos los iconos y textos en el interior se posicionen adecuadamente.

Ajustes para elementos internos:

Íconos: Coloca el ancla de los íconos basándose en los bordes del contenedor.
Textos: Asegúrate de que los textos estén correctamente referenciados dentro de su área asignada.

Consideraciones finales para un diseño totalmente responsive:

Simplificar visualmente mientras trabajas: Utiliza colores para visualizar mejor los elementos antes de poner las imágenes finales.
Verificar la funcionalidad de los anclajes: Asegúrate de que los anclajes estén alineados de forma que los elementos mantengan su proporción y posición.
Testeo continuado: Prueba constantemente para asegurar que el juego se ve bien en todas las configuraciones.

Con un diseño responsive bien implementado, garantizarás que tus videojuegos ofrezcan una experiencia de usuario óptima, sin importar el dispositivo en que se jueguen. Mantén siempre la exploración y la experimentación para lograr la excelencia en tus diseños.

Conocer los fundamentos técnicos de los videojuegos

Qué aprenderás sobre animación y arte de videojuegos 2D

Entornos de trabajo para juegos móviles

Análisis de juegos

Análisis de legibilidad de videojuegos

Conceptualizar personajes y escenarios del videojuego

Diseño de personajes

Diseño de escenarios

Ideación y definición

Referencias y moodboard

Crear el arte conceptual del videojuego

Construcción de personaje: Silueta

Construcción de personaje: Línea

Construcción del personaje: Color

Diseño de escenarios

Definición del estilo del videojuego

Aplicar principios de animación a un personaje

12 principios de animación

Creación de Sprites

Photoshop para animación

Referencias para animación

Ciclo de Caminado

Preparando assets para Unity

Integrar Assets del videojuego a Unity

Introducción a Unity

Generar Tilesets

Árbol de animación del personaje

Implementación de animación por código

Mover el personaje

Implementar UI responsiva del videojuego

Análisis de UI para videojuegos

Implementación de UI en Unity

Diseño responsivo

Animación de UI

Funcionalidad de botones

Cierre del curso

Diseño responsivo