3nius

Guitar Hero Phaser-Framework

6 posts in this topic

Hi guys,

I'm a student and I have to do a project for school. I decided to do a Guitar Hero coded with the Phaser framework in JS.
But I have a problem : I can't manage to code the line where balls are validated and increase scores.
I got a git : https://github.com/GuitarHeroJS/GuitarHeroJS.git
Can you help ! I'm stuck and I have 5 weeks to finish this.
Thanks in advance for your help !
Have a good day !

 

Share this post


Link to post
Share on other sites

Hi, although your code is not in English, which is recommended to do in the future if you post on this forum(for readability), it is structured well enough to understand. You have many possibilities in doing this within Phaser:

If you want to play using four keyboard keys, then you could do the following:

-add four dummy sprites//rectangles that serve as collision boxes and position them below your guitar line.
-add four sprite groups ( https://phaser.io/examples/v2/category/groups ) in the create function, one for each color. Add each boule to the corresponding group when it is created (in crea_sprite functions):

function crea_sprite_bleu() {
//... yes thats correct they are bleu_boules.... and nooo the size of the group is not fixed to two
	bleu_boule_group.add(boule_bleu_rand);

-check for overlaps in the update function and add an overlapCallback to it: http://phaser.io/docs/2.4.4/Phaser.Physics.Arcade.html#overlap

game.physics.arcade.overlap(blue_boules_group, blue_boules_dummybox, blueIsBelowLine);
game.physics.arcade.overlap(green_boules_group, green_boules_dummybox, greenIsBelowLine);
..
..

-you have 4 colors, so 4 inputs in the update function and you for example return a boolean from the blueIsBelowLine callback to check if it is overlapping:

  if (game.input.keyboard.isDown(Phaser.Keyboard.D)){
//if blueIsBelowLine
//add score
    }
    if (game.input.keyboard.isDown(Phaser.Keyboard.A)){

//if greenIsBelowLine
//add score
    } 
    if (game.input.keyboard.isDown(Phaser.Keyboard.S)){

//..
    }
    if (game.input.keyboard.isDown(Phaser.Keyboard.W)){

//..
    } 

But the easiest way out without any collision checking is to make the same four groups. You can then specify the distance required to give a score(the closer the better for example):

if (game.input.keyboard.isDown(Phaser.Keyboard.D)){

   if blue_boule_group.getChildAt(0).y>500&&blue_boule_group.getChildAt(0).y<600){
      score+=1; // bit far off
   }
   if blue_boule_group.getChildAt(0).y>=600&&<blue_boule_group.getChildAt(0).y<700){
      score+=5; //right on spot
   }

}

if (game.input.keyboard.isDown(Phaser.Keyboard.A)){

   if green_boule_group.getChildAt(0).y>500&&green_boule_group.getChildAt(0).y<600){
      score+=1; // bit far off
   }
   if green_boule_group.getChildAt(0).y>=600&&green_boule_group.getChildAt(0).y<700){
      score+=5; //right on spot
   }
//......
} 
    
if (game.input.keyboard.isDown(Phaser.Keyboard.S)){

//.....
}
    
if (game.input.keyboard.isDown(Phaser.Keyboard.W)){

//.....
} 

 

 

If you are using the mouse or touch to play:

One way to achieve what you want is to add the boules to a group and enable input for each child in that group, a nice example:

https://phaser.io/examples/v2/input/input-enable-group

var boule_group;

//in create

boule_group=game.add.group();
boule_group.inputEnableChildren = true;

Then in your "boule" creation functions you add those boules to the group, listen to mouseclicks and execute a function when a boule is clicked:

function crea_sprite_bleu() {
//...
	boule_group.add(boule_bleu_rand);
	boule_bleu_rand.events.onInputDown.add(clickedSprite, this);

}

Then you can make a function called clickSprite that adds the score and does everthing you want:

function clickedSprite(object){

//if the boule is below your line add the score
	console.log(object);
	score++;
}

Voilà!

Another way of doing this, since you are using arcade physics is to make a dummy sprite that follows your mouse (dummysprite.x= game.input.activepointer.x) and in your update function check for overlaps between the boule_group and your dummysprite:

http://phaser.io/docs/2.4.4/Phaser.Physics.Arcade.html#overlap

Hope this will help you make the deadline!

breed likes this

Share this post


Link to post
Share on other sites

Hi Sami, 

First to all thanks for your answer !

I have tested to increase the score with distance check. But I have a white page and I don't understand where I made my mistake.

Can you  help me again please  ? I have pull an update version on github.

Thanks in advance for your help !
Have a good day !

 

 

Share this post


Link to post
Share on other sites
On 21/04/2017 at 1:21 PM, samid737 said:

if blue_boule_group.getChildAt(-1).y>500&&blue_boule_group.getChildAt(-1).y<600){ score+=1; // bit far off } if blue_boule_group.getChildAt(-1).y>=600&&blue_boule_group.getChildAt(-1).y<700){ score+=5; //right on spot }

This part is crashing the game ! I don't know why ! ;(

 

Share this post


Link to post
Share on other sites

 

 

Hi, I think the source is incomplete (main.js is missing some functions). You can inspect the error in the console by opening the developers tool (F12 for chrome and Firefox). Also, the code I provided has an error in the if statements and is a bit clumsy, it should be 0 index for the lowest boule. My apologies for this. Its important that you kil/destroyl the sprite after it leaves the screen:

function update() {
	if (game.input.keyboard.isDown(Phaser.Keyboard.A))
	{
		if (blue_boule_group.getChildAt(0).y>500&&blue_boule_group.getChildAt(0).y<600)
		{
			score+=1;
			blue_boule_group.getChildAt(0).destroy();
		}
		if (blue_boule_group.getChildAt(0).y>=600&&blue_boule_group.getChildAt(0).y<700)
		{
			score+=5; 
			blue_boule_group.getChildAt(0).destroy();

		}
	}
}

Also note that currently it wil keep adding the score while you have A pressed down. This might not be what you want, but you can( instead of using input checking in update) use an input event in the create function to make sure that the score is added only once:


//in create function
Blue_button= game.input.keyboard.addKey(Phaser.Keyboard.A);Blue_button.onDown.add(addScoreBlue, this);
//

function addScoreBlue() { 
		if (blue_boule_group.getChildAt(0).y>500&&blue_boule_group.getChildAt(0).y<600)
		{
			score+=1;
			blue_boule_group.getChildAt(0).destroy();
		}
		if (blue_boule_group.getChildAt(0).y>=600&&blue_boule_group.getChildAt(0).y<700)
		{
			score+=5; 
			blue_boule_group.getChildAt(0).destroy();

		}
	}
}


Or you can make your own timer that only adds the score for like 0.01s.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.