# Ouvrir, importer et exporter

Ouvre des sprites et des images, transforme des images en pixel art, découpe des feuilles de sprites, et exporte des images, des animations, des feuilles, des vidéos et des timelapses.

_Les raccourcis sont écrits pour Windows et Linux. Sur Mac, utilise ⌘ Cmd là où il est écrit Ctrl, et ⌥ Option pour Alt._

pxstud.io conserve ton travail dans le navigateur au fur et à mesure ([Ton premier sprite](https://pxstud.io/fr/docs/manual/start/first-sprite.md#saving)).
Cette page explique comment faire entrer et sortir des fichiers. Ce que chaque format sait faire est décrit dans
[Formats de fichier](https://pxstud.io/fr/docs/manual/reference/file-formats.md).

## 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](https://pxstud.io/fr/docs/manual/reference/file-formats.md).

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](https://pxstud.io/fr/docs/manual/guides/import-export.md#detecting-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](https://pxstud.io/fr/docs/manual/guides/layers.md#draft-layers) 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](https://pxstud.io/fr/docs/manual/guides/slices.md)) : 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 :**

| Type | Options |
| - | - |
| **PNG** | Une seule image, ou une par image d'animation. |
| **GIF animé** | **Nombre de boucles** (0 boucle indéfiniment, ou utilise la répétition de l'étiquette). **Tramage** : un GIF contient 256 couleurs, donc une animation qui en a plus reçoit une palette choisie parmi toutes ses images, et ce réglage choisit comment les couleurs intermédiaires sont dessinées (les mêmes choix que pour la [conversion en indexé](https://pxstud.io/fr/docs/manual/guides/color.md#color-modes) ; les motifs ordonnés ne scintillent pas d'une image à l'autre). Les pixels d'opacité inférieure à la moitié deviennent transparents ; le GIF stocke les durées par pas de 10 ms, 20 ms au minimum. |
| **PNG animé (APNG)** | **Nombre de boucles**. Conserve toutes les couleurs, la transparence douce et les durées exactes ; enregistré en `.png`. Les applications sans prise en charge d'APNG affichent la première image. |
| **WebP** | Fixe ou animé ; **Sans perte**, ou une **Qualité** de 0 à 100 ; nombre de boucles. |
| **Feuille de sprites** | Ci-dessous. |
| **Fichier Aseprite** | Tout le sprite, avec calques, groupes, cels liés, étiquettes, slices et tilemaps. L'opacité des groupes et les modes de fusion s'affichent dans Aseprite avec **Experimental > Compose groups** activé. |
| **Fichier Photoshop (PSD)** | L'image active avec ses calques, groupes, modes de fusion, opacité, visibilité et écrêtage, plus l'image fusionnée. S'ouvre dans Photoshop, Krita, GIMP et Photopea. |
| **OpenRaster (ORA)** | L'image active avec ses calques et groupes, pour Krita, GIMP, MyPaint et Pixelorama. |
| **Fichier Piskel** | Chaque image et chaque calque visible. Les groupes sont aplatis, et le fichier reçoit une seule cadence (d'après la durée la plus fréquente). |
| **Tilemap (JSON / Tiled)** | Des images de tilesets plus une carte Tiled ou un fichier JSON ([Tilemaps](https://pxstud.io/fr/docs/manual/guides/tilemaps.md#exporting)). |
| **Vidéo MP4** | **Cadence d'images** (Auto conserve exactement chaque durée), le nombre de **lectures**, et une **couleur d'arrière-plan** (la vidéo n'a pas de transparence). Proposé seulement là où le navigateur sait créer des vidéos. |
| **Vidéo WebM (VP9)** | Le nombre de **lectures** et une **couleur d'arrière-plan** (la vidéo n'a pas de transparence). Conserve la durée exacte de chaque image. Proposé seulement là où le navigateur sait créer des vidéos. |
| **FLC** | Le format d'Autodesk Animator : jusqu'à 256 couleurs, la transparence devient noire. |
| **JPEG** | **Qualité** et une **couleur d'arrière-plan**. |
| **AVIF** | **Qualité** : 100 (par défaut) est sans perte ; une valeur plus basse donne un fichier plus petit qui n'est plus exact au pixel près. |
| **ICO, CUR** | Icônes et curseurs Windows, jusqu'à 256×256. **Toutes les tailles** stocke aussi chaque taille entière supérieure jusqu'à 256 (un sprite de 32×32 donne 32, 64, 96 … 256), pour que Windows en choisisse une nette. Le point de clic d'un curseur est le pivot d'un slice nommé `hotspot`. |
| **ANI** | Un curseur Windows animé, jusqu'à 256×256. Chaque image sélectionnée devient une image de curseur affichée pendant la durée de l'image (arrondie à 1/60 s) ; les images répétées (ping-pong) sont stockées une seule fois. Définis le point de clic avec **Point actif X / Y** (il part du pivot du slice `hotspot`). |
| **PDF de loisirs créatifs** | Un modèle imprimable de point de croix, de perles ou de perler de l'image courante : une couverture avec un aperçu et le nombre de couleurs, le schéma découpé en pages quadrillées, et une légende listant le symbole, la pastille, l'hexadécimal, le nom du groupe de palette et le nombre de points de chaque couleur. Règle la **taille de cellule** (mm), le **format de page** (A4 ou Letter), une **ligne de grille** plus épaisse toutes les N cellules, et les **symboles** ou les **remplissages de couleur**. Les cellules transparentes sont ignorées ; le mode symboles accepte jusqu'à 56 couleurs. |
| **Netpbm** | `.pgm` non compressé (niveaux de gris opaques), `.ppm` (couleur opaque) ou `.pam` (avec transparence) ; l'extension suit l'image. |
| **TIFF** | Sans perte, compressé en LZW. Les sprites indexés conservent leur palette (sauf s'ils utilisent leur couleur transparente) ; les autres sprites sont enregistrés en RGB, ou en RGBA quand quelque chose est transparent. Un fichier par image. |
| **JPEG XL** | Sans perte, avec transparence. Limité à 1024×1024 pixels, donc réduis le redimensionnement pour les gros exports. Un fichier par image. |
| **BMP, TGA, PCX, QOI, SVG** | Un fichier par image. Le SVG dessine chaque série de pixels de même couleur comme un rectangle. |

### 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 :

| Jeton | Devient |
| - | - |
| `{title}`, `{extension}`, `{name}` | Le nom du fichier sans son extension, l'extension (`aseprite`), et les deux. |
| `{layer}`, `{group}` | Le calque, quand les images viennent d'un seul calque, et son groupe. |
| `{tag}`, `{innertag}`, `{outertag}` | L'étiquette exportée, ou la plus courte étiquette contenant l'image ; `{outertag}` est la plus longue. |
| `{frame}`, `{tagframe}` | Le numéro de l'image, et son numéro dans l'étiquette. Les chiffres définissent le début et la largeur : `{frame1}` compte 1, 2, … ; `{frame001}` donne 001, 002, …. |
| `{duration}` | La durée de l'image en millisecondes. |

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