Roblox é inerentemente multiplataforma, pois os jogadores podem descobrir e ingressar em jogos em seu telefone ou tablet, e depois continuar de onde pararam em seu PC ou console. Para suportar uma gama crescente de plataformas, você deve construir interfaces de usuário que se adaptem perfeitamente ao tipo de entrada (toque, gamepad, mouse/teclado), tamanho da tela e orientação do dispositivo. Este guia, o guia de design adaptável e os recursos vinculados podem ajudá-lo a projetar um verdadeiro jogo multiplataforma que seja compatível, acessível e agradável em todas as plataformas.
Para explorar um jogo pré-fabricado que demonstra os seguintes conceitos de design multiplataforma, confira o Interactivity Showcase.
Entrada
Um jogo bem projetado deve suportar todos os principais tipos de entrada, incluindo mouse e teclado, toque e gamepads.
Ações multiplataforma
Apoie todos os principais tipos de entrada (mouse/teclado, toque e gamepads) usando o Input Action System.
Para simplificar as entradas multiplataforma, o Roblox fornece o Input Action System para definir ações como "pular", "correr" ou "atirar" e configurar vinculações para múltiplas entradas de hardware que acionam essas ações. Você não precisa pensar em todos os aspectos técnicos das entradas de hardware e quando ouvir gatilhos de entrada específicos; você simplesmente define quais entradas realizam quais ações.
Detecção do tipo de entrada
Assegure-se de que os elementos da UI respondam e se adaptem ao tipo de entrada primário do jogador, conforme detalhado na detecção do tipo de entrada. Também considere dicas assistivas para ajudar os jogadores a entender mudanças específicas de entrada.
No desenvolvimento multiplataforma, é importante que você determine e responda ao tipo de entrada primário que um jogador está usando, normalmente para garantir que os elementos de UI como botões e menus na tela funcionem de maneira elegante e suportem interação entre dispositivos.
Por exemplo, um dispositivo com suporte para toque assume que o toque é a entrada padrão e que botões de toque podem aparecer para ações, mas um jogador pode optar por conectar um gamepad bluetooth. Neste caso, o toque continua sendo uma entrada válida, mas você pode assumir que o jogador quer mudar para o gamepad conectado como o tipo de entrada primário e possivelmente usar o toque como uma entrada de backup para a UI na tela.
Dicas assistivas
Com base no tipo de entrada primário, é recomendável incluir dicas UI assistivas sempre que possível. Por exemplo, ao selecionar ferramentas para equipar, exiba dicas específicas para a entrada, como 1–5 quando o jogador estiver usando um teclado, ou dicas de gatilho de gamepad quando o jogador estiver usando um gamepad.
Os métodos GetImageForKeyCode() e GetStringForKeyCode() são úteis para reunir uma imagem ou string específica da plataforma a ser usada em uma dica de UI, como os seguintes exemplos:
| Código da Tecla | Imagem Xbox | Imagem PlayStation | String |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | n/a | n/a | 1 |
| Enum.KeyCode.Five | n/a | n/a | 5 |
Interface do usuário
Uma interface do usuário bem projetada é essencial para que os jogadores em todas as plataformas interajam com seu jogo.
Posição e tamanho
Assegure-se de que todos os elementos da UI sejam visíveis em todos os tamanhos e orientações de tela.
Assegure-se de que todos os botões/controles sejam interativos e que não estejam bloqueados ou obscurecidos por recortes de dispositivo ou elementos UI do Roblox.
Todos os elementos da UI devem ser posicionados e dimensionados adequadamente para garantir visibilidade e interatividade em várias dimensões de tela. Posicionar elementos de UI por Scale é uma abordagem comum, pois é baseado em uma porcentagem das dimensões X e Y da tela, não em um valor em pixels (os pixels podem variar arbitrariamente tanto em número quanto em densidade entre dispositivos). Você também pode utilizar o AnchorPoint do elemento para definir sua origem posicional. Por exemplo, o contêiner de UI que contém os contadores de gemas/moedas na imagem a seguir está posicionado em uma escala X de 1 (direita) e uma escala Y de 0 (superior) com um ponto de ancoragem superior direito.
Scale também é recomendado para dimensionar elementos da UI, como fazer um contêiner de UI ocupar 75% de largura em cada tela. No entanto, 75% renderizaria um tamanho enorme em TVs 4K para jogadores de console, então é recomendável que você explore a adaptação do tamanho da tela como uma maneira de adaptar layouts de UI em diferentes visualizações.
Adaptação do tamanho da tela
Adapte a UI a vários tamanhos de exibição verificando e escutando mudanças no tamanho da exibição da viewport.
Com uma multiplicidade de tamanhos de tela possíveis acessíveis à plataforma Roblox, tentar prever o tamanho da tela por pixels frequentemente leva a interpretação incorreta. Para ajudar a determinar o tamanho da tela de um jogador para adaptar o tamanho/posição dos elementos da UI, o Roblox fornece a propriedade de leitura única ViewportDisplaySize, que representa o tamanho de renderização categorizado internamente da viewport.
| ViewportDisplaySize | Resumo |
|---|---|
| Small | A maioria dos dispositivos tablet/móvel/portáteis |
| Medium | A maioria dos laptops e monitores |
| Large | A maioria das TVs ou maiores |
Para mais personalização nativa, você pode usar o Editor de Estilo da UI para configurar Consultas de Estilo tanto para ViewportDisplaySize quanto para os valores de PreferredInput. Usar seletores intrínsecos como @ViewportDisplaySizeSmall ou @PreferredInputTouch permite que sua UI troque automaticamente tokens para tamanhos de texto, dimensões de contêiner e outras medições à medida que o ambiente do dispositivo do jogador ou o método de entrada primário mudam.
Contêineres de Layout
Use layouts para organizar componentes individuais da UI e garantir que os contêineres se ajustem responsivamente aos elementos filhos dentro deles.
Para uma organização mais fácil da UI, você deve usar componentes de layout para organizar os filhos. Ao usar contêineres de layout, certifique-se de que os filhos sejam legíveis, acessíveis e não desordenados. Um componente de layout comum é o UIListLayout, que posiciona irmãos GuiObjects em linhas ou colunas e ajusta conforme você adiciona ou remove um objeto irmão.
Você também deve considerar a distribuição e o posicionamento relativo dos elementos dentro de contêineres de layout para a melhor experiência de usuário. Integrar flex em um layout de lista é uma maneira poderosa de preencher/distribuir igualmente ou alinhar/esticar itens ao longo de sua linha, ou flexionar itens específicos em um espaço variável.
Acessibilidade
Assegure-se de que todo o texto seja legível em todas as telas. Também verifique se toda a UI possui contraste suficiente e que nada dependa exclusivamente da cor para distinguir uma ação ou resultado.
Mesmo com elementos de UI adequadamente dimensionados em todos os tamanhos de tela de dispositivos, o jogo geral deve atender aos padrões de acessibilidade para jogadores com deficiência visual ou daltonismo. O tamanho do texto pode influenciar muito na legibilidade da UI baseada em texto, portanto, você deve incluir uma restrição de tamanho de texto para garantir que o texto não se torne ilegível (muito pequeno) ou visualmente muito grande em telas maiores, como TVs 4K.
Para mais dicas sobre acessibilidade, veja aqui.
Dicas e truques finais
À medida que você trabalha para um jogo totalmente multiplataforma, considere as seguintes dicas e truques:
- A emulação de dispositivos é essencial para projetar um jogo otimizado no Roblox. Utilize o Emulador de Dispositivos integrado e o Emulador de Controladores para emular vários dispositivos e gamepads diretamente no Studio.
- O pipeline de estilização de UI do Roblox, semelhante ao CSS, permite que você declare e aplique globalmente substituições às propriedades das instâncias da UI. Juntamente com o Editor de Estilo, você pode configurar uma interface de usuário completa e fácil de modificar.
- Uma vez que seu jogo esteja efetivamente multiplataforma, explore recursos nativos como feedback tátil em móveis e gamepads, gestos de toque como TouchSwipe e TouchPinch, ou funcionalidade de acelerômetro e giroscópio em dispositivos AccelerometerEnabled e GyroscopeEnabled.