Ouvrir, importer et exporter

pxstud.io conserve ton travail dans le navigateur au fur et à mesure (Ton premier sprite). Cette page explique comment faire entrer et sortir des fichiers. Ce que chaque format sait faire est décrit dans Formats de fichier.

Ouvrir des fichiers

Fichier > Ouvrir... (Ctrl+O) ouvre un fichier .pxstudio ou Aseprite, un fichier d'un autre éditeur (Photoshop .psd, OpenRaster .ora, Piskel, Pixilart, Pixelorama, Pyxel Edit), ou une image (PNG ou PNG animé, GIF, JPEG, WebP, AVIF, BMP, TGA, PCX, QOI, ICO, CUR, Netpbm, FLI/FLC), comme nouveau sprite du projet actuel, nommé d'après le fichier. Tu peux aussi déposer des fichiers sur l'éditeur :

• Plusieurs images à la fois te demandent si tu veux les ouvrir comme sprites séparés ou comme une seule animation (une image d'animation par fichier, dans l'ordre des noms de fichier).
• Une grande image (plus de 512 pixels de côté) te demande si tu veux l'importer en pixel art ou l'ouvrir telle quelle.
• Les autres images que le navigateur sait afficher (SVG, etc.) vont dans Importer en pixel art.

Quand quelque chose dans un fichier ne peut pas être conservé, une notification indique quoi, par exemple le profil colorimétrique d'un fichier Aseprite, un mode de fusion que pxstud.io n'a pas, ou un calque de réglage Photoshop. Ce que conservent les fichiers de chaque éditeur est décrit dans Formats de fichier.

Fichier > Enregistrer sous... (Ctrl+Shift+S) télécharge le sprite sous forme de fichier .pxstudio, qui conserve tout et se rouvre exactement comme il était.

Importer

Image en pixel art

Fichier > Importer > Importer une image en pixel art... transforme une photo ou un dessin en pixel art.

1. Choisir une image... ou dépose-en une. (Les images de plus de 4096 pixels sont d'abord réduites.)
2. Règle la taille : largeur et hauteur, ou un grand côté de 16, 32, 64 ou 128.
3. Choisis un algorithme :
   • Équilibré (SLIC + k-means), par défaut, regroupe les pixels en régions de couleur similaire ;
   • Lisse avec contours (bilatéral) lisse les zones et peut assombrir les bords entre elles ;
   • Formes nettes (Kopf-Lischinski) garde les formes et les contours nets.
4. Choisis une palette : Auto trouve les meilleures couleurs (de 2 à 64), ou utilise la palette du sprite, l'une de Mes palettes ou une palette intégrée.
5. Appuie sur Démarrer pour voir le résultat, ajuste, puis appuie sur Redémarrer pour le mettre à jour.
6. Importer comme nouveau sprite, ou comme nouveau calque dans le sprite actuel (centré), puis clique sur Importer. Ajouter les couleurs à la palette du sprite garde les couleurs à portée de main pour les retouches.

Séquence d'images

Fichier > Importer > Séquence d'images... choisit plusieurs images et crée un sprite avec une image d'animation par fichier, dans l'ordre naturel des noms de fichier (run2 avant run10). Le sprite est nommé d'après le premier fichier sans son numéro. Les images de tailles différentes se placent en haut à gauche de la plus grande.

Feuille de sprites

Fichier > Importer > Feuille de sprites... découpe une feuille en images. Choisis une image, ou Utiliser le sprite actuel.

• Détecter la grille cherche les espaces vides entre les images (transparents, ou de la couleur de fond de la feuille) et règle le type, la taille d'image, le décalage et la marge en conséquence. Elle s'exécute quand tu choisis une image, et de nouveau chaque fois que tu appuies dessus. Elle a besoin d'espaces entre les images, donc une feuille dont les images se touchent garde tes réglages et le signale.
• Trouver les images par Détection de chaque sprite convient aux feuilles qui ne suivent pas une grille. Voir Détecter les sprites ci-dessous.
• Type : Bande horizontale, Bande verticale, Par lignes ou Par colonnes.
• Larg. image et Haut. image, Décalage, Marge, et s'il faut inclure les cellules partielles et ignorer les cellules vides. Une grille sur la feuille montre où tombent les découpes.
• JSON d'Aseprite... lit les images, les durées et les étiquettes du fichier JSON qu'Aseprite exporte avec une feuille, au lieu de la grille. Les images rognées reprennent leur place sur le canevas complet, et la marge intérieure d'Aseprite est retirée de chaque image.
• Créer un nouveau sprite, ou remplacer les images du sprite actuel (une seule étape d'annulation).

Détecter les sprites

Pour les feuilles compactes ou irrégulièrement espacées, choisis Détection de chaque sprite. Chaque groupe de pixels qui n'est pas du fond devient une image, affichée sous forme de cadre numéroté sur la feuille.

• Fond : Automatique utilise la transparence si la feuille en a, sinon sa couleur la plus fréquente. Ou choisis Transparent, ou une couleur.
• Tolérance (0 à 255) : la distance au fond qu'un pixel peut avoir tout en comptant comme vide. Augmente-la pour ignorer le bruit léger ou le flou JPEG.
• Écart de fusion : les cadres séparés par au plus ce nombre de pixels vides se fondent en un seul sprite, si bien qu'une épée ou une étincelle détachée reste avec son personnage. 0 ne joint que les cadres qui se chevauchent.
• Pixels min. : les sprites de moins de pixels que cela sont écartés comme des poussières.
• Connexité : si les pixels qui ne se touchent que par un coin appartiennent au même sprite.
• Ordre : les images se suivent ligne par ligne ou colonne par colonne.
• Taille de l'image est la taille du plus grand sprite, ou une taille personnalisée (les sprites plus grands sont coupés). L' Ancrage décide où chaque sprite se place sur ce canevas : en bas au centre garde les pieds sur une même ligne, ce qui évite à un cycle de marche de trembler.

Pour corriger le résultat à la main, clique sur un cadre pour le sélectionner. Tu peux changer ses X, Y, L et H, décaler sa position dans l'image (Décaler X et Décaler Y), le déplacer Avant ou Après dans l'ordre, passer au cadre Précédent ou Suivant, ou le Supprimer. Fais glisser sur une partie vide de la feuille pour dessiner un nouveau cadre, qui est ajouté en dernier. Modifier un réglage de détection ou appuyer sur Redétecter relance la détection et annule ces modifications.

Les sprites qui se touchent ne peuvent pas être distingués et donnent un seul cadre ; sépare-les à la main, ou utilise plutôt la grille.

Exporter

Fichier > Exporter... (Ctrl+Alt+Shift+S) ouvre une seule boîte de dialogue pour tous les formats, avec un aperçu du vrai fichier. Les calques masqués, les calques de référence et les calques brouillon ne sont jamais exportés (un fichier Aseprite conserve tous les calques).

Pour tous les types :

• Redimensionner (%) met à l'échelle par pas entiers, de 100 % à 1600 %, pour que les pixels restent des carrés nets.
• Appliquer le ratio de pixel étire les pixels non carrés à leur forme.
• Images : toutes, l'image active, ou les images d'une étiquette. Sens de l'animation : avant, arrière ou ping-pong (pour une étiquette, avant conserve le sens propre de l'étiquette).
• Jouer les sous-étiquettes et répétitions (quand le sprite a des étiquettes, activé par défaut comme dans Aseprite) : les images sont exportées comme la lecture les joue, à travers chaque étiquette dans son sens, étiquettes imbriquées et nombres de répétitions compris, si bien qu'une image peut apparaître plus d'une fois. Désactive-le pour exporter chaque image une seule fois, dans l'ordre (un fichier par image pour une séquence PNG).
• Zone (quand le sprite a des slices) : le canevas entier, un slice, ou Chaque slice, qui écrit un export par slice. Un slice qui se déplace ou se redimensionne d'une image à l'autre est exporté dans le cadre qui le couvre sur chaque image exportée, si bien que toutes ses images ont la même taille. Avec chaque slice, {slice} dans le nom de fichier devient le nom du slice ({slice}.png donne head.png) ; sans cela, le nom est ajouté avant l'extension (sprite-head.png, walk-head001.png). Pas pour les feuilles de sprites ni pour les types de fichier entier.
• Nom du fichier. Pour une séquence PNG, un nombre dans le nom définit la numérotation : walk001.png donne walk001.png, walk002.png et ainsi de suite ; sans nombre, les images sont numérotées sprite-001.png.

Par type :

Préréglages et file d'attente

Préréglages et file d'attente, en bas de la boîte de dialogue d'export, enregistre et regroupe des exports. Rien dedans ne demande de confirmation.

• Les Préréglages conservent le type et chaque option de cet onglet (redimensionnement, images, zone, nom de fichier, et les options propres à chaque type comme la qualité, l'arrière-plan, le point actif, la taille de cellule ou les réglages de feuille de sprites) sous un nom que tu choisis. Enregistrer le préréglage avec un nom existant le remplace. Appliquer remplit la boîte de dialogue avec un préréglage, et Renommer et Supprimer font ce qu'ils disent. Les préréglages restent sur cet appareil et n'ont pas besoin de compte. Un choix d'étiquette, de slice ou d'image d'un préréglage que le sprite actuel n'a pas retombe sur toutes les images ou sur le canevas entier.
• File d'attente : Ajouter l'actuel à la file (ou Ajouter à la file d'un préréglage) met en file un export avec les réglages tels qu'ils sont maintenant. Lancer la file crée tous les fichiers d'un coup : un seul téléchargement, ou un seul pxstudio-export.zip quand les éléments produisent plusieurs fichiers. Chaque élément affiche En attente, Terminé ou l' erreur qui l'a arrêté ; un élément en échec n'arrête pas les autres, et relancer Lancer la file réessaie ceux en échec. Retirer enlève un élément. La file concerne le sprite et la boîte de dialogue que tu as ouverts, et elle est de nouveau vide quand la boîte de dialogue se ferme.

Feuilles de sprites

Le type Feuille de sprites a quatre onglets, organisés comme ceux d'Aseprite :

• Disposition : bande, lignes, colonnes ou Compactée ; un nombre fixe de colonnes ou de lignes, ou une largeur ou hauteur fixe ; meilleur ajustement ; fusionner les images en double ; ignorer les vides.
• Sprite : quels calques et quelles images, s'il faut séparer les calques ou les étiquettes, et le rognage.
• Bordures : marge extérieure, espacement et marge intérieure, et Extrusion (répète les pixels du bord, pour éviter les coutures dans les jeux).
• Sortie : un Préréglage de moteur, le Fichier de données (JSON d'Aseprite en Hash ou en Array, ou un SpriteFrames .tres de Godot 4) et, pour le JSON, la façon de nommer chaque image.

Les dispositions fonctionnent comme celles d'Aseprite, donc les mêmes options donnent la même feuille :

• Les bandes, lignes et colonnes placent chaque image à sa propre taille, si bien que les images rognées ne prennent pas la place de la plus grande. Sans contrainte, Par lignes et Par colonnes font une grille presque carrée.
• Séparer les calques place les images de chaque calque les unes après les autres, et Séparer les étiquettes celles de chaque étiquette. Par lignes commence une nouvelle ligne pour chaque calque et étiquette (Par colonnes, une nouvelle colonne), sauf si une largeur (hauteur) fixe les fait passer à la ligne.
• Compactée place les images, les plus grandes d'abord, dans la plus petite feuille possible, proche d'un carré (100 images rognées de 4 à 43 px donnent 258×236 px, comme dans Aseprite). Meilleur ajustement : Plus petite surface essaie quelques tailles de plus, et Plus petite puissance de deux donne une feuille dont les côtés sont des puissances de deux.
• Une largeur ou hauteur fixe est la largeur ou la hauteur de la feuille, même si les images en utilisent moins.
• L'aperçu avertit quand la feuille dépasse 16384 px de côté, ce que de nombreux GPU et moteurs ne peuvent pas charger.

Rognage :

• Rogner le sprite rogne chaque image à la zone qu'utilise l'une quelconque des images. Rogner les cels rogne chaque image à son propre contenu. Avec un calque Background visible, les deux suppriment la couleur de fond (la couleur du pixel en haut à gauche) au lieu de la transparence.
• Rogner selon la grille agrandit la zone rognée jusqu'aux lignes de la grille, pour l'un ou l'autre type de rognage.
• Le JSON conserve les images en coordonnées du canevas : sourceSize est la taille du canevas et spriteSourceSize est l'endroit où les pixels de l'image se trouvent dessus, si bien que les moteurs et les réimportations gardent chaque image à sa place.

Noms des images : laisse Nom de fichier de chaque élément vide pour obtenir les noms d'Aseprite, {title} {frame}.{extension}, avec ({layer}) ajouté pour un calque et #{tag} pour une étiquette (hero (Body) #walk 0.aseprite). {frame} compte à partir de 0 pour chaque calque et étiquette. Les jetons sont ceux d'Aseprite :

Tu obtiens le PNG de la feuille et un fichier de données du même nom. Le JSON liste la position et la durée de chaque image, les étiquettes, les calques exportés et les slices, et il est lisible par les moteurs de jeu et les outils qui lisent le JSON d'Aseprite. Contrairement à Aseprite, le rectangle frame d'une image n'inclut pas la marge intérieure, et les plages d'étiquettes comptent les images de la feuille. Comme dans Aseprite, les images d'une étiquette sont dans l'ordre de la chronologie sur la feuille, et son sens et son nombre de répétitions sont dans le JSON pour que le moteur de jeu les applique.

Les préréglages de moteur règlent la disposition pour un moteur de jeu en un clic : Godot 4 et Phaser / PixiJS compactent les images, rognent chacune à son contenu, fusionnent les doublons et ajoutent 1 px d' extrusion, pour que les images ne captent pas les bords de leurs voisines quand la caméra bouge ou que la texture est filtrée. Godot 4 choisit aussi le fichier de données .tres. Aseprite par défaut remet la disposition sur une simple bande. Tu peux changer n'importe quelle option ensuite.

Godot 4

Avec le fichier de données Godot 4 SpriteFrames (.tres) :

• Chaque étiquette devient une animation portant le nom de l'étiquette. Un sprite sans étiquettes obtient une animation appelée default. Avec Séparer les calques, les animations s'appellent calque/étiquette.
• Les durées des images sont conservées exactement : la vitesse de l'animation vient de la durée d'image la plus fréquente, et les images plus longues ou plus courtes reçoivent une durée relative correspondante.
• Godot n'a pas de réglage de sens inverse, de ping-pong ni de répétition, donc les images sont écrites dans l'ordre de lecture. Une étiquette avec un nombre de répétitions joue ce nombre de fois (chaque sens d'un ping-pong compte une fois) et ne boucle pas ; les autres étiquettes bouclent.
• Les images rognées gardent leur taille et leur position complètes, pour que le sprite ne saute pas d'une image à l'autre.

Mets le PNG et le .tres dans le même dossier de ton projet Godot, puis choisis le .tres comme Sprite Frames d'un AnimatedSprite2D. Pour des pixels nets, règle Project Settings > Rendering > Textures > Default Texture Filter sur Nearest.

Exporter un timelapse

Fichier > Exporter un timelapse... crée un court GIF ou MP4 de ton sprite en train d'être dessiné, à partager.

• Animer : Dessiner le sprite terminé (les pixels apparaissent dans un ordre que tu choisis : un balayage, un fondu aléatoire, un balayage diagonal, une spirale, depuis le centre, ou couleur par couleur), ou Rejouer mes modifications (ton véritable historique des annulations de cette session, trait par trait : les étapes qui ont mené à là où tu en es, sans les étapes annulées ni les autres branches). Choisis une plage de modifications (De la modification / À la modification) et Afficher toutes les N modifications pour accélérer les longues constructions.
• Avec plusieurs calques ou images, choisis s'ils sont dessinés ensemble ou un par un.
• Minutage : durée du dessin, cadence d'images, rythme (progressif au début et à la fin, constant, accélérer, ralentir), une pause entre les images, un maintien à la fin, et le nombre de fois que l'animation terminée est ensuite jouée.
• Sortie : GIF ou MP4, échelle (elle vise 1080 pixels par défaut), marge, un canevas carré, et la couleur d'arrière-plan (ou transparent, pour le GIF).