자바 스크립트에서 미리로드 된 CSS 스프라이트 시트를 사용하는 방법은 무엇입니까?

Question

HTML5 캔버스를 사용하여 게임을 만들고 있습니다. 나는 게임 내에서 필요한 모든 스프라이트를 포함하는 대형 스프라이트 시트를 가지고있다. 나는 무엇이 가장 좋은 선적 자산 기술 일지에 관해서 조금 읽었고, 나는 구체적인 것을 발견하지 못했다.

그래서 나는 단지 하나의 기법, CSS 스프라이트 시트를 선택하겠다고 결정했습니다. 나는 http://www.spritecow.com/을 사용하여 spritesheet.gif 파일을로드하고 CSS 코드를 생성했습니다. 사실은 javascript와 canvas 요소 내에서 개별 스프라이트를 실제로 사용하는 방법에 대한 자습서를 찾을 수 없다는 것입니다.

나를 도와 줄 수 있습니까? 다른 사전로드 기술이나 라이브러리가 더 잘 알고 있다면 (가능하면 이미지와 사운드를 미리로드 할 수 있음).

편집 : jQuery를 사용한 솔루션도 훌륭합니다.

Answer 1

미리로드는 :

스프라이트 시트는 이미지입니다, 그래서 당신처럼 다른 모든 이미지를 미리로드. 말했다,는 "jQuery를 방법"은 다음과 같습니다 var $mySprite = $("<img>").attr("src", "myURL");

(출처 : Preload a spritesheet using Jquery)

요소에 적용 :

이가 함께 할 수있는 자바 스크립트를 사용할 필요가 없습니다 간단한 CSS. -

1 spritesheet를 사용하는 모든 요소에 sprite 클래스를 추가 :

HTML :<div class="sprite">

CSS :.sprite { background-image:url("your spritesheet url here") }

2 - 다음 요소에 ID를 추가하고, Sprite 시트의 특정 요소의 이미지 위치에 따라 CSS background-position 규칙을 찾습니다. 예 :

HTML :<div class="sprite" id="fire"></div>

CSS : 당신이 spritesheet를 미리로드하는 방법 또는 요소에 적용하는 방법에 대한

#fire { 
    background-position: -100px -50px; 
    height: 20px; 
    width: 40px; 
}