Bienvenue sur le blog de l'agence Soluka !

Retrouvez des articles dédiés aux nouveautés dans le développement web, rédigés par des passionnés, ainsi que les dernières actualités de l'agence.

Recherche

Articles populaires

Jeux Phaser

03/02/14

Stitches, générateur de sprites HTML5

par Kevin le 3 février 2014
Image Stitches, générateur de sprites HTML5

Générer le sprite d’un site, d’un jeu ou encore d’une application est toujours une étape fastidieuse.
Heureusement, il existe des outils qui permettent de vous faciliter la tâche, dont un qui a particulièrement retenu notre attention, dans sa toute nouvelle version : Stitches. C’est un générateur HTML5 de sprites.
A travers un petit tutoriel, je vais vous expliquer comment l’utiliser. Le principe est simple, il crée un sprite selon les images que vous lui fournissez. Pour ce faire, il suffit de glisser vos images dans la zone définie par l’outil :

stitches-drageanddrop

Une fois le sprite généré, vous pouvez cliquer sur n’importe quelle image de celui-ci afin de la supprimer ou de connaître sa position :

stitches-coordinates

Export d’un sprite

Une fois que vous avez fini de travailler sur votre sprite, l’option « Downloads » vous permet de le télécharger sous plusieurs formes :

stitches-downloads

Comme vous pouvez le voir sur les différents onglets, il est possible d’exporter le PNG du sprite, le CSS qui rappelle la position de chaque image et le HTML qui met en place la structure des images à afficher. Le dernier onglet « Example » est un exemple dans lequel tout cela est mis en application.

Cet outil vous propose aussi d’enregistrer le projet stitches. Pour cela, il faut accéder au menu « Settings » et cliquer sur le bouton « Export » :

stiches-export-projet

Vous pourrez alors enregistrer un document texte contenant toutes les informations de votre projet stitches.

Pour aller plus loin : le paramétrage

Cet outil laisse aussi la possibilité de paramétrer son projet stitches. Tout comme pour l’export de ce dernier, il faut cliquer sur le menu « Settings » pour accéder au paramétrage :

stiches-param

Dans ce menu sont présents 2 onglets. Il vous est possible de :

  • Modifier les paramètres généraux du projet
  • Importer un nouveau projet que vous aurez préalablement enregistré
  • fastgil.com

    Merci pour ce partage
    Nous cherchons des codeurs de jeux
    Si vous voulez nous rejoindre contacter nous sur city-games.fr
    Merci encore pour ce tuto
    fastgil.com

  • Laurent

    Vraiment pratique ce petit outil ! Moi qui passais un temps fou à créer des sprites ^^

    • Sam

      Tout à fait d’accord avec toi !