Jump to content


Recommended Posts

Hi all,


  I am a game designer and was mostly working with construct2 and very new to PhaserJS so please forgive my "super-simple" sometimes even trivial questions.


 Here's the question 


 I have two images taken out of same spritesheet using the json atlas map. In this case both the stars are in yellow in color. Now when you click on any one of the stars the star turns grey which I am able to do using the event listener of the mouse input function. Same works independently for the other sprite as well. Now I want to make it like the following : 


    " when we click on one star the other star should automatically get unselected    


   when we click anywhere on the screen apart from the sprite, the all the sprites in the screen should automatically get unselected"



The point is at any given time only one sprite should be in SELECTED state. 

 Something like this : http://collegetomato.com/query_on_selectionandUnselection.jpg


Following is my "NOOB" code :D 


You can forgive me for my simple question as I am basically a designer and trying some hand on coding.

<!doctype html> <html> <head>   <title>Phaser</title>   <script type="text/javascript" src="js/phaser.min.js"></script> </head> <body> <script type="text/javascript">var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });    function preload() {     game.load.atlasJSONHash('starJSON', 'assets/stars.png', 'assets/stars.json');  }  function create() {    sprite = game.add.sprite(20,20,'starJSON',2);	sprite2 = game.add.sprite(400,20,'starJSON',2);    //sprite3 = game.add.sprite(60,20,'starJSON',2);	   	 sprite.inputEnabled=true;      sprite.events.onInputDown.add(spriteInputListener,this);  	 	 sprite2.inputEnabled=true;      sprite2.events.onInputDown.add(spriteInputListener2,this);  	 	// sprite3.inputEnabled=true;     // sprite3.events.onInputDown.add(spriteInputListener3,this);  	   }  function update() {        } function spriteInputListener() {    sprite.destroy();    game.add.sprite(sprite.x ,sprite.y,'starJSON',1);}  function spriteInputListener2() {      game.add.sprite(sprite2.x,sprite2.y,'starJSON',1);}    // function spriteInputListener3() {     //  game.add.sprite3(60,20,'starJSON',1);//}</script></body></html>



Link to comment
Share on other sites

First, a couple of notes.

- The callbacks are passed the sprite you click on as an argument, so you can use one listener for all sprites.

- If the images are in the same sprite sheet, then it would be better to use sprite.frame = 0;


Here is how I would go about it:

 - Create an array of all your clickable sprites. Or, in Phaser, you can have them all in a single group, but there may be occasions where this will not suit you.

 - Each sprite can have an ID that matches its place in the array, if you want.

 - Link all the sprites to the same callback function (in this case, spriteInputListener(sprite) ) to reduce duplicated code.

 - In the callback, set the passed sprites frame to the ON frame, loop over the array of clickable sprites and set the frame to be the OFF frame unless the matches the sprite that is passed in.

You can do that like this:

for ( var ii = 0; ii < spriteArray.length; ii++ ){    //sprite is passed to the callback...     if ( spriteArray[ii] != sprite)    {        spriteArray[ii].frame = 0; //or whatever frame number the off frame is...        //spriteArray[ii].frameName = "off"; if you are using named frames...    }}

Or, if you assigned IDs to each sprite, your IF statement could be:

if ( spriteArray[ii].id != sprite.id)

IF you used a Phaser.Group instead of an array, then you can use the forEach() function of the group to iterate over the sprites...

Link to comment
Share on other sites


  • Recently Browsing   0 members

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