Tileset for HTML5 canvas game

Question

Я пытаюсь сделать игру в холсте HTML5, но вместо того, чтобы загружать тонну изображений, я хочу просто загрузить одно изображение, на котором есть все плитки. Проблема в том, что я не знаю, как сделать только одну часть изображения. В принципе, я хочу сделать то, что Google делает с этим изображением: http://www.google.com/images/srpr/nav_logo27.png кроме фиксированной плитки высоты/ширины. Может кто-нибудь объяснить мне, как это сделать? Кроме того, если он отличается от холста, чем на обычной странице html без холста, как бы я сделал это в холсте?

Answer 1

Вы можете использовать параметры нарезки drawImage

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

• sx, sy: левый и верхний смещение части, чтобы быть нарезана
• sWidth, sHeight: размеры часть для нарезки
• dx, dy: левый и верхнее смещение для изображения на холсте, чтобы быть вынесены на
• dWidth, dHeight: размеры изображения на холсте

Более подробная информация по адресу: Using images - Slicing (MDC)

Answer 2

Посмотрите на SpriteJS https://github.com/batiste/sprite.js/blob/master/sprite.js там работа основана на смещении в момент рисования спрайта с одного изображения.

Answer 3

Вот как я это делаю с GWT: http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5