EaselJS로 스프라이트를 만드는 방법은 무엇입니까?

Question

저는 자바 스크립트로 게임을 만드는 가장 좋은 방법을 찾고 있었고, EaselJS가 아마도 가장 잘 작동 할 것이라고 판단했습니다 (더 좋은 라이브러리가 있다면 알려주세요).

나는 거의 시작하지 못했지만 작동하도록 스프라이트를로드 할 수없는 것 같습니다 ... 문제가 무엇인지, 캔버스와 연결되어있어 라이브러리를로드하고 있는지 확실하지 않습니다. .. 다음은 자바 스크립트 콘솔 오류입니다 :

function init() { 
     var stage = new createjs.Stage(document.getElementById("demoCanvas")); 
     var jazaSheet = new createjs.SpriteSheet ({ 
      "frames": { 
       "width": 15, 
       "height": 16, 
       "numFrames": 8, 
       "regX": 0, 
       "regY": 0 
      }, 
      "animations":{ 
       "walkDown": [0, 1, "walkDown", 2], 
       "images": ["http://imgur.com/bLfR7TO.png"] 
      } 
     }); 
     var jaza = new createjs.Sprite(jazaSheet); 
     jaza.x = 0; 
     jaza.y = 0; 
     jaza.goToAndPlay("walkDown"); 

     stage.addChild(jaza); 
     Ticker.setFPS(60); 
     Ticker.addListener(stage); 
     stage.update(); 
    } 

편집 : 당신이 나를 도울 수 있다면

Uncaught TypeError: Cannot read property 'length' of null easeljs-0.7.1.min.j 
s:12 
     b._calculateFrames easeljs-0.7.1.min.js:12 
     b.initialize easeljs-0.7.1.min.js:12 
     a easeljs-0.7.1.min.js:12 
     init index.html:3 
     onload 

그래서 그래 ... 그 좋은 것 ... 여기의 src 코드 : 그래, 내가 말한대로 바꿨으나 여전히 그걸 보여줄 수는 없다. 캔버스 ... 나는 그것을보고했다

function init() { 
var stage = new createjs.Stage(document.getElementById("demoCanvas")); 
var jazaSheet = new createjs.SpriteSheet ({ 
    "frames": { 
     "width": 15, 
     "height": 16, 
     "numFrames": 8, 
     "regX": 0, 
     "regY": 0 
    }, 
    "animations":{ 
     "walkDown": [0, 1, "walkDown", 2] 
    }, 
    "images": ["http://imgur.com/bLfR7TO.png"] 
}); 
var jaza = new createjs.Sprite(jazaSheet); 
jaza.x = 100; 
jaza.y = 100; 
jaza.gotoAndPlay("walkDown"); 

stage.addChild(jaza); 
createjs.Ticker.setFPS(60); 
stage.update(); 

}

Answer 1

, 당신은 클래스 here의 소스를 볼 수 있습니다.

기본적으로 매개 변수 개체에 오타가 있습니다. animations

var jazaSheet = new createjs.SpriteSheet ({ 
     "frames": { 
      "width": 15, 
      "height": 16, 
      "numFrames": 8, 
      "regX": 0, 
      "regY": 0 
     }, 
     "animations":{ 
      "walkDown": [0, 1, "walkDown", 2] 
     }, 
     "images": { 
      ["http://imgur.com/bLfR7TO"] 
     } 
    }); 

설명 밖으로 images 객체를 가지고 :

_calculateFrames() 기능은 전용 변수 images를 사용합니다. 행 464는 하나의 매개 변수로 array.length을 갖는 루프를 생성합니다. 배열이 null (오타가있는 매개 변수)이므로 TypeError 예외가 발생합니다.