evilben74 Posted August 14, 2014 Share Posted August 14, 2014 hello ! so let's introduce myself quickly before any misunderstanding 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 ! 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 More sharing options...
lewster32 Posted August 14, 2014 Share Posted August 14, 2014 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 evilben74 1 Link to comment Share on other sites More sharing options...
evilben74 Posted August 14, 2014 Author Share Posted August 14, 2014 i tried to do this with your example... and it works ! thanks ! lewster32 1 Link to comment Share on other sites More sharing options...
evilben74 Posted August 14, 2014 Author Share Posted August 14, 2014 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 More sharing options...
lewster32 Posted August 14, 2014 Share Posted August 14, 2014 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 More sharing options...
evilben74 Posted August 14, 2014 Author Share Posted August 14, 2014 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 More sharing options...
lewster32 Posted August 14, 2014 Share Posted August 14, 2014 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 More sharing options...
evilben74 Posted August 14, 2014 Author Share Posted August 14, 2014 thank you so much ! it works ! the only thing i need to do is ameliorate my graphics content ! thanks !!!! lewster32 1 Link to comment Share on other sites More sharing options...
lewster32 Posted August 14, 2014 Share Posted August 14, 2014 You're welcome Just updated the fiddle to show one of the ways you'd turn the bird around, and determine which direction it's moving in: http://jsfiddle.net/lewster32/khmL5hws/ Link to comment Share on other sites More sharing options...
evilben74 Posted August 14, 2014 Author Share Posted August 14, 2014 *like in Game of thrones* Thanks my lord ! haha ! Link to comment Share on other sites More sharing options...
Recommended Posts