How to detect click event within specific range

[aicrop]

Hi I'm new to phaser and I really wanted to be familiar with this so please me thanks.

 

I have 300x300 game 

 

var game = new Phaser.Game(    300, 300, Phaser.AUTO,'phaser-example',     { preload: preload, create: create, update: update});

and I'd like to detect if I click around x=100 & y=100 I will do some action.

I have this code but still not working please do give me some advise thank you very much.

 

if (game.input.activePointer.isDown) {        if (Phaser.game(game.rnd.integerInRange(0, 100),game.rnd.integerInRange(0, 100))) { onClickFunction();              }             }

 

[XekeDeath]

game.rnd.integerInRange(0, 100)
This gives you a random integer between 0 and 100, what you want to do is check the pointers coordinates to see if they are in a range.

There are a few ways to do this, but all of them require one of the pointers x/y coordinates.
First, how close to the 100,100 point do you want to detect?
Do you want to look in a square area around 100,100, or a circle one?

The pointer coords you probably want to use are the ones where it was clicked, so

var x = game.input.activePointer.positionDown.xvar y = game.input.activePointer.positionDown.y//see http://docs.phaser.io/Phaser.Pointer.html for more options.

Then compare the position to a rectangular or circular area around the area you want:

//Rectanglevar area = new Phaser.Rectange(75, 75, 50, 50);//Circlevar area = new Phaser.Circle(100, 100, 50);if ( area.contains(x, y) ){    doStuff();}

Your other option would be to make an invisible sprite, and give it an onInputDown event, but this fires once, where as you OP suggests you want the function to trigger on each update.

[aicrop]

game.rnd.integerInRange(0, 100)

This gives you a random integer between 0 and 100, what you want to do is check the pointers coordinates to see if they are in a range.

There are a few ways to do this, but all of them require one of the pointers x/y coordinates.

First, how close to the 100,100 point do you want to detect?

Do you want to look in a square area around 100,100, or a circle one?

The pointer coords you probably want to use are the ones where it was clicked, so

var x = game.input.activePointer.positionDown.xvar y = game.input.activePointer.positionDown.y//see http://docs.phaser.io/Phaser.Pointer.html for more options.

Then compare the position to a rectangular or circular area around the area you want:

//Rectanglevar area = new Phaser.Rectange(75, 75, 50, 50);//Circlevar area = new Phaser.Circle(100, 100, 50);if ( area.contains(x, y) ){    doStuff();}

Your other option would be to make an invisible sprite, and give it an onInputDown event, but this fires once, where as you OP suggests you want the function to trigger on each update.

I should give this one a try, I'll inform you right away how it will work out thanks mate!

[aicrop]

@XekeDeath, Sir what I have here is a sprite image with 300x300 pixels, I want to divide this image into 9 equal square sections(like tic tac toe board) and detect if me/user click on which section, that's why I'm trying to setup the detection range from

x=(0,100)y=(0,100)<--section 1

x=(100,200)y=(0,100)<--section 2

x=(200,300)y=(0,100)<--section 3

 

x=(0,100)y=(100,200)<--section 4

x=(100,200)y=(100,200)<--section 5

x=(200,300)y=(100,200)<--section 6

 

x=(0,100)y=(200,300)<--section 7

x=(100,200)y=(200,300)<--section 8

x=(200,300)y=(200,300)<--section 9

[XekeDeath]

If you want to stick with a single background image, you can either create a rectangle object per section, store them in an array, and loop over it checking which one was clicked in,

or do the comparisons yourself.

var sections = [    new Phaser.Rectangle(0, 0, 100, 100),    new Phaser.Rectangle(100, 0, 100, 100),    new Phaser.Rectangle(200, 0, 100, 100),    new Phaser.Rectangle(0, 100, 100, 100),    new Phaser.Rectangle(100, 100, 100, 100),    new Phaser.Rectangle(200, 100, 100, 100),    new Phaser.Rectangle(0, 200, 100, 100),    new Phaser.Rectangle(100, 200, 100, 100),    new Phaser.Rectangle(200, 200, 100, 100)];game.input.onDown.add(clicked, this);clicked = function(pointer){    for (var ii = 0; ii < sections.length; ii++ )    {        if ( sections[ii].contains(game.input.activePointer.positionDown)        {            //We clicked in section ii, do something about it...            break;        }    }}

Or, cut down your code and do some maths:

var x = game.input.activePointer.positionDown.x;var y = game.input.activePointer.positionDown.y;x = x - (x % 100) / 100;y = y - (y % 100) / 100;

This will convert the pointer position into a 0-2 index, so in the end you will know the section you clicked in

- for example - (153, 272) = section 1,2 (middle column, bottom row)

[aicrop]

XekeDeath where should I put this? inside the update or create function?

[XekeDeath]

Depends on which path you are taking.

 

I would recommend going with the very short maths way.

In the create function, add a handler to the input down event.

create: function(){    //All other create stuff...    this.input.onDown.add(this.clickHandler, this);};

In the handler function, put the small snippet of maths:

clickHandler: function(pointer){    var x = pointer.positionDown.x;    var y = pointer.positionDown.y;    x = x - (x % 100) / 100;    y = y - (y % 100) / 100;    //Now you know the x/y of the section, you can figure out a 1-9 index by:    var section = (y * 3 + x) + 1; //3 being the grid width, and +1 to make it a 1 based index.    //Now you can do what you want to the appropriate section...};

If you want to go the Rectangle path, then the creation of the array and rectangles, and the adding the handler to the input event, all happens in the create function, and the other part is a function itself separate to the create/update functions.

[aicrop]

Thanks man for your help, I'll inform you right away when I get done with this!!

Thank you very much!

[aicrop]

 

In the handler function, put the small snippet of maths:

clickHandler: function(pointer){    var x = pointer.positionDown.x;    var y = pointer.positionDown.y;    x = x - (x % 100) / 100;    y = y - (y % 100) / 100;    //Now you know the x/y of the section, you can figure out a 1-9 index by:    var section = (y * 3 + x) + 1; //3 being the grid width, and +1 to make it a 1 based index.    //Now you can do what you want to the appropriate section...};

 

so by theory var section = (y * 3 + x) + 1;  will give values from 1 to 9?

[XekeDeath]

so by theory var section = (y * 3 + x) + 1;  will give values from 1 to 9?

Yup, exactly.

[aicrop]

Yup, exactly.

Hey Man I've tried your suggestion but I still got no luck here are my codes so far

 

var game = new Phaser.Game(    300, 300, Phaser.AUTO,'phaser-example',     { preload: preload, create:create, update: update});function preload() {    game.load.image('tile', 'tile.jpg');   }function create() {    background = game.add.sprite(0, 0, 'tile');       }function update(){         game.input.onDown.add(clickHandler, this); //I tried this on create function, no good    game.input.activePointer.isDown(clickHandler, this); //I tried this on create function, no good}clickHandler: function(pointer){    var x = pointer.positionDown.x;    var y = pointer.positionDown.y;    x = x - (x % 100) / 100;    y = y - (y % 100) / 100;    //Now you know the x/y of the section, you can figure out a 1-9 index by:    var section = (y * 3 + x) + 1; //3 being the grid width, and +1 to make it a 1 based index.    if ( section == 1) {        txt2 = game.add.text(35, 25, "1", {        font: "65px Arial",        fill: "#000000",        align: "center"});    } else if ( section == 2) {        txt2 = game.add.text(125, 25, "2", {        font: "65px Arial",        fill: "#000000",        align: "center"});    }};

[nExt]

i want using touch event in all screen , or in specific range (with smartphone devices) .

how do using it ?? 

in tutorial not have for touch event with smartphone 

[XekeDeath]

Try something like this: the callback is an anonymous function instead.

var game = new Phaser.Game(    300, 300, Phaser.AUTO,'phaser-example',    { preload: preload, create:create, update: update});function preload() {    game.load.image('tile', 'tile.jpg');  }function create() {    background = game.add.sprite(0, 0, 'tile');          //You need this in create, you dont want to add a new handler every update.    game.input.onDown.add(function(pointer)    {        var x = pointer.positionDown.x;        var y = pointer.positionDown.y;        x = x - (x % 100) / 100;        y = y - (y % 100) / 100;        //Now you know the x/y of the section, you can figure out a 1-9 index by:        var section = (y * 3 + x) + 1; //3 being the grid width, and +1 to make it a 1 based index.        //You could create an array of text objects in the create function, hide them all, and just make them visible here.        if ( section == 1) {            txt2 = game.add.text(35, 25, "1", {            font: "65px Arial",            fill: "#000000",            align: "center"});        } else if ( section == 2) {            txt2 = game.add.text(125, 25, "2", {            font: "65px Arial",            fill: "#000000",            align: "center"});        }    }, this); }function update(){    //This returns a bool value, it doesnt call callback functions...    //game.input.activePointer.isDown(clickHandler, this); //I tried this on create function, no good}

@thientinh91: game.input.onDown.add() will also work for a touch event.