Jump to content

Overlap problem


evilben74
 Share

Recommended Posts

hello !

 

so let's introduce myself quickly before any misunderstanding  :lol:

i'm a french student (i hope i will not make too much mistakes in my sentences), who learn coding and how to make awesome movies !  :D

 

So, I discover the Phaser framework last week (god, thanks for making so good people who build awesome things on this planet ! ) 

 

And i try to make my first game ! 

 

OK ... i try to make this game : 

 

pretty simple I know.... but for my first game, it makes me think a lot.

 

So, here is my code... (I know, there is probably different ways to make it better ! but it's mine !)

var game = new Phaser.Game(350, 500, Phaser.AUTO, 'game_div');var direction = 220;var compteur = 0;//equivalent d'un main en C++ ou Cvar main_state ={	preload: function()	{		//couleur de fond ==> backgroundColor		this.game.stage.backgroundColor = "#d7d7d7";				//charger l'image du piaf		this.game.load.image('piaf', 'images/pigeon.png');				this.game.load.image('spikes', 'images/pikes.png');				this.game.load.image('under_spikes', 'images/pikes_down.png');				this.game.load.image('murDroit', 'images/mur.png');		this.game.load.image('murGauche', 'images/mur.png');	},		create: function()	{		//chargement des paramètres de physique du jeu => arcade		game.physics.startSystem(Phaser.Physics.ARCADE);				//ajouter le piaf sur l'ecran, avec les images des PIKES !		//this.truc = this.game.add.sprite(positionX, positionY, 'truc');				this.piaf = this.game.add.sprite(game.world.centerX, game.world.centerY, 'piaf');//je centre mon piaf au debut du jeu 		this.spikes = this.game.add.sprite(0, 470, 'spikes');		this.under_spikes = this.game.add.sprite(0, 0, 'under_spikes');		this.murDroit = this.game.add.sprite(game.width-5, 0, 'murDroit');		this.murGauche = this.game.add.sprite(-27, 0, 'murGauche');						var sprite = this.piaf;		var spikes = this.spikes;		var under_spikes = this.under_spikes;		var murDroit = this.murDroit;		var murGauche = this.murGauche;				//ajout des physiques a mes images		game.physics.enable(sprite, Phaser.Physics.ARCADE);						murDroit.enableBody = true;		murGauche.enableBody = true;		spikes.enableBody = true;		under_spikes.enableBody = true;		sprite.enableBody = true;			//redimensionnement de mon sprite / image de piaf		sprite.scale.x = 0.37;		sprite.scale.y = 0.37;				//je centre l'ancre de mon piaf au centre de son sprite		sprite.anchor.setTo(0.5, 0.5);				//une variable clique qui correspond au clique de ma souris				var clique = this.game.input;				//lors d'un, on lance la fonction jump		clique.onDown.add(this.jump, this);						//space_key.onDown.add(this.jump, this); 		//attribution d'une vélocité linéaire horizontale		sprite.body.velocity.x = direction;				//ajout des bords physique du cadre		sprite.body.collideWorldBounds = true;				//influence de la gravité sur mon pigeon		sprite.body.gravity.set(0, 1000);				//ajout de la puissance de rebond sur les bords		sprite.body.bounce.set(1);				//on check les rebonds / collision sur tous les murs sauf le haut et le bas		game.physics.arcade.checkCollision.down = false;		game.physics.arcade.checkCollision.up = false;							},			update: function() //equivalent d'un RequestAnimFrame = optimisation cadence affichage	{		//si le piaf est trop bas ou trop haut, on appel une fonction de redemarrage.		if(this.piaf.inWorld == false)		{					this.piaf.kill();			compteur = 0;									document.getElementById("message").innerHTML = "Vous avez mouru ...";			if(game.input.mousePointer.isDown)			{				this.restart_game();							}		}				//je redefini mes variables		var sprite = this.piaf;		var spikes = this.spikes;		var under_spikes = this.under_spikes;		var murDroit = this.murDroit;		var murGauche = this.murGauche;				if(checkOverlap(sprite, spikes) ||		   checkOverlap(sprite, under_spikes))		{			sprite.inWorld = false;		}				else if(checkOverlap(sprite, murDroit))		{			sprite.body.velocity.x = -direction;			compteur++;			document.getElementById("score").innerHTML = compteur + " points";		}				else if(checkOverlap(sprite, murGauche))		{			sprite.body.velocity.x = direction;			compteur++;			document.getElementById("score").innerHTML = compteur + " points";		}			},			jump : function()	{				var sprite = this.piaf;				sprite.body.velocity.y = -300;	},			checkOverlap: function(spriteA, spriteB)	{				var boundsA = spriteA.getBounds();		var boundsB = spriteB.getBounds();				return Phaser.Rectangle.intersects(boundsA, boundsB);			},			restart_game : function()	{		document.getElementById("message").innerHTML = "";		document.getElementById("score").innerHTML = "";				this.game.state.start('main'); 	}};//demarrage du jeugame.state.add('main', main_state);game.state.start('main');

my problem : i want my "piaf"/ my "sprite" (=my main character) to detect collision with the spikes at the top and at the bottom of my game world.

 

So i wrote the above code. But it tells me that the function "checkOverlap" is not defined. and i don't understand why ...

 

I check the overlap of my sprite and my walls (murDroit & murGauche) in my "update" function.

 

Have you got any ideas ?

 

thanks

Link to comment
Share on other sites

You're defining checkOverlap as a function on the state, so inside functions it needs to be referenced as 'this.checkOverlap', so you need to change this part of your code:

		if(this.checkOverlap(sprite, spikes) ||		   this.checkOverlap(sprite, under_spikes))		{			sprite.inWorld = false;		}				else if(this.checkOverlap(sprite, murDroit))		{			sprite.body.velocity.x = -direction;			compteur++;			document.getElementById("score").innerHTML = compteur + " points";		}				else if(this.checkOverlap(sprite, murGauche))		{			sprite.body.velocity.x = direction;			compteur++;			document.getElementById("score").innerHTML = compteur + " points";		}

Be aware that as you're using physics, there is a built-in Physics-driven overlap detection routine too; see this example: http://examples.phaser.io/_site/view_full.html?d=arcade%20physics&f=direct+body+movement.js&t=direct%20body%20movement

Link to comment
Share on other sites

but there is a little problem,

because when my bird touch my right or my left wall, I have a variable who counts every hit... and with the above code, it doesn't work properly, each time, I have a "+3" while the correct count is "+1" ...

//check des superposition de mes images => hiboxes		if(game.physics.arcade.overlap(sprite, murDroit, null, null, this))		{			compteur++;			document.getElementById("score").innerHTML = compteur + " points";		}		else if(game.physics.arcade.overlap(sprite, murGauche, null, null, this))		{			compteur++;			document.getElementById("score").innerHTML = compteur + " points";		}		else if(game.physics.arcade.overlap(sprite, spikes, null, null, this) ||				game.physics.arcade.overlap(sprite, under_spikes, null, null, this))		{			this.gameOver();		}
Link to comment
Share on other sites

Remember that overlap is called once per frame, and with physics you'll often have a situation where an object is overlapping over the course of several frames. A better way to do this would be to use collide instead of overlap, and then body.bounce.setTo(1,0) on the player. This will automatically reverse the direction when it hits the left or right wall, and collide should only be fired once whenever it hits a wall.

Link to comment
Share on other sites

thanks !

 

I tried like this :

		if(game.physics.arcade.collide(sprite, murDroit, null, null, this))		{			compteur++;			document.getElementById("score").innerHTML = compteur + " points";		}		else if(game.physics.arcade.collide(sprite, murGauche, null, null, this))		{			compteur++;			document.getElementById("score").innerHTML = compteur + " points";		}				else if(game.physics.arcade.collide(sprite, spikes, null, null, this) ||				game.physics.arcade.collide(sprite, under_spikes, null, null, this))		{			this.gameOver();		}		

i tried to do like in this example : http://examples.phaser.io/_site/view_full.html?d=particles&f=when+particles+collide.js&t=when%20particles%20collide

 

but my bird is againt the right wall, and is glued (glue .... ? )  to it. And also, my right wall image disappear once my bird it it...

 

Have you got an idea ?

Link to comment
Share on other sites

Here's a fiddle set up to show how I'd make it work: http://jsfiddle.net/lewster32/khmL5hws/

 

You need to make sure the walls have body.immovable set to true, or they will be pushed away when the bird hits. You also need to set body.bounce.x on the bird to 1 so that it bounces off the walls; 1 means it will retain its speed and just change direction, 0.5 means it would lose half of its speed and so on.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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