Faire évoluer mon jeu de plateforme pixel art de 720p à 1080p

12

Je développe un jeu de plateforme 2D pixel art pour PC et smartphone, mais je suis coincé sur un problème technique.

J'ai choisi d'avoir une résolution de tuiles 32x32 et une résolution de sprite 64x64 caractères. Les niveaux sont divisés en sections que j'appelle des "écrans", et dans chaque écran, j'ai des tuiles 40x22,5, approximativement à 40x23, donc la résolution minimale est de 1280x720.

Dans le jeu, j'ai un mécanicien à double saut, j'ai donc besoin d'avoir une bonne plage de vue verticale sur chaque "écran".

Voici le problème: 1280x720 n'est pas une très haute résolution. Sur les moniteurs HD, la fenêtre ne serait pas grande et si j'augmente la résolution de 2x, elle sera en 2560x1440 et la fenêtre serait beaucoup plus grande qu'un moniteur HD réel. Si j'essaie des tailles comprises entre 1280x720 et 2560x1440, les graphiques commencent à bégayer ou sont déformés.

Comment puis-je résoudre ce problème? Existe-t-il une solution qui ne nécessite pas que je redessine toutes les tuiles et les sprites au format 16x16?

Xargon Wan
la source
La réduction de la résolution, mais le fait de faire déplacer l'écran par un appareil photo est-elle un choix de conception acceptable? c'est-à-dire que la résolution est maintenant de 640 x 360 mais vos écrans sont toujours 1280x720 mais vous devez vous déplacer dans la pièce, un peu comme Metroid ou Axiom Verge?
lozzajp du
Vous êtes au mauvais endroit, même s'il s'agit d'un jeu 2D, vous devez définir une caméra. Ainsi, la caméra définit la résolution de visualisation, la fov et les angles, et vous présentez les données simplement à la caméra. De cette façon, votre jeu est indépendant de la résolution
Yosh Synergi
J'essaye juste d'être sûr du problème. Êtes-vous en train de dire que parce que votre affichage de carte 1280X720 est plus petit que par exemple un affichage de moniteur 1920X1080, alors vous souhaitez augmenter votre affichage de carte pour qu'il soit le plus plein écran possible? Je suis confus car dessiner des tuiles 16X16 ne résoudrait pas le problème (si je comprends bien) de toute façon.
RobM
@DMGregory, si vous pouvez me fournir des exemples d'artefacts dans la mise à l'échelle lors de l'utilisation de l'échelle fractionnaire, ce serait génial car je ne peux pas imaginer un seul scénario où lorsque je redimensionne une image dans les deux directions le même montant, pas de mather si le montant est un nombre entier ou fractionnaire, que les artefacts apparaissent. avec des artefacts, je veux dire des choses qui ne devraient pas être là, ce qui est différent du flou, se produisant sur une échelle élevée sans suffisamment de pixels.
Yosh Synergi

Réponses:

16

Pour ceux qui se demandent pourquoi c'est un problème pour le pixel art, voici un exemple rapide utilisant une scène de Super Mario World:

Exemple de scène pixel art à l'échelle, montrant des artefacts

Si nous dimensionnons simplement un jeu de pixel art de 720 à 1080 au moment de l'exécution (comme le pourrait une caméra de jeu typique), nous obtenons des artefacts en raison du rapport non entier de pixels de l'écran par texel source. Découvrez l'incohérence dans les chiffres de l'exemple à l'échelle à droite, et à quoi ressemble la feuille et l'oreille de Mario.

Il est jouable, mais il a perdu cette charmante netteté du pixel art. Et en mouvement, ces artefacts peuvent ramper à travers un sprite , lui donnant un aspect scintillant.

L'utilisation d'un mode de filtrage qui mélange les pixels adjacents évitera les ondulations, mais étalera et flouera le pixel art à la place, ce n'est donc pas très souhaitable.


Malheureusement, le rapport 1,5x entre 720p et 1080p est le pire scénario que nous pouvons rencontrer.

Comme vous le constatez, la mise à l'échelle 1x est trop petite et 2x est trop grande, avec une marge aussi large dans les deux sens, et il n'y a pas de rapport de mise à l'échelle entier entre nous pour que nous choisissions.

Vos options se résument à:

  • Tolérez l'échelle 1x , montrant votre jeu dans une fenêtre 1/3 plus petite que l'écran, en ajoutant des bordures décoratives si vous avez besoin de remplir l'espace.

    • Vous pourrez peut-être étendre le recadrage, en montrant plus de votre scène à la fois sur des écrans haute résolution. Cela réduit le padding / letterboxing nécessaire, mais vous devrez évaluer si cela a un impact sur la façon dont le jeu se joue.

      (Par exemple, cela donne-t-il aux joueurs sur certains appareils un avantage injuste ou leur permet-il de repérer des secrets qu'ils ne devraient pas voir si facilement?)

  • Augmentez l'échelle de 2x et recadrez votre scène , de sorte que le joueur voit moins de la scène à la fois (environ 3/4 autant qu'il le pouvait auparavant).

    Cela peut également affecter la façon dont le jeu se déroule, par exemple. en rendant difficile pour le joueur de voir les endroits où il doit faire un double saut.

    • Vous pouvez peut-être compenser cela avec la logique de la caméra, en ayant le panoramique pour suivre ou anticiper le lecteur, de sorte que le contenu important est toujours visible sur un écran au plus petit recadrage, mais il n'y a pas de meilleure caméra universelle à utiliser.

      Si vous décidez de suivre cette voie, essayez de partager certains détails de votre gameplay et de votre caméra actuelle, ainsi qu'un exemple de scène. Avec cela, nous pourrons peut-être aider à régler le comportement de la caméra pour compenser (ou votre jeu pourrait simplement demander plus de visibilité)

  • Créez des ressources alternatives avec une résolution différente . (Oui, c'est beaucoup de travail, mais vous donne le plus d'options pour contrôler l'apparence du jeu)

    Cela ne signifie pas que vous devez jeter vos ressources existantes qui ont fière allure sur 720p. Cet article décrit l'échange contextuel entre différents ensembles d'actifs pour prendre en charge un plus large éventail de résolutions cibles (dans Unity, mais le principe peut également être appliqué dans les jeux non-Unity).

    • Comme vous le constatez, redessiner tous vos actifs à demi-taille ( tuiles 16x16, caractère 32x32 ) vous permettra de gérer 720p à l'échelle 2x et 1080p à l'échelle 3x, avec le même nombre de tuiles affichées que vous avez maintenant. Vous pouvez cependant trouver la résolution des petits carreaux plus restrictive visuellement.

    • Vous pouvez également dessiner un autre ensemble d'actifs "grand format" qui est 150% plus grand ( tuiles 48x48, caractère 96x96 ), qui gérerait 1080p à l'échelle 1x. (Vous utiliseriez vos actifs existants pour 720p ou 1440, etc.). La plus grande résolution devrait vous aider à conserver la fidélité de votre art actuel, vous n'avez donc pas à sacrifier le style et les détails que vous avez maintenant.

      Exemple d'actif redessiné à 150%

    • Une troisième option consiste à dessiner un ensemble d'actifs légèrement plus petit ( 24x24 tuiles, 48x48 caractères ), qui peut gérer 1080p à l'échelle 2x, et encore une fois, cela pourrait signifier moins de sacrifices de détails que de réduire de moitié toutes les tailles de vos actifs.

      Ces trois options vous permettront de conserver votre cadrage et votre gameplay exactement les mêmes à 720 et 1080, mais au prix d'environ le double du travail sur les actifs.

Donc, malheureusement, il n'y a pas de victoire facile ici, juste des compromis différents.

DMGregory
la source
2
vous mentionnez garder l'échelle d'origine et utiliser des bordures décoratives. Selon le contexte, cela pourrait être l'endroit idéal pour mettre des éléments GUI, tels que le score et la vie. Si ces bordures sont suffisamment grandes pour contenir correctement ces informations, cela peut les faire ressembler moins à des `` remplisseurs '', et à un contenu plus complet et pertinentes pour le jeu.
Gnemlock
3

Élaborer spécifiquement sur l'option de @ DMGregory de créer des actifs alternatifs à différentes résolutions:

La meilleure solution que je connaisse est probablement la moins utile pour vous à ce stade: développez vos ressources artistiques dans un format vectoriel et pixellisez-les au besoin plus tard. Ce n'est pas une solution miracle; la plupart du temps, vous constaterez que vous devez effectuer de petites modifications artisanales après la pixellisation.

La deuxième meilleure option que je connaisse est d'essayer divers algorithmes de mise à l'échelle d'image, en particulier les algorithmes de mise à l'échelle pixel art . Comme auparavant, ce n'est pas un pancea; la sélection d'un algorithme de mise à l'échelle spécifique est hautement spécifique au contexte. Cela a autant à voir avec la `` sensation '' de votre jeu qu'avec l'art lui-même et même avec un bon algorithme + une correspondance artistique, vous devrez probablement modifier quelques sprites à la main.

Dans les deux cas, l'idée est d'utiliser un outil pour faire la majeure partie du travail pour vous et concentrer l'effort humain sur les détails restants. Comme l'a dit @DMGregory, "il n'y a pas de victoire facile ici, juste des compromis différents."


Modification concernant la mise à l'échelle fractionnaire: la plupart des algorithmes de mise à l'échelle du pixel art n'augmentent que par nombres entiers. À moins de lancer votre propre algorithme de mise à l'échelle personnalisé, vous devrez probablement combiner la mise à l'échelle et la mise à l'échelle pour obtenir le changement de 1,5x que vous recherchez. À titre de référence, voici le résultat de la combinaison de l'algorithme scale3x pour augmenter et l'algorithme fant pour réduire de 50%:

Original:

entrez la description de l'image ici

Escaladé:

entrez la description de l'image ici

Pikalek
la source
Malheureusement, la plupart des algorithmes de mise à l'échelle du pixel art que j'ai trouvés ont toujours tendance à gérer uniquement la mise à l'échelle du nombre entier (2x, 3x, 4x généralement), donc ils ne sont pas très utiles avec le cas 720-> 1080. (Peut-être que l'on pourrait utiliser un upscaler de 3x pixels, puis un sous-échantillonnage de moitié ...? Je ne sais pas si cela aurait l'air meilleur ou pire qu'un upscale direct)
DMGregory
Point valide. Modifié un peu pour y remédier. Je suis également tombé sur ce shader qui semble prendre en charge la mise à l'échelle fractionnaire .
Pikalek
+1 à la solution vectorielle. Vous devez rendre vos actifs vraiment volumineux et à l'échelle réduite.
Mark Aven