Que dois-je garder à l'esprit lors de la création de jeux 2D pour plusieurs résolutions?


27

Je fais un jeu 2D (Android). Les appareils Android varient beaucoup en résolution d'écran; que dois-je garder à l'esprit lorsque je crée mon jeu?

  • Dois-je conserver de grandes versions de toutes les images et les réduire en fonction de la résolution (cela ne gaspille-t-il pas l'espace)?
  • Les polices bitmap évoluent-elles bien ou dois-je utiliser autre chose?
  • Autre chose que j'oublie?

Réponses:


26

Je suis le développeur d'un jeu mobile extrêmement portable qui fonctionne sur tout, des PC aux téléviseurs, en passant par le Kindle noir et blanc d'Amazon (Smiles HD - http://smileshd.com - Plus d'appareils et de plateformes que vous n'y voyez) .

La meilleure façon que j'ai trouvée pour prendre en charge n'importe quel appareil est de choisir une résolution de base, puis d'augmenter (ou de réduire) l'écran actuel. Si vous voulez tricher, vous pouvez vous adapter à la nouvelle résolution d'écran, mais idéalement, vous devez conserver le même rapport d'aspect. Ajuster un jeu fait pour un affichage 4: 3 semble hideux sur un 16: 9, mais adapter un 16: 9 sur un 16:10, personne ne le remarquera. Vous remarquerez que je me réfère aux écrans par rapport d'aspect et non par les dimensions, ce qui est particulièrement utile pour penser à cette époque de tailles LCD totalement aléatoires.

Pour créer des illustrations qui conviennent à n'importe quel écran tout en conservant le rapport hauteur / largeur, créez des arrière-plans plus grands que la plupart des écrans typiques ne verront jamais. Ceci est similaire au concept de zones sans titre avec la télévision.

http://en.wikipedia.org/wiki/Safe_area

Les arrière-plans générés fonctionnent très bien pour cela. Motifs en mosaïque, damiers, formes fractales, etc. Il vous suffit de générer un peu plus pour s'adapter à un nouvel écran.

En outre, la création d'images statiques plus grandes que ce que votre utilisateur typique verra. Plus large qu'un écran large (16: 9) et plus carré que la définition standard (4: 3). De nouveau dans les zones sans titre, placez vos informations importantes dans une zone sûre, augmentez légèrement la taille de sorte que votre zone de sécurité touche l'un des bords de votre écran et laissez un peu de ruissellement pour les appareils qui sont juste un peu plus grands.

Une variante avec laquelle je travaille aujourd'hui est la création d'objets 3D "sans risque pour le titre". Puisqu'ils sont en 3D, composés entièrement de sommets, les rendre plus grands que l'écran ne prend pratiquement pas plus de mémoire que s'ils devaient s'adapter. Tout comme la densité de pixels augmente, vous souhaiterez peut-être des textures plus détaillées. Sinon, eh bien, c'est un peu flou.

Interfaces utilisateur, j'aime adapter l'interface utilisateur principale dans un carré parfait au milieu de l'écran. Les coins et les bords du milieu sont également de très bons endroits pour ranger les choses; Vous devez calculer leurs coordonnées comme telles (par rapport au coin ou aux bords du milieu).

http://www.smileshd.com/press/iPad/png/UI01.png

Si vous voulez vraiment devenir fantaisiste, vous pouvez prendre en charge les orientations hautes et larges. Certains appareils signalent leurs résolutions d'écran comme plus hautes que larges (iPhone par exemple), vous devrez donc peut-être faire quelque chose pour ces appareils de toute façon, même si cela fait simplement pivoter toutes vos coordonnées.

Une interface utilisateur qui s'adapte aux écrans grands et larges peut être un spectacle assez impressionnant.

Large: http://www.smileshd.com/press/iPad/jpg/SmilesHD01.jpg

Grand: http://www.smileshd.com/press/iPad/jpg/SmilesHD02.jpg

Du côté positif, du point de vue de la conception, vous n'avez vraiment besoin que de considérer Grand et Large, au lieu de Portrait + Portrait inversé + Paysage + Paysage inversé. Lorsque vous choisissez les positions des objets à l'écran, pensez à avoir une position alternative plus appropriée pour l'autre orientation.

Dois-je conserver de grandes versions de toutes les images et les réduire en fonction de la résolution (cela ne gaspille-t-il pas l'espace)?

Eh bien, vous pouvez soit "gaspiller de l'espace" et prendre en charge une plus grande variété d'appareils avec une seule construction, soit "perdre votre temps" et avoir à faire BEAUCOUP de constructions et redimensionner des illustrations pour de nombreux appareils.

Dans le meilleur des cas, vous devez créer votre illustration à une résolution plus élevée que la taille finale ne le serait sur un téléviseur 1080p (1920x1080). 2048x2048 devrait être une taille commune dans votre illustration source. Soit cela, soit envisagez d'utiliser des outils d'illustrations vectorielles comme Flash et Adobe Illustrator.

Je vous recommande fortement de créer un processus automatisé pour redimensionner votre œuvre d'art. La plupart des appareils mobiles aujourd'hui, tablettes comprises, ne dépassent pas les résolutions supérieures à 720p (1280x720) ... du moins, pas beaucoup. Mais l'année prochaine, nous ne savons tout simplement plus si cela sera vrai (iPad 3?).

Quoi qu'il en soit, pour de meilleures performances, vous devez vous habituer à l'idée de l'illustration source et des actifs source. Vous pouvez ensuite effectuer un processus qui optimise les données pour le ou les appareils que vous ciblez.

Les polices bitmap évoluent-elles bien ou dois-je utiliser autre chose?

Ils évoluent bien si vous utilisez un bon filtrage. Si vous créez votre jeu 2D avec du matériel 3D (OpenGL ES), je vous recommande fortement d'utiliser le filtrage linéaire combiné avec MipMapping (c'est-à-dire un ensemble d'images à échelle réduite). Vous pouvez obtenir des résultats parfaitement perceptibles avec cela, et il est souvent plus rapide d'utiliser des mipmaps que de ne pas le faire.

http://en.wikipedia.org/wiki/Mipmapping

Quoi qu'il en soit, j'espère que cela aide. Bonne chance avec votre projet.


2

En général, chaque texture que vous créez doit être de 256 x 256 ou 512 x 512. Si vous ciblez également des pads (Galaxy Tab, Honecomb, iPad), alors 512x512 ne remplira pas tout l'écran, donc vous voudrez peut-être inclure des versions plus grandes de ces éléments artistiques qui doivent remplir l'écran. Apple inclut un suffixe d'image "@ 2x" natif pour gérer ce cas.

La solution simple, que j'ai moi-même utilisée, consiste à créer simplement votre jeu pour un écran 320x480 (iPhone). Laissez cela doubler naturellement pour l'iPhone 2 (640 x 960), et le seul autre cas que vous devez vraiment gérer différemment est le fait que certains appareils Android ont un écran plus grand - il suffit donc de mettre un tampon en haut et en bas (en mode portrait mode).

En bref - créez votre jeu pour une taille d'écran neutre, puis couvrez les exceptions, basées sur


2
Je pense que tu as raté mon Androidtag. Quoi qu'il en soit, le tampon craint; il vaut mieux que votre jeu évolue et soit agréable.
ashes999

1

Il est préférable de conserver les copies de travail de tous les actifs dont vous disposez. Si vous développez une image dans Photoshop, par exemple, enregistrez le fichier psd d'origine. Chaque fois que vous avez besoin d'une image res différente, vous pouvez l'ouvrir et exporter la nouvelle image avec une perte de qualité minimale.

Plutôt que de construire pour une taille d'écran ou une autre, je vous suggère fortement de construire pour une variété depuis le début. Vous ne parlez pas seulement de différentes densités de pixels, vous parlez également de différents rapports d'aspect. 16x9 et 16x10 peuvent donner une expérience visuelle très différente. Assurez-vous donc de tester de nouvelles modifications sur une variété de formes et de tailles d'écran différentes.

D'après mon expérience, les polices bitmap ne sont pas du tout bien adaptées. Cela peut dépendre beaucoup du style de police que vous utilisez, mais en général, le rééchantillonnage du bitmap de police donne de très mauvais résultats. Les polices bitmap fonctionnent mieux lorsque votre échantillonnage de texture n'est pas défini sur le multi-échantillonnage (GL_NEAREST et sans mipmaps) et il est rendu de telle sorte qu'il mappe pixel par pixel à l'écran. Vous pouvez envisager d'utiliser une série de rendus de la même police à différentes tailles et vous assurer que la police apparaît toujours à l'échelle == 1 dans votre jeu; cela vous permettra quelques options limitées lors du choix d'une taille de police à utiliser dans un scénario particulier.


1

Android fournit une aide pour cela ...

Vous pouvez spécifier des «ressources alternatives» pour des éléments tels que vos graphiques.
Jetez un œil à la section "Fourniture de ressources alternatives" à ce lien: http://developer.android.com/guide/topics/resources/providing-resources.html Vous devriez pouvoir trouver des exemples dans les exemples du SDK ou via Google.

De plus, Google fournit un émulateur Android que vous obtenez avec le SDK. Vous pouvez définir plusieurs périphériques virtuels avec différentes configurations pour tester votre code. Voici un lien vers plus d'informations: http://developer.android.com/guide/developing/devices/emulator.html

Bonne chance amb


0

Outre les aspects techniques (abordés par M. Strange), soyez prudent lorsque vous concevez un jeu avec une taille d'écran variable. À titre d'exemple, imaginez jouer des rues de rage sur un écran de type paysage puis sur un écran de portrait.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.