createPattern()에서 스프라이트 시트 사용하기

Question

나는 이것을 수행하는 방법에 대한 확실한 정보를 찾지 못했기 때문에 누군가가 올바른 방향으로 나를 가리킬 수 있는지 궁금합니다.

커다란 스프라이트 시트가 있는데, 그것을 textures.png라고 부르 자. 각 텍스처는 64x64 픽셀이며 이러한 텍스처에서 패턴을 만들 수 있어야합니다.

createPattern()은 훌륭한 함수이지만 이미지 소스와 반복 여부를 결정하는 데는 두 가지 인자 만있는 것처럼 보입니다. 각 텍스처에 대해 단일 이미지를로드하는 경우에는 문제가 없지만 textures.png를 사용하여이 작업을 수행하는 방법에 대해 궁금합니다.

이 대답은 https://gamedev.stackexchange.com/questions/38451/repeat-a-part-of-spritesheet-as-background입니다. 그러나 이것이 canvas 메소드조차도 알 수없는 한 받아 들여지는 대답이 generatePattern() 메소드를 참조하고 있는지 확실하지 않습니다.

미리 감사드립니다.

Answer 1

그래, 해결책을 찾았습니다. 기본적으로 createPattern()은 첫 번째 인수로 image 또는 canvas 요소를 사용할 수 있습니다. 따라서 다음을 수행해야합니다.

var pattern_canvas = document.createElement('canvas'); 

pattern_canvas.width = texture_width; 
pattern_canvas.height = texture_height; 

var pattern_context = pattern_canvas.getContext('2d'); 

pattern_context.drawImage(img , texture_sx , texture_sy , texture_width , texture_height); 

var final_pattern = canvas_context.createPattern(pattern_canvas , "repeat"); 

canvas_context.fillStyle = final_pattern; 
canvas_context.fillRect(0 , 0 , canvas.width , canvas.height); 

이렇게하면 캔버스 요소에 pattern_canvas가 반복적으로 그 치수를 포함하게됩니다.