Faites vos premiers décors en pixels arts

Créations

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.

                                                                                


Voir la création

jicehel

NEW il y a 5 ans

Désolé, mais comme c'est un tutoriel, je ne suis pas d'accord, nous devons t'aider pour les fautes (il y en a quand même pas mal et je ne garantie pas de les avoir toutes corrigées ;) ). Tu as fais le plus gros: tu as rédigé ton tuto, mais tu trouveras ci dessous une version avec moins de fautes.

J'ai également corrigé une erreur par rapport au dessin vectoriel qui est bien moins consommateur en espace que le pixel art mais est plutôt destiné à des images plus grandes et qui surtout s'adapte à la taille à laquelle il doit être affiché ou imprimé (il ne fera pas des gros carrés si on zoom sur une partie par exemple, mais sera recalculé en fonction de ce besoin).

Version corrigée: 

Ce tutoriel est en cours d'écriture et sera mis à jour régulièrement. Une version avec images sera faite prochainement .

P.S.: Merci de ne pas prendre compte de potentielles erreurs de grammaire...


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.

Pourquoi faire du pixels arts ?

La Gamebuino est une console qui se veut rétro,  donc le pixel art est parfait pour être rétro.
Dans ce tutoriel vous apprendrez a faire vos décors pour Gamebuino, je parlerai aussi bien de comment dessiner que de comment faire des chose qui s'affichent sur la Gamebuino. (Ça peut être galère si on ne sait pas)

Le pixels arts, c'est quoi ça ?

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 personnage.


Les logiciels ?

Alors là il faut différencier deux types de logiciels: les logiciels de dessin vectoriel et le logiciel 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 (Photoshop, GIMP...) 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.

Voici une liste de logiciels sélectionnés :

- Graphicsgale : celui que j'utilise et qui sera utilisé dans tous ce tutoriel. Il est suffisant pour des dessins sur Gamebuino. Gratuit

- Asprite : très complet, de plus il a une interface très belle. Payant

- proMotion : le plus complet. Son interface est proche de Photoshop, son prix aussi... payant

- Piskel : plutôt complet. Pratique car il s'exécute dans un navigateur web.

To be continued...

Martisse

il y a 5 ans

Merci beaucoup pour la correction sur le dessin vectoriel et la grammaire. Je veillerai par la suite a faire moins de fautes.

Une présentation plus jolie (titre, souligné...) Sera bientôt faites.

Codnpix

il y a 5 ans

Bonjour, 

je me permets de réagir sur le fait que tu mentionnes Gimp et Photoshop comme des logiciels de dessin vectoriel, mais ce ne sont ni l'un ni l'autre des logiciels de dessin vectoriels à proprement parler. D'ailleurs Gimp est au contraire parfaitement adapté à l'édition d'image en pixel-art pourvu que tu utilises une image aux dimensions qui te conviennent en pixel la palette de couleur qui va bien et l'outil de dessin pixel (personnellement je n'utilise que Gimp pour créer mes images). Pareil pour Photoshop. Dans les deux logiciels on peut effectivement générer des formes primitives comme pour du vectoriel (cercles, carrés...) mais ils ne permettent pas d'interpolation vectorielle ni d'exportation au format .svg... (en tout cas pas Gimp, Photoshop je connais moins), donc on ne peux vraiment pas parler de vectoriel. Donc si tu veux citer des logiciels de vectoriel il faudrait plutôt parler d'Inkscape ou Illustrator.

Martisse

NEW il y a 5 ans

jicehel jicehel

Merci beaucoup pour la correction sur le dessin vectoriel et la grammaire. Je veillerai par la suite a faire moins de fautes.

Une présentation plus jolie (titre, souligné...) Sera bientôt faites.

STUDIOCRAFTapps

NEW il y a 5 ans

Asprite est gratuit si vous n'avez pas les moyens de payer les créateurs mais il faut recompiler le programme soit même.

Martisse

il y a 5 ans

A ma connaissance, asprite a une version d'essai ainsi qu'une version payante. pour ce qui du recompilage, je préfère coder sur gamebuino que d'apprendre l'assembleur....

Martisse

NEW il y a 5 ans

STUDIOCRAFTapps STUDIOCRAFTapps

A ma connaissance, asprite a une version d'essai ainsi qu'une version payante. pour ce qui du recompilage, je préfère coder sur gamebuino que d'apprendre l'assembleur....

Codnpix

il y a 5 ans

A ma connaissance, asprite a une version d'essai ainsi qu'une version payante. pour ce qui du recompilage, je préfère coder sur gamebuino que d'apprendre l'assembleur....

Compiler un programme n'a aucun rapport avec devoir apprendre l'assembleur, ça veut juste dire que tu as accès à un code source et que tu vas devoir exécuter un compilateur dessus pour créer toi même le fichier exécutable, exactement comme à chaque fois que tu compiles ton jeu pour la Gamebuino.

Codnpix

NEW il y a 5 ans

jicehel jicehel

Bonjour, 

je me permets de réagir sur le fait que tu mentionnes Gimp et Photoshop comme des logiciels de dessin vectoriel, mais ce ne sont ni l'un ni l'autre des logiciels de dessin vectoriels à proprement parler. D'ailleurs Gimp est au contraire parfaitement adapté à l'édition d'image en pixel-art pourvu que tu utilises une image aux dimensions qui te conviennent en pixel la palette de couleur qui va bien et l'outil de dessin pixel (personnellement je n'utilise que Gimp pour créer mes images). Pareil pour Photoshop. Dans les deux logiciels on peut effectivement générer des formes primitives comme pour du vectoriel (cercles, carrés...) mais ils ne permettent pas d'interpolation vectorielle ni d'exportation au format .svg... (en tout cas pas Gimp, Photoshop je connais moins), donc on ne peux vraiment pas parler de vectoriel. Donc si tu veux citer des logiciels de vectoriel il faudrait plutôt parler d'Inkscape ou Illustrator.

Steph

il y a 5 ans

... Sans oublier les excellents Affinity Designer et Affinity Photo qui restent très abordables du point de vue de leurs tarifs, et qui n'ont rien à envier à Adobe Photoshop et Adobe Illustrator (dont je me suis détourné, non seulement parce qu'ils n'avaient plus grand chose à m'offir compte tenu de la qualité des produits d'Affinity, mais surtout à cause de leur business model qui nous considère comme des vaches à lait...).

J'avais acheté ces produits 30 € au moment où ils sont sortis... et je n'ai plus jamais rien payé depuis, malgré les mises à jour...

jicehel

il y a 5 ans

Coucou Codnpix. Juste pour dire que tu réponds sur ma réponse mais moi j ai surtout corrigé les fautes et le fait que les dessins vectoriels consommaient plus que les dessins par pixel ( même si c est vrai pour les petits sptites comme ceux que l on utilise pour lesquels le dessin vectoriel n est pas du tout adapté). Je

Je n'ai pas corrigé toutes les erreurs et celles que tu relèves en font en effet partie.

Martisse

il y a 5 ans

Merci, j'en ai pris compte.

Steph

NEW il y a 5 ans

Codnpix Codnpix

... Sans oublier les excellents Affinity Designer et Affinity Photo qui restent très abordables du point de vue de leurs tarifs, et qui n'ont rien à envier à Adobe Photoshop et Adobe Illustrator (dont je me suis détourné, non seulement parce qu'ils n'avaient plus grand chose à m'offir compte tenu de la qualité des produits d'Affinity, mais surtout à cause de leur business model qui nous considère comme des vaches à lait...).

J'avais acheté ces produits 30 € au moment où ils sont sortis... et je n'ai plus jamais rien payé depuis, malgré les mises à jour...

Steph

NEW il y a 5 ans

Par ailleurs, tu pourrais donner les liens correspondant aux différents outils que tu as sélectionnés...

Et tu en as oublié un qui est excellent pour le tilemapping en particulier :
Pyxel Edit, qui ne coûte que $9 !

jicehel

NEW il y a 5 ans

Codnpix Codnpix

Coucou Codnpix. Juste pour dire que tu réponds sur ma réponse mais moi j ai surtout corrigé les fautes et le fait que les dessins vectoriels consommaient plus que les dessins par pixel ( même si c est vrai pour les petits sptites comme ceux que l on utilise pour lesquels le dessin vectoriel n est pas du tout adapté). Je

Je n'ai pas corrigé toutes les erreurs et celles que tu relèves en font en effet partie.

Martisse

NEW il y a 5 ans

Codnpix Codnpix

Merci, j'en ai pris compte.

Codnpix

NEW il y a 5 ans

Martisse Martisse

A ma connaissance, asprite a une version d'essai ainsi qu'une version payante. pour ce qui du recompilage, je préfère coder sur gamebuino que d'apprendre l'assembleur....

Compiler un programme n'a aucun rapport avec devoir apprendre l'assembleur, ça veut juste dire que tu as accès à un code source et que tu vas devoir exécuter un compilateur dessus pour créer toi même le fichier exécutable, exactement comme à chaque fois que tu compiles ton jeu pour la Gamebuino.

Martisse

il y a 5 ans

En effet, j'ai jeté un œil sur internet. Les fichiers de asprite sont open source. Après, c'est pas du code gamebuino...

Martisse

NEW il y a 5 ans

Codnpix Codnpix

En effet, j'ai jeté un œil sur internet. Les fichiers de asprite sont open source. Après, c'est pas du code gamebuino...

jicehel

NEW il y a 5 ans

Tu n'as pas forcément à le comprendre, heureusement. Tu as juste à le compiler en utilisant le compilateur adapté.  :D