Calling the player function:

[ThatGuy]

Hi everyone!

Once again i have a problem. Normally i will call the class that manage the player via a simple coding like that: new game.Player(); or new game.Player().addTo(this.stage) but this time around, although i successfully call the object and its functions it will show no sprite. Any advice?

 

game.createClass('Giocatore', { 

    init: function() {

        console.log('Giocatore, init');
        var giocatoreBody = new game.Body({
            position:       {   x: game.system.width / 20,
                                y: game.system.height / 20 },
            velocityLimit:  {   x: 150,
                                y: 150  },
            velocity:       {   x: -100,
                                y: -100 },
            mass:           0,
            collisionGroup: 3,
            collideAgainst: [1, 2,] } );
        console.log('Giocatore, init, new game.body');
        
        this.sprite             = new game.Sprite('proto_player.png');
        this.sprite.anchor.set(0.5, 0.5);
        console.log('Giocatore, init, sprite');
  
        giocatoreBody.addShape(new game.Rectangle(20, 20));
        console.log('Giocatore, init, addShape()');
        
        giocatoreBody.collide   = giocatoreBody.collide.bind(this);
        this.sprite.position.set(giocatoreBody.position.x, giocatoreBody.position.y);
        console.log('Giocatore, init, collide/giocatoreBody.sprite ');

        var varMondo            = new game.World();
            varMondo.addBody(giocatoreBody);
        console.log('Giocatore, init, addSBody()');

        var contenitore         = new game.Container();
        console.log('Giocatore, init, new Container');
        var contenitoreMondo    = new game.Container(varMondo)//.addTo(varMondo);
        console.log('Giocatore, init, Container.addTo(varMondo)');
        var contenitoreBody     = new game.Container(giocatoreBody)//.addTo(giocatoreBody);
        console.log('Giocatore, init, Container.addTo(giocatoreBody)');
//      console.dir('valore contenitore: '      + contenitore);
//      console.dir('valore contenitoreMondo: ' + contenitoreMondo);
//      console.dir('valore contenitoreBody: '  + contenitoreBody);
        
},
    collide: function() {
        if(other.collisionGroup === 1) {
            giocatoreBody.remove();
            game.scene.addTimer(2500, function() {
                game.system.startScene('Main'); }); }
        if(other.collisionGroup === 2) {
            /*
                aggiorna punteggio, aggiorna vita
            */ console.log('servo a riempire spazio');
        }
    },
    
    update: function() {
        
        giocatoreBody.position.x = this.position.x;
        giocatoreBody.position.y = this.position.y;
    
        if (game.keyboard.down('UP') && this.stage === 'Livello_prova') {
                giocatoreBody.position.y += this.position.y; }
                  
        if (game.keyboard.down('DOWN') && this.stage === 'Livello_prova') {
                giocatoreBody.position.y -= this.position.y; }
                
        if (game.keyboard.down('LEFT') && this.stage === 'Livello_prova') {
                giocatoreBody.position.x -= this.position.x; }
                
        if (game.keyboard.down('RIGHT')) {
                giocatoreBody.position.x += this.position.x; } },
    
    remove: function() {
        game.scene.removeObject(this);
        game.scene.World.removeBody(this.body);
        game.sceme.stage.removeChild(this); },
});

and the the messy call on the scene requested:

        var objG = new game.Giocatore();
        console.log('var objG = new game.Giocatore();');
            objG.addTo(this.stage);
        console.log('objG.addTo(this.stage);'); },

 

Once again thanks for the help!

[ThatGuy]

Ok, so updates!

I've fixed few obvious things:

game.createClass('Giocatore', { 

    init: function() {
//aggiunto this. a giocatoreBody, giocatoreBody.sprite(), this.giocatoreBody.addShape() e così via
        console.log('Giocatore, init');
        this.giocatoreBody = new game.Body({
            position:       {   x: game.system.width / 2,
                                y: game.system.height / 2 },
            velocityLimit:  {   x: 150,
                                y: 150  },
            velocity:       {   x: -100,
                                y: -100 },
            mass:           0,
            collisionGroup: 3,
            collideAgainst: [1, 2,] } );
        console.log('Giocatore, init, new game.body');
        
        this.giocatoreBody.sprite       = new game.Sprite('proto_player.png');
        this.giocatoreBody.sprite.anchor.set(0.5, 0.5);
        console.log('Giocatore, init, sprite');
  
        this.giocatoreBody.addShape(new game.Rectangle(20, 20));
        console.log('Giocatore, init, addShape()');
        
        this.giocatoreBody.collide      = this.giocatoreBody.collide.bind(this);
        this.giocatoreBody.sprite.position.set(this.giocatoreBody.position.x * 2, this.giocatoreBody.position.y * 2);
        console.log('Giocatore, init, collide/giocatoreBody.sprite ');

//aggiunto this. al posto di: var varMondo, var contenitore, var contenitoreMondo, var contenitoreBody
        this.varMondo                   = new game.World();
        this.varMondo.addBody(this.giocatoreBody);
        console.log('Giocatore, init, addBody()                         --- this.varMondo.addBody(this.giocatoreBody);');

        this.contenitore                = new game.Container();
        console.log('Giocatore, init, new Container                     --- this.contenitore = new game.Container();');
        this.contenitoreMondo           = new game.Container(this.varMondo);//.addTo(varMondo);
        console.log('Giocatore, init, Container.addTo(varMondo)         --- this.contenitoreMondo = new game.Container(this.varMondo);');
        this.contenitoreBody            = new game.Container(this.giocatoreBody);//.addTo(giocatoreBody);
        console.log('Giocatore, init, Container.addTo(giocatoreBody)    --- this.contenitoreBody = new game.Container(this.giocatoreBody);');
        
        
},
    collide: function() {
        if(other.collisionGroup === 1) {
            giocatoreBody.remove();
            game.scene.addTimer(2500, function() {
                game.system.startScene('Main'); }); }
        if(other.collisionGroup === 2) {
            /*
                aggiorna punteggio, aggiorna vita
            */ console.log('servo a riempire spazio');
        }
    },
    
    update: function() {
        
        giocatoreBody.position.x = this.position.x;
        giocatoreBody.position.y = this.position.y;
    
        if (game.keyboard.down('UP') && this.stage === 'Livello_prova') {
                giocatoreBody.position.y += this.position.y; }
                  
        if (game.keyboard.down('DOWN') && this.stage === 'Livello_prova') {
                giocatoreBody.position.y -= this.position.y; }
                
        if (game.keyboard.down('LEFT') && this.stage === 'Livello_prova') {
                giocatoreBody.position.x -= this.position.x; }
                
        if (game.keyboard.down('RIGHT')) {
                giocatoreBody.position.x += this.position.x; } },
    
    remove: function() {
        game.scene.removeObject(this);
        game.scene.World.removeBody(this.body);
        game.sceme.stage.removeChild(this); },
});

-"call" of the player on the stage-

        this.oggetto = new game.Giocatore();
        console.log('this.oggetto = new game.Giocatore();'); 
        console.dir(this.oggetto);

And those are the logs i had (on the attachments).

I still see nothing about the player. Guesses? Thanks!

 

 

[Stephan]

try this in the scene:

this.oggetto = new game.Giocatore().addTo(this.stage);

now the sprite (or in this case your custom class) will be added to the stage and substantially be displayed on the screen. 

 

Have a look here for some small examples:

http://vermeire.home.xs4all.nl/panda/index.html#sprites (just a sprite)

http://vermeire.home.xs4all.nl/panda/index.html#physics (sprite with body)

[ThatGuy]

I've tried but this solution doesn't fit quiet well with my code, it work just fine for the other objects when it comes to add tiles on the map at any rate...

The problem is: Giocatore contain the containers (no pun intended) who "manage" almost anything about the body of the player and after some further edit even some parts of the scenes, so calling just that it'll throw an error. In order to do not have to make massive changes to my program first i have to call the class and then add it, or at least this is my feeling about that... and i also tried this way, still give errors! I'm missing something here.

Do you have any magic tricks that may fit this case? Sorry again for the annoyance!

[Stephan]

In order to render an object you just HAVE to add it to the stage (or alternatively to an object that has been added to the stage).

I'm affraid you will have to do some rewriting after all. I would suggest to keep things simple at first at keep close to the examples avaliable in the demo apps an the panda fiddler. It will make live much easier later on.

[ThatGuy]

Hi there!

Sorry to bother you again, I've solved many of the issues, only one remain: the collide function -.-

I've checked the fiddler page, same for the cheatsheet, i just can't see the problem.

 

   collide: function(opponent) {
        
        if(opponent.collisionGroup === 1) {
            console.log('collisione muro');
            
            this.giocatoreBody.velocity.x = 0;
            this.giocatoreBody.velocity.y = 0; }
        
        else if(opponent.collisionGroup === 2) {
            cosole.log('collisione nemico');
            
            this.giocatoreBody.remove();
            game.scene.addTimer(2000, function() {game.system.startScene('Main');}); }
        
        else if(opponent.collisionGroup === 3) {
            console.log('collisione moneta');
            
            this.punteggio = this.punteggio + 1;
//          var text = new game.PIXI.Text('Punteggio attuale: ', + this.punteggio, { font: '20px Arial'});
            opponent.parent.remove(); }
    },

the collisonGroup are fine, i have passed to remove anything to remove nothing... perhaps a more trained eye could see the matter! Hold on, i'm near to the deadline so i won't flood ( that much) anymore!

[Stephan]

Have you set the collideAgainst property correctly? This is a property of the body that triggers the collide() function.

so:

opponent has collisionGroup: 1
player has collideAgainst: 1

 

And have you added the body to world?

game.scene.world.addBody(this.body);

just checking a few obvious things....

[ThatGuy]

Yep and yep, here came the code:

        this.posizione = {
            x:  x,
            y:  y };//given from the scene Livello_prova

this.giocatoreBody = new game.Body({
            position:       {   x:   x,
                                y:   y   },
            velocityLimit:  {   x:  100,
                                y:  100 },
            velocity:       {   x:  -150,
                                y:  -150 },
            acceleration:   1,
            speed:          1,
            mass:           1,
            collisionGroup: 0,
            collideAgainst: [1, 2, 3] } );
        
        this.GiocatoreSprite       = new game.Sprite('proto_player.png');
        this.GiocatoreSprite.anchor.set(0.5, 0.5);
        this.GiocatoreSprite.position.set(x, y);
        this.giocatoreBody.addShape(new game.Rectangle(20, 20));

        game.scene.world.addBody(this.giocatoreBody);//.MG
        game.scene.stage.addChild(this.GiocatoreSprite);
        game.scene.addObject(this);

and then  the other class Moneta (coin)

   init: function(x, y) {
        this.posizione = {x: x,
                          y: y};
        
        this.monetaBody = new game.Body({
            position: {x: x, y: y},
            velocityLimit: {x: 0, y: 0},
            velocity: {x:0, y: 0},
            mass:1,
            collisionGroup: 3,
            collideAgainst: 0 });
        
        this.monetaSprite = new game.Sprite('moneta_prova.png');
        this.monetaSprite.anchor.set(0.5 , 0.5);
        this.monetaSprite.position.set(x, y);
        this.monetaBody.addShape(new game.Rectangle(25, 25));
//      this.monetaBody.addShape(new game.Circle(20,20));// buggata in questa versione di pJS
        
        game.scene.world.addBody(this.monetaBody);
        game.scene.stage.addChild(this.monetaSprite);
        game.scene.addObject(this);
        console.log('addObjectMoneta');
        
        this.monetaBody.remove = this.monetaBody.remove.bind(this);

I read that many have the same problem with the collisions, that may have to do with the velocity attribute called to the physics.js during the update() or the PIXI displayObject() do not work properly  when called.

Or, even more logical, i'm missing something...

[Stephan]

Ah, now I see the problem. You've got a rectangle and a circle as bodies. Currently collision between those is not supported. Try changing the rectangle in a cirlce and everything should work just fine.

Stephan 

[ThatGuy]

Hi Stephan!

Sorry about that, i left an old commented script inside the code! Unfortunately that can't be the problem since the addShape Circle is never called, nevertheless thanks for the interest!

The collisions work fine, intended as physicals body that bumps and stuff, but it seems that the collision function is never called! Unless i call the function inside the init function instead of not doing so, but in that case it will off course trow an error such "opponent is undefined" 

collide: function(opponent) {

aaaahhh, i'm sooo close to finish that project, jet so far!

 

Stephan, usually how you do it?

[Stephan]

Hi ThatGuy,

Just keep breathing, you will get there eventually... There are two more things that I can think of:

 

1) You must realise that you have in fact a double collision detection defined. This is what I mean:

this.monetaBody = new game.Body({
            ...
            collisionGroup: 3,
            collideAgainst: 0 });

and...

this.giocatoreBody = new game.Body({
            ...
            collisionGroup: 0,
            collideAgainst: [1, 2, 3] } );

 So monetaBody collides against giocatoreBody AND giocatoreBody collides against monetaBody. Just one of the collisions will eventually be handled in one of the collide() function.

 

I think you should remove one of the collideAgainst and set it to an empty array. for example: 

this.monetaBody = new game.Body({
            ...
            collisionGroup: [],
            collideAgainst: 0 });

 

2) Just to be sure: You have to bind the collide function of the body to your custom collide function in the init() constructor function. But I think you have that bit covered here:

this.giocatoreBody.collide      = this.giocatoreBody.collide.bind(this);

 

If this doesn't solve the problem, perhaps you can post once again both complete classes so I can have another look at them. One more question: what version of panda are you using? The master (=v1) or the development branch (=v2)?

[ThatGuy]

Hi Thephan!

First things first: Panda.js 1.13.1 Pixi.js 2.2.5

I've played around with the collisionGroup and i found the turning key:

        this.giocatoreBody = new game.Body({
            ...
            collisionGroup: 0,
            collideAgainst: [1, 2, 3] });

        this.muroBody = new game.Body({
            ...
            collisionGroup: 1,
            collideAgainst: [1, 2, 3],//0,

        this.acquaBody = new game.Body({
            ...
            collisionGroup: 1,
            collideAgainst: [1, 2, 3],//0,

        this.monetaBody = new game.Body({
            ...
            collisionGroup: 3,
            collideAgainst: [1, 2, 3],//0,

        this.nemicoBody = new game.Body({
            ...
            collisionGroup: 2,
            collideAgainst: [1, 2, 3] });

Someone may say that is a poor design choice or it's a n00bish way to solve a problem, but hey! Now the collision function is called.

Beside, passing 'opponent' as a parameter will trow errors here and there.

//COLLIDE Giocatore()
    collide: function(opponent) {
//      console.log('ok');
        
        
        if(opponent.collisionGroup === 2) {
            cosole.log('collisione nemico');
            
            opponent.giocatoreBody.remove();
            game.scene.addTimer(2000, function() {game.system.startScene('Main');}); return true; }
        
        else if(opponent.collisionGroup === 3) {
            console.log('collisione moneta');
            
            this.punteggio = this.punteggio + 1;
            var text = new game.PIXI.Text('Punteggio attuale: ', + this.punteggio, { font: '20px Arial'});
            opponent.parent.remove(); return true; }
        
        else {
//          console.log('else');
            return false; }   
    },



//COLLIDE Moneta()
    collide: function(opponent) {
        console.log('ok');
        
		opponent.remove();
        console.log('rimossa moneta');
    },


//COLLIDE Nemico()
    collide: function(opponent) {
        console.log('collisione nemico');
        opponent.remove();
        return true;
    },

Should i pass to panda V2?

[ThatGuy]

pardon *Stephan