Faites vos premiers décors en pixels arts

0.1

Par Martisse, il y a 5 ans

Bonjour,

Voici un petit tutoriel qui va vous apprendre à  faire vos premiers décors en pixels art sur Gamebuino si vous êtes débutant. Étant moi même un peu débutant, il se peut qu'il y ait des erreurs alors n'hésitez pas à me le dire en commentaire.

ce tuto est en cours d'ecriture...  Tout ce qui est écrit est basé sur ma propre expérience et mes connaissances, donc n'hésitez pas a signaler d'éventuels problèmes.

les erreurs de grammaire seront corrigés plus tard.


Faites vos premiers décors en pixel art 


durée : 1h30 (a la louche)

niveau : débutant ou confirmé

prérequis :


Préface  C'est quoi le pixel art ?

La Gamebuino est une console qui se veut rétro,  donc le pixel art est parfait pour ça.
Dans ce tutoriel vous apprendrez a faire vos décors pour Gamebuino, j'aborderais deux sujets du pixel art : le pixel art en lui-même et le  tilemapping.

Le pixels art est un art composé d'une combinaison de pixels, contrairement au dessin classique. Chaque pixel d'un pixel art est important ; changer de place un pixel suffit à changer son sens et peut déformer de votre dessin.


Les différents logiciels 

 

Les logiciels  Quels logiciels choisir ?

Il faut différencier deux types de logiciels ;

  • les logiciels de dessin vectoriel 
  • les logiciels de pixels art

La différence n'est pas dans le nombre de pixels que chaque logiciel peut afficher, mais dans la méthode d'affichage de ces derniers. Les logiciels de dessin vectoriel (Inkscape, Illustrator...) font des dessins à partir de vecteurs (formules mathématiques). Ils permettent de faire des dessins qui s'ajustent à la dimension nécessaire et sont très peu volumineux.

Les logiciels de pixel art vont travailler avec des résolutions plus basses et ce sera au dessinateur de placer ses pixels.


logiciels de pixel art :  Les 3 derniers logiciels de cette liste donnent des outils d'animations inutiles pour Gamebuino

  • Graphicsgale : celui que j'utilise et qui sera utilisé dans tous ce tutoriel. obtenir ici gratuit
  • Asprite : très complet, de plus il a une interface très belle. obtenir ici payant
  • proMotion NG : le plus complet. Son interface est proche de Photoshop, son prix aussi... obtenir ici payant
  • Piskel : plutôt complet. Pratique car il s'exécute dans un navigateur web. obtenir ici gratuit


logiciels de dessin plus complexe :  Ces logiciels sont plus chers et plus difficiles a prendre en main

  • Photoshop : assez cher avec une prise en main difficile. obtenir ici payant
  • The Gimp : interface un peu ancienne. obtenir ici gratuit
  • Affinity Designer : prix intéressant obtenir ici payant
  • Krita : open-source et sympa obtenir ici gratuit


logiciels de tilemapping :  Le tilemapping sera abordé dans un chapitre ultérieur

  • Pyxel Edit : excellent pour le tilemapping obtenir ici payant
  • Tiled : celui que j'utilise obtenir ici gratuit


 La plupart des logiciels cités ci dessus ont des versions d'essais, alors n'hésitez par pour tester


Couleur et Résolution


La plupart des écrans d'ordinateur de nos jours utilisent le système RGB888 qui nous offre 16.8 millions de couleurs ainsi que des résolutions full HD ou 5K pour certains etc... . La Gamebuino possède un écran de 80 par 64 pixels et utilise le système RGB565 qui offre 256(je crois) couleurs.

Lorsque l'on débute, avoir une centaine de couleurs c'est pas évident. C'est pourquoi dans ce tutoriel j'utiliserai la palette de couleur officiel Gamebuino composée de 16 couleurs ; de ce fait on sera concentré sur le dessin et pas la mise an couleur (et on pourra si on le souhaite, faire certifier notre jeu).

Par la suite lorsque l'on voudra utiliser plus de couleur il faudra utiliser le système TSL. En effet, si Le RGB est super clair pour l'ordinateur,alors pour l'humain c'est un pêu difficile ; le RGB fonctionne sur le principe de synthèse soustractive, en mélangeant différentes teintes de rouge, vert et bleu on obtient un code couleur. Dans le système TSL on ajuste la luminosité, la saturation et tout un tas de paramètre compréhensible par un humain et pas ensemble de chiffre héxadécimaux comme en RGB.


Graphicsgal

Dans ce chapitre on va enfin commencer à dessiner, tout d'abord il va nous falloir un logiciel, choisissez celui que vous voulez, mais je vous conseille fortement Gaphicsgale. Aller sur la page, téléchargez-le, installez-le et lancez-le !

Ça y'est ? donc nous voilà sur l’interface du logiciel (figure 1) : 

                                                                                                                  FIGURE 1

                                                                                                                FIGURE 2

Tout d'abord nous allons créer un nouveau fichier, cliquez sur File puis sur New. dans le premier rectangle mettez la valeur 80, dans le deuxième rectangle mettez la valeur 64 et dans le menu déroulant sélectionnez 4 bit (16 colors).

Ensuite nous allons nous occuper de changer la palette de couleur. Télécharger la ici palette officieuse, décompressez le fichier, cliquez sur la petite flèche (figure 2), allez dans Load palette, File, Import from File  puis ouvrez le dossier contenant la palette et cliquez sur Mockups puis sur PaletteIndex. Ensuite cliquez sur All et Ok. Vous pouvez désormais voir les couleurs de la palette gamebuino.

 to be continued.