Sprite Group Immovable Fail

mariante · September 2, 2016

Hi, i'm trying to make my bomb collide with the sprite at border left and right, it's colliding but i wanna make them immovable and i'm getting stuck.

this.backgroundImage = this.game.add.tileSprite(0, 0, 440, 600, spriteAssets.backgroundName);
        this.backgroundGraphics = this.game.add.graphics(0, 0);
        this.backgroundGraphics.lineStyle(2, 0xFFFFFF, 1);
		
		//this.barreiraGroup = this.game.add.group();
		this.barreiraGroup = this.game.add.physicsGroup();
		
		for(var j = 0; qnt >= j; j++){
			var p = j*22;
			//this.barreiraGroup.create(0, j+p, spriteAssets.backgroundBarreira);
			this.backgroundBarreira = this.game.add.sprite(0, j+p, spriteAssets.backgroundBarreira);
			this.backgroundBarreira.tint = 0x677E52;
			this.backgroundBarreira.blendMode = PIXI.blendModes.MULTIPLY;
			this.barreiraGroup.add(this.backgroundBarreira);
		}
		for(var j = 0; qnt >= j; j++){
			var p = j*22;
			//this.barreiraGroup.create(this.game.world.centerX+190, j+p, spriteAssets.backgroundBarreira);
			this.backgroundBarreira = this.game.add.sprite(this.game.world.centerX+190, j+p, spriteAssets.backgroundBarreira);
			this.backgroundBarreira.tint = 0x677E52;
			this.backgroundBarreira.blendMode = PIXI.blendModes.MULTIPLY;
			this.barreiraGroup.add(this.backgroundBarreira);
		}
		//this.barreiraGroup.setAll('body.immovable', true);
		//this.barreiraGroup.setAll('body.moves', false);

With that code, my result:

But without comment:

this.barreiraGroup.setAll('body.immovable', true);
this.barreiraGroup.setAll('body.moves', false);

My result:

NO COLLIDE

alessandronunes · September 2, 2016

Hello @mariante,

I'm using the code bellow on this project (https://github.com/alessandronunes/soccerpunch/ - Check for examples):

function create(){

boundsGroup = game.add.group();

boundsGroup.enableBody = true;

createBoundLine(0,0,40,960);

createBoundLine(500,0,40,960);

createBoundLine(0,0,540,120);

createBoundLine(0,840,540,120);

}



function update(){

game.physics.arcade.collide(playerGroup, boundsGroup);

game.physics.arcade.collide(ball, boundsGroup);

}



function createBoundLine(x,y,w,h){

var line = boundsGroup.create(x, y, null);

line.body.setSize(w, h, 0, 0); // set the size of the rectangle

line.body.immovable = true;

line.body.moves = false;

line.body.allowGravity = false;

}

mariante · September 2, 2016

Thanks mate, ill try your help, after i test i post here the feedback.

mariante · September 3, 2016

Hi again @alessandronunes, i tryied your code but no success...

Look my code updated with your help:

................

initGraphics: function(){
.............
.............
        this.barreiraGroup = this.game.add.group();
		this.barreiraGroup.enableBody = true;
		this.barreiraGroup = this.game.add.physicsGroup();
		
		this.initGraphicsBarreira(0);
		this.initGraphicsBarreira(this.game.world.centerX+190);
.............
},

initGraphicsBarreira: function(x){
		var qnt = 25;
		for(var j = 0; qnt >= j; j++){
			var p = j*22;
			var barreira = this.barreiraGroup.create(x, j+p, spriteAssets.backgroundBarreira);
			barreira.body.immovable = true;
			barreira.body.moves = false;
			barreira.body.allowGravity = false;
			barreira.tint = 0x677E52;
			barreira.blendMode = PIXI.blendModes.MULTIPLY;
		}
},

update: function(){
...............
		this.game.physics.arcade.collide(this.ballSprite, this.barreiraGroup);
},
...............

And here the result (same, no collide):

@edit:

If i put the

barreira.body.immovable = true;
barreira.body.moves = false;
barreira.body.allowGravity = false;

outside the for loop, i get the same result like before (collide and move):

Edited September 3, 2016 by mariante
adding other anwser

carlosnufe · September 3, 2016

You are hiding us the ball code.

Help: I you do not try it.. when you have problems, go to the simplest possible case.

Try this simple code with your movement code and replace the x,y, etc.., it should be working:

init:{
    this.game.physics.startSystem(Phaser.Physics.ARCADE);
},
create: {
    // Ball Sprite
    this.ballSprite = this.game.add.sprite(x, y, key, frame, parent)
    this.ballSprite.anchor.setTo(0.5);
    this.game.physics.arcade.enable(this.ballSprite);

    // Barreira Group
    this.barreiraGroup = this.add.group();
    this.barreiraGroup.enableBody = true;
    // Can change barreiraData by your loop, but this way is much better, cleaner and clearer.
    barreiraData.forEach(function (element) {
        this.barreiraGroup.create(element.x, element.y, key);
    }, this);
    this.barreiraGroup.setAll('body.immovable', true);
    this.barreiraGroup.setAll('body.allowGravity', false);
},
update: {
    this.game.physics.arcade.collide(this.ballSprite, this.barreiraGroup);
}

Notice us when you can

mariante · September 3, 2016

S*#% bro!

Already tryied everything and nothing different (or collides and moves or doesnt collide)..

Last try was adding forEach in update for collides

this.barreiraGroup.forEach(function(barreiras){
			this.game.physics.arcade.collide(this.ballSprite, barreiras);
		}, this);

but no success..

My create and update:

create: function(){
		//this.game.rnd.integerInRange(0,800) //RANDOM
		//this.game.state.start("game"); //COMEÇA OUTRA TELA
		this.initGraphics();
		this.initPhysics();
		this.initKeyboard();
		this.startDemo();
		this.smokeTrail();

	},

    update: function(){
        this.moveLeftPaddle();
        this.moveRightPaddle();
		this.smokeEmitter.x = this.ballSprite.x;
		this.smokeEmitter.y = this.ballSprite.y;
		this.game.physics.arcade.overlap(this.ballSprite, this.paddleGroup, this.collideWithPaddle, null, this);
		this.barreiraGroup.forEach(function(barreiras){
			this.game.physics.arcade.collide(this.ballSprite, barreiras);
		}, this);
    },

My 3 others importantes functions:

	initGraphics: function(){
		this.backgroundImage = this.game.add.tileSprite(0, 0, 440, 600, spriteAssets.backgroundName);
        this.backgroundGraphics = this.game.add.graphics(0, 0);
        this.backgroundGraphics.lineStyle(2, 0xFFFFFF, 1);
        
        for (var x = 0; x < gameProperties.screenHeight; x += gameProperties.dashSize * 2) {
            this.backgroundGraphics.moveTo(x, this.game.world.centerY);
            this.backgroundGraphics.lineTo(x, this.game.world.centerY + gameProperties.dashSize);
        }

        this.ballSprite = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, spriteAssets.ballName);
        this.ballSprite.anchor.set(0.5, 0.5);
		this.ballSprite.scale.setTo(0.09, 0.09);
		this.ballSprite.filters = [ this.game.add.filter('Glow') ];
		
        this.paddleUpSprite = this.game.add.sprite(this.game.world.centerX, gameProperties.paddleLeft_y, spriteAssets.paddleName);
        this.paddleUpSprite.anchor.set(0.5, 0.5);
        
        this.paddleDownSprite = this.game.add.sprite(this.game.world.centerX, gameProperties.paddleRight_y, spriteAssets.paddleName);
        this.paddleDownSprite.anchor.set(0.5, 0.5);
		
    },
	
	initPhysics: function(){
		this.game.physics.startSystem(Phaser.Physics.ARCADE);
        this.game.physics.arcade.enable(this.ballSprite);
		
		this.barreiraGroup = this.game.add.group();
		this.barreiraGroup.enableBody = true;
		this.barreiraGroup.physicsBodyType = Phaser.Physics.ARCADE;
		
		this.barreiraGroup.setAll('body.immovable', true);
		this.barreiraGroup.setAll('body.moves', false);
		this.barreiraGroup.setAll('body.allowGravity', false);
		
		this.initGraphicsBarreira(0);
		this.initGraphicsBarreira(this.game.world.centerX+190);
		
        this.ballSprite.checkWorldBounds = true;
        this.ballSprite.body.collideWorldBounds = true;
        this.ballSprite.body.immovable = true;
        this.ballSprite.body.bounce.set(1);
		
		this.paddleGroup = this.game.add.group();
        this.paddleGroup.enableBody = true;
        this.paddleGroup.physicsBodyType = Phaser.Physics.ARCADE;
        
        this.paddleGroup.add(this.paddleUpSprite);
        this.paddleGroup.add(this.paddleDownSprite);
 
        this.paddleGroup.setAll('checkWorldBounds', true);
        this.paddleGroup.setAll('body.collideWorldBounds', true);
        this.paddleGroup.setAll('body.immovable', true);
    },
	
	initGraphicsBarreira: function(x){
		var qnt = 25;
		
		for(var j = 0; qnt >= j; j++){
			var p = j*22;
			this.barreiraGroup.create(x, j+p, spriteAssets.backgroundBarreira);
			this.barreiraGroup.setAll('tint', '0x677E52');
			this.barreiraGroup.setAll('blendMode', PIXI.blendModes.MULTIPLY);
		}
	},

alessandronunes · September 3, 2016

Hello @mariante, as @carlosnufe said, please post the ball code. I had the same problem on my project, and solved refactoring the code.

Try this:

Create sprite
Add body to sprite
Add sprite to group
Check collision on Update

To debug, I sugest:

this.barreiraGroup.forEach(function(barreiras){
	//Check if loop and objetcs are ok and have physics
	console.log(this.ballSprite, barreiras);
	this.game.physics.arcade.collide(this.ballSprite, barreiras);
}, this);

mariante · September 4, 2016

Code:

initGraphics: function(){
		this.backgroundImage = this.game.add.tileSprite(0, 0, 440, 600, spriteAssets.backgroundName);
        this.backgroundGraphics = this.game.add.graphics(0, 0);
        this.backgroundGraphics.lineStyle(2, 0xFFFFFF, 1);
        
        for (var x = 0; x < gameProperties.screenHeight; x += gameProperties.dashSize * 2) {
            this.backgroundGraphics.moveTo(x, this.game.world.centerY);
            this.backgroundGraphics.lineTo(x, this.game.world.centerY + gameProperties.dashSize);
        }

        this.ballSprite = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, spriteAssets.ballName);
        this.ballSprite.anchor.set(0.5, 0.5);
		this.ballSprite.scale.setTo(0.09, 0.09);
		this.ballSprite.filters = [ this.game.add.filter('Glow') ];
		
        this.paddleUpSprite = this.game.add.sprite(this.game.world.centerX, gameProperties.paddleLeft_y, spriteAssets.paddleName);
        this.paddleUpSprite.anchor.set(0.5, 0.5);
        
        this.paddleDownSprite = this.game.add.sprite(this.game.world.centerX, gameProperties.paddleRight_y, spriteAssets.paddleName);
        this.paddleDownSprite.anchor.set(0.5, 0.5);
				
    },

	initGraphicsBarreira: function(x){
		var qnt = 25;
		
		for(var j = 0; qnt >= j; j++){
			var p = j*22;
			//this.barreiraGroup.create(x, j+p, spriteAssets.backgroundBarreira);
			this.barreiraSpriteS = this.game.add.sprite(x, j+p, spriteAssets.backgroundBarreira);
			this.barreiraGroup.add(this.barreiraSpriteS);
			this.barreiraGroup.setAll('tint', '0x677E52');
			this.barreiraGroup.setAll('blendMode', PIXI.blendModes.MULTIPLY);
		}
	},	
	
	initPhysics: function(){
		this.game.physics.startSystem(Phaser.Physics.ARCADE);
        this.game.physics.arcade.enable(this.ballSprite);
		
        this.ballSprite.checkWorldBounds = true;
        this.ballSprite.body.collideWorldBounds = true;
        this.ballSprite.body.immovable = true;
		this.ballSprite.body.moves = true;
        this.ballSprite.body.bounce.set(1);
		
		this.paddleGroup = this.game.add.group();
        this.paddleGroup.enableBody = true;
        this.paddleGroup.physicsBodyType = Phaser.Physics.ARCADE;
        
        this.paddleGroup.add(this.paddleUpSprite);
        this.paddleGroup.add(this.paddleDownSprite);
 
        this.paddleGroup.setAll('checkWorldBounds', true);
        this.paddleGroup.setAll('body.collideWorldBounds', true);
        this.paddleGroup.setAll('body.immovable', true);
		
		this.barreiraGroup = this.game.add.group();
		this.barreiraGroup.enableBody = true;
		this.barreiraGroup.physicsBodyType = Phaser.Physics.ARCADE;

		this.initGraphicsBarreira(0);
		this.initGraphicsBarreira(this.game.world.centerX+190);	
		
		this.barreiraGroup.setAll('checkWorldBounds', true);
        this.barreiraGroup.setAll('body.collideWorldBounds', true);
		this.barreiraGroup.setAll('body.immovable', true);
		this.barreiraGroup.setAll('body.moves', false);
		this.barreiraGroup.setAll('body.allowGravity', false);
    },

    update: function(){
        this.moveLeftPaddle();
        this.moveRightPaddle();
		this.smokeEmitter.x = this.ballSprite.x;
		this.smokeEmitter.y = this.ballSprite.y;
		this.game.physics.arcade.overlap(this.ballSprite, this.paddleGroup, this.collideWithPaddle, null, this);
		this.barreiraGroup.forEach(function(barreiras){
			console.log(this.ballSprite, barreiras);
			this.game.physics.arcade.collide(this.ballSprite, barreiras);
		}, this);
    },
	
	render: function(){
		//this.game.debug.bodyInfo(this.ballSprite, 0, 20);
		this.barreiraGroup.forEachAlive(this.renderGroup, this);
	},
	renderGroup: function(member){
		this.game.debug.body(member);
	},	
}

Result:

carlosnufe · September 4, 2016

I've done this simple example for you, it works with my above code. https://jsfiddle.net/carlosnufe/jfmtt3sx/

As @alessandronunes and I said, just, remove code, not delete, just comment and you will find the mistake. It is not a hard game behaviour but you are putting more code than required I think.

I hope you solve your issues.

TIP: to get better developer go to the simplest case and climb up, commiting ( git ) among differnet behaviour.

Sign In

Sprite Group Immovable Fail

Recommended Posts

mariante

Link to comment

Share on other sites

alessandronunes

Link to comment

Share on other sites

mariante

Link to comment

Share on other sites

mariante

Link to comment

Share on other sites

carlosnufe

Link to comment

Share on other sites

mariante

Link to comment

Share on other sites

alessandronunes

Link to comment

Share on other sites

mariante

Link to comment

Share on other sites

carlosnufe

Link to comment

Share on other sites

Recently Browsing 0 members

Browse

Activity