Jump to content

Input form


Zenext
 Share

Recommended Posts

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

  • 10 months later...

 

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!!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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