Aller au contenu

ColorMap : l'outil ultime pour la création de pixel art sur carte!


Mushroom_3ater

Messages recommandés

Amis du jour, Bonjour!

Amis du soir, Bonsoir!

 

Ces derniers temps, avec l'ouverture de la galerie d'art au spawn, nous avons pu constater une recrudescence de personnes s'essayant à l'art de la création de pixel art sur carte. Il s'agit cependant d'une tâche difficile et même si quelques logiciels tels que SpriteCraft peuvent être détourné pour aider, il n'en existe aucun spécialement fait pour cette activité proposant des fonctionnalités vraiment puissantes.

 

C'est pourquoi j'ai décidé de me lancer dans la conception de mon propre logiciel, j'ai nommé ColorMap! :D

ColorMap.thumb.png.ca249d7a03c809b1a8c0a793ac5cc52a.png

Si je vous en parle aujourd'hui, c'est parce que je pense que le prototype actuel commence à être dans un état suffisamment avancé pour qu'il puisse vous permettre de vous faire une première idée de ce dont il sera capable dans sa version finale, mais aussi cela me permettra d'obtenir un premier feedback, pour l'améliorer et corriger les bugs (et Dieu seul sait qu'il peut y en avoir).

Vous pouvez télécharger le prototype en cliquant sur le .zip ici :

V.1 (1.15 dépréciée) ColorMapWin.zip | ColorMapLinux.zip

V.2 (1.16) ColorMapWinV2.zip | ColorMapLinuxV2.zip

(Je rappelle que seul le build windows dispose d'un support actif, utilisez la version Linux à vos risques et périls 😛, quand à MacOS malheureusement je ne dispose pas du matos nécessaire pour faire une version suffisamment testée et donc stable)

Si vous rencontrez des problèmes avec le logiciel, n'hésitez pas à consulter la catégorie FAQ pour voir si la solution ne s'y trouve pas, sinon contactez-moi :)

 

Dans la suite du post, je vais déjà vous expliquer ce qu'est ColorMap, ensuite je vous présenterais les actuelles fonctionnalités.

ColorMap, Kécécé?

ColorMap, Kécécé?

ColorMap est un outil permettant la conversion d'une image quelle qu'elle soit en structure de blocks minecraft pour une représentation fidèle sur une carte.

Ainsi, les plus sceptiques pourraient rétorquer à raison :

      MaIs EnFiN, çA eXiStE dEjA eT çA s'ApPeLlE sPrItEcRaFt

La différence est que SpriteCraft n'a pas été conçu pour faire des pixel arts qui rendent bien sur des cartes mais pour faire des pixels art tout court, ainsi ce logiciel repose sur la couleur générale de la texture des blocks et non sur leurs couleurs quand ils rendent sur une carte. Et donc les possibilités sont différentes. Enfin, en bref :

     C'eSt PaS pArEiL

 

Comment se servir de ColorMap?

Comment se servir de ColorMap?

La page d'Accueil

La page d'accueil

Lorsque vous lancez le logiciel vous tombez sur cette fenêtre :

 image.thumb.png.ea48e722ec63c5ffbc902752ce591a8b.png

1 : Lance la conversion de l'image affichée, puis ouvre la page de visualisation 2D;

2 : Ouvre votre explorateur de fichier pour que vous choisissiez une image sur votre ordinateur;

3 : Permet de spécifier l'URL d'une image en ligne ou sur votre ordinateur;

4 : Remet l'image par défaut;

5 : Ouvre la fenêtre des options;

6 : Affiche les différents potentiels problème que peut présenter l'image choisie (ex : mauvaises dimensions, transparence....).

 

La page des options

La page des options

La page des options vous permet de définir dans la liste affichée quelles couleurs utiliser ou non et aussi d'appliquer différents effets de dithering (pour savoir ce qu'est exactement le dithering, je vous laisse consulter google ;)).

image.thumb.png.8d7f8de6fe2b0a6139637baad985b9ea.png

1 : Ouvre la page de sélection du block associé à la couleur, le block actuellement sélectionné apparaît en passant simplement le curseur de la souris sur le bouton;

2 : Définit si la couleur sera utilisée pour composer l'image convertie;

3 : Permet de définir la méthode de dithering;

4 : Définit si la méthode de l'escalier doit être utilisée ou non, la méthode de l'escalier permet d'augmenter la palette des couleurs possibles en jouant sur les nuances dues à la hauteurs des blocks, la palette est ainsi triplée mais cela implique de construire le pixel art en volume (aka en escaliers);

5 : Permet de sélectionner/désélectionner toutes les couleurs de la liste;

6 : Retourne à la page d'Accueil.

 

La page de sélection du block

La page de sélection du block

Cette page permet de définir pour la couleur choisie quel block sera utilisé.

image.thumb.png.cfccd6fc113f099b66f454d87f85ae39.png

1 : Liste des blocks possibles pour cette couleur, celui encadré en vert est actuellement sélectionné;

2 : Aperçue de la palette de couleurs correspondant à ces blocks, à noter que sans la méthode de l'escalier, seule la couleur "Neutral" sera utilisée;

3 : Retourne à la page des options.

 

La page de visualisation 2D

La page de visualisation 2D

Après un temps de chargement correspondant au traitement de votre image, vous obtiendrez un visuel du rendu final.

image.thumb.png.724e10a65079a0cf86b8d8f90a9a882f.png

1 : Visuel du rendu global de l'image convertie selon vos options, il est possible de zoomer avec la molette pour avoir une meilleure vision des pixels;

2 : Permet de faire apparaître les séparations entre les différentes cartes qui composent le pixel art (dans le cas où celui-ci fait plus de la taille d'une carte); Aperçu ci-dessous:

image.png.7075cdffa2a1dd0cb0e208eb555e63cf.png

3 : Ouvre la page de visualisation 3D de la carte choisie;

4 : Ouvre l'explorateur de fichier pour enregistrer le résultat du traitement d'image au format png; 

5 : Retourne à la page d'accueil;

 

La page de visualisation 3D

La page de visualisation 3D

Après un temps de chargement correspondant à la génération de la structure de blocks, vous pourrez naviguer dans cette visualisation 3D de votre portion de pixel art.

image.thumb.png.63d204dc3d421f84cbc577c000cf1316.png

1 : En cliquant gauche sur un block de la structure, celui-ci est mis en évidence et ses caractéristiques (nom & coordonnées) apparaissent alors en bas de l'écran;

2 : Le marqueur orthographique au centre de l'écran, vous permet de connaitre les axes de coordonnées ainsi que le Nord (un peu comme le mode F3 dans minecraft);

3 : Ouvre la liste des ressources nécessaires pour réaliser le pixel art;

4 : Permet d'afficher la grille des chunks selon le même visuel qu'avec le raccourci F3 + G dans minecraft. Comme montré ci-dessous

image.thumb.png.e86662a2fed526e6d8159617126c9940.png

5 Retourne à la page de visualisation 2D;

A ceci s'ajoute sur cet page les contrôles suivants:

  • Maintient clic molette + mouvement souris : Rotation de la caméra;
  • Scroll Molette : Zoom/Dé-zoom;
  • Maintient clic molette + LAlt + mouvement souris : Déplacement de la caméra;

A ces combinaisons peuvent également ajoutés LCtrl ou LShift pour respectivement augmenter ou diminuer la vitesse de ces mouvements.

Il est également possible des déplacer la caméra selon les touches ZQSD du clavier.

6 /!\ EN COURS /!\ : Le bouton avec la disquette de sauvegarde grisée pour le moment ne sert à rien, il sera à terme le bouton permettant d'enregistrer la structure sous format litematica.

 

La liste des ressources

Révélation

Vous trouverez ici la liste complète des ressources nécessaires à la réalisation de votre portion de pixel art en quantités exactes.

image.thumb.png.ebd2f2b6ec58dc0bfb11006d4a0f6ca6.png

1 : Les flèches à côtés des différentes catégories vous permettent en cliquant simplement dessus d'organiser votre liste dans l'ordre croissant de quantité, alphabétique, etc;

2 : La barre de recherche vous permet de trouver plus spécifiquement des éléments de la liste en y tapant directement le nom du block que vous recherchez;

3 : Ce bouton avec un floppy disc (flopydiflop!) vous permet d'enregistrer au format texte votre "liste de course" sur votre ordinateur;

4 : Retourne sur la visualisation 3D.

 

 

Voilà c'est à peu près tout ce que j'avais à vous dire! :D En espérant avoir de nombreux retour de votre part, positifs comme négatifs et que mon petit programme puisse vous aider et vous plaire! :)

 

Pour finir voici quelques petits aperçus de que ce qu'il est possible de faire avec pour l'instant ;)

Révélation

image.thumb.png.bb6e37a3e7385ea6d4b92387f68230f5.pngimage.thumb.png.092b5e08e8debb3450336dd6c0f250be.pngimage.thumb.png.58e362cafd3000614e47e0433f116e9e.pngimage.png.e8a4e7b33942d5805fb131620840a05e.png

FAQ

Révélation

Lancement du logiciel

Révélation
  • Mon antivirus bloque le logiciel
Révélation

Il arrive que certains antivirus détectent les programmes en provenance de Unity comme des menaces potentielles et bloquent donc leur lancement. Je ne peux pas apporter de solution de moi-même étant donné que le problème est inhérent à votre AV.

La solution est simplement de désactiver temporairement votre AV le temps de l'utilisation du logiciel, il ne comporte aucun programme d'installation donc votre système n'a rien à craindre de sa part. :)

 

  • Mon ordinateur me signale des .dll manquantes lors du lancement
Révélation

Sur certains systèmes (notamment sous Win7 apparemment) certaines .dll nécessaires au fonctionnement et donc au lancement du logiciel peuvent manquer. Là encore, le problème ne peut être résolu par moi-même, puisqu'il vient de votre machine.

La solution est d'aller télécharger sur internet les .dll concernées et de les installer sur votre ordinateur. Un redémarrage système peut-être nécessaire avant de réessayer d'utiliser le logiciel.

 

 

 

Modifié par Mushroom_3ater
  • Like 25
  • Merci ! 3
  • Choqué 2
Lien vers le commentaire
Partager sur d’autres sites

GG beau boulot, je laisse les habitués de ce type de pratique tester ;)

Je déplace le sujet dans "Les tutoriels" car il y a une partie tuto et tu auras une meilleure visibilité (la rubrique Les tutoriels est publique contrairement au reste du Bar)

  • Like 4
Lien vers le commentaire
Partager sur d’autres sites

Merci pour ce logiciel tellement plus simple que Spritecraft! J'ai commencé à faire quelque test et c'est super pratique! C'est un logiciel que j'ai longtemps chercher, le voici. Je te remercie et hate d'avoir les prochain ajout comme la conversion en litematica ou encore la liste des matériaux😍

  • Like 3
Lien vers le commentaire
Partager sur d’autres sites

C'est vraiment super bien fait, tu as fait un super travail et merci de nous le partager, les fans de pixels art comme moi vont être ravis  c:

J'ai une petite question, pour avoir les bonnes dimensions, exemple 2x2 maps, j'imagine qu'il faut au préalable modifier la résolution de l'image? Sinon ça me donne des maps à moitié blanche ^^

  • Like 2
Lien vers le commentaire
Partager sur d’autres sites

il y a 9 minutes, HappyDuck02 a dit :

C'est vraiment super bien fait, tu as fait un super travail et merci de nous le partager, les fans de pixels art comme moi vont être ravis  c:

J'ai une petite question, pour avoir les bonnes dimensions, exemple 2x2 maps, j'imagine qu'il faut au préalable modifier la résolution de l'image? Sinon ça me donne des maps à moitié blanche ^^

Oui c'est tout à fait ça, si l'image que tu choisi n'est pas d'une résolution en multiple de 128 (qui sont les dimensions d'une carte) le logiciel te signale qu'il y a un problème de résolution, et cela résulte par des bandes blanches qui complètent l'espace manquant. Je ne peux pas me permettre de faire automatiquement un redimensionnement car il n'existe pas de solution appliquable à coups sûr sans que cela entraîne des problèmes sur l'image (flou, crénelage,...).

Plus tard, je pourrais réfléchir à ajouter un outils pour faire ça mais plus ça ira, plus ça reviendra à intégrer un photoshop dans le programme x)

  • Like 1
Lien vers le commentaire
Partager sur d’autres sites

il y a 9 minutes, HappyDuck02 a dit :

D'accord merci de ta réponse, je sais pas trop comment redimensionner moi-même, tu saurais m'aider? Il faut absolument photoshop ou alors un autre logiciel pourrait faire l'affaire? ^^

Le logiciel de retouche paint.NET (paintdotNET si tu cherches sur google) qui est gratos et qui possède de nombreux outils de traitements d'images (peut-être pas forcément au niveau de photoshop, mais c'est quand même franchement pas mal). Tant que j'y suis à faire de la pub, il tire principalement sa force d'être open source et donc d'avoir de nombreux modules additionnels qui ont été créés par sa communauté :)

Pour redimensionner, ça se passe dans le headTab Image > Redimensionner tout simplement ;) (penses quand même à jouer un peu avec les paramètres pour obtenir un résultat optimal selon ce que tu recherches)

Si jamais je fini par ajouter cette fonctionnalité, elle sera très probablement très similaire à celle de paint.NET d'ailleurs ^^

  • Like 3
  • Merci ! 1
Lien vers le commentaire
Partager sur d’autres sites

Sinon pour ceux qui ne souhaitent pas installer des trucs supplémentaires et qui sont sous windows 10 j'ai pu découvrir la fonctionnalité de rogner les images avec le visionneur d'image de windows. Après il y a juste à mettre la proportion au "carré" pour éviter les déformations d'images, même si une partie de votre image d'origine sera donc coupée selon les cas. Reste à enregistrer une copie et voilà.

Révélation

Capture.thumb.PNG.81695e6dd345d5441fca39d2e3259297.PNG

Comme autre logiciel gratuit que je peux conseiller, même si peut être un peu dur à la prise en main au début c'est GIMP qui est également open source et très complet! Ça va surtout intéresser les utilisateurs de Linux. ;) 

https://www.gimp.org/

Il permet également le recadrage, et même bien plus si l'on souhaite s'y aventurer:

Révélation

Capture.thumb.PNG.d9bddeca93247cfd3f36e2104fa86ee5.PNG

En tout cas, je recommande vivement de ne pas redimensionner une image sans la rogner (la couper) au risque de la déformer.

En dehors de mes explications, super le logiciel! Dès que j'aurais l'occasion de tester tout ça, je l'intégrerais à mon tutoriel avec plaisir! :) 

Modifié par Elxilon
  • Like 5
Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)
Il y a 9 heures, EpiCanard a dit :

A quand la version linux ? :D

Pour ce qui est des versions Linux et MacOS X, n'ayant pas de machines avec ces OS et n'ayant pas envie de jouer avec des VM, je n'ai pas moyen de fournir de support poussé pour ces versions.

Cependant, même si je ne peux garantir qu'elles fonctionneront aussi bien que la version Windows (et que je ne pourrais rien y changer le cas échéant), je peux toujours générer un build pour ces versions si vous voulez :)

J'ai modifié le post de base de la conversation, les versions Linux et MacOS X y ont été ajoutées. ;)

Modifié par Mushroom_3ater
  • Merci ! 1
Lien vers le commentaire
Partager sur d’autres sites

  • 3 mois plus tard...
Posté (modifié)

Contre vents et marées…

Malgré ma flemme et mon temps libre disparate…

J'ai le plaisir d'enfin vous annoncer messieurs-dames la V2 de ColorMap! :D

Voici la liste des ajouts/corrections:

1 - Il est maintenant possible d'enregistrer au format png votre image une fois que vous l'avez faite traiter par le logiciel sur la page de la visualisation 2D.

2 - Ajout de la page de la liste des ressources et des différentes fonctionnalités qui l'accompagnent.

3 - Ajout des "nouveaux" blocs et couleurs de la 1.16 Nether Update ainsi que des quelques blocs manquant des versions antérieures.

4 - Correction de la génération de la structure dans le cas particulier de l'eau et des nuances de sa couleur.

 

Pour des raisons de manque de support pour faire des tests nécessaires pour réaliser une version viable, j'ai décider de laisser tomber le build pour macOS, désolé :/ 

J'ai mis à jour le tuto en début de ce sujet afin qu'il corresponde à cette V2. Ce faisant, bien que la V1 fonctionne encore et que je laisse son lien de téléchargement, cette version est dorénavant dépréciée.

Comme d'habitude, les retours sur des bugs, comportements inhabituels/inattendus ou quel qu'il soit sur le fonctionnement, la prise en main du logiciel sont les bienvenus! :D 

(Promis j'essaie de voir pour faire l'export au format litematica le plus tôt possible!... Quand je pourrais… Un jour… x) )

Cubicalement vôtre,

M3

Modifié par Mushroom_3ater
  • Like 3
Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez écrire votre message dès maintenant. Avant de le poster il vous sera demandé de vous inscrire. Si vous avez un compte, connectez-vous maintenant pour publier.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
×
  • Créer...