Input form

[Zenext]

Hi everyone!

 

How can i make an imput box, so i could type something in and store the data from it?

 

Thanks!

[j0hnskot]

You mean a pop-up input box? Check the prompt box here : http://www.w3schools.com/js/js_popup.asp

[InsaneHero]

I rolled my own recently... note: it won't work on mobile and I didn't get around to finishing it so the keyboard input is really basic!

If you decide to use this and end up extending it, please share

/** * Created by Pete on 17/09/2014. * * TextEdit * * A Class to create a Text Edit box inside Phaser. * Will not operate correctly on Mobile (virtual keyboard doesn't pop up). * * A callback is passed to the create function to obtain the value entered.  It is triggered whenever a box loses focus. * A box will lose focus if another box is clicked, or if ENTER is pressed. * *   var t1 = new TextEdit(100, 100, 'type here'); *   t1.create(function(value) { v1 = value; console.log("v1 =", v1); }); * */function TextEdit(x, y, string, params){    var defaults =    {        width:120, height:30, radius:6,        lineWidth:1, lineColor:0xffffff, lineAlpha:1, focusLineColor:0xffff00,        fillColor:0x7f7f7f, fillAlpha:1,        font:"20px Courier", textColor:"#ffffff", textAlign:"left", textMargin:2, textOffset:2    };    // merge the user specified parameters with the defaults    for(var attrname in params)    {        if (params.hasOwnProperty(attrname))            defaults[attrname] = params[attrname];    }    // explicit parameters    this.x = x;    this.y = y;    this.string = string;    // rounded rect defaults    this.width = defaults.width;    this.height = defaults.height;    this.radius = defaults.radius;    // drawing style defaults    this.lineWidth = defaults.lineWidth;    this.lineColor = defaults.lineColor;    this.lineAlpha = defaults.lineAlpha;    this.focusLineColor = defaults.focusLineColor;    this.fillColor = defaults.fillColor;    this.fillAlpha = defaults.fillAlpha;    // text defaults    this.font = defaults.font;    this.textColor = defaults.textColor;    this.textAlign = defaults.textAlign;    this.textMargin = defaults.textMargin;    this.textOffset = defaults.textOffset;}TextEdit.prototype.create = function(onComplete){    // callback parameter - called when the TextEdit box loses focus (ENTER press, or click on another box) with the current text string    this.onComplete = onComplete;    // create the background    this.bgPanel = new Phaser.Graphics(game, 0, 0);    this.bgPanel.lineStyle(this.lineWidth, this.lineColor, this.lineAlpha);    this.bgPanel.beginFill(this.fillColor, this.fillAlpha);    this.bgPanel.drawRoundedRect(this.x, this.y, this.width, this.height, this.radius);    this.sprite = game.add.sprite(0, 0, null);    this.sprite.hitArea = new Phaser.Rectangle(this.x, this.y, this.width, this.height);    this.sprite.addChild(this.bgPanel);    // create the focused background    this.focPanel = new Phaser.Graphics(game, 0, 0);    this.focPanel.lineStyle(this.lineWidth + 1, this.focusLineColor, this.lineAlpha);    this.focPanel.beginFill(this.fillColor, this.fillAlpha);    this.focPanel.drawRoundedRect(this.x, this.y, this.width, this.height, this.radius);    // 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(TextEdit.clickBox, this);};TextEdit.focused = null;         // singleton... which TextEdit box has focus (used to turn off the highlight when it loses focus)TextEdit.clickBox = function(){    // ignore clicks on the already focused box... it might be desirous to permit user to force the callback in some circumstances    if (TextEdit.focused != this)    {        // lose focus on last selected box        if (TextEdit.focused) TextEdit.focused.unfocus();        // add unfocus handler to this box        this.unfocus = TextEdit.unfocusSprite;        // remember which box has focus        TextEdit.focused = this;        game.input.keyboard.addCallbacks(TextEdit.focused, null, null, TextEdit.keyPressed);        var backspace = game.input.keyboard.addKey(Phaser.Keyboard.BACKSPACE);        backspace.onDown.add(TextEdit.deletePressed);        var enter = game.input.keyboard.addKey(Phaser.Keyboard.ENTER);        enter.onDown.add(TextEdit.enterPressed);        // change the Graphic element to show that this box is focused        this.sprite.removeChild(this.bgPanel);        this.sprite.addChild(this.focPanel);    }};TextEdit.unfocusSprite = function(){    // change the Graphic element to remove the focus highlight    this.sprite.removeChild(this.focPanel);    this.sprite.addChild(this.bgPanel);    this.onComplete(this.text.text);};TextEdit.keyPressed = function(char){    var t = TextEdit.focused.text.text;    if (TextEdit.focused)    {        t += char;        TextEdit.focused.text.text = t;    }};TextEdit.deletePressed = function(){    var t = TextEdit.focused.text.text;    if (t.length > 0)    {        t = t.substr(0, t.length - 1);        TextEdit.focused.text.text = t;    }};TextEdit.enterPressed = function(){    // lose focus on last selected box    if (TextEdit.focused)    {        TextEdit.focused.unfocus();        TextEdit.focused = null;    }};

[InsaneHero]

I just remembered, this won't let you delete back to the first character in the edit window because of an issue with PIXI/Phaser.  I patched my copy locally but didn't have time to verify the patch was safe (so the fix hasn't gone into git yet).

My untested change is detailed here.

[Seregras]

 

I rolled my own recently... note: it won't work on mobile and I didn't get around to finishing it so the keyboard input is really basic!

If you decide to use this and end up extending it, please share

/** * Created by Pete on 17/09/2014. * * TextEdit * * A Class to create a Text Edit box inside Phaser. * Will not operate correctly on Mobile (virtual keyboard doesn't pop up). * * A callback is passed to the create function to obtain the value entered.  It is triggered whenever a box loses focus. * A box will lose focus if another box is clicked, or if ENTER is pressed. * *   var t1 = new TextEdit(100, 100, 'type here'); *   t1.create(function(value) { v1 = value; console.log("v1 =", v1); }); * */function TextEdit(x, y, string, params){    var defaults =    {        width:120, height:30, radius:6,        lineWidth:1, lineColor:0xffffff, lineAlpha:1, focusLineColor:0xffff00,        fillColor:0x7f7f7f, fillAlpha:1,        font:"20px Courier", textColor:"#ffffff", textAlign:"left", textMargin:2, textOffset:2    };    // merge the user specified parameters with the defaults    for(var attrname in params)    {        if (params.hasOwnProperty(attrname))            defaults[attrname] = params[attrname];    }    // explicit parameters    this.x = x;    this.y = y;    this.string = string;    // rounded rect defaults    this.width = defaults.width;    this.height = defaults.height;    this.radius = defaults.radius;    // drawing style defaults    this.lineWidth = defaults.lineWidth;    this.lineColor = defaults.lineColor;    this.lineAlpha = defaults.lineAlpha;    this.focusLineColor = defaults.focusLineColor;    this.fillColor = defaults.fillColor;    this.fillAlpha = defaults.fillAlpha;    // text defaults    this.font = defaults.font;    this.textColor = defaults.textColor;    this.textAlign = defaults.textAlign;    this.textMargin = defaults.textMargin;    this.textOffset = defaults.textOffset;}TextEdit.prototype.create = function(onComplete){    // callback parameter - called when the TextEdit box loses focus (ENTER press, or click on another box) with the current text string    this.onComplete = onComplete;    // create the background    this.bgPanel = new Phaser.Graphics(game, 0, 0);    this.bgPanel.lineStyle(this.lineWidth, this.lineColor, this.lineAlpha);    this.bgPanel.beginFill(this.fillColor, this.fillAlpha);    this.bgPanel.drawRoundedRect(this.x, this.y, this.width, this.height, this.radius);    this.sprite = game.add.sprite(0, 0, null);    this.sprite.hitArea = new Phaser.Rectangle(this.x, this.y, this.width, this.height);    this.sprite.addChild(this.bgPanel);    // create the focused background    this.focPanel = new Phaser.Graphics(game, 0, 0);    this.focPanel.lineStyle(this.lineWidth + 1, this.focusLineColor, this.lineAlpha);    this.focPanel.beginFill(this.fillColor, this.fillAlpha);    this.focPanel.drawRoundedRect(this.x, this.y, this.width, this.height, this.radius);    // 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(TextEdit.clickBox, this);};TextEdit.focused = null;         // singleton... which TextEdit box has focus (used to turn off the highlight when it loses focus)TextEdit.clickBox = function(){    // ignore clicks on the already focused box... it might be desirous to permit user to force the callback in some circumstances    if (TextEdit.focused != this)    {        // lose focus on last selected box        if (TextEdit.focused) TextEdit.focused.unfocus();        // add unfocus handler to this box        this.unfocus = TextEdit.unfocusSprite;        // remember which box has focus        TextEdit.focused = this;        game.input.keyboard.addCallbacks(TextEdit.focused, null, null, TextEdit.keyPressed);        var backspace = game.input.keyboard.addKey(Phaser.Keyboard.BACKSPACE);        backspace.onDown.add(TextEdit.deletePressed);        var enter = game.input.keyboard.addKey(Phaser.Keyboard.ENTER);        enter.onDown.add(TextEdit.enterPressed);        // change the Graphic element to show that this box is focused        this.sprite.removeChild(this.bgPanel);        this.sprite.addChild(this.focPanel);    }};TextEdit.unfocusSprite = function(){    // change the Graphic element to remove the focus highlight    this.sprite.removeChild(this.focPanel);    this.sprite.addChild(this.bgPanel);    this.onComplete(this.text.text);};TextEdit.keyPressed = function(char){    var t = TextEdit.focused.text.text;    if (TextEdit.focused)    {        t += char;        TextEdit.focused.text.text = t;    }};TextEdit.deletePressed = function(){    var t = TextEdit.focused.text.text;    if (t.length > 0)    {        t = t.substr(0, t.length - 1);        TextEdit.focused.text.text = t;    }};TextEdit.enterPressed = function(){    // lose focus on last selected box    if (TextEdit.focused)    {        TextEdit.focused.unfocus();        TextEdit.focused = null;    }};

I just registered to the forum to say thank you, I have been looking for something like this for weeks!!