Question

我正在使用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 类，这是我的精灵，所以代码是下一个：

Class Escena：

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;
   }
};

如何解决我的麻烦？

感谢。

Answer 1

我认为你在加载“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();

顺便说一句，西班牙语是我的母语： - ）

kineticJS包装错误

1 个答案: