Roblox é inerentemente multiplataforma, pois os jogadores podem descobrir e entrar em jogos em seus telefones ou tablets e, em seguida, continuar de onde pararam em seu PC ou console. Para suportar um conjunto crescente de plataformas, você deve construir interfaces de usuário que se adaptem perfeitamente ao tipo de entrada (toque, controle, mouse/teclado), tamanho da tela e orientação do dispositivo. Este guia, o guia de design adaptativo 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 cuidadosamente projetado deve suportar todos os principais tipos de entrada, incluindo mouse e teclado, toque e controles.
Ações multiplataforma
Suporte todos os principais tipos de entrada (mouse/teclado, toque e controles) usando o Sistema de Ação de Entrada.
Para simplificar as entradas multiplataforma, Roblox fornece o Sistema de Ação de Entrada 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
Certifique-se de que os elementos da interface do usuário respondam e se adaptem ao tipo de entrada principal do jogador, conforme detalhado em 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 principal que um jogador está usando, normalmente para garantir que os elementos da interface do usuário como botões e menus na tela funcionem elegantemente e suportem interação entre dispositivos.
Por exemplo, um dispositivo habilitado 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 controle bluetooth. Nesse caso, o toque continua sendo uma entrada válida, mas você pode assumir que o jogador deseja mudar para o controle conectado como o tipo de entrada principal e possivelmente usar o toque como uma entrada de backup para a interface do usuário na tela.
Se você estiver usando o Sistema de Ação de Entrada, a propriedade PreferredBinding complementa a detecção de entrada principal: assim como PreferredInput relata o tipo de entrada principal atual do jogador, PreferredBinding relata a InputBinding específica que corresponde ao dispositivo atual do jogador. Ambos são atualizados automaticamente à medida que o jogador troca de dispositivos, para que você possa acionar a interface do usuário ciente do dispositivo sem escrever a lógica de troca de dispositivo você mesmo.
Dicas assistivas
Com base no tipo de entrada principal, é recomendável que você inclua dicas de interface assistiva sempre que possível. Por exemplo, ao selecionar ferramentas para equipar, exiba dicas específicas de entrada, como 1–5 quando o jogador estiver usando um teclado, ou dicas de gatilho do controle quando o jogador estiver usando um controle.
Para dicas assistivas sem código que se atualizam automaticamente quando o jogador troca de dispositivos, use InputActionLabel e aponte para qualquer InputAction para exibir a entrada correta por plataforma. Veja exibindo vinculações para detalhes completos.
Para um controle mais granular, ou se você precisar personalizar a exibição de dicas além do que InputActionLabel oferece, você pode usar os métodos UserInputService abaixo para coletar manualmente imagens e strings específicas da plataforma:
Os métodos GetImageForKeyCode() e GetStringForKeyCode() são úteis para coletar uma imagem ou string específica da plataforma para usar em uma dica de interface do usuário, como os seguintes exemplos:
| Código da Tecla | Imagem do Xbox | Imagem do 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 de usuário bem projetada é essencial para que os jogadores em todas as plataformas interajam com seu jogo.
Posição e tamanho
Certifique-se de que todos os elementos da interface do usuário sejam visíveis em todos os tamanhos e orientações de tela.
Certifique-se de que todos os botões/controles sejam interativos e que não estejam bloqueados ou obscurecidos por recortes de dispositivo ou elementos da interface do usuário do Roblox.
Todos os elementos da interface do usuário devem ser posicionados e dimensionados adequadamente para garantir visibilidade e interatividade em vários tamanhos de tela. Posicionar elementos da interface do usuário por Scale é uma abordagem comum, pois é baseada em uma porcentagem dos limites 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 da interface do usuário 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 (cima) com um ponto de ancoragem superior direito.
Scale também é recomendado para dimensionar elementos da interface do usuário, como fazer um contêiner da interface do usuário ocupar 75% da largura em todas as telas. No entanto, 75% renderizaria um tamanho enorme em TVs 4K para jogadores de console, então é recomendável que você explore adaptação do tamanho da tela como uma forma de adaptar layouts da interface do usuário em diferentes visores.
Adaptação do tamanho da tela
Adapte a interface do usuário a vários tamanhos de exibição verificando e ouvindo mudanças no tamanho da exibição do viewport.
Com uma infinidade de tamanhos de tela possíveis acessíveis à plataforma Roblox, tentar prever o tamanho da tela em pixels muitas vezes leva a interpretações erradas. Para ajudar a determinar o tamanho da tela de um jogador para adaptar o tamanho/posição dos elementos da interface do usuário, Roblox fornece a propriedade somente leitura ViewportDisplaySize, que representa o tamanho de renderização categorizado internamente do 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 uma personalização mais nativa, você pode usar o Editor de Estilo da interface do usuário para configurar Consultas de Estilo para os valores de ViewportDisplaySize e PreferredInput. Usar seletores intrínsecos como @ViewportDisplaySizeSmall ou @PreferredInputTouch permite que sua interface do usuário troque automaticamente tokens para tamanhos de texto, dimensões de contêiner e outras medidas à medida que o ambiente do dispositivo do jogador ou o método de entrada principal mudam.
Contêineres de layout
Use layouts para organizar componentes individuais da interface do usuário e garantir que os contêineres se ajustem responsivamente aos elementos filhos dentro deles.
Para facilitar a organização da interface do usuário, 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 é UIListLayout, que posiciona GuiObjects irmãos em linhas ou colunas e ajusta-se de acordo sempre que você adiciona ou remove um objeto irmão.
Você também deve considerar a distribuição e o posicionamento relativo dos elementos dentro dos contêineres de layout para a melhor experiência do 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
Certifique-se de que todo o texto seja legível em todas as telas. Também verifique se toda a interface do usuário tem contraste suficiente e que nada depende exclusivamente da cor para distinguir uma ação ou resultado.
Mesmo com elementos da interface do usuário 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 a legibilidade da interface do usuário baseada em texto, então 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 diretrizes de acessibilidade.
Dicas e truques finais
À medida que você trabalha em um jogo totalmente multiplataforma, considere as seguintes dicas e truques:
- A emulação de dispositivos é essencial para projetar um jogo ideal no Roblox. Utilize o Emulador de Dispositivos e o Emulador de Controladores integrados para emular vários dispositivos e controles diretamente no Studio.
- O pipeline de estilização da interface do usuário do Roblox, semelhante ao CSS, permite que você declare e aplique globalmente substituições às propriedades das instâncias da interface do usuário. Juntamente com o Editor de Estilo integrado, você pode configurar uma interface do usuário completa e fácil de modificar.
- Uma vez que seu jogo seja efetivamente multiplataforma, explore recursos nativos como feedback tátil em dispositivos móveis e controles, gestos de toque como TouchSwipe e TouchPinch, ou funcionalidade de acelerômetro e giroscópio em dispositivos AccelerometerEnabled e GyroscopeEnabled.