...  27 octobre 2023

Custom Piskel

Il est important d'affuter ses outils pour tailler le bois correctement. C'est pareil quand on fait des jeux. Je vais donc expliquer comment j'ai passé un petit coup de pierre à aiguiser sur Piskel pour me simplifier la tâche sur la création d'une animation.

Piskel, c'est l'une de mes applications en ligne préférées pour créer et animer des sprites. J'en faisais déjà la promotion en 2016. Entre-temps, Piskel est devenu un programme à télécharger, et son auteur, Jordan Watkins, a mis son code source en libre accès sur GitHub.

Mon seul souci avec Piskel est d'être bloqué en début et en fin d'animation en utilisant les touches haut et bas. Impossible de voir si la première frame reboucle correctement avec la dernière. C'est particulièrement flagrant avec l'animation sur laquelle j'étais en train de travailler hier :

Piskel not looping

J'ai pu rapidement modifier la gestion des touches haut et bas dans le code source pour que l'on puisse boucler sur l'animation. Ce que je ne savais pas, c'est que le projet semble être abandonné depuis 2021 avec une petite note :

Piskel was always meant to be first and foremost a sprite editor, and we put a lot of efforts in making it as easy to use as possible. piskelapp.com was created to make it even easier by allowing users to save their creations online.

But saving user sprites online has become too costly and too complex. This is causing more and more bugs and errors, which will progressively make the service unusable. To avoid further unexpected issues, we will gradually remove the ability to save sprites online, so that users have time to export their sprites, and potentially transition to other tools.

Finally, Piskel is a side project, only maintained by one person. I am really sad to remove the accounts, but it is way too much work in my current situation. Hopefully this means I will instead have more time to spend on the editor and improve it.

Mais contrairement à ce qui est dit, le projet GitHub semble être aussi à l'arrêt. Je me suis donc débrouillé pour compiler ma version modifiée du programme. Et pour que ce ne soit pas perdu, je vais détailler la manip !

On commence par télécharger le code source de Piskel. La version originale ne compile pas facilement. Je me suis rabattu sur une version plus récente maintenue par Matt Sephton :

Dézipper le tout dans un dossier (par exemple C:\piskel).

Ceux qui me suivent savent que je préfère les versions portables, "todo incluido", des programmes. C'est pour cette raison que j'utilise Flash, ZGameEditor ou Godot, plutot qu'Unity ou Unreal Engine qui nécessitent d'installer Visual Studio et un paquet de micro-fichiers un peu partout. Alors pour compiler Piskel, j'ai opté pour une version portable de NodeJS. J'aurais juste à supprimer le dossier une fois terminé.

Dézipper nodejs-portable.exe dans un dossier (par exemple C:\nodejs) et le lancer en mode administrateur.⁣

Choisissez l'option 1 - Install
Version → appuyez sur ENTER
Architecture → appuyez ENTER
Puis laissez nodejs et npm se télécharger automatiquement.

Ensuite, choisissez l'option 2 - Shell
Des informations s'affichent, appuyez sur ENTER

On enchaine directement sur un update, au cas où :

npm install -g update

Suivez simplement les instructions affichées, si jamais il faut installer une nouvelle version de npm.

Piskel a besoin de Grunt pour compiler. On va suivre les instructions présentes sur leur site :

npm install -g grunt-cli

Utilisez la commande CD pour aller dans le dossier Piskel que vous avez précédemment créé :

CD C:\piskel

Maintenant, nous allons télécharger les librairies nécessaires à la compilation du projet. Il suffit d'entrer la commande depuis le dossier du projet :

npm install

Il ne reste plus qu'à compiler la version desktop de Piskel :

grunt desktop

Et voila, le résultat se trouve dans le dossier piskel\dest\desktop\piskel\win64 et je peux maintenant boucler sur l'animation en appuyant seulement sur la touche bas, c'est quand même plus pratique !

Piskel looping