Share
Tout ce qui est ancien est nouveau, et les jeux rétro sont plus populaires que jamais. Soutenus par la nostalgie et l'abondance de jeux occasionnels et de jeux d'arcade sur appareils iOS et Android, les jeux old school font leur grand retour. Dans ce tutoriel, je vais vous donner quelques conseils pour créer un jeu rétro réussi..
Que voulons-nous dire quand nous parlons de jeux «rétro»? Il n'y a pas de définition concrète, mais je pense généralement aux jeux conçus avant 1990. Cela inclut des jeux de consoles telles que GameBoy, NES, Atari 2600 et Commodore 64, ainsi que des jeux d'arcade classiques comme Pac-Man, Mille pattes, et Envahisseurs de l'espace.
Tous ces exemples utilisent des graphiques en blocs, pixellisés, bitmap (ou "raster"). C’est le type de jeux auquel on pense probablement le plus souvent quand on pense aux jeux rétro..
Mais les premiers jeux vidéo utilisaient réellement des graphiques vectoriels. Des jeux comme Battlezone, Astéroïdes et Tempête ont été rendus avec des lignes brillantes au lieu de pixels en blocs.
Un autre type de jeu auquel les vieux joueurs jouaient était des jeux simples utilisant un écran LCD monochrome et une mécanique de jeu extrêmement simple..
Dans ce didacticiel, nous allons parler des jeux graphiques les plus populaires, mais je mentionne ces autres types de jeux, car ils ne sont pas souvent imités, et je pense que les concepteurs de jeux ont beaucoup d'occasions de faire quelque chose de vraiment cool. avec ces styles.
Pour créer un look rétro convaincant, vous aurez envie de travailler avec un nombre limité de couleurs..
Les consoles de jeu de la vieille école ne pouvaient afficher qu'un nombre limité de couleurs. Selon le système, les graphiques sont affichés en noir et blanc, en niveaux de gris ou en couleurs 8 ou 16 bits. Vous pouvez voir des exemples de palettes de couleurs exactes de systèmes spécifiques sur Wikipedia, mais il n'est pas important de choisir des couleurs historiquement précises tant que vous conservez un style cohérent dans votre jeu..
Nous ne sommes pas confrontés aux mêmes limitations matérielles que par le passé, mais le fait de limiter votre palette à quelques couleurs soigneusement choisies ne fera pas que souligner l'esthétique rétro, il contribuera également à définir l'identité de votre jeu. Regardez ces deux exemples de palettes de couleurs de super Mario Bros.:
Les couleurs sont si distinctes que vous pouvez presque reconnaître le jeu uniquement à partir des échantillons de couleur.
David Sommers a une belle collection de palettes de jeux classiques à ColourLovers.com.
Les couleurs exactes que vous choisirez dépendront du thème et de l'ambiance de votre jeu. Toutefois, si vous prenez le temps de choisir un bon jeu de couleurs, votre jeu sera aussi emblématique que les classiques. Regardez ces exemples modernes:
Si vous rencontrez des difficultés pour choisir des couleurs qui fonctionnent bien ensemble, consultez ce didacticiel de Tyler Seitz, Choisir une palette de couleurs pour les illustrations de votre jeu..
Les jeux raster rétro se reconnaissent plus facilement à leurs gros pixels volumineux, à une époque où les résolutions d'écran étaient beaucoup plus basses. Dans le monde actuel des écrans HD et des écrans Retina, les pixels physiques de nos appareils sont à peine visibles - pas assez proéminents pour obtenir le look rétro blocky.
Pour en tenir compte, nous devons utiliser plusieurs pixels physiques pour afficher chaque pixel visible dans nos graphiques de jeu..
Vous pouvez décider du niveau de dimensionnement approprié pour votre jeu, en fonction de votre bloc. Habituellement, une mise à l'échelle jusqu'à deux ou trois fois la taille normale donne un bon effet. Gardez à l'esprit que plus vous allez gros, moins vous serez en mesure de tenir sur l'écran.
Je recommande que vous laissiez toujours votre moteur de jeu faire votre mise à l'échelle des pixels pour vous. Cela signifie que tous vos éléments et votre texte sont dessinés à 100% (petit) et que le jeu redimensionne simplement la trame de jeu entière pour atteindre la taille finale. Vous pouvez en réalité dessiner des éléments avec des pixels plus grands, mais cela augmentera la taille des fichiers et les temps de chargement, et pourrait également avoir un impact négatif sur les performances de jeu..
Tenter de redimensionner manuellement vos ressources peut également entraîner des incohérences dans votre échelle de pixels. Dans l'exemple ci-dessus, remarquez comment les pixels du titre du jeu sont énorme par rapport aux minuscules pixels du texte du bouton "Lire maintenant". En outre, notre personnage de jeu est plus bloquant que son joyau ou le sol de la grotte. Certaines de ces différences sont subtiles, mais elles s’additionnent pour donner un aspect un peu «off» au jeu..
Neven Mrgan (co-créateur de L'incident) en parle un peu plus sur son blog.
Créer de superbes pixel art peut être extrêmement difficile. Cela prend beaucoup de pratique et est un sujet trop long à couvrir dans ce tutoriel. Voici quelques liens pour vous aider à démarrer:
De nombreuses personnes utilisent des programmes graphiques classiques tels que Photoshop, Gimp ou même MS Paint pour dessiner des pixels.
J'ai trouvé frustrant d'utiliser Photoshop une fois que j'ai commencé à essayer d'animer des personnages et de disposer des mosaïques sans soudure. J'ai donc créé un outil appelé Pickle pour aider à compléter certaines des fonctionnalités qui manquaient aux éditeurs traditionnels, telles que les aperçus d'animation en direct, les prévisualisations de vignettes sans soudure et les prévisualisations de vignettes de terrain..
Pickle a un ensemble de fonctionnalités limité et ne répond pas aux besoins de tous. Heureusement, il existe d'autres applications similaires comme Pyxel Edit, ASEPRITE et GraphicsGale.
Il y a beaucoup de bons tutoriels pixel art en ligne. Voici quelques exemples que j'ai trouvés utiles dans le passé:
Concevoir des personnages convaincants avec des graphiques en basse résolution peut être très difficile. Comment représenter suffisamment de détails pour créer un caractère unique avec si peu de pixels et de couleurs pour fonctionner avec?
Comme pour le dessin au pixel art en général, la conception des personnages nécessite de la patience et de la pratique. Nous pouvons apprendre quelques stratégies utiles des personnages de jeux classiques.
Jetez un coup d'œil à notre ami Mario ici. Notez que peu de pixels sont utilisés pour représenter un caractère humain reconnaissable. Trois couleurs, pas de contours, pas d'ombrage. Comment pouvez-vous dessiner un visage avec ces limitations? Regardez comment les pixels qui dessinent la moustache de Mario servent également à définir son nez et sa bouche..
Il serait également difficile de dessiner les bras de Mario à ce niveau de détail sans les faire se fondre dans son corps, ce qui ferait ressembler son corps à une petite tache. Les créateurs de Mario ont résolu ce problème en l'habillant d'une combinaison. Voyez comment les lignes de ses vêtements séparent clairement ses bras du reste de son corps? Génie!
Dans ce cas, l'ajout d'attributs physiques spécifiques au personnage (pilosité faciale et salopette) facilite en réalité le dessin dans les limites graphiques. Les limitations elles-mêmes informent la conception du personnage.
Une autre technique permettant de gérer les limites graphiques consiste à passer à l’abstrait. Pourquoi se donner la peine d'essayer de dessiner un personnage humain reconnaissable, si ce n'est pas obligatoire? Regardez Pac-Man là-bas. Il n'est pas reconnaissable n'importe quoi. Il est juste une goutte jaune avec une bouche.
Pac-Man est un personnage mémorable malgré son manque d'attributs physiques. Il tire sa personnalité du gameplay - la façon dont il se déplace dans le labyrinthe, ses effets sonores et sa façon d’interagir avec ses ennemis.
Qui a dit que tu devais avoir des personnages humains dans ton jeu? Pourquoi ne pas créer les prochains Pac-Man, Q * bert ou Qix?
Lorsque vous créez des graphiques pour votre écran de titre, des menus de jeu et d'autres éléments textuels tels que des partitions, vous devez rester cohérent avec le style de vos éléments graphiques. Cela signifie conserver la même palette de couleurs, la même taille en pixels et le même style artistique.
La plupart des polices sont conçues pour être anti-aliasées (lissées) lorsqu'elles sont affichées à l'écran. Cela signifie que si nous essayons de les agrandir en fonction de la taille de notre pixel, nous verrons beaucoup de pixels bruyants autour des lettres. Cela ne correspond tout simplement pas à l'esthétique que nous recherchons. C'est tout doux et flou au lieu de croquant et bloc.
Nous voulons donc afficher les polices sans anti-aliasing. Mais le simple affichage d'une police normale sans lissage semblera généralement terrible. Ils ne sont tout simplement pas conçus pour fonctionner de cette façon. Vous voyez à quel point c'est difficile et difficile à lire, à 100%? Lorsque nous le faisons exploser, nous pouvons voir beaucoup de pixels parasites et de coups irréguliers.
La solution consiste à toujours utiliser des polices conçues pour être affichées sans anti-aliasing. Ils lisent bien et propre dans les petites tailles, et ont ce grand look rétro chunky quand on les gonfle grand.
Certaines de mes polices pixel préférées sont créées par Matthew Bardram d'Atomic Media.
Un inconvénient à l'utilisation de polices de pixels est que chaque police est conçue pour fonctionner à une certaine taille. Assurez-vous que vous utilisez uniquement la police à cette taille spécifique ou à un multiple de cette taille. Donc, si vous utilisez une police conçue pour fonctionner à 10 points, elle aura également fière allure à 20 ou 30 points, mais pas aux tailles comprises entre.
Pensez au type de mécanique de jeu qui fonctionnera le mieux avec votre style. Le choix d’un mécanisme classique simplifié aidera vos joueurs à se mettre à l’esprit rétro. Certains mécanismes de jeu classiques sont des tireurs dans l’espace (Astéroïdes, Envahisseurs de l'espace), les platformers (super Mario Bros., Donkey Kong) et des jeux d’aventure (Aventure, Zelda).
N'oubliez pas que votre style artistique limité vous empêchera de transmettre des informations complexes au joueur. Un simple mécanicien peut donc être un avantage considérable..
Comment simple pouvez-vous faire votre jeu? Pouvez-vous concevoir un jeu qui utilise un seul bouton pour les contrôles?
Les jeux à un bouton fonctionnent parfaitement sur les appareils tactiles, car le joueur peut simplement écraser sur l'écran sans avoir à s'inquiéter de toucher des zones de boutons non tactiles.
Beaucoup de jeux de style coureur sans fin utilisent le système de contrôle à un bouton (Canabalt, Jetpack Joyride, Petites ailes). Pouvez-vous imaginer un style de jeu différent qui fonctionne aussi bien avec un seul bouton de contrôle?
Si vous avez déjà joué à l'un de vos jeux d'arcade préférés de la vieille école dans un émulateur de votre ordinateur, vous avez peut-être remarqué qu'il ne se sent pas tout à fait pareil. Tout est un peu trop net et net sur l'écran de votre ordinateur, comparé à l'aspect flou, scintillant et déformé d'un moniteur d'arcade ou à votre vieux téléviseur à tube cathodique depuis l'enfance..
Certaines personnes pensent probablement que c’est une bonne chose de ne pas avoir à supporter ces artefacts de distorsion d’une époque révolue, mais il peut être amusant d’ajouter un peu de flou à un jeu d’inspiration rétro..
Voici quelques exemples de manières dont vous pouvez émuler un ancien écran CRT:
Lignes de balayage: Vous pouvez utiliser un graphique statique composé de lignes blanches horizontales fines, étroitement espacées, pour simuler les lignes d'analyse par tube cathodique. Il suffit de les superposer à votre jeu. Ajustez l'opacité et le mode de fusion pour obtenir le style et l'intensité souhaités.
Bruit: Le bruit gaussien peut ajouter une texture agréable à votre partie. Idéalement, le bruit devrait être animé, mais une image statique fonctionnera suffisamment bien si le bruit animé en permanence affecte les performances de votre jeu..
Brouiller: UNE très légère Le flou ajoute de la douceur à l'image. N'allez pas trop loin avec celui-ci; vous voulez toujours pouvoir voir les pixels.
Couleur Frange: Un de mes effets old school préférés est d'ajouter un peu de franges de couleur RVB. Vous pouvez le faire en séparant la trame du jeu en différents canaux pour le rouge, le vert et le bleu et en les décalant légèrement. Cet effet est vraiment intéressant lorsqu'il est animé, mais il peut nécessiter beaucoup de ressources processeur, vous devrez donc peut-être en limiter l'utilisation. J'ai un autre tutoriel où je montre comment implémenter l'effet avec AS3: Créer un effet de distorsion CRT rétro en utilisant le décalage RVB.
Combinaison: Combinez plusieurs effets pour un maximum de plaisir!
Vous pouvez également ajouter un arceau de sécurité animé pour simuler un tube cathodique défectueux..
Le jeu flash Cronus X implémente bon nombre de ces effets lors des transitions de menu. C'est une bonne solution si vous vous inquiétez des effets négatifs sur les performances de jeu..
Ne vous laissez pas embourber par les contraintes du jeu à l'ancienne. Il est plus important que le jeu soit amusant et ait une "sensation" rétro que d'être historiquement précis.
Et essayez de ne pas simplement recréer un jeu de tir classique ou un jeu de plateforme. Ajoutez de l'innovation pour rendre votre jeu unique. Utilisez l'esthétique rétro comme point de départ, mais ajoutez certains de vos styles et éléments uniques pour créer quelque chose de nouveau. Il peut même être amusant de mélanger de la musique, des sons ou des éléments modernes (comme des effets de particules) modernes pour donner une nouvelle tournure au jeu d'arcade classique..
Quelques bons exemples de ceci sont Guerres de géométrie qui mélange des effets modernes éblouissants dans un jeu d'arcade de style vecteur, Space Invaders Extreme où un jeu d'arcade classique est superposé à des graphismes d'arrière-plan fantaisistes et réglé sur de la musique électronique moderne, ou Fez, un jeu de plateforme 2D classique en pixel art permettant de transformer le monde en espace 3D.
C'est tout pour le moment. Bonne chance là-bas! Déposez un lien dans les commentaires et montrez-moi ce que vous faites. J'aimerais voir votre point de vue sur l'esthétique rétro.
Accentsconagua