Éditeur de sprites

Pyxen comprend un éditeur de sprites complet pour créer et modifier du pixel art directement dans votre projet, sur iPad et sur Mac. Aucun outil externe nécessaire.

Ouvrir l’éditeur de sprites

Choisissez une image dans Fichiers : elle s’ouvre directement dans l’éditeur de sprites. Pour en créer une, choisissez Fichier › Nouvel asset… puis Image.

Dans une fenêtre d’iPad étroite, le canevas prend toute la largeur de la sous-fenêtre et ses panneaux sont les outils du plateau, au pied de la fenêtre : Outils, Couleur, Calques et Images. Ceux d’une tilemap sont Outils et Tuiles.

Outils de dessin

Les outils se trouvent le long du canevas, chacun avec sa touche :

Choisissez une couleur et dessinez sur le canevas. Zoomez en pinçant ou en faisant défiler pour un travail au pixel près ; Ajuster à la fenêtre (Cmd+0) montre l’image entière. La Symétrie, dans la barre de l’éditeur, reproduit ce que vous dessinez horizontalement, verticalement, ou les deux.

Couleurs

La colonne latérale contient la couleur avec laquelle vous dessinez et la couleur d’arrière-plan (X les inverse), la couleur en hexadécimal, la palette et les dernières couleurs utilisées. Choisissez une autre palette dans le menu ⋯.

Outils de sélection

Avec une sélection, le menu du canevas (clic droit, ou toucher et maintenir) permet de :

Sur iPad, les boutons d’édition au-dessus du canevas annulent, rétablissent, coupent, copient et collent.

Calques

Les calques se trouvent sous la palette. Ajouter un calque en ajoute un ; chaque calque a un interrupteur Visible et Verrouillé. Le menu d’un calque le renomme, le monte ou le descend, règle son Opacité ; Fusionner avec le calque du dessous le combine avec celui d’en dessous, Aplatir fait un seul calque de tous, et Supprimer le calque le retire.

Chaque calque est dessiné indépendamment. Cela vous permet de séparer les arrière-plans, les personnages et les effets sur différents calques et de les modifier sans affecter les autres.

Redimensionner, retourner et faire pivoter

Redimensionner l’image… change la taille de l’image :

Le menu du canevas propose aussi Rogner au contenu, Retourner horizontalement, Retourner verticalement, et des rotations de 90° et 180°.

La grille (Grille dans la barre) aide à aligner les tuiles sur une planche ; sa taille, ses lignes principales et sa couleur sont dans le menu ⋯.

Animation

Le bas de l’éditeur contient les animations de l’image, pour des animations de sprites image par image.

Créer des animations

  1. Choisissez Nouvelle animation et donnez-lui un nom (par ex. « walk », « idle », « attack »)
  2. Sélectionnez des tuiles sur votre planche avec l’outil Sélection de tuiles (T), puis choisissez Ajouter à l’animation
  3. Ou choisissez Ajouter une image pour ajouter la tuile suivante dans l’ordre de lecture

Planche entière affiche de nouveau toute l’image ; le menu d’une animation la renomme ou la supprime.

Modifier les frames

Pelure d’oignon

Activez Pelure d’oignon pour voir un fantôme de la frame précédente pendant que vous dessinez. Cela aide à garder des frames cohérentes.

Isoler l’image

Activez Isoler l’image pour masquer les tuiles autour de la frame que vous modifiez, et vous concentrer sur elle.

Utiliser les animations dans le code

Les animations sont sauvegardées dans les métadonnées du sprite. Jouez-les dans votre jeu avec le paramètre animation :

player.sprite = Sprite("hero", animation="walk")

Consultez Sprites et Rendu et la référence Sprite pour l’API complète.

Utilisé dans le code, dans la barre du panneau, indique combien de lignes de vos scripts nomment cette image ; choisissez-en une pour y aller. Dans le code, un Cmd+clic sur le nom d’une image ramène ici, sur l’animation ou la tuile que l’appel nomme.

Exporter un sprite

Exporter… à la fin du menu ⋯, Exporter l’animation… dans le menu d’une animation, ou Fichier › Exporter le sprite… (Option+Cmd+E) ouvre Exporter le sprite. Choisissez ce que vous voulez obtenir :

Choisissez l’Animation et, pour Image, l’image. Échelle rend le fichier 1×, 2×, 4× ou 8× plus grand, chaque pixel restant un carré net. L’aperçu est le fichier, avec son nom et sa taille dessous : hero-walk@4x.gif, hero-walk-2.png pour l’image 2, hero-walk-strip.png, hero.png pour la planche.

Enregistrer… enregistre le fichier où vous voulez ; sur iPad, Partager… ouvre la feuille de partage (Enregistrer dans Fichiers, Enregistrer l’image, AirDrop) ; sur le web, Télécharger le télécharge. Copier met un PNG dans le presse-papiers. Sur Mac et iPad, faites glisser l’aperçu pour déposer le fichier où vous voulez.

Un GIF n’a pas de pixels semi-transparents : un pixel opaque au moins à moitié est dessiné plein, les autres sont transparents. Une image de GIF dure un nombre entier de centièmes de seconde : à 8 i/s, chaque image dure 0,13 s, et rien ne va plus vite que 50 i/s.

Annuler et rétablir

Chaque modification dans l’éditeur de sprites peut être annulée (Cmd+Z) et rétablie (Cmd+Maj+Z) tant que le projet est ouvert.

Voir vos dessins dans le jeu

Votre jeu lit ses images à chaque démarrage : après avoir peint, relancez le jeu pour voir les nouveaux pixels dans l’aperçu du jeu. Un jeu en cours garde les images avec lesquelles il a démarré.

Conseils