Roblox es inherentemente multiplataforma, ya que los jugadores pueden descubrir y unirse a juegos en su teléfono o tableta, y luego continuar donde lo dejaron en su PC o consola. Para apoyar una amplia gama de plataformas, debes construir interfaces de usuario que se adapten sin problemas al tipo de entrada (táctil, gamepad, ratón/teclado), al tamaño de la pantalla y a la orientación del dispositivo. Esta guía, la guía de diseño adaptable y los recursos vinculados pueden ayudarte a diseñar un verdadero juego multiplataforma que sea compatible, accesible y disfrutable en todas las plataformas.
Para explorar un juego prehecho que muestre los siguientes conceptos de diseño multiplataforma, consulta el Interactivity Showcase.
Entrada
Un juego cuidadosamente diseñado debería soportar todos los tipos de entrada principales, incluyendo ratón y teclado, táctil y gamepads.
Acciones multiplataforma
Soporta todos los tipos de entrada principales (ratón/teclado, táctil y gamepads) utilizando el Sistema de Acción de Entrada.
Para simplificar las entradas multiplataforma, Roblox proporciona el Sistema de Acción de Entrada para definir acciones como "saltar", "correr" o "disparar" y configurar asignaciones para múltiples entradas de hardware que impulsen esas acciones. No necesitas pensar en todos los aspectos técnicos de las entradas de hardware y cuándo escuchar disparadores específicos de entrada; simplemente defines qué entradas realizan qué acciones.
Detección del tipo de entrada
Asegúrate de que los elementos de la UI respondan y se adapten al tipo de entrada principal del jugador como se detalla en detección del tipo de entrada. También considera sugerencias asistivas para ayudar a los jugadores a entender cambios específicos de entrada.
En el desarrollo multiplataforma, es importante que determines y respondas al tipo de entrada principal que está utilizando un jugador, normalmente para asegurar que los elementos de la UI como los botones y menús en pantalla funcionen elegantemente y soporten la interacción entre dispositivos.
Por ejemplo, un dispositivo habilitado para toque asume que el toque es la entrada predeterminada y que pueden aparecer botones táctiles para acciones, pero un jugador puede optar por conectar un gamepad bluetooth. En este caso, el toque sigue siendo una entrada válida, pero puedes suponer que el jugador quiere cambiar al gamepad conectado como el tipo de entrada principal y posiblemente usar el toque como una entrada de respaldo para la UI en pantalla.
Sugerencias asistivas
Basado en el tipo de entrada principal, se recomienda incluir sugerencias de UI asistivas siempre que sea posible. Por ejemplo, al seleccionar herramientas para equipar, muestra sugerencias específicas de entrada como 1–5 cuando el jugador esté usando un teclado, o sugerencias de gatillos de gamepad cuando el jugador esté usando un gamepad.
Los métodos GetImageForKeyCode() y GetStringForKeyCode() son útiles para reunir una imagen o cadena específica de la plataforma para usar en una sugerencia de UI, como los siguientes ejemplos:
| Código de tecla | Imagen de Xbox | Imagen de PlayStation | Cadena |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | n/a | n/a | 1 |
| Enum.KeyCode.Five | n/a | n/a | 5 |
Interfaz de usuario
Una interfaz de usuario bien diseñada es esencial para que los jugadores de todas las plataformas interactúen con tu juego.
Posición y tamaño
Asegúrate de que todos los elementos de la UI sean visibles en todos los tamaños y orientaciones de pantalla.
Asegúrate de que todos los botones/controles sean interactuables y que no estén bloqueados u oscurecidos por cortes de dispositivo o elementos de la UI de Roblox.
Todos los elementos de la UI deben ser posicionados y dimensionados adecuadamente para asegurar visibilidad e interactividad en múltiples tamaños de pantalla. Posicionar elementos de la UI utilizando Scale es un enfoque común puesto que se basa en un porcentaje de los límites X e Y de la pantalla, no en un valor en píxeles (los píxeles pueden variar arbitrariamente tanto en número como en densidad entre dispositivos). También puedes utilizar el AnchorPoint del elemento para establecer su origen posicional. Por ejemplo, el contenedor de UI que sostiene los contadores de gemas/monedas en la siguiente imagen está posicionado en una escala X de 1 (derecha) y una escala Y de 0 (arriba) con un punto de anclaje en la esquina superior derecha.
Scale también es recomendado para dimensionar elementos de la UI, como hacer que un contenedor de UI ocupe el 75% de ancho en cada pantalla. Sin embargo, 75% se mostraría en un tamaño enorme en televisores 4K para jugadores de consola, por lo que se recomienda explorar la adaptación del tamaño de pantalla como una forma de adaptar los diseños de la UI a diferentes visores.
Adaptación del tamaño de pantalla
Adapta la UI a varios tamaños de pantalla verificando y escuchando los cambios en el tamaño de la pantalla del visor.
Con una multitud de tamaños de pantalla posibles accesibles a la plataforma Roblox, intentar predecir el tamaño de pantalla en píxeles a menudo lleva a malas interpretaciones. Para asistir en la determinación del tamaño de pantalla de un jugador y adaptar el tamaño/posición de los elementos de la UI, Roblox proporciona la propiedad de solo lectura ViewportDisplaySize que representa el tamaño de renderizado categorizado internamente del visor.
| ViewportDisplaySize | Resumen |
|---|---|
| Small | La mayoría de dispositivos tabletas/móviles/manos libres |
| Medium | La mayoría de laptops y monitores |
| Large | La mayoría de TVs o más grandes |
Para una personalización nativa más, puedes usar el Editor de Estilo de la UI para configurar Consultas de Estilo para los valores tanto de ViewportDisplaySize como de PreferredInput. Usar selectores intrínsecos como @ViewportDisplaySizeSmall o @PreferredInputTouch permite a tu UI cambiar automáticamente tokens para tamaños de texto, dimensiones de contenedores y otras medidas a medida que cambie el entorno del dispositivo del jugador o el método de entrada principal.
Contenedores de diseño
Utiliza diseños para organizar componentes individuales de la UI y asegúrate de que los contenedores se ajusten de manera responsiva a los elementos hijo dentro de ellos.
Para una organización más fácil de la UI, debes utilizar componentes de diseño para organizar los hijos. Al usar contenedores de diseño, asegúrate de que los hijos sean legibles, accesibles y no desordenados. Un componente de diseño común es UIListLayout, que posiciona los GuiObjects hermanos en filas o columnas y ajusta de acuerdo a cada vez que agregas o eliminas un objeto hermano.
También deberías considerar la distribución y el posicionamiento relativo de los elementos dentro de los contenedores de diseño para obtener la mejor experiencia de usuario. Integrar flex en un diseño de lista es una forma poderosa de llenar/distribuir de manera equitativa o alinear/estirar elementos a través de su línea, o flexionar elementos específicos a través de un espacio variable.
Accesibilidad
Asegúrate de que todo el texto sea legible en todas las pantallas. Además, asegúrate de que toda la UI tenga contraste suficiente y que nada dependa únicamente del color para distinguir una acción o resultado.
Incluso con los elementos de la UI properly sized en todos los tamaños de pantalla de los dispositivos, el juego en general debería cumplir con los estándares de accesibilidad para jugadores con visión comprometida o daltonismo. El tamaño del texto puede influir mucho en la legibilidad de la UI basada en texto, por lo que debes incluir una restricción de tamaño de texto para asegurar que el texto no se vuelva ilegible (demasiado pequeño) o visualmente demasiado grande en pantallas más grandes como las TVs 4K.
Para más consejos sobre accesibilidad, consulta aquí.
Consejos y trucos finales
A medida que trabajas hacia un juego completamente multiplataforma, considera los siguientes consejos y trucos:
- La emulación de dispositivos es esencial para diseñar un juego óptimo en Roblox. Utiliza el Emulador de Dispositivos y el Emulador de Controladores integrados para emular varios dispositivos y gamepads directamente en Studio.
- El pipeline de estilo de UI de Roblox, similar al CSS, te permite declarar y aplicar globalmente anulaciones a las propiedades de la instancia de UI. Junto con el Editor de Estilo, puedes configurar una interfaz de usuario completa y fácil de modificar.
- Una vez que tu juego sea efectivamente multiplataforma, explora características nativas como retroalimentación háptica en móviles y gamepads, gestos táctiles como TouchSwipe y TouchPinch, o funcionalidad de acelerómetro y giroscopio en dispositivos AccelerometerEnabled y GyroscopeEnabled.