Las siguientes prácticas recomendadas de diseño ayudan a garantizar una experiencia óptima para los usuarios que juegan tu juego en YouTube en diferentes dispositivos y plataformas.
Además de los componentes del sistema operativo, la experiencia de Playables consta principalmente de tres componentes:
- Acciones de Sala de juegos
- Lienzo del juego
- Menús y diálogos
Estas prácticas recomendadas de diseño de juegos proporcionan recomendaciones para crear tu juego para el lienzo del juego.
Cambio de tamaño del juego
Ten en cuenta estas prácticas para garantizar que los juegos se adapten correctamente a diferentes tamaños y orientaciones de pantalla.
Cambia el tamaño del juego y adapta la IU al tamaño y la relación de aspecto del lienzo.
Usa pillarboxing o letterboxing si el juego no puede responder por completo al tamaño y la relación de aspecto del lienzo del juego.
Evita activar las barras de desplazamiento. Las barras de desplazamiento afectan negativamente tanto el juego como la navegación general. Llena el lienzo sin que el juego se pueda desplazar dentro de él. Las barras de desplazamiento son adecuadas para el desplazamiento intencional, por ejemplo, cuando se desplaza por una lista vertical larga dentro de la IU del juego. Lo ideal es que los juegos sean completamente responsivos al viewport.
Ajuste de la escala del juego
Se renderizan con claridad (no se ven borrosos, pixelados ni estirados) en diferentes resoluciones de pantalla.
Asegúrate de que la IU del juego (textos, íconos) se ajuste correctamente cuando se renderiza en pantallas de menor resolución (como dispositivos móviles de 360 x 800) y en pantallas de mayor resolución (como monitores de escritorio de 3840 x 2560).
Evita los recursos rasterizados de baja resolución que se ven borrosos cuando se ajustan a pantallas grandes.
Tipografía
Asegúrate de que el texto sea legible en todos los dispositivos y tamaños de pantalla.
Los textos que aparecen en el juego, como los botones, los menús y los globos de diálogo, deben ser legibles en diferentes dispositivos y tamaños de pantalla. Esto se puede lograr escalando y adaptando el texto automáticamente, o bien ofreciendo a los usuarios un parámetro de configuración para ajustar el tamaño de la fuente.
Si el texto tiene un tamaño inferior a 18 puntos o si está en negrita y tiene un tamaño inferior a 14 puntos, debes establecer la proporción de contraste de color en, al menos, 4.5:1.
Para el resto del texto, establece la proporción de contraste de color en, al menos, 3:1.
Para obtener información general, consulta WCAG2.1.
 |
 |
| Usa tamaños de fuente grandes con suficiente peso y contraste para que sean legibles. En este ejemplo, la relación de contraste es de 4.48:1. | Evita los tamaños de fuente pequeños y los colores de contraste bajo. En este ejemplo, la relación de contraste es de 3.07:1. |
Interacción
En esta sección, se abordan las prácticas recomendadas relacionadas con las interacciones del usuario y los elementos relacionados.
Objetivos táctiles
Haz que los objetivos táctiles sean lo suficientemente grandes para facilitar la interacción.
Asegúrate de que los objetivos táctiles tengan al menos 48 × 48 dp con, al menos, 8 dp de espacio entre ellos (consulta los Lineamientos de Material Design) para facilitar la interacción.
En este ejemplo, el botón renderizado visualmente es de 24 dp, mientras que el objetivo táctil invisible incluye 12 dp alrededor del ícono para lograr el objetivo táctil de 48 × 48 dp.
Agrega padding alrededor de los íconos y los botones para aumentar el tamaño del objetivo táctil.
Botones
Usa estilos únicos para cada estado del botón:
- Habilitado
- Inhabilitado
- Desplazamiento (para dispositivos de entrada que no son táctiles)
- Enfoque
- Compacto
También intenta diferenciar los botones por jerarquía. Por ejemplo, los botones de acción principales y secundarios en un menú Inicio (consulta los lineamientos de diseño de Material 2 de Google para los botones).
Estilos únicos que distinguen cada estado del botón
Entrada de teclado
Para aumentar la accesibilidad del juego en todos los dispositivos y usuarios, admite la entrada de teclado para todos los controles de juego y la navegación por la pantalla, además de la entrada táctil y del mouse.
En el caso de los juegos que admiten entrada de teclado, permite que los usuarios cierren los menús y diálogos del juego con la tecla Esc. Esto se suma a tener un botón de cierre visual (por ejemplo, un ícono de X en la esquina superior). Algunos ejemplos comunes de ventanas modales o diálogos son el menú Configuración, el menú Pausa, los mensajes de error y las ventanas emergentes de información de Ayuda.
Evita asignar acciones a la presión prolongada de la tecla Esc, ya que se usa para salir del modo de pantalla completa en los navegadores web para computadoras.
En el caso de los juegos que tienen objetos de escucha de pulsaciones de teclas registrados, no uses preventDefault() con eventos de la tecla Esc. Cuando se está en pantalla completa en Safari, esto hace que el juego consuma el evento de presión de tecla sin salir de la pantalla completa.
Tecnología háptica
Cuando sea apropiado, te recomendamos que uses la respuesta háptica (vibraciones) para que tus juegos se sientan más divertidos y envolventes.
Momentos clave del juego
En esta sección, se abordan los momentos clave de un juego que crean una excelente experiencia para el jugador.
Instructivo
Incluye un breve instructivo o un nivel de incorporación para ayudar a los jugadores nuevos.
La incorporación garantiza que los usuarios aprendan los conceptos básicos del juego y los elementos esenciales para continuar y disfrutarlo.
Dado que los juegos instantáneos están diseñados para que los usuarios puedan comenzar a jugar de forma rápida y sencilla, intenta que la integración sea lo más mínima posible. Si bien no todos los juegos requieren un tutorial, la mayoría se benefician de algún tipo de incorporación. Ten en cuenta la mecánica, las reglas y las habilidades clave que el jugador necesita conocer para jugar y disfrutar el juego con éxito.
Los instructivos pueden tener el siguiente formato:
- Conjunto de pantallas al comienzo del juego (o, idealmente, presentadas de forma contextual a lo largo del juego cuando sea apropiado)
- Nivel de tutorial real que completa el usuario
Pausar
Comunica claramente el estado del juego al usuario.
Comunícale claramente al usuario cuándo se pausa el juego y cómo puede reanudarlo. Evita que el usuario piense que el juego se congeló o falló.
Etiqueta claramente el estado del juego como "en pausa" y proporciona una acción (botón) clara para reanudar el juego.
Fin del juego
Comunicarle al usuario que completó el último nivel o que terminó el juego
Si el juego tiene un final definitivo (por ejemplo, una cantidad finita de niveles), comunícaselo claramente al usuario. Esto evita que el usuario piense que el juego está dañado o congelado. Lo ideal es que el juego celebre y felicite al jugador por completarlo.
Audio
El juego puede contener controles de volumen separados para los efectos, el habla y la música de fondo. Los controles pueden consistir en controles deslizantes para ajustar el volumen o un botón de activación/desactivación del silencio para cada uno o ambos.
Accesibilidad
La accesibilidad en el diseño permite que los usuarios con capacidades diversas jueguen y disfruten tu juego.
A diferencia del diseño de software y web, no existen lineamientos de accesibilidad estándar de la industria para el diseño de juegos. Para obtener un buen recurso con lineamientos adicionales sobre el diseño de juegos inclusivo, consulta Lineamientos de accesibilidad para juegos. Te recomendamos que consideres cómo se pueden aplicar estos lineamientos al diseño de tu juego.