Jump to content

Delete Sprite in group


Phyron
 Share

Recommended Posts

Hi!

 

I can't destroy object in group.

 

Balls is the group, and ball is sprite.

 

In Update i put:

this.balls.forEach(this.ballUpdate, this);

and the ballUdate:

 

 ballUpdate : function(_ball){if (_ball.body.y > this.game.world.height + _ball.body.height) {                                  this.balls.remove(_ball, true);}        }

before I could solve the problem with:  _ball.kill();

 

But I do not want kill object, i want destroy.

With de code example the problem writed on console are:

 

Uncaught TypeError: Cannot read property 'body' of undefined 

 

 _ball.destroy() have a same result.

Link to comment
Share on other sites

You don't need to iterate over balls and call an update function manually, if you override update method for ball sprite, Phaser will call it on each update. 

 

It is caused because you remove the balls within forEach function.

BallSprite.protoype.update = function() {  if (this.body.y > this.game.world.height + this.body.height) {     this.destroy();  }}
Link to comment
Share on other sites

Thanks  but not work.

 

My code of create ball (activated when mouse click,1click1ball,2clicks 2balls):

 

 
      click: function(){        var _x = (this.nave.x+this.nave.body.halfWidth)-8; //el 8 es el centre de la bola k medeix 16        var tempBall = this.game.add.sprite(_x, this.nave.y, 'balls',2);       // tempBall.loadTexture('balls', 1);  AIXO ES PER CAMBIAR LA BOLA!        this.game.physics.enable(tempBall, Phaser.Physics.ARCADE);        tempBall.enableBody = true;        tempBall.y -= tempBall.body.width;        tempBall.body.velocity.setTo(0, -200);               tempBall.body.bounce.setTo(1, 1);        tempBall.protoype.update = function() {  if (this.body.y > this.game.world.height + this.body.height) {     this.destroy();  }}        this.balls.add(tempBall);    },

On mouse click crate a ball but send me a error:

 

Uncaught TypeError: Cannot set property 'update' of undefined 

Link to comment
Share on other sites

eguneys,

 

 

I just arrived at home, and solve mistiped, but dosent work..

 

Console say the same problem..

 

   tempBall.prototype.update = function() { // if (tempBall.body.y > this.game.world.height + tempBall.body.height) {   //  tempBall.destroy(); // }}

Uncaught TypeError: Cannot set property 'update' of undefined 

 

 

PD: I "solve" the problem:

 

 tempBall.prototype = Object.create(Phaser.Sprite.prototype);        tempBall.prototype.update = function() {  if (tempBall.body.y > this.game.world.height + tempBall.body.height) {     tempBall.destroy();  }

I thing that need create use  Object.create(Phaser.Sprite.prototype);

 

The new problem: the update dont work.. i put a console log on if, and he doesnt run.  

}
Link to comment
Share on other sites

You use the call method:

 

var BallSprite = function() {  Phaser.Sprite.call(this, game, 0, 0, 'bot');}

I cant find the call sprite method in documentation, and cant implement with spritesheet.

 var tempBall = function(){Phaser.Sprite.call(this,  game, _x, this.nave.y, 'balls',2);}

I think it's wrong.

 

after execute your code:

 

 
tempBall.prototype = Object.create(Phaser.Sprite.prototype);        tempBall.prototype.constructor = tempBall;        tempBall.prototype.update = function() {            console.log("asdsad");}

console say 2 errors:

 

Uncaught TypeError: undefined is not a function --------------phaser.min.js:3
Uncaught TypeError: undefined is not a function  ------------- phaser.min.js:8
 
thanks for your answers.

 

 

 

PD:

 

If change a sprite sheet with a image, have a same errors.

this.load.image('nave', 'img/nave.png');var tempBall = function(){Phaser.Sprite.call(this, game, _x, this.nave.y, 'nave');}
Link to comment
Share on other sites

You use the call method:

var BallSprite = function() {  Phaser.Sprite.call(this, game, 0, 0, 'bot');}

I cant find the call sprite method in documentation, and cant implement with spritesheet.

 var tempBall = function(){Phaser.Sprite.call(this,  game, _x, this.nave.y, 'balls',2);}

I think it's wrong.

 

The call function is not part of Phaser. It is built into javascript Functions. Function.prototype.call()

Link to comment
Share on other sites

The problem is localized in 1387:

 

PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index){    if(index >= 0 && index <= this.children.length)    {        if(child.parent)        {            child.parent.removeChild(child);        }        child.parent = this;        this.children.splice(index, 0, child);        if(this.stage)child.setStageReference(this.stage); //LINE 1387!!        return child;    }    else    {        throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length);    }};

and 19685

 

Phaser.Group.prototype.preUpdate = function () {    if (!this.exists || !this.parent.exists)    {        this.renderOrderID = -1;        return false;    }    var i = this.children.length;    while (i--)    {        this.children[i].preUpdate(); //ERROR LINE     }    return true;};

If i delete this line: this.balls.add(tempBall);

 

not send a error, but the ball is not created.

Link to comment
Share on other sites

When you extend Phaser.Sprite it becames an extended Sprite class. Imply that by capitalizing the first letter of the variable, BallSprite.

var BallSprite = function() { Phaser.Sprite.call( /* parameters */); }// Instantiate BallSprite class.var tempBall = new BallSprite();// Use the newly created sprite object.this.balls.add(tempBall);// You can't use extended sprite class (BallSprite) like this.// This is wrong.this.balls.add(BallSprite);
Link to comment
Share on other sites

I feel stupid...

 

 

Actual code:

 

 click: function(){        var _x = (this.nave.x+this.nave.body.halfWidth)-8; //el 8 es el centre de la bola k medeix 16        var naveY = this.nave.y;        var BallSprite = function(){Phaser.Sprite.call(this,  this.game, _x, naveY, 'balls',2);}        var tempBall =  new BallSprite();         tempBall.prototype = Object.create(Phaser.Sprite.prototype);        tempBall.prototype.constructor = tempBall;        tempBall.prototype.update = function() {            console.log("asdsad");}        this.balls.add(tempBall);    },

First, I create a naveY variable because if I wrte this:

 

Phaser.Sprite.call(this,  this.game, _x, this,nave.y, 'balls',2) 

 

Launch error: propiety "y" is not defined, but if i put into naveY var before, its work fine. (why??).

 

I solve this but not work:

Uncaught TypeError: undefined is not a function line 1816:

 

   this.blendMode = PIXI.blendModes.NORMAL;    if(texture.baseTexture.hasLoaded)    {        this.onTextureUpdate(); //line error 1816     }    else    {        this.onTextureUpdateBind = this.onTextureUpdate.bind(this);        this.texture.addEventListener( 'update', this.onTextureUpdateBind );    }

the game var in phaser call line, have error because dont exist, if i dont write "this" before, but out of this line game var without "this" exist.

 

 

 

Link to comment
Share on other sites

Ok,

 

The link of project in rar for download:

 

https://drive.google.com/file/d/0B4Q1zTj6f4A8RlBzNm5BU2U5RU0/edit?usp=sharing

 

thats the code of game.js file (error on click method) :

 

BasicGame.Game = function (game) {this.bricks;this.balls;this.nave;this.naveY; this.deadBar;this.blockPacks;this.velocityBallsX = 200;this.velocityBallsY = 200;this.velocityBricks = 1;}BasicGame.Game.prototype = {    create: function () {        this.game.physics.startSystem(Phaser.Physics.ARCADE);        this.game.stage.backgroundColor = '#787878';        this.crearNave();        this.crearDeadBar();        this.loadPacks();        this.bricks = this.add.group();                this.balls = this.add.group();               this.populateLevel(1);        this.game.input.onDown.add(this.click, this);    },    crearNave: function () {    this.naveY = this.game.world.height-50;    this.nave = this.game.add.sprite( this.game.world.width, this.naveY, 'nave');     this.game.physics.arcade.enable(this.nave);    this.nave.enableBody = true;     this.nave.body.immovable = true;         },     crearDeadBar: function () {        this.deadBar = this.game.add.sprite( 0, this.game.world.height-32, 'deadbar',1);    this.game.physics.arcade.enable(this.deadBar);    this.deadBar.enableBody = true;    this.deadBar.body.immovable = true;    this.deadBar.animations.add('dead');       },    loadPacks: function(){        this.blockPacks = [        {            name: "Fish",           bricks: [0, 0, 1, 1, 1, 1, 1,3, 2, "e", 2, 2, 2, 2,4, 3, 5, 2, 3, 4]                  },       {         name: "ll",       bricks:[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, "e", "e", "e", "e", 3, 2, "e", "e", "e", "e", "e", "e", "e", "e", 3, 2, "e", "e", "e", "e", "e", "e", "e", "e", 3, 2, "e", "e", "e", "e", "e", "e", "e", "e", 3, 2, "e", "e", "e", "e", "e", "e", "e", "e", 3, 2, "e", "e", "e", "e", 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, "e", "e", "e", "e", "e", "e", "e", "e", "e", "e", 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]       } ]   },   populateLevel: function (level) {        //reset bricks        this.bricks.destroy();        this.bricks = this.game.add.group();                var Level = this.blockPacks[level];        var tempBrick;        var h = 0;        var w = 0        var count =0;        for (var i = 0; i < Level.bricks.length; ++i) {                        if (Level.bricks[i]!="e") {                        tempBrick = this.game.add.sprite(w * 36, h * 16, 'tiles',Level.bricks[i]-1);//El menos 1 es pq els tiles van de 0  a 5, no de 1 a 6                        this.physics.arcade.enable(tempBrick);                        tempBrick.enableBody = true;                        tempBrick.body.immovable = true;                                                                     this.bricks.add(tempBrick);                    };                    w++;                 count++;              if (count == 10) { h++; count=0; w=0;};               }          },      click: function(){        var _x = (this.nave.x+this.nave.body.halfWidth)-8; //el 8 es el centre de la bola k medeix 16        var naveY = this.nave.y;   var BallSprite = function(){Phaser.Sprite.call(this,  this.game, _x, naveY, 'balls',2);}       // tempBall.loadTexture('balls', 1);  AIXO ES PER CAMBIAR LA BOLA!        //this.game.physics.enable(tempBall, Phaser.Physics.ARCADE);        //tempBall.enableBody = true;        //tempBall.y -= 50;        //tempBall.body.velocity.setTo(0, -200);              // tempBall.body.bounce.setTo(1, 1);       var tempBall =  new BallSprite();         tempBall.prototype.update = function() {            console.log("asdsad");}        this.balls.add(tempBall);    },    moveBricks: function(){        this.bricks.y+=this.velocityBricks;    },    moveNave: function(){             this.nave.body.x = this.game.input.worldX - this.nave.body.halfWidth;            if (this.nave.body.x <= 0) {                this.nave.body.x = 0;            }            if (this.nave.body.x >= this.game.world.width - this.nave._cache.width) {                this.nave.body.x = this.game.world.width - this.nave._cache.width;            }            if (this.nave.y> this.naveY ) {this.nave.y--};               },    naveVsbrick: function(_nave,_brick){        _nave.y += this.velocityBricks*2;                },    ballVsbrick: function(_ball,_brick){        _brick.destroy();    },    ballVsDeadBar: function(_deadbar,_ball){          this.deadBar.animations.play('dead', 20, false);          _ball.destroy();    },    ballVsNave:function(_nave,_ball){        var ballBodyCenterX = _ball.body.x + _ball.body.halfWidth;        var naveBodyCenterX = _nave.body.x + _nave.body.halfWidth;        var v = naveBodyCenterX-ballBodyCenterX;                  if (ballBodyCenterX < naveBodyCenterX) {                if (_ball.body.velocity.x>=0) {                                  _ball.body.velocity.setTo(-this.velocityBallsX-v, -this.velocityBallsY+v);                }                                        }else{              if (_ball.body.velocity.x<=0) {                   _ball.body.velocity.setTo(this.velocityBallsX+v, this.velocityBallsY-v);                }                           }            _nave.y+=2;    },     ballUpdate : function(_ball){        if (_ball.body.x <= 0) {            _ball.body.x = 0;            _ball.body.velocity.x *= -1;        }        if (_ball.body.x > this.game.world.width - _ball.body.width) {            _ball.body.x = this.game.world.width - _ball.body.width;            _ball.body.velocity.x *= -1;        }        if (_ball.body.y < 0) {            _ball.body.y = 0;            _ball.body.velocity.y *= -1;        }        if (_ball.body.y > this.game.world.height + _ball.body.height) {                                  this.balls.remove(_ball, true);        }    },    update: function(){        this.moveBricks();        this.moveNave();                this.game.physics.arcade.overlap(this.nave, this.bricks, this.naveVsbrick, null, this);        this.game.physics.arcade.collide(this.balls, this.bricks, this.ballVsbrick, null, this);        this.game.physics.arcade.collide(this.balls, this.nave, this.ballVsNave, null, this);        //this.game.physics.arcade.collide(this.balls, this.deadBar, this.ballVsDeadBar, null, this);              //this.balls.forEach(this.ballUpdate, this);        //console.log(this.balls.length)    }}
Link to comment
Share on other sites

Create a new file called ball_sprite.js and insert this.

var BallSprite = function(game, x, y){Phaser.Sprite.call(this,  game, x, y, 'balls',2);}BallSprite.prototype = Object.create(Phaser.Sprite.prototype);BallSprite.prototype.constructor = BallSprite;BallSprite.prototype.customMethod = function() { console.log('i am a ball sprite'); }

then use it in your states.

var tempBall = new BallSprite(this.game, x, y);
Link to comment
Share on other sites

it works!!

 

But now, back to the first problem.

 

I need check colision with bottom.

BallSprite.prototype.update= function() { if (_ball.body.y > this.game.world.height + _ball.body.height) {                                  balls.remove(_ball, true);        }}

I cant obtain a body size.

I add a body in game.js, after create a new object.

 

var tempBall = new BallSprite(this.game, _x, _y);    this.game.physics.enable(tempBall, Phaser.Physics.ARCADE);tempBall.enableBody = true;//and more propieties...       

A lot of thanks eguneys!

Link to comment
Share on other sites

BallSprite is your class, that's where the ball logic goes. Including physics and collision detection.

BallSprite = function(/* params */) {    Phaser.Sprite.call(/* params */);    this.game.physics.enable(this, Phaser.Physics.ARCADE);    this.enableBody = true;}

Notice, I included the physics and body logic inside the BallSprite class, and notice the `tempBall` is converted into `this`. That's because inside a class `this` refers to the `ball instance` you create with `new BallSprite()`. So if you were to figure out how to refactor your update function:

BallSprite.prototype.update = function() {    // guess how you can obtain a body size of the `ball instance` here.}
Link to comment
Share on other sites

Everything works perfectly!

 

Thanks!!

 

 

Final code:

 

var BallSprite = function(game, x, y,{    Phaser.Sprite.call(this,  game, x, y, 'balls',2);    this.game.physics.enable(this, Phaser.Physics.ARCADE);    this.enableBody = true;    this.y -= 50;    this.body.velocity.setTo(0, -200);    this.body.bounce.setTo(1, 1);    this.a = b;}BallSprite.prototype = Object.create(Phaser.Sprite.prototype);BallSprite.prototype.constructor = BallSprite;   BallSprite.prototype.update = function() {  if (this.body.x <= 0) {            this.body.x = 0;            this.body.velocity.x *= -1;        }        if (this.body.x > this.game.world.width - this.body.width) {            this.body.x = this.game.world.width - this.body.width;            this.body.velocity.x *= -1;        }        if (this.body.y < 0) {            this.body.y = 0;            this.body.velocity.y *= -1;        }        if (this.body.y > this.game.world.height + this.body.height) {                                  this.a.remove(this, true);        }        }
Link to comment
Share on other sites

Thaks, i change this code.

 

I have other issue, i create object ball like you said, and after create a brick object like other, all work fine, but i create "nave" in new file, it doesnt work well, the image not is loaded, and the update method not executed.

 

I copy a ball object, i cant find where are the fail...

 

In game.js

 

  
  crearNave: function () {    this.naveY = this.game.world.height-50;    this.nave = new NaveSprite( this.game,this.game.world.width/2, this.naveY);         },

in nave.js

 

var NaveSprite = function(game, _x, _y){    Phaser.Sprite.call(this,  game, _x, _y, 'nave',1);    this.game.physics.enable(this, Phaser.Physics.ARCADE);      this.enableBody = true;    this.body.immovable = true;}NaveSprite.prototype = Object.create(Phaser.Sprite.prototype);NaveSprite.prototype.constructor = NaveSprite;   NaveSprite.prototype.update = function() { console.log("Updated")      }

in first code "nave" its create fine, not is problem of image or preload.

 

    this.load.spritesheet('nave', 'img/nave.png',64,10,2);

 

But the collide works fine.(are in general game update)

 

if you can help me with this, I promise I will not bother to 2020 ;)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...