InsaneHero Posted September 17, 2014 Share Posted September 17, 2014 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 More sharing options...
rich Posted September 17, 2014 Share Posted September 17, 2014 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 More sharing options...
alex_h Posted September 17, 2014 Share Posted September 17, 2014 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 More sharing options...
rich Posted September 17, 2014 Share Posted September 17, 2014 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 1 Link to comment Share on other sites More sharing options...
InsaneHero Posted September 17, 2014 Author Share Posted September 17, 2014 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 More sharing options...
rich Posted September 17, 2014 Share Posted September 17, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts