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 la Sala de juegos consta principalmente de tres componentes:
- Acciones de la Sala de juegos
- Lienzo del juego
- Menús y diálogos
Estas prácticas recomendadas de diseño de juegos proporcionan recomendaciones sobre cómo compilar tu juego para el lienzo del juego.
Cambio de tamaño del juego
Ten en cuenta estas prácticas para asegurarte de 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 los formatos pillarbox o letterbox si el juego no puede responder por completo al tamaño del lienzo y la relación de aspecto.
Evita activar barras de desplazamiento. Las barras de desplazamiento afectan negativamente tanto el juego como la navegación general. Rellena 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 te desplazas por una lista vertical larga dentro de la IU del juego. Lo ideal sería que los juegos sean totalmente responsables en el viewport.
Escalamiento del juego
Renderiza con claridad (no se vea borrosa, pixelada ni estirada) en diferentes resoluciones de pantalla.
Asegúrate de que la IU del juego (textos, íconos) se ajuste de manera adecuada cuando se renderice en pantallas de menor resolución (como dispositivos móviles de 360 x 800) y de mayor resolución (como monitores de computadoras de 3840 x 2560).
Evita elementos rasterizados de baja resolución que se vean borrosos cuando se ajustan a pantallas grandes.
Tipografía
Garantizar la legibilidad en todos los dispositivos y tamaños de pantalla
Los textos que aparecen dentro del juego, como los botones, los menús y los globos de diálogo, deben ser legibles en diferentes dispositivos y tamaños de pantalla. Para ello, puedes escalar y adaptar el texto automáticamente, o bien ofrecer a los usuarios una 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 una referencia general, consulta WCAG2.1.
 |
 |
| Usa tamaños de fuente grandes con suficiente grosor y contraste para que sea legible. En este ejemplo, la relación de contraste es 4.48:1. | Evita usar fuentes pequeñas y colores de bajo contraste. 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 para 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, como mínimo, 48 dp × 48 dp y 8 dp de espacio entre los objetivos como mínimo (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 dp x 48 dp.
Agrega padding alrededor de los íconos y botones para aumentar el tamaño del objetivo táctil.
Botones
Usa estilos únicos para cada estado del botón:
- Habilitada
- Inhabilitado
- Colocar el cursor sobre un elemento (para dispositivos de entrada no táctiles)
- Enfoque
- Presionado
También intenta diferenciar los botones por jerarquía. Por ejemplo, los botones de acción primario y secundario en un menú Start (consulta los Lineamientos de Google Material 2 Design para botones).
Estilos únicos que distinguen cada estado de botón
Entrada de teclado
Para aumentar la accesibilidad del juego en dispositivos y usuarios, debes admitir la entrada del teclado en todos los controles del juego y la navegación en pantalla, además de la entrada táctil y del mouse.
En el caso de los juegos que admiten la entrada del teclado, permite que los usuarios cierren los menús y diálogos dentro del juego con la tecla Esc. Esto se suma a tener un botón visual de cierre (por ejemplo, un ícono de X en la esquina superior). Algunos ejemplos comunes de modales o diálogos son el menú Configuración, el menú Pausa, los mensajes de error y las ventanas emergentes con información de Ayuda.
Evita asignar acciones a la acción de mantener presionada la tecla Esc, ya que se usa para salir del modo de pantalla completa en navegadores web para computadoras.
Para los juegos que tienen objetos de escucha de pulsación de teclas registrados, no uses preventDefault() con eventos de tecla Esc. Cuando está en pantalla completa en Safari, esto hace que el juego consuma el evento de pulsación de teclas sin salir de la pantalla completa.
Tecnología háptica
Cuando corresponda, te recomendamos que uses respuestas táctiles (vibraciones) para que tus juegos se sientan más envolventes y divertidos.
Momentos clave del partido
En esta sección, se describen los momentos clave de un juego que crean una experiencia excelente para el jugador.
Instructivo
Incluye un breve instructivo o un nivel de integración para ayudar a los jugadores nuevos.
La integración garantiza que los usuarios aprendan los aspectos básicos del juego y los aspectos esenciales del juego para continuar y disfrutarlo.
Dado que la Sala de juegos está diseñada para que los usuarios comiencen a jugar de forma rápida y accesible, procura que la integración sea lo más pequeña posible. Si bien no todos los juegos requieren un instructivo, la mayoría de ellos se benefician con alguna forma de integración. Ten en cuenta la mecánica, las reglas y las habilidades clave que el jugador necesita conocer para jugar y disfrutar del juego con éxito.
Los instructivos pueden estar en el siguiente formato:
- Es un conjunto de pantallas al comienzo del juego (o, idealmente, que se presenten de manera contextual a lo largo del juego cuando corresponda).
- Nivel real de instructivo en el que juega el usuario
Pausar
Comunica el estado del juego al usuario de manera clara.
Comunica con claridad al usuario cuándo se pausa el juego y cómo puede reanudarlo. Evita hacer que el usuario piense que el juego se bloqueó o falló.
Etiqueta claramente el estado del juego como "pausado" y proporciona una acción clara (botón) para reanudar el juego.
Fin del juego
Informa al usuario que completó el último nivel o terminó el juego.
Si el juego tiene un final definitivo (por ejemplo, una cantidad limitada de niveles), comunica ese hecho de manera clara al usuario. Esto evita que el usuario piense que el juego está roto o bloqueado. Idealmente, el juego debe celebrar y felicitar al jugador por completarlo.
Audio
El juego puede incluir controles de volumen independientes para los efectos, la voz y la música de fondo. Estos controles pueden incluir controles deslizantes para ajustar el volumen, o bien un botón de activación de silencio para cada uno de ellos.
Accesibilidad
La accesibilidad en el diseño permite que los usuarios con capacidades diversas puedan jugar y disfrutar de tu juego.
A diferencia del diseño web y de software, no existen los 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 inclusivos, consulta Lineamientos de accesibilidad para juegos. Te recomendamos que consideres cómo se pueden aplicar estos lineamientos al diseño de tu juego.