How to detect input on graphics primitives ?

[metalNumb]

Hey all !

I have a grid of graphics rectangles with randomized colors - i need to detect input on each of them individually.

How to handle this ?

 

Here's what i made.

 

http://pixos-metalnumb.c9.io/

 

Thank you guys !!!

[CtlAltDel]

You could use a regular sprite and add the image as a bitmapdata...

var bmd = game.add.bitmapData(10,10);bmd.ctx.strokeStyle = '#000000';bmd.ctx.lineWidth = 1;bmd.ctx.beginPath();bmd.ctx.arc(5,5,0,0, 2*Math.PI, false);bmd.ctx.stroke();game.add.sprite(0,0,bmd);

Then you have a sprite that you can click.

 

The other option is to add a sprite without an image and add the graphics object as a child so you can detect clicks on the sprite

which might be more memory efficient if you recycle graphics objects

[ultimatematchthree]

Another option, if you want to skip using sprites altogether, is to set your graphics object's hitArea property then use Phaser.Input's hitTest method.

[metalNumb]

Thank you guys. 

It's just the fact that i want to avoid using sprites because i think primitives can be faster, especially on mobiles where performance might suffer. I want to be able to detect input on them and add animations or tweens and transformations like a usual sprite. 

 

EDIT: i think i also need to make every rectangle of the grid a separate graphics object then. Don't i ? 

[metalNumb]

@CtlAltDel Could you please explain the second option in more details or give an example ?

Thank you. 

[CtlAltDel]

var s = game.add.sprite(0,0);

s.width = 100;

s.height = 100;

var g = game.add.graphics();

s.addChild(g);

g.lineStyle(1, 0x00aaaa, 0.5);

g.drawRect(0,0,10,10);

s.inputEnabled = true;

s.input.enableDrag();

[ultimatematchthree]

It's just a grid, right? I took a look at your code and found it easy to follow, thank you for that. Perhaps you can test for input on grid elements the old fashioned way, via simple grid partitioning? I'm guessing if you add the code below just below your drawRectGrid call it should work. I've added some comments so that you'll hopefully have an idea of what to fix just in case it doesn't work (it probably won't work the first time, I haven't tested the code yet, and of course you can change the code to whatever suits you, but the logic will probably be more or less the same):

function handleGridInput(gridX, gridY) {    // replace this with your own code    console.log("square at " + gridX + "," + gridY + " received input");}function listenForGridInput(rows, columns, elementSize, cornerX, cornerY, spacing) {    // when we compute the size of a partition, we have to factor in the spacing    var elementSizePlusSpacing = elementSize + spacing;    game.input.onDown.add(function() {        // we adjust the pointer position to account for where the upper left corner of your grid is        var xMinusCorner = game.input.x - cornerX;        var yMinusCorner = game.input.y - cornerY;        // we figure out which partition you clicked by dividing your adjusted pointer position by the size of each partition, then we want this to be an integer so we chop of the decimals        var gridX = Math.floor(xMinusCorner / elementSizePlusSpacing);        var gridY = Math.floor(yMinusCorner / elementSizePlusSpacing);        // all we did above are just computations, only at this point do we begin to make some decisions        // if we're out of bounds on the grid, don't do anything        if ((gridX < 0) || (gridY < 0) || (gridX >= rows) || (gridY >= columns)) return;        // at this point we've determined we're in some valid partition, but we're not sure yet if we're in an actual grid element or just spacing        // if we're outside the actual grid element, meaning we're in the spacing, don't do anything        if ((xMinusCorner - (gridX * elementSizePlusSpacing)) >= elementSize) return;        if ((yMinusCorner - (gridY * elementSizePlusSpacing)) >= elementSize) return;        // we're in an actual grid element, call handleGridInput indicating which grid element we're in        handleGridInput(gridX, gridY);    });}listenForGridInput(5, 5, 100, 0, 0, 2);

[metalNumb]

Wow it's a great idea, It's like you've placed a grid layer to detect input on the rectangles.

Will give it a try !

Thanks for the effort ! 

[metalNumb]

OK !

Here's what is happening !!!

 

http://pixos-metalnumb.c9.io/

 

I created a sprite class for the tiles (ColorTile), and each object of this class will attach a graphics object as a child. 

In its UPDATE part, when sprite is clicked, it updates a colorText , and it checks if the currentColor == this TileColor and if so.... kills sprite.

 

- currentColor = RED.

 

In the main game (MiniGame) i create these tile objects and add them to a grid group .... all by calling the function respawnGrid();

 

2 Weird behaviors...

1- My code is supposed to be the same, but the grid now has additional spacing between them ( attached children are not positioned same as sprites ? )

2- If you click somewhere in the gaps after first column and before or after second row, it still behaves as if i am clicking a sprite (check the debug text) and if there is a red rectangle nearby, it might disappear... and also i click on some red tiles and they won't disappear. 

 

This is frustrating, is there some invisible sprites or something i must be missing ?

 

I Appreciate help.

Thanks.

[CtlAltDel]

children are always positioned relative to their parent, so you have to take that into account.

[metalNumb]

i understand that.

But how to position them at the same location as their parent ?