do Phaser.Graphics receive or absorb input events?

[InsaneHero]

I'm trying to make a textEdit box to sit in a Phaser screen without relying on any outside libraries.

I'm using a Phaser.Graphics object to create a rounded rect, adding that to an empty Phaser.Sprite, and then enabling input for it.

It doesn't generate any errors but it doesn't fire off any events or change the pointer to the hand when hovered.

I've disabled the text part already, in case that was absorbing the input.

So, I'm wondering if Sprites based on Phaser.Graphic objects are unable to receive input, or if the Graphic is absorbing the events so they don't reach the Sprite?

 

Here's the code:

    function create()    {        if (!game.device.desktop){ game.input.onDown.add(gofull, this); } //go full-screen on mobile devices        var t1 = new TextEdit('txt1', 100, 100, 'type here');        var t2 = new TextEdit('txt2', 100, 140, 'abc');    }    function TextEdit(key, x, y, string)    {        this.key = key;        this.x = x;        this.y = y;        this.string = string;        // rounded rect defaults        this.width = 120;        this.height = 30;        this.radius = 6;        // drawing style defaults        this.lineWidth = 1;        this.color = 0xffffff;        this.fillColor = 0x7f7f7f;        this.lineAlpha = 1.0;        this.fillAlpha = 1.0;        // text defaults        this.font = "20px Courier";        this.textColor = "#ffffff";        this.textAlign = "left";        this.textMargin = 2;        this.textOffset = 2;        // create the background and add it to a Phaser.Sprite        this.graphics = new Phaser.Graphics(game, 0, 0);        this.graphics.lineStyle(this.lineWidth, this.color, this.lineAlpha);        this.graphics.beginFill(this.fillColor, this.fillAlpha);        this.graphics.drawRoundedRect(this.x, this.y, this.width, this.height, this.radius);        this.sprite = game.add.sprite(0, 0, null);        this.sprite.addChild(this.graphics);        // add the text//        this.text = game.add.text(this.x + this.textMargin, this.y + this.textOffset, this.string,//                {//                    font: this.font,//                    fill: this.textColor,//                    align: this.textAlign//                });        // events        this.sprite.inputEnabled = true;        this.sprite.input.useHandCursor = true;        this.sprite.events.onInputDown.add(clickBox, this);    }    function clickBox(sprite, pointer)    {        this.graphics.lineStyle(this.lineWidth, 0xff0000, this.lineAlpha);    }

[rich]

Hmm interesting, does the sprite have any dimensions? graphics objects have no input handlers, or ability to do so, so it isn't stealing the event. I reckon it just doesn't know what size it is.

Also not sure if you care or not, but you can't create text input boxes on mobile without a dom element.

[alex_h]

Phaser.Graphics just extends Pixi.Graphics, right? I've found that in order to make a Pixi.Graphics DisplayObject interactive I had to give it a hitArea property that is a rectangle defining the required interactive area, then set interactive to true, and also buttonMode if a hand cursor is required.

[rich]

Yeah, I think in this case as it's being used as a texture for a Sprite it makes more sense for the Sprite.hitArea property to be set instead - to match the size of the Graphics bounds perhaps.

[InsaneHero]

Ah ok, so I should just set the hitArea, excellent thanks.  (EDIT: confirmed, that worked fine)

I'm not bothered about mobile for this particular use case but that's certainly worth remembering... I'm guessing the restriction on mobile is getting the virtual keyboard to pop up?

[rich]

Yup, exactly that. Will only happen when you give a DOM element focus. But if you don't need mobile then don't even worry about it.