Qual sistema de coordenadas usar para lidar com a interface do usuário 2D?

Seguindo a questão das proporções , estou interessado em ouvir o que outras pessoas estão usando ao trabalhar em sistemas de interface do usuário 2D (provavelmente suas próprias soluções caseiras). Especificamente, como você lida com sistemas de coordenadas. Na minha opinião, existem três opções:

1. Coordenadas codificadas (por exemplo: 0 -> 720, 0 -> 576)
2. Coordenadas normalizadas (0,0 -> 1,0, 0,0 -> 1,0), mapeadas em coordenadas reais antes da renderização
3. Coordenadas virtuais (por exemplo: 0 -> 1600, 0 -> 1000), mapeadas em coordenadas reais antes da renderização

O código embutido é obviamente útil apenas se você estiver em uma plataforma fixa e souber quais são as coordenadas do espaço da tela com antecedência ou se estiver preparado para criar layouts de tela para todos os conjuntos possíveis de dimensões da tela.

As coordenadas normalizadas são boas, mas sofrem de ambiguidade quando a proporção da tela não é fixa (por exemplo, 0,75 mapeia para uma coordenada física diferente ao executar em widescreen do que em 4: 3). Além disso, para os autores, é realmente contra-intuitivo declarar que um elemento da interface do usuário é (0,2 x 0,2), apenas para descobrir que ele não é realmente quadrado quando renderizado.

As coordenadas virtuais são inequívocas, mas sofrem dos mesmos problemas que as coordenadas normalizadas no estágio de remapeamento: uma pequena discrepância decimal pode resultar em erros individuais, o que significa que os elementos da interface do usuário que devem ser colocados lado a lado agora têm uma costura entre eles.

Da mesma forma, quando você tem uma tela de resolução fixa, as coordenadas normalizadas e virtuais significam que é muito difícil garantir um mapeamento 1: 1 entre os pixels finamente criados pelo artista na imagem da interface do usuário e os pixels na tela, o que significa que você corre o risco de artefatos de escala desagradáveis ​​(supondo que você esteja renderizando como quads texturizados na tela).

Adotamos a abordagem de coordenadas virtuais, especificamente para evitar ambiguidade em relação às proporções. Portanto, ao renderizar em uma tela 16:10, o espaço da interface do usuário é (0,0) -> (1600,1000), mas ao renderizar para 4: 3, o espaço da interface do usuário utilizável é realmente (133,0) -> (1467 0).

Existem soluções melhores que eu simplesmente não conheço? Existem boas estratégias para minimizar os problemas dessas três abordagens?

Acho que concordo que as coordenadas normalizadas realmente não são bem mapeadas para as coisas da interface do usuário.

O que eu normalmente faço para layouts 2D é basicamente o seu espaço coordenado "virtual", mas eu escolho um espaço que mapeia 1: 1 com minha resolução de destino preferida (1280x720, por exemplo). Não é fixo, mas é intuitivo, e sei que em 90% dos casos parecerá correto. Obviamente, é importante não ficar complacente e realmente verificar diferentes resoluções com frequência.

Para ter mais nitidez ao remapear as resoluções, peguei emprestadas algumas dicas da renderização de fontes e forneci informações de dicas. Portanto, certifique-se de que as coisas que precisam ser contínuas sejam marcadas de alguma maneira, enquanto também executa o arredondamento para pixels exatos onde o alinhamento preciso é necessário.

Talvez também considere tornar as coisas mais relativas. Portanto, em vez de tudo "posicionar o objeto 1 em X, Y absoluto", você pode especificar "posicionar o canto inferior esquerdo do objeto 2 em algum deslocamento do canto inferior direito do objeto 1". É mais fácil, então, redimensionar e / ou mudar as coisas, sem perder relacionamentos importantes.

O sistema de coordenadas da CEGUI parece realmente bem pensado. Seu sistema de coordenadas unificado combina posicionamento absoluto com posicionamento relativo. Você pode especificar locais como:

• no meio da tela
  UDim(0.5,0)
• cinco pixels à esquerda da borda direita
  UDim(1.0,-5)
• dois widgets no meio, mas separados por 10 pixels
  HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

Em caso de dúvida, por que não usar o modelo de caixa CSS, ou uma simplificação?

Você pode especificar posições em porcentagens ou pixels. Você pode posicionar contêineres com porcentagens, mas posicionar os itens dentro deles por pixels, por exemplo.

Eu gosto de usar coordenadas virtuais, mas com base em uma resolução-alvo comum (de preferência uma das resoluções mais altas em que você espera que o jogo seja executado).

Hoje em dia, uma boa escolha pode ser 1920x1080.

Todos os trabalhos artísticos e maquetes de tela podem ser criados com essa resolução e facilita a medição de posições / distâncias em pixels.

Se estiver executando em uma proporção diferente das coordenadas virtuais, você pode escolher como ajustá-lo à tela (letterboxing, recorte lateral ou um pouco de ambos)

Ao codificar, acho 'pensar em pixels' muito mais fácil do que pensar em coordenadas normalizadas! - Quero que o texto tenha '50 pixels (virtuais) de altura 'em vez de' 0,0463 unidades de altura '

Depende totalmente do tipo de GUI que você possui, mas geralmente os jogos têm coisas ancoradas nas bordas da tela e nos cantos e, em seguida, podem ter uma caixa no meio da tela para um diálogo modal ou algo assim.

Se esse for o seu caso, sugiro usar um esquema em que você especifique uma âncora e um deslocamento (x, y)? Isso seria semelhante ao BorderLayout do Java (mas talvez com os quatro cantos, quatro médios de bordas e um centro da tela). Por exemplo, você pode especificar um deslocamento de (0,0) no canto superior esquerdo; o elemento seria ancorado exatamente no canto da tela. E então, independentemente da resolução, proporção, etc., você teria o indicador de integridade no canto da tela. Mas se você ancorar um elemento no canto superior direito, o elemento naturalmente será ancorado em relação ao seu ponto superior direito (em vez de no canto superior esquerdo); assim, novamente, ele será ancorado automaticamente no canto da tela, independentemente da resolução.

Eu definitivamente recomendo contra coordenadas 0.0-1.0 normalizadas; estes podem variar com base na precisão do ponto flutuante. As GUIs devem ser mapeadas para pixels, a menos que você tenha uma GUI 3D.

Depende muito do tipo de jogo e da situação. Para protótipos rápidos e sujos, prefiro planejar a interface do usuário em papel milimétrico, escrever uma lista de coordenadas numéricas para um tamanho fixo de janela e codificar tudo - é mais fácil e rápido para mim. Mas para um projeto "real" em que você desejaria janelas redimensionáveis ​​ou resoluções de tela alternativas, isso obviamente não seria o ideal, e seria melhor algum tipo de solução que permita o dimensionamento em ambas as direções.