When a sprite is clicked -> doSomething(sprite)?

[toto88x]

Hi,

 

I'm building a game with two types of sprites: the good guys and the bad guys.

 

When I click on a bad guy, I want to reduce the HP of the clicked sprite by one. 

Here's in pseudo code what I want to do: 

create: function() {    bad_guys = game.add.group();}update: function() {    bad_guys.ifClicked(reduce_hp);}reduce_hp: function(sprite) {    sprite.health--;}

How can I do that in Phaser? Is there something similar to my "ifClicked" function?

Thanks!

[Pixelguy]

There is an example that does just that:

 

http://gametest.mobi/phaser/examples/_site/view_full.html?d=basics&f=02+-+click+on+an+image.js&t=02%20-%20click%20on%20an%20image

[Shadow20]

I have the same issue right now, I came up with an idea on how to solve this but havent actually got to trying to implement it yet.

The idea is that you use the sprite.events.OnInputDown.add(Listener, this) and the bounds of the sprite and pointer. The onInputDown calls the listener function if you click on the sprite so you would need to make a different function for each sprite or something like that i guess. I was thinking of getting the bounds of the pointer and the sprite and use that to try to determine which sprite was clicked or tapped.

 

there might be some way to pass an ID or something to the listener function to identify the sprite that is being clicked which would make it alot easier imo.

 

Hopefully that was not as incoherent as it seems while writing this in a class.

 

@PixelGuy: if you use that, wouldnt you need a different listener for each different sprite that is clickable to reduce the health of that specific sprite or unit?

[Grumbler]

I agree with Shadow20. Pixelguy's answer is a good one in the general sense, but it loses the context of the sprite that was clicked. I've had the same question as toto, and have been unable to solve it yet.

[rich]

Guys the function is sent 2 parameters, a reference to the sprite that was clicked and the pointer that clicked it:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });function preload() {    //  You can fill the preloader with as many assets as your game requires    //  Here we are loading an image. The first parameter is the unique    //  string by which we'll identify the image later in our code.    //  The second parameter is the URL of the image (relative)    game.load.image('einstein', 'assets/pics/ra_einstein.png');}function create() {    //  This creates a simple sprite that is using our loaded image and    //  displays it on-screen    //  and assign it to a variable    var image = game.add.sprite(0, 0, 'einstein');    //enables all kind of input actions on this image (click, etc)    image.inputEnabled=true;    image.events.onInputDown.add(listener,this);}function listener (sprite, pointer) {  sprite.alpha = 0.5;}

[toto88x]

Thanks!

 

Another question related to this: is there a way to change the cursor when the mouse is hover a sprite? I want to do this to make it more clear that the sprite is clickable. Thanks!

[rich]

Yes:

sprite.input.useHandCursor = true;

[toto88x]

 

Yes:

sprite.input.useHandCursor = true;

 

Thanks, it works! But once I click on a sprite, my cursor remains as a hand forever. I want to have the hand only when i hover a sprite.

 

my code:

enemies = game.add.group();enemies.setAll('inputEnabled', true);enemies.setAll('input.useHandCursor', true);

[Shadow20]

Thanks for clearing that up Rich. Much appreciated

[toto88x]

Any idea how to solve my hover problem below?

 

My code:

enemies = game.add.group();enemies.setAll('inputEnabled', true);enemies.setAll('input.useHandCursor', true);

The first time I hover over an enemy, it works! Then I click on the enemy and it moves. And at this point I keep the handcursor for the hole game, expet if I hover over another sprite. I want to have the hand only when i hover a sprite.

 

How can I fix that? Thanks!

 

Edit: here's a live example of the issue: https://dl.dropboxus...haser/test.html

[Pixelguy]

I can't tell whats wrong with your example without knowing all of your code.

 

Here is an example I made:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'holder', { preload: preload, create: create, update: update });function preload() {  game.load.image('star', 'assets/star.png');}function create() {  // adding the group  stars = game.add.group();  // placing random star sprites in the world  for (var i = 0; i < 10; i++) {    stars.create( 20 + Math.random() * 750, 20 + Math.random() * 550, 'star');  }  // setting input & cursor on hover  stars.setAll('inputEnabled', true);  stars.setAll('input.useHandCursor', true);    // adding a listener to each sprite  stars.forEach(function(star) {     star.events.onInputDown.add(listener,this);  });}function update() {}  function listener (sprite, pointer) {  //print info to the console and kill the sprite  console.log("Clicked  at: " + pointer.position);  console.log("killed sprite with pos: (x="+sprite.x+" / y="+sprite.y+")" )  sprite.kill();}

Live examaple:

https://dl.dropboxusercontent.com/u/7910081/html5examples/clicktest/clicktest.html

 

 

@all is there a way to add a listener to the group itself? Or is it fine the way I've done it in the example?

[toto88x]

Thanks a lot!

 

If I do enemy.kill() when clicked (like in your example) it works like expected. But in my case I do enemy.body.velocity.x = 100; which make the hand cursor stay.

You can see a live example here: https://dl.dropboxusercontent.com/u/44715806/phaser/test.html

[Pixelguy]

You are right, thats odd!

It resets to a normal cursor once you hover a star again.

I guess you have found a bug... Can someone confirm it's indeed a bug?

[toto88x]

I found a topic with the same issue, and a solution here: http://www.html5gamedevs.com/topic/2289-handling-a-button-that-i-want-to-hide-after-clicking/

But adding the "game.stage.canvas.style.cursor = "default";" doesn't change the issue in my case.

[Pixelguy]

It works for me now when adding it to the last line of the listener:

function listener (sprite, pointer) {  //print info to the console and kill the sprite  console.log("Clicked  at: " + pointer.position);  console.log("killed sprite with pos: (x="+sprite.x+" / y="+sprite.y+")" )  sprite.body.velocity.x = 100;  game.stage.canvas.style.cursor = "default";}

Still hacky but an okay workaround I guess?

Working example:

https://dl.dropboxusercontent.com/u/7910081/html5examples/clicktest/newClicktest.html

[toto88x]

It works for me now when adding it to the last line of the listener:

function listener (sprite, pointer) {  //print info to the console and kill the sprite  console.log("Clicked  at: " + pointer.position);  console.log("killed sprite with pos: (x="+sprite.x+" / y="+sprite.y+")" )  sprite.body.velocity.x = 100;  game.stage.canvas.style.cursor = "default";}

Still hacky but an okay workaround I guess?

Working example:

https://dl.dropboxusercontent.com/u/7910081/html5examples/clicktest/newClicktest.html

 

Nice catch, It works! But there's still an issue:

1- I click on a star, and it moves

2- Then I make the start stop on the right of the screen

3- And if I hover it now, the cursor does not change into a hand. But if I hover a second time, then I have a hand. Weird... Any idea?

 

Working example (click on a star, wait for the start to stop, then hover it): https://dl.dropboxusercontent.com/u/44715806/phaser/test2.html