2.1.2 beta, getting error "cannot set property src of null"

cocos2d-x JavaScript
#1

I realize there are some API changes, but I’ve been following the tutorial here: http://www.gamefromscratch.com/post/2012/06/17/Cocos2D-HTML-Tutorial-4-It’s-all-about-control.aspx. I’ve sourced the main.js and cocos2d.js files from a demo in the 2.1.2 zip file instead, and from there built out the application and sprite logic. When the game loads i get the following error:

Uncaught TypeError: Cannot set property ‘src’ of null CCSprite.js:2209
cc.SpriteWebGL.cc.Node.extend.initWithTexture CCSprite.js:2209
(anonymous function) CCSprite.js:2161

jet_sprite.js

(function() {
  App.JetSprite = cc.Sprite.extend({
    _currentRotation: 0,
    ctor: function() {
      this.initWithFile("jet.png");
    },
    handleKey:function(e) {
      if(e === cc.KEY.left) {
        this._currentRotation--;
      }
      else if(e === cc.KEY.right) {
        this._currentRotation++;
      }

      if(this._currentRotation < 0) this._currentRotation = 360;
      if(this._currentRotation > 360) this._currentRotation = 0;
    },
    handleTouch:function(touchLocation) {
      if(touchLocation.x < 300) {
        this._currentRotation = 0;
      }
      else {
        this._currentRotation = 180;
      }
    },
    handleTouchMove:function(touchLocation) {
      // Gross use of hardcoded width,height params.
      var angle = Math.atan2(touchLocation.x-300,touchLocation.y-300);

      angle = angle * (180/Math.PI);
      this._currentRotation = angle;
    },
    update: function(dt) {
      this.setRotation(this._currentRotation);
    }
  });
})();

app.js

(function() {
  window.App = {}

  App.Layer = cc.LayerColor.extend({
    _jetSprite: null,
    init: function() {
      this._super(new cc.Color4B(0,0,0,255));
      var size = cc.Director.getInstance().getWinSize();

      this._jetSprite = new App.JetSprite();
      this.setTouchEnabled(true);
      this.setKeyboardEnabled(true);

      this.setPosition(new cc.Point(0, 0));

      this.addChild(this._jetSprite);
      this._jetSprite.setPosition(new cc.Point(size.width / 2, size.height / 2));
      this._jetSprite.scheduleUpdate();
      this.schedule(this.update);

      return true;
    },
    onEnter: function() {
      this._super();
    },
    onKeyDown:function(e){
        this._jetSprite.handleKey(e);
    },
    onKeyUp:function(e){

    },
    onTouchesEnded:function (pTouch,pEvent){
        this._jetSprite.handleTouch(pTouch[0].getLocation());
    },
    onTouchesMoved:function(pTouch,pEvent){
        this._jetSprite.handleTouchMove(pTouch[0].getLocation());
    },
    update: function(dt) {

    }
  });

  App.Scene = cc.Scene.extend({
    onEnter: function() {
      this._super();
      var layer = new App.Layer();
      layer.init();
      this.addChild(layer);
    }
  });
})();

jet.png simply sits next to the index.html file in the folder.

#2

I don’t know exactly, the author says that some changes are required to those tutorials for version 2+
http://www.gamefromscratch.com/post/2012/07/09/cocos2D-HTML5-alpha-2-released.aspx

Also the old tuts I found cannot be run, I saw the before v2 the instantiate were different now is with “create”

//comment
//this.initWithFile(“jet.png”);
and
this.*jetSprite = new App.JetSprite;
to
//create a sprite with filename
this.*jetSprite = cc.Sprite.create(“HelloHTML5World.png”);

Did’t tested, just looked in the docs, hope this helps

#3

That’s referring to step 2, which i think was in fact up to date :).

I actually just figured it out. The ctor function is being setup in the extend, so certain factors are not being setup in the Sprite.ctor. It’s missing the this._super();

#4

Aaron McLeod wrote:

That’s referring to step 2, which i think was in fact up to date :).
>
I actually just figured it out. The ctor function is being setup in the extend, so certain factors are not being setup in the Sprite.ctor. It’s missing the this.*super;
Thank you for the solution. This also applies to objects that extends cc.Node. If you don’t call this.*super at the beginning of ctor() you will get undefined properties errors.