Comment abordez-vous l'indépendance de résolution dans les contenus graphiques raster?

32

Les jeux qui ne sont pas assez chanceux pour fonctionner sur une plate-forme verrouillée, comme les ordinateurs de poche, doivent fonctionner avec différents formats de résolution et formats.

Dans un jeu 3D, vous pouvez avoir un HUD ou une interface graphique de menu basée sur des graphiques raster, et dans un jeu 2D, vous pouvez avoir un tas de quads qui sont des vaisseaux pour les sprites.

Ma question est donc la suivante: comment abordez-vous la conception et l’exploitation du contenu avec différentes résolutions et formats d’image? Supposons que vous ayez un caractère de sprite de 300 x 400 pixels et entouré d'un niveau de tuiles. Sur différentes résolutions / proportions, vous verriez un FOV différent. Ou si vous avez un menu HUD ou GUI, vous voudrez peut-être garder certaines choses au même endroit et de la même taille par rapport à l'écran. Pourtant, la source graphique est des bitmaps raster, pas des vecteurs.

De toute évidence, le problème a été abordé à de nombreuses reprises. Je suis intéressé d'entendre différentes approches qui ont fonctionné pour vous jusqu'à présent. Conservez-vous une unité «pixel» arbitraire de dimensions que vous transformerez comme par magie en dimensions nécessaires via une formule basée sur le rapport de résolution et le rapport de format ou d'autres approches?

modifier:

La conclusion consiste donc à énumérer vos proportions. Combinaison d'aspect la plus faible: la résolution est celle dans laquelle vous concevez des éléments importants. Un endroit sûr si vous voulez. Les mêmes rapports d'aspect, mais les résolutions plus élevées sont de simples problèmes de mise à l'échelle. Le contenu artistique est conçu pour la plus haute résolution. Les ratios d'aspect plus grands indiquent simplement plus de niveau / FOV avec des informations présentées qui ne sont pas critiques, contrairement à celle de la zone de sécurité. Quelque chose comme dans cette image que j'ai faite . texte alternatif

2d sprites gui Image clé
la source
1
Je ne vois pas comment vous êtes passé des réponses à cette question à la conclusion que vous avez faite après votre " édition: ". OMI, ces réponses sont inadéquates et vous n’auriez pas dû en accepter aucune. EG: Votre réponse acceptée ne parle que d'une partie de la question (mise à l'échelle du sprite), pas de la question dans son ensemble. Ce que vous avez dit après le " edit: " est plus utile que les réponses ici, IMO. Mais je ne le «comprends» pas assez pour le mettre en œuvre. Malheureusement, si je demande des précisions dans une nouvelle question, cela sera marqué comme un doublon.
Daniel Kaplan

Réponses:

7

Si vos résolutions sont similaires, vous pouvez simplement utiliser le même art pour toutes les résolutions, avec éventuellement une réduction de la mise à l'échelle lors de l'exécution pour les écrans plus petits. S'ils diffèrent de plus d'un facteur 2x, il vous faudra créer (ou au moins modifier un artiste) des éléments distincts pour les différentes résolutions.

Avec la 2D, la résolution a un impact considérable sur la conception des images. Un sprite qui a l'air richement détaillé et réaliste en haute résolution sera boueux et indéchiffrable. De même, un sprite propre et net en basse résolution semblera peu coûteux et trop simple en haute résolution.

munificent
la source
Le rapport d'aspect m'inquiète cependant. Par exemple, ce n’est pas un énorme saut de 1080p à 720p puisque l’aspect est le même, nous effectuons alors une simple mise à l’échelle. Qu'est-ce qui se passe quand vous avez dire 1080p vs 1680x1050. Est-ce que je montre plus de FOV de niveau, plus large sur un aspect plus large, sorte de marge? Par exemple, concevez un aspect plus large avec une zone sûre où tout le contenu important va, afin de ne pas être tronqué sur des aspects plus étroits.
Image clé
Je mettrai à jour la question avec la présentation visuelle de cette solution. On dirait qu'il n'y a pas d'autre moyen.
Image clé
4

Une solution consiste à créer les éléments d'image dans un format vectoriel (SVG, Illustrator, etc.) et à les convertir en images tramées selon les besoins des différentes versions du jeu.

Matias Valdenegro
la source
Bien sûr, mais j'ai oublié de mentionner que ce n'est pas une option. Le problème majeur étant que la création de contenu vectoriel et raster est totalement différente (le rendu est bien meilleur pour les artistes). Une option serait de créer plusieurs ressources raster, mais je suis fermement convaincu qu'il doit y avoir une meilleure solution. Par exemple, créer des ressources pour le plus grand ratio de résolution / aspect pris en charge et réduire à la volée les versions d’exécution de résolution inférieure, ou quelque chose comme cela. Le positionnement reste cependant le problème.
Image clé
Oui, c'est également une option si vous pouvez supporter les problèmes de perte de qualité et de performances.
Matias Valdenegro
8
Je ne suis pas sûr que ce soit correct que "le tramage soit meilleur pour les artistes". Mon graphiste utilise Illustrator pour ces mêmes raisons. Au moment de passer à la résolution 2X de l'iPhone 4, il lui était facile de tout exporter à nouveau. Le raster peut être préférable pour les artistes Photoshop qui ne souhaitent pas se recycler en tant qu’artistes vectoriels, mais à long terme, il est probablement préférable de devenir des experts en graphisme vectoriel. Les plates-formes physiques changent trop rapidement pour penser en pixels.
Chris Garrett
4

Si vous voulez utiliser la perfection en pixel (en mode "tel que l'artiste l'a produit") en mode plein écran, le problème est qu'il n'existe pas de moyen entièrement automatisé de redimensionner les sprites OU de les faire pivoter sans pour autant les annuler. t nécessitent une approbation humaine. En fin de compte, c'est parce que le placement des pixels est une chose subjective. L'algorithme de rendu effectue une mise à l'échelle, ou une rotation, et doit utiliser certaines techniques d'approximation pour le faire, par exemple. filtrage bilinéaire. Si vous voulez toujours des bords durs sur les pixels pour avoir cette "perfection de pixel" (c'est-à-dire ne pas utiliser AA ou BF), alors vous devrez accepter que la mise à l'échelle par un degré de non-puissance de 2 va aller produire des artefacts indésirables.

RotSprite , une application / algorithme conçu pour effectuer des rotations "automatiques" des images - objets , offre une approche intéressante à un problème similaire . Je veux dire par là que cela produit un certain nombre de résultats finaux éventuellement souhaitables après un traitement intensif, à choisir par l'opérateur humain. Les images-objets sélectionnées à la main finissent par entrer dans le jeu, ce qui signifie qu'il s'agit d'une étape de création de contenu et non d'une étape d'exécution.

Une réponse possible à votre question "pixels agnostiques de dimensions magiques arbitraires": OpenGL (que vous voudrez peut-être utiliser si vous utilisez plusieurs plates-formes) fonctionne de manière totalement différente de celle d'un logiciel de rendu matriciel. Il considère la largeur et la hauteur de l'affichage dans la plage de virgule flottante comprise entre 0,0 et> 1,0 et mappe les pixels en conséquence sur le processeur graphique. Bien sûr, cela peut entraîner des artefacts, sauf si. BF est activé pour les textures (ce qui correspond à vos sprites dans OpenGL).

Ingénieur
la source
C'est complètement faux. Vous pouvez utiliser des éléments de composition et répétables (imaginez des carreaux) au lieu de les redimensionner pour conserver des pixels parfaits, quel que soit le rapport de format. Bien sûr, si les éléments sont petits à une résolution plus élevée, ils deviendront de plus en plus petits. vous aurez donc besoin d'une mise à l'échelle 2X ou de ressources de résolution différentes.
adrix89