aicrop Posted April 11, 2014 Share Posted April 11, 2014 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(); } } Link to comment Share on other sites More sharing options...
XekeDeath Posted April 11, 2014 Share Posted April 11, 2014 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, sovar 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. Link to comment Share on other sites More sharing options...
aicrop Posted April 14, 2014 Author Share Posted April 14, 2014 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, sovar 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! Link to comment Share on other sites More sharing options...
aicrop Posted April 14, 2014 Author Share Posted April 14, 2014 @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 fromx=(0,100)y=(0,100)<--section 1x=(100,200)y=(0,100)<--section 2x=(200,300)y=(0,100)<--section 3 x=(0,100)y=(100,200)<--section 4x=(100,200)y=(100,200)<--section 5x=(200,300)y=(100,200)<--section 6 x=(0,100)y=(200,300)<--section 7x=(100,200)y=(200,300)<--section 8x=(200,300)y=(200,300)<--section 9 Link to comment Share on other sites More sharing options...
XekeDeath Posted April 14, 2014 Share Posted April 14, 2014 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) george 1 Link to comment Share on other sites More sharing options...
aicrop Posted April 14, 2014 Author Share Posted April 14, 2014 XekeDeath where should I put this? inside the update or create function? Link to comment Share on other sites More sharing options...
XekeDeath Posted April 14, 2014 Share Posted April 14, 2014 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 1 Link to comment Share on other sites More sharing options...
aicrop Posted April 14, 2014 Author Share Posted April 14, 2014 Thanks man for your help, I'll inform you right away when I get done with this!!Thank you very much! Link to comment Share on other sites More sharing options...
aicrop Posted April 14, 2014 Author Share Posted April 14, 2014 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? Link to comment Share on other sites More sharing options...
XekeDeath Posted April 15, 2014 Share Posted April 15, 2014 so by theory var section = (y * 3 + x) + 1; will give values from 1 to 9?Yup, exactly. aicrop 1 Link to comment Share on other sites More sharing options...
aicrop Posted April 16, 2014 Author Share Posted April 16, 2014 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"}); }}; Link to comment Share on other sites More sharing options...
nExt Posted April 16, 2014 Share Posted April 16, 2014 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 Link to comment Share on other sites More sharing options...
XekeDeath Posted April 19, 2014 Share Posted April 19, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts