2011-11-07 5 views
0

gskinner.com의 EaselJS 라이브러리 (http://easeljs.com/, http://easeljs.com/examples/game/game.html)로 조금만 놀았으므로 HTML5의 캔버스를 훨씬 쉽게 처리 할 수 ​​있습니다.EaselJS : OOP와 같은 클래스에서 BitmapSequence 문제가 발생했습니다.

그래서 캔버스에 스페이스 인베이더 (Space Invaders) 같은 것을 리메이크하려고합니다. 지금까지는별로 중요하지 않았습니다. 왼쪽에서 오른쪽으로 이동하는 지불 자입니다. 여기 진행 참조 : 그러나 나는 gskinner.com의 방법을 따르 http://www.youtube.com/watch?v=HaJ615V6qLk

을 이제 모든 좋은 멋쟁이 : 침략자를 들어 http://jansensan.net/experiments/easeljs-space-invader/

을, 나는 애니메이션을 필요한, 그래서 내가 이렇게하는 방법에 대한 자습서를 따라 "클래스"만들기 : http://easeljs.com/examples/game/Ship.js 클래스를 호출 할 수 있는지 확실하지 않지만 사용됩니다.

다음은 Invader에 대해 작성한 클래스입니다. 그러나 BitmapSequence가 EaselJS의 스테이지에 추가되지 않은 것처럼 보입니다. 누구든지 이걸 통해 나를 인도 할 수 있니? 감사!

// REFERENCES 
/* 
http://easeljs.com/examples/game/Ship.js 
*/ 


// CLASS 
(function(window) 
{ 
    function Invader() 
    { 
     this.initialize(); 
    } 


    var p = Invader.prototype = new Container(); 


    // CONSTANTS 


    // VARS 
    p.image; 
    p.bitmapSequence; 


    // CONSTRUCTOR 
    p.Container_initialize = p.initialize; //unique to avoid overiding base class 


    p.initialize = function() 
    { 
     this.Container_initialize(); 

     this.image = new Image(); 
     this.image.onload = p.imageLoadHandler; 
     this.image.onerror = p.imageErrorHandler; 
     this.image.src = "assets/images/invader-spritesheet.png"; 
    } 


    p.imageLoadHandler = function() 
    { 
     var frameData = { 
      anim:[0, 1, "anim"] 
     } 

     var spriteSheet = new SpriteSheet(p.image, 22, 16, frameData); 

     p.bitmapSequence = new BitmapSequence(spriteSheet); 
     p.bitmapSequence.regX = p.bitmapSequence.spriteSheet.frameWidth * 0.5; 
     p.bitmapSequence.regY = p.bitmapSequence.spriteSheet.frameHeight * 0.5; 
     p.bitmapSequence.gotoAndStop("anim"); 

     p.addChild(p.bitmapSequence); 
    } 


    p.imageErrorHandler = function() 
    { 
     console.log("Error: the url assets/images/invader-spritesheet.png could not be loaded."); 
    } 


    window.Invader = Invader; 
}(window)); 

답변

0

실제로 그 시점에 p.image/this.Container_initalize이 있습니까? this.p. 사이에서 init과 다른 함수 사이를 전환 할 때 같은 연습을하는 것처럼 보일 수도 있지만 종종 그렇지 않다는 것을 가르쳐주었습니다. init 함수를 다음으로 변경하십시오.

p.initialize = function() 
{ 
    p.Container_initialize(); 

    p.image = new Image(); 
    p.image.onload = p.imageLoadHandler; 
    p.image.onerror = p.imageErrorHandler; 
    p.image.src = "assets/images/invader-spritesheet.png"; 
} 
관련 문제