0

私はkienticJSを使用しています。自分のスプライトをカスタマイズしようとしていますが、次の間違いがあります。

Uncaught TypeError: Cannot call method 'getSprite' of undefined escena.js:15
Escena escena.js:15
(anonymous function) aplicacion.js:25
st.event.dispatch jquery.min.js:2
y.handle

だから、私はゲームを「実行」するときにクラスEscenaを持っています。私は自分のスプライトであるクラスPersonaを持っているので、コードは次のとおりです。

クラス・エセナ:

var Escena = function() 
{
    this.stage = new Kinetic.Stage({
       container: 'simulacion',
       width: 578,
       height: 200
    });
    this.layer = new Kinetic.Layer();
    this.persona = new Persona();
    this.layer.add( this.persona.getSprite()  ); //IT'S HERE THE MISTAKE
    this.stage.add( this.layer ); 
};

クラス Persona は次のとおりです。

var Persona = function()
{
   this.ancho= 26;
   this.alto = 70;
   this.sprite ;

   var animaciones = {
      caminar: 
      [   { x: 7,  y: 38, width: this.ancho,   height: this.alto }, 
          { x: 37, y: 38, width: this.ancho,   height: this.alto }, 
          { x: 68, y: 38, width: this.ancho,   height: this.alto },
          { x: 95, y: 38, width: this.ancho,   height: this.alto }, 
          { x: 127, y: 38, width: this.ancho,   height: this.alto }, 
          { x: 157, y: 38, width: this.ancho,   height: this.alto }, 
          { x: 186, y: 38, width: this.ancho,   height: this.alto } 
      ]
   };
   this.imagen = new Image();


   this.imagen.onload = function(){
      this.sprite =  new Kinetic.Sprite({
          x:250,
          y:250,
          image: this.imagen,
          animation: 'caminar',
          animations: animaciones,
          frameRate: 7,
           index: 0
       });
  };
  this.imagen.src = 'img/character.png';
};
Persona.prototype ={
   constructor: Persona,
   getSprite: function(){
      return  this.sprite;
   }
};

トラブルを解決するにはどうすればよいですか?

ありがとう。

4

1 に答える 1

0

「img/character.png」が読み込まれる前にメソッドを呼び出していると思います。コールバック関数を定義し、画像が読み込まれたときに起動する必要があります。

次の例では何も実行されませんが、エラーは発生しません。Persona に渡す onLoad 関数を確認します。

var Escena = function() 
{
    this.stage = new Kinetic.Stage({
       container: 'simulacion',
       width: 578,
       height: 200
    });
    this.layer = new Kinetic.Layer();
    var that = this;
    this.persona = new Persona(
        function(){
             that.layer.add( that.persona.getSprite()  ); //IT was HERE THE MISTAKE
             that.stage.add( that.layer ); 
             console.log(that.persona.getSprite() ) //the sprite has been created
        }
    );

    /*
    I moved this to the callback anonymous function
    this.persona.getSprite();
    this.layer.add( this.persona.getSprite()  ); //IT'S HERE THE MISTAKE
    this.stage.add( this.layer ); 
    */
};

var Persona = function(onLoad)
{
   this.ancho= 26;
   this.alto = 70;
   this.sprite ;

   var animaciones = {
      caminar: 
      [   { x: 7,  y: 38, width: this.ancho,   height: this.alto }, 
          { x: 37, y: 38, width: this.ancho,   height: this.alto }, 
          { x: 68, y: 38, width: this.ancho,   height: this.alto },
          { x: 95, y: 38, width: this.ancho,   height: this.alto }, 
          { x: 127, y: 38, width: this.ancho,   height: this.alto }, 
          { x: 157, y: 38, width: this.ancho,   height: this.alto }, 
          { x: 186, y: 38, width: this.ancho,   height: this.alto } 
      ]
   };
   this.imagen = new Image();

   var that = this;
   this.imagen.onload = function(){
     var sprite =  new Kinetic.Sprite({
          x:250,
          y:250,
          image: this.imagen,
          animation: 'caminar',
          animations: animaciones,
          frameRate: 7,
           index: 0
       });
       that.sprite = sprite;
       onLoad();
  };

  this.imagen.src = 'img/character.png';

};
Persona.prototype ={
   //constructor: Persona,
   getSprite: function(){
      return  this.sprite;
   }
};
var escena1 = new Escena();

ちなみに、スペイン語は私の母国語です:-)

于 2013-06-04T11:06:42.610 に答える