Jump to content

do Phaser.Graphics receive or absorb input events?


InsaneHero
 Share

Recommended Posts

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

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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