Choisir la résolution de vos ressources artistiques 2D
Lors des événements de jeu et en ligne, les gens me posent souvent cette question : « Je crée un jeu 2D dans Unity pour PC et mobile : quelle doit être la résolution de mes ressources ? » Il n’existe pas de réponse simple à cette question qui couvre tous les cas. Lisez cet article de blog pour avoir une meilleure idée de la meilleure marche à suivre pour votre projet. Ces dernières années, nous avons travaillé sur de nombreuses fonctionnalités qui vous aident à créer des jeux 2D dans Unity: Atlas de sprites, physique 2D, une fonctionnalité Tilemap pour les mondes rectangulaires, hexagonaux ou isométriques, la forme de spritebasée sur les splines, l'animation 2Det bien plus encore.
Unity n'exprime pas la taille d'un objet en pixels et cela peut dérouter les artistes qui créent des ressources pour les jeux 2D. « Quelle taille doivent-ils avoir ? » Comme d'habitude dans le développement de jeux, la réponse à cette question est « cela dépend », mais passons en revue quelques concepts qui faciliteront la décision.
Note: Les images de cet article de blog ont utilisé les magnifiques ressources 2Dde l'Asset Store. Dans ce blog, nous utilisons l'art de l'artiste Mikael Gustafsson.
Si vous êtes un pixel artiste, un avertissement : la plupart des conseils de cet article ne s'appliquent pas entièrement à votre situation. Dans les graphismes pixel art, vous avez quelque chose qui a une résolution extrêmement basse et vous voulez l'agrandir jusqu'à 2x, 4x, 8x, ou peut-être même plus, sa résolution d'origine. Cela signifie qu'un pixel de votre œuvre originale est désormais un carré de 2x2, 4x4, 8x8 pixels réels sur l'écran. Donc, en général, dans le pixel art, vous n'avez pas besoin de trop vous soucier de la résolution de l'écran, mais vous partez de votre art et de l'ambiance que vous souhaitez transmettre (old-school, ère NES, ère 16 bits, pixel art « moderne » à haute résolution, etc.) et vous l'agrandissez plusieurs fois. Unity dispose désormais d'une solution Pixel Perfect sous la forme d'un package autonome si vous utilisez le RP intégré et inclus dans le RP universel et le moteur de rendu 2D. Il est livré avec un composant simple à placer sur l'appareil photo qui fera le travail difficile pour vous et garantira que l'art reste net et aligné avec la grille de vrais petits pixels sur n'importe quel écran. Vous pouvez trouver plus d'informations sur le Pixel Perfect dansla documentation.
Avant d'aborder toute considération concernant le choix de la résolution, il convient de rappeler que lorsque vous créez vos ressources, il est préférable d'opter pour une résolution plus élevée, même si vous n'en avez pas réellement besoin pour l'art qui entre dans le jeu. Vous pouvez toujours réduire la taille d'une œuvre d'art, mais vous ne pouvez pas l'agrandir sans perdre en qualité.
Considérez ces scénarios : vous pourriez avoir besoin d’imprimer une partie de l’illustration de votre jeu, ou vous souhaitez augmenter la taille d’un élément sur un écran, ou vous souhaitez créer une « version HD » de votre jeu pour les moniteurs 4K ultérieurement.
Pour ces raisons, lorsque vous travaillez sur l'œuvre d'art, pensez à utiliser des fichiers de travail dont la résolution est deux fois supérieure à celle dont vous avez réellement besoin, voire plus, puis réduisez-les avant de les importer dans Unity, ou utilisez les paramètres d'importation pour réduire leur taille lorsqu'ils sont importés dans le moteur.
Les paramètres d'importation vous permettent également de définir une taille maximale et d'autres paramètres de compression par plate-forme. Ainsi, par exemple, vous pouvez avoir certaines ressources sur une certaine résolution sur PC et seulement la moitié sur les appareils mobiles, où l'espace disque contenu est crucial.
Conseil: Unity propose un moyen de consolider plusieurs Sprites en un seul grâce aux Sprite Atlases. En plus d'être un moyen d'économiser de l'espace de texture, les atlas offrent également un moyen unifié de contrôler la taille maximale plutôt que de devoir la définir individuellement pour chaque sprite de votre projet.
Lors de la définition de la taille des ressources, il est important de prendre en compte la plateforme ou les appareils sur lesquels le jeu va être publié. Les gens ont des appareils et des écrans très divers et verront votre jeu dans une variété de résolutions et de rapports hauteur/largeur.
En général, au moment de la rédaction de cet article, si vous publiez pour PC, vous regardez une grande majorité d'utilisateurs avec 2 résolutions : principalement du « full-HD » (1920x1080 pixels, souvent appelé 1080p) et une bonne partie du 1280x720 (souvent appelé 720p). Un petit pourcentage de personnes possèdent également des écrans 4K (3840x2160) ou des écrans Retina sur Mac (un MacBook Pro 15 pouces moderne aurait une résolution maximale de 3360 × 2100). C'est beaucoup de pixels à couvrir !
Pour les téléphones, la gamme est énorme. Certains anciens appareils peuvent descendre jusqu'à moins de 720 pixels verticalement, mais certains appareils modernes peuvent atteindre 4K.
Conseil: Unity rend certaines de ces statistiques disponibles dans le tableau de bord d'exploitation de votre identifiant Unity. Sélectionnez un projet pour lequel Analytics est activé et vous pourrez accéder à Analytics > Market Insights et voir les statistiques agrégées. Steam propose également un service similaire sur cette page.
Avec Retina (une marque déposée d'Apple) et d'autres écrans modernes à haute résolution, bien que la résolution matérielle réelle soit très élevée (par exemple 4K), ce qu'ils peuvent faire est de fonctionner à une résolution inférieure simulée (généralement la moitié, par exemple Full HD au lieu de 4K) mais ils rendent ensuite les images et le texte en utilisant deux fois plus de pixels, de sorte qu'ils apparaissent très nets.
Note: DPI (points par pouce) ou PPI (points par pouce ou pixels par pouce) sont des noms différents utilisés de manière interchangeable par différents fabricants, mais en fin de compte, ils signifient la même chose : combien de pixels sont compressés dans un pouce linéaire sur l'écran. Traditionnellement, les écrans étaient de 72 DPI. Aujourd'hui, les écrans haute résolution sont généralement de 144 DPI, mais vous pouvez trouver des téléphones qui affichent jusqu'à 400 DPI ou plus, car ils contiennent beaucoup de pixels sur des écrans relativement petits. Quelques exemples ici.
Pour ces écrans, vous avez deux options. L’objectif est d’offrir une expérience qui utilise pleinement la résolution 4K. L’inconvénient est que la production de ressources compatibles 4K nécessite beaucoup de travail supplémentaire. Dans ce cas, assurez-vous de le mettre en valeur dans vos supports marketing !! (« Une belle expérience 4K »… etc.). Les propriétaires de consoles telles que PS4 Pro et Xbox One X, compatibles avec la 4K, apprécieront le fait que votre jeu utilise le matériel à sa pleine puissance.
Ou bien, vous pouvez « simplement » concevoir votre jeu pour qu’il couvre le Full HD. Dans ce deuxième cas, les utilisateurs disposant de moniteurs DPI plus élevés ne bénéficieront pas de la résolution accrue de leurs écrans mais verront simplement le jeu en Full HD. Ce n’est pas idéal, mais cela peut convenir si vous essayez également de garder la taille de la construction sous contrôle.
En résumé, vous devez choisir une résolution maximale que vous visez (en fonction des parts de marché actuelles, voir ci-dessus) et la définir comme objectif pour l’ensemble du projet. Tous les membres de l’équipe pourront alors prendre des décisions en sachant cela.
Comme nous l'avons mentionné précédemment, Unity mesure les distances et les tailles dans ce qu'on appelle simplement une unité, et non en pixels. En général, il est recommandé de faire correspondre 1 unité Unity à 1 mètre. Par exemple, le modèle humanoïde moyen se situe entre 1,7 et 1,8 unité dans ce scénario. Ce n'est pas obligatoire, mais cela garantira que les jeux avec physique (3D et 2D) se comportent correctement, car la physique dans Unity est réglée pour utiliser 1 unité pour un mètre. Il en va de même pour l’éclairage 3D, où les paramètres d’éclairage sont censés rester fidèles à la réalité.
En 2D, cette échelle est moins importante, mais il est toujours bon de la respecter si vous utilisez la physique dans votre projet. Si vous utilisez un Tilemap, il peut être intéressant de conserver une échelle de 1 tuile = 1 unité, juste pour des raisons de simplicité.
Maintenant que nous avons passé en revue les unités, passons à la caméra. Les caméras 2D d'Unity (orthographiques) ont un paramètre appelé Taille, qui - lorsqu'il est doublé - vous indique combien d'unités cette caméra cadre sur l'axe vertical.
Avec une taille de 5, nous avons une fenêtre d'affichage qui mesure 10 unités Unity sur la verticale. L'axe horizontal ne sera qu'une conséquence de cela puisque nous ne savons pas quel rapport hauteur/largeur aura l'écran de l'utilisateur. Mais c'est facile à calculer : sur votre PC moyen ou votre téléphone Android, avec un rapport hauteur/largeur de 16:9, vous pouvez simplement faire :
10(taille verticale) x 16 / 9 = 17,7(taille horizontale)
Nous savons donc qu’avec ces paramètres, nous encadrons une zone d’environ 17,7 sur 10 unités. Sur les Mac (qui sont généralement en 16:10) ce sera du 16 par 10 (donc moins de visibilité à l'horizontale). Sur un téléphone 16:9 tenu verticalement (il devient donc 9:16), le même appareil photo n'affichera qu'une zone de 5,6 par 10 unités.
Note: Nous n'aborderons pas la manière de gérer les rapports hauteur/largeur dans cet article de blog, car si vous souhaitez créer un jeu pour différents rapports hauteur/largeur, vous devez non seulement penser aux graphismes, mais en général, vous devez effectuer de nombreux ajustements de gameplay pour vous assurer que le jeu ne joue pas différemment sur des appareils avec des rapports différents. Par exemple, tout jeu qui défile horizontalement bénéficiera d'un rapport hauteur/largeur horizontal plus fin, car le joueur peut voir davantage les dangers à venir. Parfois, il est impossible de créer un jeu qui fonctionne bien sur des rapports hauteur/largeur très différents, et les gens utilisent des cadres ou des barres noires pour remplir l'espace négatif qu'ils ne peuvent pas remplir avec le gameplay.
Lors de l'importation de graphiques sous forme de sprites, Unity affiche un paramètre appelé Pixels par unité (PPU). Maintenant que nous savons tout sur les unités, cela devrait être très clair. Il exprime le nombre de pixels de votre Sprite qui tiennent dans une unité de la scène Unity lorsque le GameObject est mis à l'échelle 1,1,1.
Disons par exemple que j'ai le Sprite d'un rocher qui mesure 218 par 175 pixels et que je règle les pixels par unité à 100, une fois que je fais glisser ce Sprite dans la scène, mon GameObject par défaut sera de 2,18 par 1,75 unités, occupant environ un cinquième des 10 unités sur l'axe vertical.
Prenons donc un écran Full HD comme résolution de test. La verticale est de 1080 pixels et le rocher occupe moins d'un cinquième de l'écran (vous pouvez voir comment les rochers décolorés s'insèrent plus de 5 fois dans l'image ci-dessus), ce qui signifie que nous utilisons 175 pixels de graphiques sources pour restituer plus de 200 pixels. Ce qui veut dire que nous allons avoir un rocher légèrement flou .
Pour résoudre ce problème, nous avons plusieurs solutions : nous pouvons réduire la taille du rocher à environ la moitié, agrandir le cadre de la caméraà 10,8 (ce qui produit un zoom arrière), ou nous pouvons modifier la valeur PPU du Sprite à 108 (ce qui a le même effet de rendre le rocher plus petit à l'écran). Dans les trois cas, si l’on veut que la roche soit croustillante, il faudra qu’elle soit plus petite.
D'où viennent la taille de cette caméra et la valeur PPU ? Facile! Pour la taille de la caméra, si nous importons nos graphiques à 100 PPU, nous aurions besoin d'une caméra 10,8 car 10,8x100 équivaut à 1080. Cela nous permet de couvrir toute la hauteur de l'écran. A l'inverse, pour calculer un PPU correct où la taille de la caméra reste à 5, si on espère couvrir un écran full-HD avec 10 unités Unity verticalement, alors on a 1080/10 = 108. Il s'agit du nombre de pixels que nous devrions entasser dans une unité si nous ne modifions pas la taille de la caméra.
Gardez à l'esprit que lorsque vous travaillez sur votre jeu, il est dangereux de mélanger ces flux de travail au fur et à mesure : vous pourriez vous retrouver dans une position où certains graphiques utilisés dans la mauvaise scène ont une résolution trop faible et vous ne l'avez même pas remarqué. Il est bon d' établir des lignes directrices: un PPU pour la plupart des ressources de votre projet et une taille de caméra typique.
Vous pourrez alors enfreindre les règles plus tard. Peut-être avez-vous une cinématique où la caméra effectue un zoom avant et arrière, modifiant temporairement la taille. Ou peut-être que vos éléments d'arrière-plan sont si gros que vous ne pouvez pas vous permettre de conserver le même PPU car vous vous retrouveriez avec des textures énormes. Dans ce cas, il est possible de réduire le PPU pour ces éléments et d'importer des sprites plus petits, tout en couvrant une grande zone de l'écran avec eux.
Lorsque vous travaillez dans Unity, vous vous demandez peut-être quelle est la résolution que vous voyez dans la vue de jeu et s'il s'agit d'un aperçu précis de votre art sur la plate-forme cible. La plupart des options dont vous aurez besoin se trouvent dans le menu déroulant en haut et le curseur à côté.
Les rapports d'aspect imposent simplement un rapport spécifique entre l'horizontale et la verticale, mais ils utiliseront la résolution actuelle de votre fenêtre d'affichage de jeu, qui dépend à son tour de votre écran. Ils sont donc utiles pour configurer l'interface utilisateur et les objets sur un écran, mais pas vraiment pour tester des œuvres d'art. Lorsque vous êtes sur un rapport hauteur/largeur, la case à cocher Rapports hauteur/largeur basse résolution sera active si vous êtes sur un écran haute résolution. Si vous le cochez, il simulera une résolution d'écran DPI standard. Les résolutions fixes, en revanche, obligent Unity à restituer une fenêtre de cette taille exacte. À ce stade, vous devrez peut-être agrandir votre vue de jeu ou la maximiser pour visualiser l’aperçu complet. Dans ce contexte, le curseur Échelle peut permettre aux hautes résolutions de s'adapter à votre fenêtre d'affichage du jeu, mais si vous descendez en dessous de l'échelle 1x, vous ne voyez pas réellement cette résolution, mais un rééchantillonnage de celle-ci. Et n'oubliez pas que vous pouvez ajouter vos propres résolutions fixes et rapports hauteur/largeur dans la liste déroulante :
Conseil: N'oubliez pas que vous ne devez pas baser votre jugement uniquement sur l'éditeur. De temps en temps, faites une version du jeu (ou simplement de l'illustration !) et regardez-la sur votre appareil ou écran cible.
Comme vous pouvez le voir, la résolution de votre art, la taille de l'appareil photo et l'écran que vous souhaitez choisir sont tous liés et il n'existe pas de taille de pixel ou de PPU qui convienne à tous les cas. Étudiez vos plateformes cibles, décidez d’une résolution et informez toute l’équipe en élaborant des lignes directrices. Alors produisez quand même des œuvres d’art en haute résolution, elles pourraient être utiles plus tard ! Enfin, redimensionnez-le à la résolution dont vous avez besoin et importez-le dans Unity. Et une dernière suggestion. Même si auparavant j'utilisais les termes « légèrement flou » comme si c'était la fin du monde et quelque chose que nous DEVONS absolument RÉPARER, ce n'est pas une règle absolue. Il se peut que dans votre jeu certains objets soient - parfois - sous-résolution. Surtout s'il y a beaucoup de petits détails à l'écran, peut-être des transparences qui se chevauchent, avec du brouillard, de la pluie ou du post-traitement par-dessus. Jouez au jeu à sa vitesse normale. Avez-vous réellement remarqué le fait qu’ils sont rééchantillonnés ? Si vous ne parvenez honnêtement pas à faire la différence, alors peut-être que le travail supplémentaire, l'espace disque et le traitement nécessaires pour restituer un sprite de résolution plus élevée n'en valent pas la peine. N’oubliez pas : les bons jeux font de gros compromis !
Nous avons une liste de lecture de conseils et de procédures 2D dans notre blog, ne la manquez pas. Si vous souhaitez également avoir un aperçu de ce qu'Unity a à offrir pour la 2D, vous pouvez commencer ici.
Découvrez la démo d'Unity 2D, Dragon Crashers dans ce blog
Avez-vous des œuvres d’art 2D étonnantes en cours de réalisation ? Êtes-vous curieux de découvrir nos nouveaux outils 2D ? Créez quelque chose de génial avec nos nouveaux outils d'animation 2D, Tilemaps, SpriteShape, package Pixel Perfect ou importateur SVG, et rejoignez Unity 2D Challenge! Je fais partie des juges et j’ai hâte de voir toutes vos idées brillantes.