Comment créer un système indépendant de résolution?

J'obtiens sur celui-ci. Je peux bien sûr ancrer des trucs sur les bords, ce qui rendrait ma résolution d'interface indépendante ... jusqu'à ce qu'elle change tellement que les graphiques sont trop petits. Comment puis-je évoluer correctement en cas de besoin? Comment garder mes graphiques dans la bonne proportion lors de la mise à l'échelle? Je ne veux pas qu'ils soient étirés si la résolution a une proportion différente comme 16:10 par opposition à quoi que ce soit d'autre.

Existe-t-il une approche vraie et éprouvée à ce sujet? Les lecteurs vidéo affichent des bordures noires à cause de ce problème, n'est-ce pas correctement résoluble?

Gardez d'abord à l'esprit qu'avec la pixellisation, il n'y a techniquement pas de véritable indépendance de résolution. Avec un grossissement suffisamment élevé, les texels individuels commenceront à devenir visibles. La seule solution à cela est d'écrire un système de graphiques vectoriels.

Cela étant dit, il existe quelques étapes pour créer un système robuste indépendant de la résolution basée sur un raster: dimensionnement, systèmes de coordonnées et mise en page.

Pour le dimensionnement et le positionnement, nous devons utiliser un ensemble d'unités qui maintiennent un rapport à la résolution réelle de l'application. Dans ce cas, utilisons les pouces car je suis américain et vous pouvez mettre à l'échelle les éléments avec DPI (points par pouce). Par exemple, supposons que votre application s'exécute à 800x600. Le DPI Windows par défaut est 96, ce qui signifie que l'application a une résolution de (800/96) x (600/96) pouces ou 8,33 x 6,25 pouces.

Étant donné que vous devez être en mesure de travailler avec au moins les rapports d'aspect 4: 3 et 16: 9, la façon dont vous gérez votre système de coordonnées d'écran devient un peu délicate. Ce que je recommande de faire, c'est de mettre (0,0) au centre de la zone d'affichage (ainsi que les fenêtres et les contrôles). Cela fonctionne bien parce que si vous mettez (0,0) dans un coin, alors que ce coin se déplace en fonction de la résolution et du rapport d'aspect, il va traduire tous vos sprites alors que le centre de l'écran sera toujours le centre de l'écran non importe l'appareil. Poursuivre notre exemple avec 800x600 cela entraînerait un système de coordonnées qui est (de gauche à droite) -4,165 pouces à 4,165 pouces et (de haut en bas) 3,125 pouces à -3,125 pouces.

Donc, pour le moment, vous avez un système d'interface utilisateur indépendant DPI avec des éléments qui seront toujours au même endroit par rapport au centre de l'écran - pas tout à fait indépendant de la résolution. Heureusement, ce que l'indépendance DPI vous permet de faire est de mettre à l'échelle l'interface utilisateur en mettant à l'échelle DPI en fonction d'une certaine heuristique. Par exemple, nous pouvons mettre à l'échelle DPI en utilisant la résolution verticale comme notre heuristique. Si 800x600 est 96 DPI, nous utiliserons 123 DPI pour 1024x768 ou 115 DPI pour 1280x720.

Enfin, vous devrez créer un système de mise en page qui gère à la fois le positionnement absolu et le positionnement relatif. WPF et le Web en sont d'excellents exemples. Vous pouvez spécifier que les contrôles / cases remplissent certains% de l'élément parent tout en l'ancrant à un bord avec de nombreuses autres options de disposition automatique utiles. Tout cela ensemble se traduira par un système d'interface utilisateur capable d'apparaître presque identique dans de nombreuses résolutions et proportions différentes.

Pour résumer, je vous recommande vivement d'étudier WPF car il fait presque tout cela, sauf qu'il maintient une origine dans le système de coordonnées du coin supérieur gauche et n'échelonne pas automatiquement le DPI en fonction de la résolution verticale.

Généralement, ce que vous voulez faire dépend du jeu.

Une option consiste à avoir des bordures noires si le rapport d'aspect (proportion) est différent (probablement le plus simple, il suffit de le rendre à la texture, puis de le rendre à l'écran, en le redimensionnant selon les besoins).

Une autre option consiste à avoir différents chemins de rendu pour différents ratios d'aspect. Vous pouvez en avoir un pour écran large, un pour «normal».

Une autre option consiste à mettre les choses à l'échelle séparément, par exemple, agrandir ou réduire la boîte de message de l'interface utilisateur en fonction de la résolution. Chaque fois que vous devez déterminer où dessiner, au lieu d'utiliser des pixels exacts, faites des choses comme 0,2 vers le bas, 0,8 à travers, largeur 0,1, hauteur 0,3. De manière évidente dans ce cas, vous obtiendrez des étirements, bien que selon la façon dont vous dessinez des choses qui pourraient être bien (c'est-à-dire étirer un arrière-plan d'interface utilisateur, mais pas le texte).

En termes de 3D, tant que vous configurez la fenêtre correctement, vous devriez vous retrouver avec des lecteurs grand écran pouvant voir un peu plus que les configurations non grand écran. (dessinez également des bordures noires / ou étirez la vue).