Javascript Sprite에서 이미지 객체 가져 오기

Question

타일 게임의 HTTP 요청 횟수를 줄이기 위해 스프라이트 시트를 사용하고 싶습니다.

약 2000 가지 타일 유형이 있다고 가정하면 게임을로드 할 때마다 2000 개 요청이 적습니다.

스프라이트의 높이가 64 픽셀이고 64 x 64 픽셀 타일을 포함합니다.

은 다음 코드는 하나의 이미지를 검색 및 렌더링 시작 :

var tiles = new Image(); 
tiles.src = "tiles.png"; 

tiles.onload = function() { 
    startRendering(); 
}; 

내 질문은, 어떻게이에서 개별 이미지 객체를 검색 할 수있다?

Answer 1

순수 JS로는이를 수행 할 수 없습니다. 나는 그것을 성취하기 위해 약간의 CSS를 사용해야 할 것이다. 예를 들어

는 대신 img의 당신은 내가이 특히 캔버스를 사용하고 있기 때문에, 당신은 다음과 같은

... 

tiles.backgroundImage = 'url(tiles.png)'; 
tiles.backgroundPosition = '0px 0px'; // apply the position to get any of the image at any position 

...