Need help, collision (P2JS) and more ...

[kenshm]

Hello everybody,

 

First of all, I want to apologize in advance for my bad English (I'm from Switzerland).

I am beginner with phaser, I started there ~ 1-2 weeks.

I started my game with the physical system "arcade" of phaser. I've realized that I had to change my game because contained asteorids (polygons).

Here are two versions of my game :

1. ARCADE physics : link
2. P2JS physics : link

I tried to change the physical system (n°2), but I am having problems...
 

List of my problems/questions :

1. My function "collisionHandler()" is called from the launch of my game, I do not understand why.
2. Asteroids do not fall as in Example 1
3. Is it possible to use the virtualjoystick with P2JS ?

 

How can I find the same result as Example 1 using P2JS ?

 

 

Example 1 - game.js :

SpaceWar.Game = function (game) {	this.stick;	this.pad;	this.fighter;};SpaceWar.Game.prototype = {	init: function(){		this.game.renderer.renderSession.roundPixels = true;		this.game.physics.startSystem(Phaser.Physics.ARCADE);	},	create: function(){		/*		 * Load the background and sets the size		 */    	        var background = this.game.add.sprite(0, 0, 'background');		background.width = this.game.world.width;		background.height = this.game.world.height;		/*		 * Created a group called "asteorids"		 * Enables pyhsics & spawn a random asteorid every X seconds		 * Each asteorid created is added to the group "asteorids"		 */	         this.asteorids = this.add.group();	         this.asteorids.enableBody = true;	         this.asteorids.physicsBodyType = Phaser.Physics.ARCADE;		 var asteroidLoop = this.game.time.events.loop(Phaser.Timer.SECOND * 0.2, this.createAsteorid, this);		/*		 * Spawn the fighter (ship) to the center of the bottom screen		 * Active physics and prevents the fighter to come out of the screen		 */		this.fighter = this.add.sprite(this.game.world.width/2, this.game.world.height - 100, 'fighter');		this.fighter.angle -= 90;		this.fighter.anchor.set(0.5);		this.game.physics.enable(this.fighter, Phaser.Physics.ARCADE);		this.fighter.body.collideWorldBounds = true;		/*		 * Adds the joystick on the screen and set its size		 */		this.pad = this.game.plugins.add(Phaser.VirtualJoystick);		this.stick = this.pad.addStick(0, 0, 300,'arcade');		this.stick.scale = 1.2;				this.stick.alignBottomLeft(50);	},	update: function(){		this.game.physics.arcade.collide(this.fighter, this.asteorids, this.collisionHandler, null, this);		/*		 * Called when joysting is down and moving the fighter (ship)		 */		var speed = 500;		if(this.stick.isDown){			this.physics.arcade.velocityFromRotation(this.stick.rotation, this.stick.force * speed, this.fighter.body.velocity);			this.fighter.rotation = this.stick.rotation;		}else{			this.fighter.body.velocity.set(0);		}	},		/*	 * Generates & create a random asteroid types	 */	createAsteorid: function(){		var type = this.game.rnd.integerInRange(1, 4);		if(type != null){			 var asteorid = this.add.sprite(this.game.world.randomX -230, this.rndPositionY(), 'asteorid0' + type, 0, this.asteorids);		     asteorid.body.gravity.y = this.rndGravity();		     asteorid.checkWorldBounds = true;		     asteorid.outOfBoundsKill = false;		     asteorid.events.onEnterBounds.add(this.killOnOutOfBounds, this);		}	},		/*	 * Called when two objects collide - Explosion	 * @param {obj1} fighter	 * @param {obj2} asteorid	 */	collisionHandler: function(fighter, asteorid){		this.fighter.kill();		var explosion = this.game.add.sprite(this.fighter.x - 80, this.fighter.y, 'explosion');		explosion.animations.add('DoExplosion', [0, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], 10, false);		var ExplosionAnimation = explosion.animations.play('DoExplosion', 10, false, true);		ExplosionAnimation.onComplete.add(function(){			this.gameOver();		}, this);	},	/*	 * Set the value of "outOfBoundsKill" to true on a sprite when it is called	 * @param {sprite} sprite	 */	killOnOutOfBounds: function(sprite)    {        sprite.outOfBoundsKill = true;    },	/*	 * Generates a random position (Y) between -150 and -400 (for asteorids)	 */	rndPositionY: function(){		return this.game.rnd.integerInRange(-150, -400);	},	/*	 * Generates a random (int) between 100 and 350 for gravity asteorid	 */	rndGravity: function(){		return this.game.rnd.integerInRange(100, 350);	},	/*	 * Called when the player loose the game	 */	gameOver: function(){		this.stick.visible = false;		this.state.start('GameOver');	}};

Example 2 - game.js :

SpaceWar.Game = function (game) {	this.stick;	this.pad;	this.fighter;};SpaceWar.Game.prototype = {	init: function(){		this.game.renderer.renderSession.roundPixels = true;		this.game.physics.startSystem(Phaser.Physics.P2JS);	},	create: function(){		this.game.physics.p2.setImpactEvents(true);		this.game.physics.p2.restitution = 0.9;    	    /*	     * fighterCollisionGroup {group}     ==> collision group for the fighter	     * asteoridCollisionGroup {group}	 ==> collision group for the asteorids	     */	    this.fighterCollisionGroup = this.game.physics.p2.createCollisionGroup();	    this.asteoridCollisionGroup = this.game.physics.p2.createCollisionGroup();	    this.game.physics.p2.updateBoundsCollisionGroup();		/*		 * Load the background and sets the size		 */    	var background = this.game.add.sprite(0, 0, 'background');		background.width = this.game.world.width;		background.height = this.game.world.height;		/*		 * Created a group called "asteorids"		 * Enables pyhsics & spawn a random asteorid every X seconds		 * Each asteorid created is added to the group "asteorids"		 */	    this.asteorids = this.add.group();	    this.asteorids.enableBody = true;	    this.asteorids.physicsBodyType = Phaser.Physics.P2JS;		this.game.physics.p2.enable(this.asteorids, false); //set to true for debugging		var asteroidLoop = this.game.time.events.loop(Phaser.Timer.SECOND * 0.2, this.createAsteorid, this);		/*		 * Spawn the fighter (ship) to the center of the bottom screen		 * Active physics and prevents the fighter to come out of the screen		 * Load polygonal data (.json) for the hit box		 */		this.fighter = this.add.sprite(this.game.world.width/2, this.game.world.height - 100, 'fighter');		this.fighter.anchor.set(0.5);	    this.game.physics.p2.enable(this.fighter, false); //set to true for debugging		this.fighter.body.clearShapes();		this.fighter.body.loadPolygon('physicsData', 'fighter');		this.fighter.body.collideWorldBounds = true;		this.fighter.body.setCollisionGroup(this.fighterCollisionGroup);		this.fighter.body.collides(this.asteoridCollisionGroup, this.collisionHandler(), this);		/*		 * Adds the joystick on the screen and set its size		 */		/*		this.pad = this.game.plugins.add(Phaser.VirtualJoystick);		this.stick = this.pad.addStick(0, 0, 300,'arcade');		this.stick.scale = 1.2;				this.stick.alignBottomLeft(50);		*/	},	update: function(){		/*		 * Called when joysting is down and moving the fighter (ship)		 */		/*		var speed = 500;		if(this.stick.isDown){			this.physics.arcade.velocityFromRotation(this.stick.rotation, this.stick.force * speed, this.fighter.body.velocity);			this.fighter.rotation = this.stick.rotation;		}else{			this.fighter.body.velocity.set(0);		}		*/	},	/*	 * Debuging render	 */    render: function() {    },	/*	 * Generates & create a random asteroid types	 */	createAsteorid: function(){		var type = this.game.rnd.integerInRange(1, 4);		if(type != null){			 var asteorid = this.add.sprite(this.game.world.randomX -230, this.rndPositionY(), 'asteorid0' + type, 0, this.asteorids);		     asteorid.body.gravity.y = this.rndGravity();		     asteorid.checkWorldBounds = true;		     asteorid.outOfBoundsKill = false;		     asteorid.events.onEnterBounds.add(this.killOnOutOfBounds, this);		     asteorid.body.setCollisionGroup(this.asteoridCollisionGroup);		     asteorid.body.collides(this.fighterCollisionGroup);		     asteorid.body.clearShapes();		     asteorid.body.loadPolygon('physicsData', 'asteorid0' + type);		}	},		/*	 * Called when two objects collide - Explosion	 * @param {obj1} fighter	 * @param {obj2} asteorid	 */	collisionHandler: function(fighter, asteorid){		this.fighter.kill();		var explosion = this.game.add.sprite(this.fighter.x - 80, this.fighter.y, 'explosion');		explosion.animations.add('DoExplosion', [0, 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16], 10, false);		var ExplosionAnimation = explosion.animations.play('DoExplosion', 10, false, true);		ExplosionAnimation.onComplete.add(function(){			this.gameOver();		}, this);	},	/*	 * Set the value of "outOfBoundsKill" to true on a sprite when it is called	 * @param {sprite} sprite	 */	killOnOutOfBounds: function(sprite)    {        sprite.outOfBoundsKill = true;    },	/*	 * Generates a random position (Y) between -150 and -400 (for asteorids)	 */	rndPositionY: function(){		return this.game.rnd.integerInRange(-150, -400);	},	/*	 * Generates a random (int) between 100 and 350 for gravity asteorid	 */	rndGravity: function(){		return this.game.rnd.integerInRange(100, 350);	},	/*	 * Called when the player loose the game	 */	gameOver: function(){		//this.stick.visible = false;		//this.state.start('GameOver');	}};

 

Thank you in advance for your assistance,
Kenshimdev

[kenshm]

UP ? Anyone please ?