Como manter os controles do pet e o personagem visíveis em uma interface de jogo compacta

Liste as informações e ações de que o jogador precisa durante o loop principal de jogo. Uma primeira versão útil pode incluir o pet, uma ação primária, como alimentar ou brincar, e um indicador compacto que esclareça se essa ação está disponível. Mova configurações, coleções e ações menos frequentes para um menu secundário ou um painel contextual rápido. Esse é um método de design, não uma regra universal: um jogo cuja tarefa central envolva escolher entre várias ações pode precisar de mais controles visíveis de uma só vez.

Defina uma área visual para o personagem antes de acomodar os controles. Mantenha visíveis partes essenciais de sua silhueta e expressão, evitando posicionar botões ou rótulos sobre elas. Se uma ação exigir tocar diretamente no pet, deixe essa área de interação desobstruída; caso os controles fiquem sobrepostos à cena do jogo, certifique-se de que não cubram a parte do personagem que os jogadores precisam ver. As diretrizes de controles de jogos da Apple recomendam reduzir os controles virtuais quando a interação direta com os objetos do jogo puder desempenhar a mesma função (Game controls).

Agrupe ações frequentes onde sejam fáceis de alcançar e coloque ações secundárias mais afastadas ou atrás de um menu. Em telas sensíveis ao toque, evite aglomerar botões na mesma região onde a mão do jogador encobre o pet. A Apple sugere posicionar controles de toque frequentes próximos ao polegar e controles secundários próximos ao topo da tela; suas diretrizes também recomendam levar em consideração o alcance confortável e os limites do dispositivo. Encare essas orientações como pontos de partida a serem testados no dispositivo e na orientação pretendidos, e não como um layout fixo para todos os jogos.

Torne o ícone visível compacto sem reduzir a área de toque real para acompanhar o tamanho. A Apple recomenda um mínimo de 44 por 44 pontos para controles usados com frequência e 28 por 28 pontos para controles menos importantes em suas plataformas. O Android recomenda pelo menos 48 por 48 pixels independentes de densidade para áreas de toque interativas. Essas medidas são específicas de cada plataforma; portanto, use as unidades e diretrizes da plataforma relevante em vez de tratar esses números como intercambiáveis (Apple game controls, Android accessibility guidance). Deixe espaçamento suficiente para evitar toques acidentais, principalmente quando duas ações tiverem resultados diferentes.

Um pet pode estar tecnicamente na tela e, mesmo assim, ser difícil de notar quando controles, rótulos ou painéis decorativos competem com ele. Utilize um peso visual moderado para elementos secundários da interface: ícones pequenos, rótulos curtos e painéis que cubram apenas o espaço estritamente necessário. Mantenha o rosto do personagem e outros detalhes importantes nitidamente visíveis durante as ações mais relevantes. Se o cenário do jogo mudar atrás de textos ou ícones, considere adicionar um fundo sutil ou um contorno para que a interface continue legível sem a necessidade de um painel opaco grande.

Verifique textos e ícones tanto sobre partes claras quanto escuras do cenário. Um contraste eficaz sobre determinado fundo pode desaparecer quando o pet se move ou o cenário muda. Para textos, as diretrizes WCAG da W3C estabelecem uma taxa de contraste de 4,5:1 para textos de tamanho normal e de 3:1 para textos grandes. As WCAG são diretrizes voltadas para conteúdo web, e não uma regra específica para jogos, mas seus limites de contraste podem servir como uma referência útil para avaliar textos de interface sobre fundos variáveis (W3C contrast guidance). Não dependa apenas da cor para indicar uma ação indisponível; altere também seu rótulo, formato ou estado de maneira visível.

Se os controles persistentes ocuparem espaço demais, revele ações opcionais apenas quando o jogador abrir um menu ou selecionar o pet. Oculte ações que estejam indisponíveis no estado atual e exiba uma alteração clara de estado quando um controle for pressionado. A Apple recomenda especificamente adaptar quais controles virtuais ficam visíveis de acordo com o contexto do jogo, incluindo ocultar controles irrelevantes e tornar mais visíveis os controles ativos. Um padrão prático consiste em manter a ação primária sempre disponível e revelar opções relacionadas em um pequeno menu que se fecha após a seleção.

Mantenha as mudanças de estado previsíveis. Um controle que desaparece no momento em que o jogador está prestes a usá-lo pode causar confusão; portanto, reserve comportamentos de ocultar/exibir para ações cuja disponibilidade seja evidente a partir do estado atual. Se um botão ficar inativo, indique esse estado e, quando necessário, explique brevemente o que mudou. Evite que um menu em expansão cubra o rosto do pet ou a área onde o jogador precisa tocar em seguida.

Projete considerando a área utilizável, não apenas o retângulo externo da tela. Entalhes (notches), recortes de câmera, barras do sistema e áreas de gestos podem se sobrepor a controles importantes próximos às bordas. As diretrizes de layout da Apple descrevem as áreas de segurança (safe areas) como regiões que ajudam a manter o conteúdo afastado de elementos de interface e recursos do dispositivo. O Android também recomenda respeitar os recuos de barras do sistema, gestos e entalhes de tela, mantendo os controles essenciais longe de recortes (Apple layout guidance, Android edge-to-edge guidance). As ilustrações de fundo podem se estender até a borda, enquanto os elementos interativos devem permanecer recuados.

Não presuma que um único arranjo compacto servirá para todas as proporções de tela. Fixe os controles na área utilizável e permita que o espaçamento ou o agrupamento se ajustem quando a largura disponível mudar. As diretrizes de jogos do Android para Unity recomendam o uso da API de área de segurança e o suporte a diferentes tamanhos e proporções de tela. Teste layouts em modo retrato ou paisagem apenas se o jogo oferecer suporte a eles, e faça novas verificações após rotações, redimensionamentos de janela ou ao dobrar o aparelho, caso essas configurações estejam no escopo do projeto (Android guidance for Unity games on large screens).

Um mockup estático não é capaz de mostrar quais áreas os dedos do jogador cobrem durante o uso. Avalie a interface no tamanho de tela física real pretendido e execute as ações principais prestando atenção em detalhes encobertos do personagem, toques perdidos e controles que se sobreponham a recursos do sistema. Repita a verificação na menor tela suportada e em proporções mais largas ou mais altas. Se possível, peça a alguém que não conheça o layout para realizar a tarefa principal e observe onde essa pessoa toca, hesita ou perde o pet de vista.

Utilize uma breve lista de verificação com critérios de aprovação/reprovação para cada layout suportado:

• O pet permanece visível durante a ação principal, incluindo seu rosto ou outros detalhes essenciais.

• A ação primária é de fácil alcance, possui um estado nítido de pressionado e não se sobrepõe a outro alvo de toque.

• Rótulos e indicadores importantes de status continuam legíveis diante das mudanças no fundo do cenário.

• Nenhum controle essencial fica posicionado sob um recorte, barra do sistema ou área de gestos.

• Abrir um controle secundário não encobre a parte do personagem ou da área de jogo necessária para a etapa seguinte.

Se algum item for reprovado, altere uma coisa por vez: remova um elemento de baixa prioridade, mova um controle em direção à borda da área de jogo respeitando as margens de segurança ou passe a exibir ações secundárias apenas quando necessário. Teste novamente a mesma interação. Essa abordagem facilita identificar se a mudança realmente solucionou o problema de visibilidade ou apenas o deslocou para outro lugar.

• Apple Developer, Game controls

• Apple Developer, Layout

• Android Developers, Make apps more accessible

• Android Developers, Edge-to-edge design

• Android Developers, Make your Unity game great on all form factors

• W3C Web Accessibility Initiative, Understanding Success Criterion 1.4.3: Contrast (Minimum)