Diretrizes de design adaptativo

O design adaptativo garante que seus jogos Roblox tenham uma aparência e um funcionamento ótimos em vários tamanhos de tela, orientações e tipos de entrada. Indo além das categorias tradicionais de dispositivos, como mobile, desktop e console, os dispositivos de hoje possuem capacidades muito mais dinâmicas, permitindo uma transição perfeita entre diferentes entradas e displays. Imagine um tablet que suporta várias orientações (paisagem e retrato), vários tipos de entrada (toque, gamepad, mouse e teclado) e vários tamanhos de exibição (exibição nativa, estendendo-se até uma TV grande).

Essas diretrizes o ajudarão a entregar jogos de classe mundial que se adaptam inteligentemente a qualquer dispositivo e tipo de entrada para alcançar um público amplo. Para mais detalhes sobre fluxos de trabalho e APIs para auxiliar na implementação dessas diretrizes, consulte o guia de desenvolvimento multiplataforma.

Princípios básicos

Cada jogo é único, mas seguir alguns princípios-chave o ajudará a entregar um jogo intuitivo e polido para cada jogador, em cada dispositivo.

1. Fluidificação de entrada — Certifique-se de que sua interface de usuário funcione com vários tipos de entrada, como gamepad, toque, teclado e controladores de VR. Isso inclui alterar o layout da interface e fornecer dicas assistivas, dependendo do tipo de entrada.
2. Layout responsivo — Projete layouts de interface que se ajustem automaticamente a diferentes tamanhos de tela e orientações.
3. Dimensionamento dinâmico — Escale elementos da interface conforme necessário para caber em várias dimensões de tela.
4. Legibilidade e clareza visual — Certifique-se de que todos os componentes da interface, incluindo texto e botões, sejam facilmente legíveis e visualmente claros.

Fluidificação de entrada

Certifique-se de que seu jogo pareça natural em vários dispositivos de entrada, incluindo gamepads, mouse/teclado, toque e VR.

• Projete controles e atalhos para múltiplas entradas — Garanta que cada ação em seu jogo possa ser acionada usando botões do gamepad/D‑pad, atalhos de teclado e toque. Os controles devem ser visual e funcionalmente focáveis para navegação com d-pad ou stick. Teste cada modo de entrada para que a jogabilidade principal, menus e interface sejam acessíveis e naturais, independentemente do dispositivo.
• Forneça feedback visual por tipo de entrada — Atualize rótulos de interface, prompts e dicas para refletir o método de entrada ativo, por exemplo, mostrando Pressione A em um gamepad, Pince no toque, ou ShiftA no teclado. Use ícones e linguagem familiar para os jogadores de cada plataforma.

Layout responsivo

O layout da interface do seu jogo deve se adaptar a diferentes tamanhos de tela e orientações. Em um grande monitor de computador, você tem muito espaço para mostrar todos os botões ao mesmo tempo. Em uma pequena tela de telefone, no entanto, todos esses botões pareceriam apertados e desordenados.

• Adapte layouts ao tamanho e orientação da tela — Use padrões responsivos para que sua interface reorganize ou condense adequadamente. Por exemplo, mova botões menos importantes para um menu colapsável ("hamburger"/botão de menu) em telas pequenas, enquanto os exibe em sua totalidade em desktops. Sua interface de jogo deve se adaptar suavemente tanto à orientação paisagem quanto retrato, se suportá-las.
• Implemente componentes de layout que reagem ao tamanho do pai — Construa painéis e widgets de interface que ajustem o tamanho ou a posição com base em seu contêiner pai. Por exemplo, use layouts de visualização dividida onde painéis laterais colapsam em telas estreitas, mas se expandem em telas mais largas.

Dimensionamento dinâmico

Isso diz respeito ao tamanho de seus elementos de interface, não apenas à sua posição. Sua interface deve aumentar ou diminuir com a tela para que tudo mantenha o tamanho certo e seja sempre fácil de interagir.

• Suporte a dimensionamento baseado em conteúdo e quebra automática — Implemente comportamentos de dimensionamento automático: deixe caixas de texto crescerem ou encolherem com o conteúdo e suporte quebra automática de linha para que os rótulos não transbordem ou se tornem ilegíveis conforme o tamanho da tela muda.
• Expose e respeite preferências de acessibilidade / do usuário — Permita que sua interface responda às configurações de dimensionamento de texto ou interface especificadas pelo usuário, ligando essas configurações diretamente ao dimensionamento de elementos da interface para que preferências de acessibilidade aumentadas se traduzam sempre em interfaces maiores e mais legíveis.

Legibilidade e clareza visual

Os jogadores conseguem ler seu texto em uma pequena tela de telefone ou em uma TV maior que está longe deles? Seus botões são fáceis de ver contra o fundo do seu mundo 3D?

• Escolha tamanhos e estilos de fonte para telas pequenas — Sempre selecione tamanhos de fonte que sejam legíveis em dispositivos móveis, não apenas em desktop. Teste em dispositivos reais e verifique se o texto é legível no menor tamanho esperado. Evite fontes excessivamente decorativas ou finas.
• Garanta alto contraste e uma hierarquia visual clara — Use cores para texto e fundos que proporcionem contraste suficiente para serem legíveis em várias condições de iluminação do jogo. Empregue uma hierarquia visual forte e faça com que ações e rótulos principais se destaquem por meio de tamanho, cor ou colocação.

Considerações finais

A adaptabilidade é sobre encontrar os jogadores onde eles estão, seja em suas mãos, em sua mesa ou na tela grande. Criadores do Roblox que constroem com essas diretrizes entregam jogos multiplataforma significativos, acessíveis e divertidos. Comece a adaptar hoje e deixe suas criações prosperar!