Erreur de la base de données WordPress : [INSERT, UPDATE command denied to user 'soluka7akm0a'@'10.13.20.5' for table 'x4Cd9n_options']
INSERT INTO `x4Cd9n_options` (`option_name`, `option_value`, `autoload`) VALUES ('_transient_doing_cron', '1721516194.2827548980712890625000', 'yes') ON DUPLICATE KEY UPDATE `option_name` = VALUES(`option_name`), `option_value` = VALUES(`option_value`), `autoload` = VALUES(`autoload`)

Stitches, générateur de sprites HTML5 | Soluka

Stitches, générateur de sprites HTML5

Image Stitches, générateur de sprites HTML5
publié le 3 février 2014 Archives

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é

Articles incontournables

Jeux

Recherche