Alternative à Piskelapp — un outil de sprites gratuit dans le navigateur qui crée aussi de la 3D

Si vous avez tapé piskelapp dans la barre d'adresse, vous avez déjà trouvé Piskel : piskelapp est le domaine de l'éditeur de pixel art gratuit dans le navigateur. « alternative à piskelapp » et « alternative à piskel » sont donc la même question posée de deux façons. Il n'existe pas de produit distinct appelé PiskelApp. Le nom dont les gens se souviennent, c'est l'adresse.

Cette page est la version honnête de la réponse. Ce que Piskel fait bien sur une grille de pixels fixe. Où il s'arrête. Ce qu'apporte un outil de sprites dans le navigateur quand la feuille doit cesser d'être une image pour devenir un matériau dans une scène que l'on parcourt. Aucun classement, aucun compteur de téléchargements, aucun benchmark inventé — le mécanisme, les réglages de fichiers et les modes d'échec.

Réponse rapide

piskelapp est le domaine de Piskel, l'éditeur de pixel art gratuit dans le navigateur — « alternative à piskelapp » et « alternative à piskel » désignent donc généralement la même question. Rien n'a changé dans l'outil lorsque le domaine est devenu le nom dont les gens se souviennent. L'application, c'est Piskel. La requête, c'est un nom d'hôte.

La question derrière la requête est presque toujours l'une de ces deux choses. Soit vous voulez le même travail accompli dans un outil qui a évolué — un canevas plus rapide, plus de calques, une sauvegarde qui vous suit sur une autre machine —, soit vous voulez quelque chose que Piskel n'a jamais été conçu pour être : un générateur qui produit des images et un constructeur de scènes qui donne à ces images un endroit où vivre.

Ce sont deux usages différents de votre temps. Si vous dessinez chaque pixel à la main et que la grille de Piskel vous plaît, changer d'éditeur vous coûte votre mémoire musculaire et ne vous apporte presque rien. Si votre goulot d'étranglement est qu'un cycle de marche vous prend un après-midi, aucun éditeur 2D ne le résoudra, car le goulot d'étranglement, c'est le dessin, pas l'éditeur.

Ce que « alternative à piskelapp » demande vraiment

Retirez le domaine et la phrase devient « j'ai besoin d'un outil de sprites ». Cela se divise en trois exigences constamment confondues : le dessin, où un humain déplace les pixels ; la génération, où un modèle dessine des images à partir d'une description écrite ; et l'assemblage, où les images deviennent une feuille, la feuille devient une animation, et l'animation devient une scène. Piskel couvre bien la première et une partie de la troisième. Il n'a aucune opinion sur les deux autres.

Déterminez lequel est votre goulot d'étranglement avant de changer quoi que ce soit. La plupart des gens qui quittent Piskel pour un autre éditeur 2D reviennent, parce que le second éditeur est lui aussi une grille et une barre d'outils.

Ce qu'est piskelapp (Piskel)

Piskel est un éditeur de pixel art directement dans le navigateur. Vous ouvrez la page, définissez une taille de canevas — 32×32 par défaut, et c'est encore un choix raisonnable — et vous dessinez sur une grille zoomée avec un crayon, un pot de peinture, un tramage, un éclaircissement et une poignée d'autres outils. Rien ne s'installe. Aucun compte n'est créé. L'éditeur s'exécute côté client : une fois la page chargée, le dessin n'attend aucun aller-retour réseau.

Les éléments qui lui ont valu sa place sont ceux que les gens citent d'un même souffle : la pelure d'oignon, qui permet de voir l'image précédente et la suivante derrière l'image courante en opacité réduite pendant l'animation ; les commandes de palette, pour constituer un jeu de couleurs fixe et garder chaque image à l'intérieur ; un volet d'aperçu qui joue l'animation à une cadence et une taille définies ; et une petite pile de calques par image.

L'export est l'endroit où il est réellement utile, et c'est la partie qui mérite le plus d'être comprise si vous cherchez un remplaçant. Vous pouvez exporter l'image courante ou toutes les images en PNG individuels, exporter un GIF animé, exporter une feuille de sprites en un seul PNG selon un nombre de colonnes, un nombre de rangées et une échelle entière choisis, ou enregistrer le projet dans un fichier .piskel, qui est un document JSON décrivant les images et la palette.

• Pelure d'oignonDessine l'image précédente et la suivante derrière l'image courante en faible opacité. Vous contrôlez l'opacité et les voisins affichés. C'est la fonction qui rend possibles les boucles animées à la main, plutôt qu'approximatives.
• PaletteCréez ou importez une palette, puis gardez chaque image à l'intérieur de ces échantillons. L'ordre des index compte plus tard : c'est ce que vous emportez dans un shader ou une routine d'échange de palette.
• Export de feuille de spritesUn PNG, votre nombre de colonnes, votre nombre de rangées, une échelle entière. C'est le fichier qu'un moteur ou une scène 3D consomme réellement.
• Export GIFGIF animé avec un délai par image. Pratique pour partager une boucle, peu commode pour les jeux : le GIF plafonne à 256 couleurs par image et à une transparence de 1 bit, si bien que les bords doux reviennent soit durcis, soit disparus.
• Fichier de projet .piskelLe format d'enregistrement est du JSON contenant les données des images et la palette. Il se réouvre dans Piskel. Il ne s'ouvre pas dans d'autres éditeurs.
• Aucun compteIl n'y a rien pour se connecter. Le projet vit dans l'onglet, dans le stockage du navigateur et dans les fichiers que vous téléchargez.

Pourquoi les gens recherchent plutôt le domaine

Parce que le nom du produit est un domaine. Les gens qui se souviennent à moitié de l'outil tapent ce qui ressemble à une adresse, et le navigateur ou la barre de recherche la complète. Une marque qui est aussi un nom d'hôte génère indéfiniment des requêtes en forme de domaine, et ces requêtes restent stables même quand personne n'écrit sur le produit.

La deuxième raison est que l'outil a très peu changé. La grille, la barre d'outils, les commandes de pelure d'oignon, la boîte de dialogue d'export : ils sont reconnaissables comme ceux d'il y a des années. Cette stabilité est précisément pourquoi les gens le recommandent encore. C'est aussi pourquoi il y a peu de choses à écrire. Les nouvelles fonctions génèrent de nouvelles pages ; un éditeur stable génère un ensemble stable de pages qui vieillissent lentement, et la requête sur le domaine continue d'arriver sans rien de nouveau derrière elle.

L'effet pratique est qu'une recherche sur le domaine renvoie un mélange de l'application elle-même, de vieux tutoriels et de listes rédigées avant l'état actuel de l'outillage dans le navigateur. C'est cet écart qui justifie l'existence de cette page. Ce n'est pas que Piskel s'est détérioré. C'est que la catégorie environnante a gagné une étape de génération et une étape 3D, et que Piskel ne l'a pas fait, parce qu'il n'a jamais été orienté vers elles.

Là où Piskel s'arrête

Ce sont des limites vérifiables plutôt que des plaintes. Chacune est une chose que vous pouvez vérifier en un après-midi.

La limite la plus importante est l'absence de chemin entre une feuille terminée et une scène en fonctionnement. Piskel vous remet un PNG. À partir de là, vous êtes en terrain de moteur : réglages d'import, mode de filtrage, marge de l'atlas, points de pivot, rectangles d'images, clips d'animation, boîtes de collision. Ce travail est bien réel, et c'est là qu'une tâche artistique de deux heures se transforme en une tâche d'intégration de deux jours.

• Aucune étape de générationPiskel dessine ce que vous dessinez. Pas de champ de consigne, pas d'import de référence, pas de modèle qui propose des images. Si vous avez besoin d'un cycle de marche dans huit directions, vous dessinez huit directions.
• Aucune sortie 3DLa sortie, ce sont des images raster. Pas de maillage, pas de caméra, pas de graphe de scène et pas d'éclairage. Une feuille utilisée en 3D est une texture que vous attachez, découpez et alignez vous-même.
• Aucun projet dans le cloudPas de compte signifie pas de projet côté serveur. Changez de machine et vous importez un fichier téléchargé. Effacez le mauvais stockage du navigateur et la copie locale à l'onglet disparaît avec.
• Aucun moteur d'exécutionPiskel joue votre animation dans un volet d'aperçu à une cadence fixe et s'arrête là. Il ne gère ni les entrées, ni la physique, ni les collisions, ni une caméra.
• Mise à l'échelle entière uniquementL'échelle d'export est un multiplicateur entier, et ce n'est pas un hasard. Un sprite de 32×32 dessiné à 1,5× produit des pixels qui font alternativement un et deux pixels d'écran de large. L'éditeur ne peut pas corriger cela ; la solution est un filtrage au plus proche voisin plus un zoom entier à l'affichage.

Piskel face à un outil de sprites dans le navigateur

Le tableau compare les deux sur les lignes qui décident d'un projet. Chaque cellule décrit un mécanisme, pas une note. Si une ligne n'affecte pas votre façon de travailler, ignorez-la.

Lisez les lignes dans l'ordre de ce qu'elles vous coûtent. L'animation est peu coûteuse à comparer, car les deux outils animent. La sauvegarde dans le cloud et la sortie 3D sont les lignes qui changent la forme du travail, car elles décident si vous pouvez confier l'art à quelqu'un d'autre et si cet art a un endroit où aller une fois terminé.

Quand une alternative à piskelapp vaut le changement

Changez lorsque l'étape bloquante est la génération ou l'intégration. Cela correspond à l'une de deux situations : vous ne pouvez pas dessiner le volume d'images dont le projet a besoin, ou vous pouvez les dessiner mais la feuille n'atteint jamais une scène parce que personne ne veut configurer à la main un atlas, des pivots et des clips pour chaque personnage.

Ne changez pas si vous aimez dessiner et que vous n'avez besoin que d'un GIF ou d'une feuille. La grille de Piskel est bonne et sa boîte d'export fait ce qu'elle annonce. Le temps passé à évaluer un remplaçant pour un outil qui convient déjà à vos mains est du temps que vous n'avez pas consacré à l'animation.

Générez un sprite ici

La génération est la moitié qui n'existe pas dans Piskel ; il vaut donc la peine de préciser ce qui se passe réellement. Vous écrivez une phrase. Agent Sprite Forge la résout en un sujet, une vue, une palette et un nombre d'images, puis rastérise chaque image sur la même grille à la taille choisie. Comme chaque image partage une même grille et une même palette, les résultats s'assemblent en atlas sans ajustement image par image.

Les modes d'échec sont prévisibles, ce qui est utile. Des mots de vue ambigus produisent des images qui basculent entre deux lectures — « tourné vers l'avant » sur un personnage qui a aussi une direction de marche suffit à le provoquer. Un nombre élevé d'images sur de petits canevas laisse très peu de place par image : huit images en 16×16 vous donnent environ une centaine de pixels de zone de dessin chacune, si bien que le détail se transforme en bruit. Les feuilles qui mélangent des silhouettes générées sous des palettes différentes ressemblent à deux personnages agrafés ensemble. Dans les trois cas, la correction est dans la phrase, pas dans le modèle.

L'export reprend ce que vous attendez déjà d'un outil de sprites : des PNG individuels, une feuille assemblée avec un nombre de colonnes et de rangées, un GIF animé pour la relecture, ou un atlas portant les rectangles d'images, les pivots et une cadence d'images suggérée. À partir de là, la feuille va soit dans votre propre moteur, soit directement dans l'éditeur de monde de la même page.

• Feuille PNGUne image, les frames disposées selon votre nombre de colonnes et de rangées. C'est ce qu'un moteur ou un chargeur de textures veut en premier.
• Données d'atlasRectangles d'images, points de pivot et cadence d'images suggérée, pour que l'animation se joue sans que personne ne construise un clip à la main.
• PNG par imagePour quand vous voulez retoucher une image dans un éditeur de pixels et réassembler la feuille vous-même.
• GIFUn artefact de relecture rapide. Il porte les mêmes limites de 256 couleurs et de transparence à 1 bit que n'importe quel GIF.

De la feuille au monde

Une feuille n'est pas encore de l'art. C'est une texture. Dans une scène isométrique, la feuille est téléversée une fois, les images sont découpées en rectangles UV, et ce sont ces rectangles que le moteur de rendu échange au fil de l'animation. Deux réglages font l'essentiel du travail. Le filtrage de texture reste au plus proche voisin pour que les pixels restent carrés, et l'atlas reçoit un ou deux pixels de marge autour de chaque image afin qu'un filtrage à distance ne tire pas les couleurs d'une image voisine dans les pixels de bord — la cause habituelle d'une frange colorée sur le contour d'un personnage.

La caméra est la seconde moitié. Le pixel art se lit correctement sous une caméra orthographique à un angle isométrique, à peu près 2:1 — une empreinte de tuile de 32×16 à environ 30 degrés d'inclinaison. Passez à une caméra en perspective et les sprites au loin rétrécissent plus vite que la grille du sol, ce qui semble faux même quand rien n'est techniquement cassé. Zoomez par paliers entiers : 1×, 2×, 4×. Un zoom de 1,5× vous montrera des rangées d'un et de deux pixels à l'intérieur d'un même sprite.

La physique et les ombres sont les parties que l'on sous-estime la première fois. Un sprite en billboard est un quad plat qui fait toujours face à la caméra, il ne peut donc pas recevoir une vraie ombre projetée ; le contact au sol est une décalcomanie douce distincte dessinée sous le personnage. Les collisions coûtent moins cher sous forme de grille de tuiles bloquées que de colliders de maillage — l'agent parcourt un chemin sur la grille et la tuile sur laquelle il se tient décide si le pas est autorisé. L'île du Cyclope dans Neta Studio est construite ainsi, et Mini World est la version plus petite de la même boucle : générer une feuille, la déposer dans une scène à tuiles, marcher autour.

• Filtrage au plus proche voisinGarde les pixels des sprites carrés. Un filtrage bilinéaire sur un sprite de 32×32 donne des bords doux et troubles que rien en aval ne peut rattraper.
• Marge d'atlasUn à deux pixels transparents d'extrusion autour de chaque image évitent le débordement de couleur sur les bords une fois les mipmaps activées.
• Caméra orthographiqueCorrespond à la grille de pixels à toute distance. Une caméra en perspective rompt la relation entre l'échelle des sprites et la taille des tuiles.
• Décalcomanie d'ombre floueUn billboard ne peut pas recevoir d'ombre projetée, donc le contact au sol est dessiné plutôt que simulé.
• Collision sur grille de tuilesLes recherches de tuiles bloquées sont rapides et prévisibles. Les colliders de maillage sur un monde à tuiles coûtent plus cher et n'apportent rien.

Entrez dans le monde auquel elle appartient

La question du domaine a une réponse courte et une longue. La courte : c'est Piskel, et c'est un éditeur 2D. La longue : ce qui se passe une fois la feuille terminée — ouvrez un monde construit à partir des mêmes pixels et voyez l'étape devant laquelle un éditeur s'arrête.

FAQ