HTML5 Canvas Tileset рисунок

Question

Что-то, как я есть Tileset - http://flashpunk.net/img/tut/swordguy.png

И мой код рисунок - http://jsfiddle.net/WnjB6/

Но как сделать что-то вроде - drawTile (х, у, кафель, ширина, высота);

Теперь нужно установить tileX и tileY на плитки, но как сделать только одну плитку, нужно установить и нарисовать плитки из всех наборов плитки?

Что-то вроде теперь нужно tileX = 3, tileY = 1, но мне нужно - tile = 8 и нарисуйте одну и ту же плитку. 'http://flashpunk.net/img/tut/swordguyframes.png

Как это сделать?

Спасибо за помощь и извините за мой плохой английский язык.

Answer 1

Вы знаете, что есть 6 плиток в ряд, так что вы можете сделать это следующим образом:

var drawTile = function(x, y, tile, width, height) { 
    context.drawImage(image, (tile % 6) * width, Math.floor(tile/6) * height, width, height, x, y, width, height); 
}; 

Так переходящая в 6 будет идти к первой плитки во втором ряду и т.д.

Вот пример, он перебирает все плитки:

http://jsfiddle.net/Jrjyq/