Qu'est-ce qui différencie le pixel art des autres images?

13

Récemment, je dirigeais un développeur débutant dans la création de jeux de pixel art, et j'ai réalisé qu'il y avait une "sagesse conventionnelle" autour de la mise à l'échelle du pixel art qui n'est pas évidente pour un nouveau venu et qui pourrait ne pas être bien documentée. Alors, voici une tentative pour résoudre ce problème ...


  1. J'ai entendu dire que je ne devrais mettre à l'échelle le pixel art que de 200%, 300%, etc.

    • Pourquoi donc? La mise à l'échelle ne devrait-elle pas "fonctionner" comme elle le fait avec d'autres images?
    • Et si j'ai vraiment besoin de rendre mon personnage juste une fraction plus grand ou plus petit pour obtenir le bon gameplay ou l'apparence? Comment puis-je réparer ça?
  2. On me dit que c'est "mauvais" d'utiliser le pixel art à différentes échelles dans un jeu - pourquoi?

    • Par exemple, si j'ai agrandi mon personnage de sorte que chaque texel de sprite est de 4x4 pixels d'écran, alors que mon arrière-plan est agrandi de sorte que chaque texel de sprite est de 6x6 pixels d'écran. Un pixel n'est-il pas un pixel à la fin de la journée?
DMGregory
la source

Réponses:

31

Mise à l'échelle par nombres entiers

La mise à l'échelle par 2x, 3x ... n x est simple - chaque pixel devient simplement un carré n x n de pixels, et l'apparence du sprite d'origine est parfaitement préservée (y compris toutes les lignes nettes, les coins et les zigzags d'escalier) .

Nous rencontrons cependant des problèmes lors de la mise à l'échelle de pixel art par quantités fractionnaires (par exemple, 1,5x) car les pixels sont discrets par nature. Nous ne pouvons pas vraiment avoir "un demi-pixel".

Pour d'autres types d'art, nous pouvons souvent nous en sortir en mélangeant des pixels source adjacents où le pixel doit être "à moitié coloré", et à haute résolution, les artefacts ne sont généralement pas perceptibles. Mais sur le gros pixel art, cela détruit rapidement le look net.

Donc, à la place, nous utilisons généralement le filtrage "Le plus proche voisin" (également appelé filtrage ponctuel) afin que chaque pixel après la mise à l'échelle prenne sa couleur à partir d'un pixel exactement dans l'image-objet d'origine.

Cela a un autre inconvénient: puisque le nombre de pixels après la mise à l'échelle n'est pas un multiple entier du nombre de pixels source, certains pixels source seront dupliqués plus que d'autres (si la mise à l'échelle) ou complètement ignorés (si la mise à l'échelle est réduite).

Malheureusement, les logiciels de retouche d'image et le filtrage de texture GPU ne sont pas très exigeants quant à l'endroit où ils dupliquent ou sautent les pixels - ils suivent simplement les règles d'arrondi de base - ce qui peut donner au résultat une apparence déformée et inégale.

Consultez l'exemple ci-dessous. Au milieu, nous avons augmenté le sprite de champignon de 150% en utilisant le filtrage du voisin le plus proche, et le résultat semble chancelant et aléatoire. Un œil est plus grand que l'autre, certains contours sont épais tandis que d'autres restent minces, et les taches arrondies semblent en bloc ... cela ne ressemble pas à quelque chose qu'un artiste pixel dessinerait exprès.

Exemple d'artefacts provenant de l'utilisation d'une échelle non entière

Si nous avons vraiment besoin que le sprite soit 150% plus grand (par exemple, pour que le gameplay soit correct ou pour prendre en charge des résolutions d'affichage alternatives ), nous pouvons repeindre les zones problématiques comme l'exemple de droite. Maintenant, cela ressemble plus à quelque chose qu'un artiste ferait, et stylistiquement cohérent avec d'autres arts du jeu. (Bien que je ne sois pas moi-même un grand artiste des pixels, cela pourrait encore être mieux 😉)

Malheureusement, il n'y a pas beaucoup de raccourcis pour cela. Pour les échelles de nombres entiers, vous pouvez utiliser des algorithmes de mise à l'échelle pixel art spécialement conçus - une grande variété sont disponibles dans des outils comme ImageResizer - pour obtenir un point de départ moins bloc que le plus proche voisin, mais cela prend toujours l'œil d'un artiste et un peu d'huile de coude pour obtenir un résultat de haute qualité.


Mis à part: des échelles fractionnaires peuvent également apparaître au moment de l'exécution .

Imaginez que votre jeu soit en résolution NES (256 x 240) et que vous souhaitez l'afficher sur un écran 1080p.

1080 ÷ 240 = 4,5, de sorte que certains des pixels ou "texels" sources de votre scène sont gonflés jusqu'à 5 pixels d'écran, tandis que d'autres ne sont que 4, créant des distorsions comme nous l'avons vu ci-dessus. En mouvement, ils ont tendance à faire onduler et scintiller les sprites de manière distrayante, sans cause évidente:

Exemple d'un champignon à échelle fractionnaire se déplaçant, montrant des artefacts ondulant

Vous verrez souvent des gens suggérer d'arrondir les positions de la caméra ou de l'objet à des coordonnées de pixels entières, mais cela ne résout pas vraiment le problème. L'arrondi se produit déjà dans le cadre du filtrage du plus proche voisin - le problème est que certains pixels de l'écran arrondissent au même texel source (en le dupliquant), tandis que d'autres ne le font pas, ce qui conduit à un résultat inégal.

La solution consiste à utiliser une combinaison de remplissage / recadrage ou d'autres ensembles d'actifs pour revenir à un rapport de nombre entier cohérent de pixels d'écran aux texels pour chaque résolution d'affichage que vous souhaitez prendre en charge - voir quelques exemples Unity ici . C'est un autre cas où il n'y a pas de solution universelle facile, et vous devrez faire preuve de jugement et de talent pour garder votre jeu net.

Conserver l'échelle des pixels cohérente

Cette «règle» se résume à la cohérence stylistique.

Lorsque vous utilisez le pixel art à différentes échelles, il peut sembler que les ressources ont été regroupées à partir de différents jeux, au lieu d'avoir une esthétique unifiée.

Exemple de mise à l'échelle différente des ressources dans une seule partie

Dans l'exemple de gauche, j'ai rassemblé des sprites de Super Mario World, tous à la même échelle, et ça a l'air super.

Au milieu, j'ai agrandi Mario et le niveau à deux fois la résolution de l'arrière-plan, et la taupe pour tripler la résolution. Depuis que j'ai utilisé des échelles de nombres entiers, nous n'obtenons aucune distorsion ou ondulation nulle part, mais cela semble toujours un peu drôle.

D'une part, l'arrière-plan est tellement plus détaillé que le premier plan. Il est capable de représenter des courbes douces et des reflets nets, ce qui rend le premier plan particulièrement contrasté, plutôt que d'avoir une sensation de pixel art cohérente. Et les contours de la taupe sont sensiblement plus épais et plus dentelés que le reste du premier plan.

À droite, je montre qu'à nouveau, en repeignant les actifs dans une échelle de pixels commune, nous pouvons ramener une sensation plus unifiée et intentionnelle avec les nouvelles tailles d'actifs.

Mais dois-je le faire?

Non, pas vraiment. C'est votre jeu et vous pouvez le faire comme vous le souhaitez.

Surtout lors du prototypage et de la recherche du plaisir dans votre jeu, il est plus important de pouvoir essayer des choses rapidement que d'avoir l'air parfait. Vous aurez probablement la taille de choses importantes comme votre personnage mal à plusieurs reprises avant de trouver ce qui est le mieux pour votre jeu, et il serait nul d'avoir à repeindre chaque image d'animation chaque fois que vous voulez essayer quelque chose de différent. Donc, dès le début, ne vous inquiétez pas.

Pour le jeu sorti, c'est un jugement. Aucune police de pixel art ne vous interdira de distribuer votre jeu si vous ne respectez pas les règles, et de nombreux joueurs ne seraient pas en mesure de décrire la différence. Mais l'attention à ces détails de pixels est quelque chose que de nombreux joueurs (et critiques) considèrent comme un signe important de qualité - alors apprenez à connaître votre public et décidez ce qui est le mieux pour l'expérience que vous souhaitez leur offrir.

Une dernière considération est que beaucoup de jeux de pixel art ont un gameplay de très haute précision. Pensez à passer d'une plate-forme à un bloc dans les premiers jeux Mega Man. Dans ces situations, une grille de pixels cohérente (et une grille de tuiles) peut être un signal important pour le joueur lorsqu'il juge et exécute ses mouvements. Introduire une irrégularité dans l'art pourrait en fait rendre le jeu plus difficile à apprendre, ce qui peut être frustrant.

DMGregory
la source