Share
Ce que vous allez créerDe nombreux développeurs de jeux sont d'abord des programmeurs et des artistes. Que vous utilisiez le pixel art parce que vous préférez le look "rétro" ou que vous n'ayez tout simplement pas le temps ou l'expérience de faire évoluer votre art, cet effet simple peut considérablement augmenter l'attrait visuel de votre jeu..
Ce style de pixel biseauté est obtenu en agrandissant d'abord votre illustration de pixel 1: 1 tout en conservant le rapport de format d'origine. Ensuite, grâce à un processus très simple qui peut être appliqué lors de la création d’actifs ou lors de l’exécution, vous pouvez transformer votre dessin au pixel standard en quelque chose qui a fière allure, même en résolutions HD. L'effet est si simple qu'il peut être appliqué à presque tous les langages de programmation, environnements de développement et moteurs. Dans ce tutoriel, je vais vous présenter les pixels biseautés de manière à pouvoir implémenter cet effet en toute confiance dans votre propre projet de jeu..
En quoi consiste exactement un pixel biseauté? Un seul pixel est le plus petit élément graphique utilisé pour représenter un art sous forme numérique. Vous pouvez donc, d'une certaine manière, considérer les pixels comme des blocs de construction 2D. Un pixel biseauté étend simplement le concept de bloc de construction en introduisant une profondeur artificielle.
Les choses deviennent un peu déroutantes lorsque vous réalisez que les pixels biseautés sont composés de plusieurs pixels «normaux», mais ce n'est en réalité pas aussi compliqué qu'il n'y paraît. Pour bien comprendre le processus, nous allons commencer par une compréhension de base des pixels..
Tout d’abord, parlons des tailles et des ratios de pixels. L'image ci-dessus montre la même image-objet à sa taille d'origine, puis agrandie jusqu'à cinq fois cette taille. Pour chaque agrandissement, le bloc de construction de pixel d'origine augmente également en taille. Lorsqu'un pixel standard est agrandi cinq fois (500%), il devient un bloc de 5x5 pixels. Maintenant, vous vous retrouvez avec un sprite qui a un ratio de 1: 5 pixels. Ce nombre signifie simplement que chaque pixel 1x1 de l'image-objet d'origine est maintenant représenté par un bloc de 5x5 pixels. Le sprite entier, mesurant à l'origine 14x15 pixels, a maintenant une taille de 70x75 pixels.
Maintenant que notre sprite est composé de "blocs" de pixels beaucoup plus grands, nous pouvons voir comment fonctionnent les pixels biseautés.
L'image ci-dessus montre le même sprite en utilisant les pixels standard à gauche et les pixels biseautés à droite. Avec les pixels standard, chaque bloc 5x5 est composé de la même couleur. Dans l'exemple de pixel biseauté, nous pouvons voir que le bloc 5x5 est maintenant composé de plusieurs nuances différentes de la même couleur..
Le premier carré de chaque version est le bloc de 5x5 pixels qui représente le pixel standard de 1x1 dans l'image d'origine. Le deuxième ensemble de carrés est une version agrandie de ce bloc 5x5 pour montrer la composition du bloc de pixels biseauté. Ces pixels sont disposés de manière à donner l’illusion de profondeur, avec des rehauts sur le coin supérieur droit du bloc 5x5 et des ombres sur le coin inférieur gauche. Lorsque combiné pour créer l'image finale, il en résulte un sprite qui semble être constitué de minuscules blocs biseautés, au lieu de pixels 2D plats.
Maintenant que vous avez compris les bases des pixels biseautés, résumons brièvement comment cet effet est obtenu..
Tout d'abord, vous devez déterminer si vous allez implémenter cet effet au moment de l'exécution de votre jeu réel ou générer vos actifs artistiques avec des pixels biseautés "intégrés". Dans les deux cas, l'effet de pixel biseauté est obtenu à peu près de la même manière..
Vous commencez par créer un sprite de biseau ayant la même dimension que la taille finale de votre "bloc de sprite" agrandi. Par exemple, si votre illustration finale doit être au format 1: 4 (agrandie quatre fois), vous créerez un bloc de biseau 4x4. Ce biseau est ensuite appliqué au-dessus de la fenêtre de l’image-objet ou du jeu vidéo agrandie, puis répété pour remplir tout l’écran. En jouant avec les modes de fusion et l'opacité, vous pouvez obtenir différents résultats..
Je traiterai des deux méthodes plus en détail ultérieurement, mais pour le moment, nous devrions prêter attention à quelques règles et directives essentielles..
Bien que cet effet soit facilement obtenu en appliquant une simple superposition, plusieurs éléments majeurs peuvent empêcher les pixels biseautés de s'aligner correctement..
Le problème le plus évident est la taille de l'image-objet par rapport à la taille de la superposition de votre biseau. Tous vos actifs doivent respecter le taux d’agrandissement dicté par la taille de votre bloc de chanfrein, sinon les lignes de chanfrein ne seront pas cohérentes..
Il est également important de choisir la taille de votre fenêtre de jeu avant d’agrandir vos ressources. Si la taille de votre fenêtre de jeu est de 640x480px et que vous souhaitez utiliser un biseau 4x4 (rapport 1: 4), vos ressources d'origine doivent être conçues à 160x120px. Lorsque vous agrandissez des ressources artistiques, n'oubliez pas que tout doit être "X" fois plus grand que la taille d'origine, où "X" est un nombre entier..
Tout changement dans la vue du jeu ou le positionnement individuel des sprites doit également être pris en compte lors de la tentative de dessin de la superposition de biseau. Cela nous amène à la règle la plus importante à suivre:
Le mouvement basé sur une grille est obligatoire! Dans l'image ci-dessus, nous avons un exemple correct de déplacement basé sur une grille à gauche et un exemple incorrect à droite. Étant donné que les ressources d'origine ont été agrandies quatre fois, tous les mouvements verticaux et horizontaux doivent s'aligner sur une grille 4x4. Le sprite du chat, à droite, s'est déplacé d'un pixel vers la droite et d'un pixel vers le bas, ce qui a pour effet que le sprite rompt le flux de blocs de chanfrein égaux.
C’était un exemple d’effet de pixel biseauté «intégré» aux éléments. L’exemple suivant montre ce qui se passe lorsque vous ne suivez pas un mouvement basé sur une grille tout en implémentant l’effet à runtime:
Notez que la superposition de pixels en biseau est légèrement mal alignée sur l’ensemble de l’image. Cela est dû au fait que la superposition de biseau couvre toute la fenêtre du jeu et ne bouge pas, alors que les images-objets en dessous bougent mais ne sont pas accrochées à la grille 4x4. Rappelez-vous que tout le mouvement dans le jeu doit être conforme à la grille dictée par la taille de votre bloc de biseau, qui est déterminée par le taux d'agrandissement de votre actif.
Oui, il est plus logique de mettre en œuvre cet effet dans votre code de jeu plutôt que lors de la création d'un actif. L'application de cet effet lors de la création d'actifs vous laisse toutefois plus de liberté pour expérimenter rapidement et trouver le style parfait qui convient à votre projet. Vous pouvez appliquer divers calques en utilisant différents styles de fondu, ajuster la saturation et le contraste de votre dessin sous-jacent et remplacer les couleurs pour trouver le juste équilibre avant de choisir l'apparence finale..
Ceci est un exemple agrandi d'un bloc de biseau 6x6. Vous voudrez garder vos blocs de biseau sur un fond transparent, mais j'ai utilisé le bleu ici pour que vous puissiez voir la différence d'opacité.
Pour créer ce bloc de chanfrein, j'ai commencé avec une toile qui correspond à la taille de mon dessin final. Dans cet exemple particulier, j'ai créé une image 6x6 destinée à un pixel art de 1: 6 (agrandissement de 600%). Puis, avec un pinceau d'un pixel, j'ai commencé dans le coin inférieur gauche et appliqué trois pixels noirs à 75% d'opacité. En m'éloignant du coin, j'ai réduit l'opacité de mon pinceau à 50% et enfin à 25%. J'ai ensuite utilisé la même technique, mais avec du blanc, en partant du coin supérieur gauche..
De nombreux outils courants, tels que Photoshop et GIMP, vous permettent de créer et de définir des modèles personnalisés. C’est le moyen le plus rapide et le plus simple de remplir l’ensemble de la toile avec une superposition de pixels biseautés. Pour l'exemple ci-dessus, j'ai supprimé le fond bleu et enregistré le bloc de biseau en tant que motif. Maintenant, chaque fois que je veux appliquer cette superposition à mon dessin, tout ce que j'ai à faire est d'utiliser l'outil Pot de peinture pour déposer le motif sur le calque le plus haut..
Une fois que vous avez défini quelques modèles de bloc de biseau personnalisés, vous pouvez commencer à expérimenter avec différents styles. Ci-dessus, quatre styles de biseau différents sont appliqués à la même image. Remarquez comment de subtils changements dans la construction et l'opacité des différents blocs de chanfrein peuvent modifier considérablement la forme et la vibrance des sprites résultants. Expérimentez avec différentes tailles et styles pour trouver le type de biseau qui complète votre pixel art.
Les différents modes de fusion proposés par la plupart des outils de dessin peuvent également produire des effets radicalement différents..
Dans l'image ci-dessus, le même style de biseau est appliqué à l'aide de trois modes de fusion différents. Le mode Overlay standard crée une image très saisissante et vibrante, avec un contraste intense entre les zones claires et sombres du biseau. Le mode Color Burn atténue complètement les zones claires du biseau, créant un biseau presque triangulaire et disjoint. Le mode Lumière douce est parfait pour les couleurs atténuées, créant un bord biseauté moins prononcé.
Plutôt que d'insérer dans votre jeu des éléments qui intègrent cet effet, vous pouvez générer la superposition de pixels biseautés au moment de l'exécution. Cela se traduira par un jeu beaucoup plus évolutif et adaptable si vous décidez de modifier ultérieurement les actifs, le mouvement de la grille ou la taille de la fenêtre de jeu..
Bien que je ne puisse pas vous dire exactement comment appliquer cet effet à votre projet spécifique, je peux certainement vous orienter dans la bonne direction. La plupart des IDE de jeux ont les fonctionnalités générales requises pour cet effet, vous ne devriez donc pas avoir de problème à intégrer une superposition de pixels en biseau dans votre projet. Les utilisateurs de Flash et ActionScript, par exemple, peuvent utiliser ColorMatrixFilter pour appliquer des modes de fusion à la superposition de biseau, tandis que les utilisateurs de Game Maker peuvent utiliser les outils de premier plan intégrés ou même créer un objet de superposition de biseau dédié reposant sur un calque spécifique au-dessus de l'art. les atouts.
Tout d'abord, vous devez décider de la manière dont vous allez gérer l'élargissement initial des actifs. Je recommande d'utiliser des images au pixel 1: 1 et de tout redimensionner avant de les dessiner à l'écran, puis d'appliquer le calque superposé en biseau comme effet de post-traitement..
Deuxièmement, vous devriez penser à créer un menu de débogage qui vous permettra de tester diverses tailles de biseau et modes de fusion. Vous ne savez jamais comment les couleurs et les mouvements vont réagir à certains superpositions de biseau. Jouez donc prudemment et essayez autant de combinaisons que possible. Vous constaterez peut-être qu'il est nécessaire de changer l'opacité ou le mode de fusion lors de certaines scènes de votre jeu. Il est donc utile de pouvoir les tester en temps réel..
Vous devez également prévoir comment vous allez gérer le HUD ou l'interface graphique de votre jeu. Voulez-vous que ces éléments soient placés au-dessus ou au-dessous de la superposition de pixels biseautés?
L'effet de pixel biseauté appliqué à quelques jeux familiers de la vieille école.Cet effet est un excellent moyen de pimenter votre art de jeu sans recourir à des algorithmes complexes, à des shaders ou à un artiste incroyablement talentueux. Êtes-vous pressé pour le temps dans un jam de jeu? C'est un moyen rapide et facile d'ajouter un peu de vernis visuel supplémentaire à votre travail..
L'aspect le plus précieux de cet effet est qu'il vous encourage à vous salir les mains et à expérimenter, ce qui vous mènera sans aucun doute à une série d'autres découvertes en cours de route..
Accentsconagua