Reinom

Servez-vous de nos retours d'expérience pour vos propres jeux web

Les sprites dans un jeu web

3

Evitez les sprites, et préférez les caches HTTP. A défaut, évitez le bricolage background-position avec un PNG et utilisez plutôt un SVG et les hash fragments pour cibler un élément précis via background-image: url('sprite.svg#element');.

Principe d’une sprite: c’est déjà mal parti

Un problème réseau

Les « sprite » servent en pratique à résoudre un problème réseau: transférer de multiples petits fichiers est bien plus long qu’en transférer un seul gros. Du coup, il peut être tentant de regrouper les petits ressources (images) en une seule grosse. Toutefois, cela génère de nombreux problèmes. D’une part, ce système est une optimisation peu efficace car les joueurs ont vocation à rester (un cache HTTP sera bien plus redoutable). Ensuite, cela casse souvent la sémantique des pages (un lecteur d’écran sera perdu). Enfin, cela sera probablement inutile quand vous activerez HTTP/2.

Implémentation

Ne pas l’implémenter

Le mieux est donc de ne pas implémenter un tel regroupement d’images, car vous essayez de résoudre (mal!) un problème réseau au niveau de votre application: vous n’êtes pas au bon endroit pour résoudre ce problème! Donc, laissez vos images tranquilles: vous vous poserez la question des sprites que si vraiment les performances deviennent critiques.

Unicode

La meilleure solution si vous avez de petites icônes à afficher à l’écran est en fait d’utiliser l’un des nombreux caractères unicode, et de le coupler éventuellement à une police personnalisée. Ainsi, si vous faites un jeu web d’échec, l’utilisation du caractère 0x265E ♞ vous permettra de représenter un cavalier noir sans aucun transfert d’image sur le réseau. Toutefois, les symboles unicode sont monochromatiques, mais vous pouvez changer la couleur dans un simple CSS.

Emojis

Vous avez aussi la possibilité d’utiliser des emojis, qui auront l’avantage d’avoir (probablement) été déjà vues par l’utilisateur sur d’autres sites. Il pourra donc reconnaitre le symbole, et savoir immédiatement ce qu’il signifie. De plus, contrairement à l’unicode, vous pourrez avoir des images multi-colores.

Images

Sprite classique en PNG (background-position)

Si malgré tout vous souhaitez faire des sprites, évitez de les faire en PNG, même si c’est l’habitude souvent répandue. En effet, la plupart des sprites sont constituées d’un PNG dans lequel de petites images sont juxtaposées. L’exemple ci-dessous l’illustre: une sprite PNG est utilisée, et un morceau de la sprite est affichée dans chaque bulle via background-position. Le problème est alors sémantique: la sprite n’est jamais qu’une seule image, et se reposer sur la position de ce qu’on affiche dans cette image est similaire aux anciens designs par <table> d’avant le CSS.

Une étoile et une enveloppe , avec la sprite
La sprite utilisée

SVG classique (background-position)

Le même procédé peut être appliqué pour des SVG, avec les même conséquences.

Un rond rouge et un rond bleu illustrent ce procédé, avec la sprite
La sprite utilisée

SVG avec hashfragment (#hash)

La meilleure façon de faire une sprite est finalement d’utiliser un SVG et de pointer sur l’élément qui nous intéresse via un hashfragment, c’est à dire via son id que l’on référence dans un background: url('...#morceau-cible');. L’énorme avantage est alors de permettre le replacement des éléments dans la sprite sans devoir changer le CSS associé, et la création d’un vrai lien sémantique entre le background et l’élément de la sprite associé.

Le même rond rouge et un rond bleue , avec la sprite
https://toile.reinom.com/wp-content/uploads/2017/01/svgbackground-hash.svg

3

Précédent

Comment se décompose votre journée?

Suivant

Les touches et clics customs dans un jeu

  1. Alu

    Alu

    0

    Ha ouais, c’est pas du tout ce à quoi je m’attendais.

    Quand tu as dit « Sprite SVG » je voyais une Vrai Sprite SVG avec des dessins indépendant (placés à différents emplacement) 🙂

    Intéressante proposition en tous cas.

    • 0

      C’est le cas?! Chaque dessin est un élément SVG du fichier SVG, avec son propre ID, et on fait référence à cet élément, ou qu’il soit dans le dessin SVG.

  2. Alu

    Alu

    0

    Il serait intéressant de voir les deux fichiers images (ressources).

    Rien que pour connaître où les attributs id sont appliqués (circle, ou view/viewBox ?)

    • 0

      J’ai rajouté le lien vers la resource background en bas de chaque exemple. Dans le cas du SVG, l’ID est appliqué à l’élément SVG (circle) et tout les autres éléments sont masqués (circle:not(:target) { display:none; }). L’ID est ensuite réutilisé dans le CSS de la page utilisant le sprite:
      .sprite-svg-hash-4 {
      background-image: url('/wp-content/uploads/2017/01/svgbackground-hash.svg#cercle4');
      }

      Il se peut qu’on puisse utiliser des viewBox dans le SVG de sprite, mais je ne l’ai pas essayé.

Laisser un commentaire

Fièrement propulsé par WordPress & Thème par Anders Norén