이미지를 캐시하고 나중에 EaselJS에서 사용하는 방법?

Question

저는 아주 기본적인 스프라이트 애니메이션을 가지고 있습니다. 어떻게 이미지를 캐시하고 스프라이트 시트 생성의 "이미지"부분에서 사용합니까? 나는 시도했다 :

Image1= new Image(2779,1135) 
Image1.src = "img/contur.png" 

그러나 나는 "이미지"절에 이미지 하나를 포함하는 방법을 knwo하지 않습니다.

단계 = 새 createjs.Stage (document.getElementById ("testCanvas"))); stage.clear();

var ss = new createjs.SpriteSheet({ 
    "animations": {"run": [0, 50]}, 
    "images": ["img/contur.png"], 
    "frames": 
     { 
     "height": 140, 
     "width": 231, 
     "regX": 0, 
     "regY": 0, 
     "count": 51 
     } 
    }); 

var grant = new createjs.Sprite(ss, "run"); 

stage.addChild(grant); 
createjs.Ticker.setFPS(24); 
createjs.Ticker.addEventListener("tick", stage); 

Answer 1

질문을 올바르게 이해했다면 스프라이트 시트에서 사용하기 전에 이미지를로드하려고합니다. 즉이 경우

loader = new createjs.LoadQueue(true); 
loader.on('complete', function(event) { 
    // you can create spritesheet here 
}); 
loader.loadManifest([{id:'imageX', src:'img/contur.png'}]); 

:

1. 이 img.load에 콜백을 추가합니다 :

   img = new Image(); 
   img.src = "img/contur.png"; 
   img.onload = function(event) { 
       // you can create spritesheet here 
   } 
   

2. PreloadJS 사용 (권장)

   당신은이이 개 작업을 수행하는 방법이 예를 들어 웹 서버를 실행해야 할 수도 있습니다 (예 : python : python -m SimpleHTTPServer 8088). 당신이 PreloadJS를 사용하는 경우

   var ss = new createjs.SpriteSheet({ 
       "animations": {"run": [0, 50]}, 
       "images": ["img/contur.png"], 
       "frames": { 
        "height": 140, 
        "width": 231, 
        "regX": 0, 
        "regY": 0, 
        "count": 51 
       } 
   }); 
   

   , 당신은로드를 지정할 수 있습니다) 두 옵션의

, 당신은 단지 이미지의 경로를 사용해야합니다 (브라우저는 자동적으로 사전로드 된 이미지)를 얻을 것이다 별칭으로 이미지 객체 (매니페스트에 정의) :

"images": [loader.getResult('imageX')], 
... 

참고 : 무대에 물건을 추가 한 후 stage.update() 전화를 기억하거나 FRAM 애니메이션 그렇지 않으면 단순히 빈 캔버스 나 정적 이미지 만 표시됩니다.