Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

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


toto88x
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;}
Link to comment
Share on other sites

 

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);
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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