Faites vos premiers décors en pixels arts

Creations

Martisse

1 week ago

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 ( c'est pas facile d'etre collégien le jour et codeur la nuit...)


Faites vos premiers décors en pixel art 


durée : 1h

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, je parlerai des techniques de dessins, de résolution, de couleur,d'animation,  de mémoire et pour finir du 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 qu'une résolution full HD . 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.

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, bah pour l'humain c'est trop 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 et pas ensemble de chiffre héxadécimaux comme en RGB.


Graphicsgal

                                                                                


View full creation

jicehel

NEW 1 week ago

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

1 week ago

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

1 week ago

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 1 week ago

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 1 week ago

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

1 week ago

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 1 week ago

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

1 week ago

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 1 week ago

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

1 week ago

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

1 week ago

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

1 week ago

Merci, j'en ai pris compte.

Steph

NEW 1 week ago

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 1 week ago

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 1 week ago

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 1 week ago

Codnpix Codnpix

Merci, j'en ai pris compte.

Codnpix

NEW 1 week ago

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

1 week ago

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 1 week ago

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 1 week ago

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

You must be logged in in order to post a message on the forum

Log in