par Prochainement sur Actilud.
Grâce à l’éditeur de Pixel Art, créez facilement votre propre Pixel Art et faites-en profiter vos proches, vos amis, collègues ou élèves, ainsi que toute la communauté en le publiant sur le site !
Les jeux de Pixel art que vous trouvez dans le module de jeu ont tous été élaborés avec l’aide de cet éditeur. Voici en quelques étapes, comment procéder.
Étape 1 : choix du thème
Vous pouvez réaliser un Pixel art à partir de rien. Mais il est bien plus simple de démarrer à partir d’une image existante. En effet, notre éditeur est capable d’analyser l’image et de la pixelliser, vous laissant ensuite le travail d’affinage. Et si la pixellisation ne donne pas de bons résultats, vous pouvez utiliser l’image comme calque afin de dessiner facilement dans la grille.
Je conseille cette méthode, surtout si vous débutez.
L’image à choisir doit répondre à quelques critères importants :
- elle ne contient pas de détails;
- elle évite les dégradés;
- elle possède des plages de couleurs facilement discernables;
- elle expose un sujet précis;
On peut utiliser des photos, mais les dessins sont souvent plus faciles à exploiter car déjà simplifiés.
Si vous avez décidé de réaliser une petite grille (10×10 par exemple) orientez-vous vers les dessins d’icônes, qui sont déjà simplifiés et en petit format. Attention toutefois, le résultat de la pixellisation risque d’être décevant. Souvent, dans les petites grilles, il vaut mieux dessiner soi-même l’ensemble de la grille, en se servant de l’image comme calque.
Le rapport largeur / longueur est important aussi. Une image carrée se rapproche du format natif de nos grilles. Une image rectangulaire peut nécessiter un rognage si on veut éviter les bandes latérales complètement vides – ce qui est aussi facile à réaliser dans notre éditeur.
Il est souvent utile de modifier une image dans un logiciel de dessin avant de l’importer dans Actilud, notamment pour la recadrer et pour supprimer la transparence. Les codages acceptés sont ceux des navigateurs: « jpg », « jpeg », « png ».
Au départ, si vous ne savez pas encore quelle taille de grille vous voulez créer, utilisez la grille par défaut : taille 35×35 en 5 couleurs (+1 pour les cases vides). Le processus de pixellisation permet de diminuer le nombre de couleurs et l’outil de découpage permet de diminuer la taille de la grille.
Si vous choisissez une image sur Internet, prenez-en une qui soit libre de droits :
Dans Google images, cherchez votre image et, dans la page qui s’ouvre, choisissez Outils, droits d’usage, licence creative commons.
Pour vous aider, j’ai préparé une image de mésange bleue. Je l’ai récupérée sur Internet et je l’ai modifiée : les couleurs sont un peu plus saturées, j’ai ajouté un sol bleu pour inciter l’algorithme de pixellisation à mettre un peu plus de bleu, et je l’ai mise en format carré pour éviter de rogner la grille. Je l’ai aussi choisie pour qu’elle ne soit pas trop facile à utiliser, et qu’elle vous donne un peu de travail. La voici, à télécharger pour vos tests (bouton droit de la souris, enregistrer l’image sous…)
Étape 2 : commencer une grille
Muni de votre image, commencez votre grille. Indiquez le nombre de couleurs, de lignes et de colonnes: vous arrivez sur une grille vierge. Si vous ne savez pas quoi prendre, laissez le format par défaut (35x35x5) car il sera toujours possible de le modifier par la suite.
Voici par exemple l’écran concernant une grille 15×15 en 5 couleurs.
La grille est au centre; deux panneaux latéraux, en haut et à gauche, contiendront le codage du jeu. Vous constatez que les panneaux mesurent exactement 12 cases de long. C’est le nombre maximum toléré de transitions entre les plages de couleurs dans la rangée concernée.
L’œilleton, en haut à gauche, permet de décaler les lignes ou les colonnes de la grille vers la gauche, la droite, le haut ou le bas. Le décalage se fait par rotation: la rangée qui disparaît d’un côté réapparaît de l’autre. En cas d’erreur, il suffit donc de refaire un décalage en sens contraire du précédent. Cela permet d’ajuster la position d’un dessin vers un côté.
La barre des couleurs possède 6 couleurs. Pourtant, dans le paramétrage, nous en avons demandé 5. Il s’agit en fait du nombre de couleurs qui seront présentes dans le pixel art, lorsqu’il sera terminé. La sixième couleur est celle des cases « vides » – par défaut un gris semi-transparent. C’est la case marquée d’une gomme. Dans un jeu, une grille vide est toujours colorée dans cette couleur. La couleur de la case vide est importante : il faut qu’elle soit suffisamment différente des autres couleurs, tout en étant neutre. Le blanc, le noir ou le gris, plus ou moins transparents, sont de bons choix.
La seconde couleur, celle marquée par un trait horizontal, qui est ici en blanc, est celle de l’espacement. Cette couleur n’est jamais mentionnée dans les panneaux de codage. Elle est utilisée pour séparer les plages de couleurs. C’est le cœur même de l’énigme : trouver où placer les espaces entre les plages.
Bien entendu, les couleurs sont modifiables à tout moment. Utilisez la pipette dans la barre d’outils. Cliquez ensuite sur une des couleurs de la palette et modifiez-la. Pour sortir, cliquez sur une autre couleur ou ailleurs sur la page. Pour quitter le mode de couleur, cliquez à nouveau sur la pipette.
Seule la première couleur peut se voir attribuer une valeur de transparence. Les autres couleurs sont toujours opaques.
Si vous avez une image, ne vous précipitez pas sur la pipette ! En effet, le processus de pixellisation va attribuer automatiquement une couleur à chacune des cases du jeu. Il ne vous restera alors plus qu’à ajuster les couleurs avec la pipette et de choisir une couleur de case vide adéquate.
Pour notre test avec la mésange, restez sur la disposition 35x35x5.
Étape 3: pixelliser l’image
Cliquez sur l’outil « image filigrane ». Dans la fenêtre qui s’ouvre, choisissez un fichier de type « image » et chargez-le dans l’éditeur. Vous pouvez tester les différents réglages (taille dans la grille, pourcentage de filigrane, zoom, décalages, inversions). Notez que la taille dans la grille ne varie pas si l’image est carrée. Si l’image est rectangulaire, l’entrée « emplissage » permet de montrer une partie de l’image dans la grille, prenant toute la surface disponible; on perd alors certains bords. L’entrée « intérieur » permet de placer toute l’image dans la grille, faisant apparaître des bandes vides sur les bords.
Ce qui nous intéresse ici, c’est le bouton « pixelliser et lisser dans la grille ». Cliquez dessus et observez le résultat dans la grille. Vous pouvez recommencer plusieurs fois, dans la plupart des cas le résultat varie. Observez aussi la palette des couleurs : elle reflète les changements. Pour effectuer la pixellisation, Actilud emploie l’algorithme des k-moyennes, qui a un départ aléatoire. C’est intéressant pour nous car cet algorithme offre plusieurs solutions.
Pour choisir le meilleur résultat, ne faites pas attention à la valeur des teintes : vous pourrez les changer. Mais privilégiez toujours les résultats donnant de grandes plages de couleurs avec le moins de morcellement possible. Évitez au maximum les pixels isolés. Choisissez un résultat avec de grands à-plats. Si certains détails manquent ce n’est pas grave. Par exemple, la patte de droite de notre mésange est systématiquement coupée; on rectifiera les détails plus tard.
C’est aussi pendant cette opération que vous pouvez diminuer le nombre de couleurs. Cela peut être utile si vous voyez qu’une couleur est sous-représentée. N’hésitez pas à expérimenter.
Remarque : une fois la pixellisation effectuée, l’image disparaît complètement. Elle n’est pas supprimée, mais elle est rendue totalement transparente. Ceci permet de mieux apprécier le résultat dans la grille. Pour voir l’image à tout moment, cliquez sur le bouton « 50% » ou « opaque ».
Une fois que le résultat est acceptable, quittez la fenêtre de filigrane.
Étape 4 : simplifier dans la grille
Comme expliqué au début de cet exposé, le nombre de transitions entre les plages de couleurs est limité à 12. Il va donc falloir reprendre toutes les lignes ou colonnes qui sont un peu trop complexes.
C’est le rôle de l’outil « générer le code d’après l’image » – l’image dans la grille, pas celle que vous avez téléchargée. Dans la fenêtre qui s’ouvre, cliquez sur le premier bouton : « générer le code d’après l’image ». Dans la grille, les panneaux latéraux se remplissent automatiquement – sauf les rangées qui contiennent trop d’information, qui scintillent.
Quittez alors la fenêtre de génération et modifiez directement dans la grille les rangées trop complexes. C’est facile : il suffit de changer la couleur de certaines cases. Essayez toujours de simplifier les détails. Commencez par les cases isolées. Lorsque vous avez terminé une ligne ou une colonne, testez le résultat à nouveau. Puis passez à la ligne ou colonne suivante.
Une fois qu’il n’y a plus d’erreur, vous pouvez alors améliorer les détails. Par exemple, renforcer le bec et les pattes de notre mésange, réparer la patte cassée, renforcer ou modifier quelques couleurs. Pour ma part, je change aussi la couleur du sol et remplace la bande marron sur le ventre par du bleu, qui est la couleur représentative de cette mésange. Vérifiez toujours si la génération de code fonctionne bien.
Changer la couleur d’espacement
On peut permuter la couleur d’espacement avec une des autres couleurs. En général, on privilégie la couleur du fond comme couleur d’espacement. C’est ce qui paraît le plus naturel. Mais l’algorithme de pixellisation attribue peut-être une autre couleur. Vous pouvez donc changer la valeur à cette étape. Notez aussi que la difficulté de l’énigme peut varier en fonction de la couleur d’espacement choisie. Mais, pour rester cohérent, choisissez toujours une couleur d’espacement qui corresponde à la couleur du fond.
Étape 5 : coder !
Une fois les étapes préalables correctement réalisées, passons au codage. Dans l’outil « générer le code d’après l’image », cliquez sur le bouton « Générer le code d’après l’image puis tenter de générer le modèle calculé ».
Le modèle calculé est la grille qui résulte du codage effectué dans les panneaux latéraux. Si le codage se termine par un succès, le nombre de passes indique alors le niveau de difficulté de votre dessin. Le modèle calculé est identique au modèle édité et la grille reste en mode édition. Vous pouvez alors sauvegarder votre travail sous la forme d’un fichier de jeu.
Si le codage indique une erreur, le modèle calculé n’est pas complet. La grille affiche alors le modèle calculé. Par comparaison avec le modèle édité, vous pouvez repérer les cases qui posent problème. Ce phénomène se produit lorsqu’il reste plusieurs possibilités de placement pour certaines plages. Quelquefois il suffit de modifier quelques cases aux endroits stratégiques pour débloquer toute une grille.
Quand le conseiller et la barre d’outils affichent cette icône, vous ne pouvez pas modifier les cases dans la grille. Le modèle affiché est le modèle calculé, qui est constant. Pour passer au modèle éditable, cliquez sur cet icône dans la barre d’outils.
Quand le conseiller et la barre d’outils affichent cette icône, vous pouvez modifier la grille. Pour revenir au modèle calculé, cliquez sur l’outil.
Passer d’un modèle à l’autre permet de comparer son travail avec le modèle calculé.
Il faut souvent faire des aller-retours entre les modifications et le calcul pour obtenir un résultat final correct.
Étape 6 : enregistrer
Vous pouvez enregistrer votre travail à tout moment. Mais, lorsque le modèle calculé est disponible, on peut aussi enregistrer au format « jeu ». Le format « jeu » contient uniquement la grille et les informations sur les couleurs. Ce fichier est utilisable dans le module de jeux. Pour cela, au moment d’enregistrer, cochez la case « enregistrer au format jeu ». Si cette case est désactivée, c’est soit qu’il n’y a pas de modèle calculé, soit que vous avez fait des modifications sur le modèle édité – il faut alors générer un nouveau modèle calculé.
Lorsque vous enregistrez votre travail dans le format standard, l’image importée est stockée dans votre fichier. Lors d’une prochaine session de travail, il ne sera donc pas nécessaire de la charger à nouveau.
Étape subsidiaire : contribuez, publiez !
Dommage de conserver votre œuvre uniquement pour vous et vos proches. Envoyez-la par courriel à webmestre à actilud.com. Si votre adresse de courriel est valide, je l’intégrerai dans la liste des productions existantes, après analyse. Je ne manquerai pas de vous tenir au courant par retour de courriel.
Les conditions sont assez simples :
- vous êtes l’auteur de l’œuvre
- vous autorisez la publication à titre gracieux
- vous acceptez que votre œuvre appartienne au domaine public
- vous restez propriétaire de l’œuvre et pouvez demander son retrait du site à tout moment
- si vous le souhaitez, vos contributions peuvent apparaître sous le pseudonyme de votre choix.
Je vous remercie par avance pour votre contribution : vous m’aidez ainsi à enrichir l’offre du site.
Les autres outils
Le pot de peinture
Permet de peindre des régions délimitées dans la grille. Cliquez sur le pot, choisissez la couleur et cliquez sur une case d’une autre couleur dans la grille.
En cas d’erreur, utilisez l’outil « défaire ».
L’outil de recadrage
Permet de supprimer les rangées vides à la périphérie. Une rangée est vide si elle ne contient que des cases à la couleur « vide » ou à la couleur « espace ».
Quand le recadrage est effectué, la grille a changé de taille.
Arrêter / montrer le clignotement des rangées erronées
La gomme : effacer la grille.
Paramétrage. Permet de modifier à tout moment la taille de la grille et le nombre de couleurs.