Tileset pour jeu de toile HTML5

Question

J'essaie de faire un jeu en HTML5, mais au lieu de télécharger une tonne d'images, je veux juste télécharger une image qui a toutes les tuiles dessus. Le problème est, je ne sais pas comment faire apparaître seulement une partie de l'image. Fondamentalement, je veux faire ce que Google fait avec cette image: http://www.google.com/images/srpr/nav_logo27.png sauf avec des tuiles fixes hauteur/largeur. Quelqu'un peut-il m'expliquer comment faire cela? Aussi, si c'est différent dans une toile que dans une page html normale sans canvas, comment le ferais-je en canvas?

Answer 1

Vous pouvez utiliser les paramètres de découpage de drawImage

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 

• sx, sy: gauche et en haut décalage de la partie à trancher
• sWidth, sHeight: dimensions du partie à trancher
• dx, dy: gauche et en haut offset pour l'image sur la toile pour être rendu à
• dWidth, dHeight: dimensions de l'image sur la toile

Plus d'infos sur: Using images - Slicing (MDC)

Answer 2

Jetez un oeil à SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js là le travail est basé sur offset au moment de dessiner l'image-objet à partir d'une seule image.

Answer 3

Voici comment je le fais avec GWT: http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5