Issue splitting classes

Hello! I’m totally newbie with cocos2d and so i am with JS, so i’m having a simple issue but which i can’t figure out.
I’m trying to create a very simple game, since its my first. In this game my idea is having different shapes (squares, circles, triangles, etc), the main character will be one of the shapes, but in the game will change.
So, what i thought is splitting it in a new file Shape.js and here my problems started jeje.
While i was doing this: var player = cc.Sprite.create(s_square); in my AnimationLayer.js everything was going well… but now i thought, since i will have multiple shapes which will interact is better to have a Shape.js file like this:

var Shape = cc.Class.extend({
    shape:null,

    ctor:function(){

       if(type == "square"){
          shape = cc.Sprite.create(s_square);
       }
        return shape;
    }
});

and in my AnimationLayer.js something like
var player = new Shape("square");
But is not working, the player is not being loaded. In the debuger what i can see is the following:

Uncaught TypeError: Cannot call method 'use' of null	CCSprite.js:2030:33
cc.Sprite.cc.NodeRGBA.extend._drawForWebGL	CCSprite.js:2030:33
cc.Node.cc.Class.extend._visitForWebGL	CCNode.js:1792:18
cc.Node.cc.Class.extend._visitForWebGL	CCNode.js:1788:36
cc.Node.cc.Class.extend._visitForWebGL	CCNode.js:1788:36
cc.Director.cc.Class.extend.drawScene	CCDirector.js:355:32
cc.DisplayLinkDirector.cc.Director.extend.mainLoop	CCDirector.js:1235:18
callback	CCApplication.js:372:26

It seems that the player var is still in null but i don’t know why. I should be assigning the sprite of the constructor or not?
Anyone know what may i be missing?

Since i’m already asking for help i would like to add a more complicated thing, anyone know how to create he trail animation? like if my character is moving show behind him a trail of him.

Thank you very much!

Hi, @santi87

From what I see, the logic of your Shape class is not right

var Shape = cc.Sprite.extend({
    // Constructor
    ctor:function(){
       // Call the constructor of super class cc.Sprite
       this._super();

       if(type == "square"){
         // Initialization of the sprite with the right resource file
         this.initWithFile(s_square);
       }
    }
});

Try to see if this solve your problem, if not, repost with more details.

Huabin

Also note that “type” in that code is not set to anything, it should be passed as a parameter to the ctor:

var Shape = cc.Sprite.extend({
    // Constructor
    ctor:function(type){
       // Call the constructor of super class cc.Sprite
       this._super();

       if(type == "square"){
         // Initialization of the sprite with the right resource file
         this.initWithFile(s_square);
       }
    }
});

BTW:
santi87 wrote:

Hello! I’m totally newbie with cocos2d and so i am with JS

If you still need to learn JS, I suggest you check out the free tutorials in codecademy: http://codecademy.com/

Its being passes as a parameter to ctor… BTW thanks for the link i will take a look at thos tutorials!

This is what I mean: turn ctor:function(){ into ctor:function(type){.

Great guys! this worked… the thing was changing
shape = cc.Sprite.create(s_square);
for
this.initWithFile(s_square);

Would you tell me which is the difference between Sprite.create and initWithFile?
Thanks

@santi87
What’s your final code?

If you look at the API reference you can see what they are doing:
http://www.cocos2d-x.org/reference/html5-js/V2.2.2/index.html

Huabin

santi87 wrote:

Would you tell me which is the difference between Sprite.create and initWithFile?

The constructor cc.Sprite.create(image) does what you expect. But when you extend a Cocos2D class it has no create method. Instead the ctor you define is called when you say new MySprite(image). Internally, cc.Sprite.create(image) calls it’s own ctor() and inside it calls init(image) (which in turn calls initWithFile(image)). You can look at the source code for more detail, look at line 2251 here: http://www.cocos2d-x.org/reference/html5-js/V2.2.2/symbols/src/E__Projects_cocos2d-html5_cocos2d_core_sprite_nodes_CCSprite.js.html

Furthermore, let’s say you have the following class that derives from cc.Sprite:

var MySpriteClass = cc.Sprite.extend({
    ctor:function(type){
        this._super(); //calls "ctor" of the parent class (cc.Sprite). Equals to "new cc.Sprite()" (NOT neccesariously equals "cc.Sprite.create()".
        switch(type){
            case "a":
                this.init("pathToImageA"); //Calls the "init" method of THIS class (if it exists)
                break;
        }
    },
    init:function(image){ //If this method wasn't defined, the parent's "init" method would be called automatically
        this._super(image) //Calls the "init" method of parent class (cc.Sprite).
    }
});

Then you would use this class like this:
var mySpriteObject = new MySpriteClass("a");

Thank you very much guys!
This community is awsome! My first game is not a big deal but is moving forward… i bet there are better ways to do some of the stuff i’m doing but that will be on the code refactoring hehe.

@ZippoLag our forum now use markdown syntax, :wink:

@santi87 we all start small :slight_smile:
@pandamicro I don’t want to get the thread offtopic but… how?! The text formatting help says to use triple tildes instead of <pre> tags.

@santi87 we all start small :slight_smile:
@pandamicro I don’t want to get the thread offtopic but… how?! The text formatting help says to use triple tildes instead of <pre> tags.

It’s the markdown syntax, the textile style has been replaced…

pandamicro wrote:

It’s the markdown syntax, the textile style has been replaced…

Yes, but how do I make the code that I write here appear formatted? (look at the snippets of code I’ve posted above for example, the code is shown like it always was).

@ZippoLag , I have done it for you, :wink: