Como faço para criar um sistema independente de resolução?

Estou apagando essa. Eu posso ancorar coisas nas bordas, é claro, isso tornaria minha resolução de interface do usuário independente ... até que ela mude tanto que os gráficos sejam muito pequenos. Como dimensiono adequadamente sempre que necessário? Como mantenho meus gráficos na proporção correta durante o dimensionamento? Eu não os quero esticados se a resolução tiver uma proporção diferente como 16:10 em oposição a qualquer outra coisa.

Existe uma abordagem verdadeira e testada para isso? Os players de vídeo mostram bordas pretas devido a esse problema, isso não é solucionável adequadamente?

Primeiro, lembre-se de que, com a rasterização, tecnicamente não existe uma verdadeira independência de resolução. Com uma ampliação suficientemente alta, texels individuais começarão a se tornar visíveis. A única solução para isso é escrever um sistema de gráficos vetoriais.

Dito isto, existem algumas etapas para criar um sistema independente de resolução baseado em varredura robusto: dimensionamento, sistemas de coordenadas e layout.

Para dimensionamento e posicionamento, precisamos usar algum conjunto de unidades que mantenha uma proporção com a resolução real do aplicativo. Nesse caso, vamos usar polegadas porque sou americano e você pode dimensionar elementos com DPI (pontos por polegada). Por exemplo, digamos que seu aplicativo esteja sendo executado em 800x600. O DPI padrão do Windows é 96, o que significa que o aplicativo possui uma resolução de (800/96) x (600/96) polegadas ou 8,33x6,25 polegadas.

Como você precisa trabalhar com, pelo menos, as proporções 4: 3 e 16: 9, como você lida com o sistema de coordenadas da tela fica um pouco complicado. O que eu recomendo fazer é colocar (0,0) no centro da área de exibição (além de janelas e controles). Isso funciona bem porque se você colocar (0,0) em um canto, à medida que ele se move com base na resolução e na proporção, ele traduzirá todos os seus sprites, enquanto o centro da tela sempre será o centro da tela. importa o dispositivo. Continuando o nosso exemplo com 800x600, isso resultaria em um sistema de coordenadas que é (da esquerda para a direita) -4.165in a 4.165in e (de cima para baixo) 3.125in a -3.125in.

Portanto, no momento, você possui um sistema de interface do usuário independente de DPI com itens que sempre estarão no mesmo local em relação ao centro da tela - não totalmente independentes da resolução. Felizmente, o que a independência de DPI permite fazer é dimensionar a interface do usuário, dimensionando o DPI com base em algumas heurísticas. Por exemplo, podemos dimensionar o DPI usando a resolução vertical como nossa heurística. Se 800x600 tiver 96 DPI, usaremos 123 DPI para 1024x768 ou 115 DPI para 1280x720.

Por fim, você precisará criar um sistema de layout que lide tanto com o posicionamento absoluto quanto com o relativo. Excelentes exemplos disso são o WPF e a web. Você pode especificar que os controles / caixas preencham alguma% do elemento pai enquanto o encaixa em uma aresta, juntamente com muitas outras opções úteis de layout automático. Tudo isso resultará em um sistema de interface do usuário capaz de parecer quase idêntico em várias resoluções e proporções diferentes.

Para resumir, recomendo que você estude o WPF, pois faz quase tudo isso, exceto que mantém uma origem no sistema de coordenadas do canto superior esquerdo e não escala automaticamente o DPI com base na resolução vertical.

Geralmente o que você gostaria de fazer depende do jogo.

Uma opção é ter bordas pretas se a proporção (proporção) for diferente (provavelmente mais fácil, basta renderizar em textura e renderizar em tela, redimensionando conforme apropriado).

Outra opção é ter diferentes caminhos de renderização para diferentes proporções. Você pode ter um para widescreen e outro para 'normal'.

Outra opção é dimensionar as coisas separadamente, por exemplo, aumentar ou diminuir uma caixa de mensagem da interface do usuário, dependendo da resolução. Sempre que você precisar descobrir para onde desenhar, em vez de usar pixels exatos, faça coisas como 0,2 para baixo, 0,8 transversalmente, largura 0,1, altura 0,3. Ovbiously neste caso, você obteria um alongamento das coisas, embora dependendo de como você está desenhando coisas que podem ser boas (ou seja, estique um plano de fundo da interface do usuário, mas não o texto).

Em termos de 3D, desde que você configure a viewport corretamente, você deve terminar com os widescreen players que podem ver um pouco mais do que as configurações não widescreen. (alternativamente, desenhe bordas pretas / ou estique a vista).