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 suite de plataformas en expansión, debes construir interfaces de usuario que se adapten sin problemas al tipo de entrada (táctil, gamepad, ratón/teclado), tamaño de pantalla y orientación del dispositivo. Esta guía, la guía de diseño adaptativo y los recursos vinculados pueden ayudarte a diseñar un verdadero juego multiplataforma que sea compatible, accesible y agradable en todas las plataformas.
Para explorar un juego prehecho que muestra los siguientes conceptos de diseño multiplataforma, consulta el Interactivity Showcase.
Entrada
Un juego cuidadosamente diseñado debe 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 Input Action System.
Para simplificar las entradas multiplataforma, Roblox proporciona el Input Action System para definir acciones como "saltar", "correr" o "disparar" y configurar vinculaciones para múltiples entradas de hardware que impulsan esas acciones. No necesitas pensar en todos los aspectos técnicos de las entradas de hardware y cuándo escuchar los desencadenadores de entrada específicos; simplemente defines qué entradas realizan qué acciones.
Detección del tipo de entrada
Asegúrate de que los elementos de la interfaz de usuario 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 en la entrada.
En el desarrollo multiplataforma, es importante que determines y respondas al tipo de entrada principal que un jugador está utilizando, normalmente para asegurar que los elementos de la interfaz de usuario como botones y menús en pantalla funcionen elegantemente y soporten la interacción a través de dispositivos.
Por ejemplo, un dispositivo habilitado para táctil asume que el táctil 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 táctil sigue siendo una entrada válida, pero puedes asumir que el jugador quiere cambiar al gamepad conectado como el tipo de entrada principal y posiblemente usar el táctil como una entrada de respaldo para la interfaz de usuario en pantalla.
Si estás utilizando el Input Action System, la propiedad PreferredBinding complementa la detección de entrada principal: así como PreferredInput informa el tipo de entrada principal actual del jugador, PreferredBinding informa la InputBinding específica que coincide con el dispositivo actual del jugador. Ambos se actualizan automáticamente a medida que el jugador cambia de dispositivo, por lo que puedes impulsar una interfaz de usuario consciente del dispositivo sin escribir la lógica de cambio de dispositivo tú mismo.
Sugerencias asistivas
Basado en el tipo de entrada principal, se recomienda que incluyas sugerencias de interfaz de usuario 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 gatillo de gamepad cuando el jugador esté usando un gamepad.
Para sugerencias asistivas sin código que se actualizan automáticamente cuando el jugador cambia de dispositivos, utiliza InputActionLabel y apúntalo a cualquier InputAction para mostrar la entrada correcta por plataforma. Consulta mostrando vinculaciones para obtener todos los detalles.
Para un control más granular, o si necesitas personalizar la visualización de sugerencias más allá de lo que ofrece InputActionLabel, puedes usar los métodos de UserInputService a continuación para recopilar manualmente imágenes y cadenas específicas de la plataforma:
Los métodos GetImageForKeyCode() y GetStringForKeyCode() son útiles para recopilar una imagen o cadena específica de la plataforma para usar en una sugerencia de interfaz de usuario, 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 interfaz de usuario sean visibles en todos los tamaños y orientaciones de pantalla.
Asegúrate de que todos los botones/controles sean interactivos y que no estén bloqueados u oscurecidos por recortes de dispositivo o elementos de la interfaz de usuario de Roblox.
Todos los elementos de la interfaz de usuario deben estar posicionados y dimensionados adecuadamente para asegurar visibilidad e interactividad a través de múltiples tamaños de pantalla. Posicionar elementos de la interfaz de usuario por Scale es un enfoque común ya que se basa en un porcentaje de los límites X y Y de la pantalla, no en un valor en píxeles (los píxeles pueden variar arbitrariamente tanto en número como en densidad a través de dispositivos). También puedes utilizar el AnchorPoint del elemento para establecer su origen posicional. Por ejemplo, el contenedor de la interfaz de usuario 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 se recomienda para dimensionar elementos de la interfaz de usuario, como hacer que un contenedor de la interfaz de usuario ocupe el 75% de ancho en cada pantalla. Sin embargo, el 75% se renderizaría a un tamaño enorme en televisores 4K para jugadores de consola, por lo que se recomienda que explores adaptación del tamaño de pantalla como una forma de adaptar los diseños de la interfaz de usuario a través de diferentes vistas.
Adaptación del tamaño de pantalla
Adapta la interfaz de usuario a varios tamaños de pantalla verificando y escuchando cambios en el tamaño de visualización del viewport.
Con una multitud de posibles tamaños de pantalla accesibles en la plataforma Roblox, intentar predecir el tamaño de pantalla por píxeles a menudo lleva a una mala interpretación. Para ayudar a determinar el tamaño de pantalla de un jugador y adaptar el tamaño/posición de los elementos de la interfaz de usuario, Roblox proporciona la propiedad de solo lectura ViewportDisplaySize que representa el tamaño de renderizado categorizado internamente del viewport.
| ViewportDisplaySize | Resumen |
|---|---|
| Small | La mayoría de los dispositivos tablet/móviles/portátiles |
| Medium | La mayoría de las laptops y monitores |
| Large | La mayoría de los televisores o más grandes |
Para una personalización más nativa, puedes usar el Editor de Estilo de la interfaz de usuario para configurar Consultas de Estilo tanto para ViewportDisplaySize como para los valores de PreferredInput. Usar selectores intrínsecos como @ViewportDisplaySizeSmall o @PreferredInputTouch permite que tu interfaz de usuario intercambie automáticamente tokens para tamaños de texto, dimensiones de contenedores y otras medidas a medida que cambia 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 interfaz de usuario y asegúrate de que los contenedores se ajusten de manera responsiva a los elementos hijos dentro de ellos.
Para una organización más fácil de la interfaz de usuario, debes usar componentes de diseño para organizar a los hijos. Al usar contenedores de diseño, asegúrate de que los hijos sean legibles, accesibles y no estén desordenados. Un componente de diseño común es UIListLayout, que posiciona GuiObjects hermanos en filas o columnas y se ajusta en consecuencia cada vez que agregas o eliminas un objeto hermano.
También debes considerar la distribución y la posición relativa de los elementos dentro de los contenedores de diseño para la mejor experiencia de usuario. Integrar flex en un diseño de lista es una forma poderosa de llenar/distribuir equitativamente 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. También asegúrate de que toda la interfaz de usuario tenga suficiente contraste y que nada dependa únicamente del color para distinguir una acción o resultado.
Incluso con elementos de la interfaz de usuario correctamente dimensionados en todos los tamaños de pantalla de dispositivos, el juego en general debe cumplir con los estándares de accesibilidad para jugadores con visión reducida o daltonismo. El tamaño del texto puede influir en gran medida en la legibilidad de la interfaz de usuario 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 televisores 4K.
Para más consejos sobre accesibilidad, consulta las directrices de accesibilidad.
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.
- La estilización de UI de Roblox, similar a CSS, te permite declarar y aplicar globalmente sobrescrituras a las propiedades de las instancias de la interfaz de usuario. Junto con el Editor de Estilo integrado, 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 la 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.