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

10

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?

Blub
fonte
1
Veja a pergunta [this] [1]. Minha resposta explica alguns dos detalhes sangrentos. [1]: gamedev.stackexchange.com/questions/34/…
Engineer

Respostas:

5

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.

Corillian
fonte
-1

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).

George Duckett
fonte
"apenas renderize na textura, depois renderize na tela, redimensionando conforme apropriado" Não. Isso criaria uma imagem realmente embaçada e estranha. E se a resolução for muito baixa? Tudo ficará ilegível.
Tara
Continue lendo, essa é uma das poucas opções. Você não iria ficar definitivamente as questões que descrevem tanto (embora se feito simplesmente / incorretamente então sim seria embaçada e esticado etc.)
George Duckett
Eu continuei lendo. Mas sua resposta é muito inespecífica. Além disso, você definitivamente obteria os problemas que descrevi, porque você não pode simplesmente renderizar tudo em baixa resolução e esperar que o texto permaneça perfeitamente legível.
Tara
Não estou dizendo renderizar para uma resolução mais baixa que o alvo, embora obviamente apenas renderizar em resolução mais alta também produza artefatos. Minha resposta poderia ter sido especificada também, no entanto, como já existe uma boa resposta aceita, não voltarei a esta. Mencionei a renderização de texto especificamente, pois é um pouco diferente de escolher onde (e qual o tamanho) para desenhar algo, mas é verdade que foi muito breve e poderia ter sido elaborado.
George Duckett 23/09
Eu não disse renderizar para uma resolução menor do que o alvo também. Você simplesmente não pode pegar a interface do usuário 1: 1 e renderizá-la em uma resolução menor do que foi projetada (foi isso que eu quis dizer com resolução menor).
Tara