Text input? (Text box/Input field), How?

[christian.tucker]

I've been aimlessly flopping through the documentation and stirring through google and a few other development realted websites trying to figure out how to properly process input with phaser. I don't have any previous HTML/CSS/JavaScript experience other then the bits I've learned from starting with Phaser yesterday. After writing a basic combat system, and a click to walk system I had decided it was time to start working on the multiplayer networking. (Gotta start early, you know.) and I managed to get everything working properly using Node.js and Socket.io, it was very simple. 

 

Sending dummy data is cool and all, and it definately allows for testing, but it's not exactly what I need. I'm trying to figure out how to create a basic text-field for a user to input a name inside the game, this would also be used inside of the game as a text-box for the chat system I want to implement. Coming from Unity3D where all of this was done for me I guess I got a little spoiled. I understand the concepts behind how it works, but I'm not exactly sure of the "Right way" to do it in HTML5.

 

Can somebody link me to a tutorial explaining how to use an input-field in HTML5 that people on mobile and desktop alike will be able to use? I had an idea for a custom implementation but the more I thought about it, It probably wouldn't work on mobile devices.

 

Please keep in mind that I don't have any HTML/CSS experience beyond the very, very basic markup structure. I know how to set backgrounds, basic x/y positioning, and what a div is, but other then that I don't have ground to stand on.

 

This is a whole new world for me, and the lack of information available seems very real.

 

... Either that or my googling skills absolutely suck. 

 

 

----

 

I created a basic textfield using phaser, it onyl supports A-Z and backspace right now, and you have to click on it to select/deselect, it's good enough for testing, I'll work on it and try to make a proper version and release it later.

 

var bgSprite;

var textData;

var myText;


var selected;


var length;


function TextField(x, y, length, sprite) {

    this.length = length;

    this.bgSprite = game.add.sprite(x, y, sprite);

    this.bgSprite.inputEnabled = true;

    this.textData = "";

    this.myText = game.add.text(x + 10, y + 5, 'test');

    this.myText.fontSize = 16;

    this.myText.fill = '#fff';

    this.selected = false;

    game.input.keyboard.addCallbacks(this, null, this.keyPress, null);


    this.bgSprite.events.onInputDown.add(this.selector, this);

}


TextField.prototype.keyPress = function(data) {


    if(this.selected) {

        switch(data.keyCode) {

            case 8:

                this.textData = this.textData.substring(0, this.textData.length - 1);

                this.myText.text = this.textData;

                break;

            default:

                if ((this.textData.length + 1) <= this.length) {

                    var char = String.fromCharCode(data.keyCode).toString();

                    if (char.length > 0) {

                        this.textData += char;

                        this.myText.text = this.textData;

                    }

                }

                break;

        }

    }

};


TextField.prototype.selector = function() {

    this.selected = !this.selected;

};

[horkoda]

You basically have two options:

1. use DOM for forms and position them on top of the canvas, or
2. use a graphical canvas library that will render & handle the input fields

The first option is by far the most common.

[trueicecold]

Just a note: going with the first option will not work with CocoonJS's Canvas+.

[christian.tucker]

You basically have two options:

1. use DOM for forms and position them on top of the canvas, or
2. use a graphical canvas library that will render & handle the input fields

The first option is by far the most common.

 

Would option #1 work for game portals, such a kongregate, etc? 

[horkoda]

Yes, there are HTML5 games up there that use option #1, like this one.

 

You will probably have to make sure your GUI doesn't overlap with the kongregate site. So I would stay away from 

position: fixed;

in CSS.

[christian.tucker]

Yes, there are HTML5 games up there that use option #1, like this one.

 

You will probably have to make sure your GUI doesn't overlap with the kongregate site. So I would stay away from 

position: fixed;

in CSS.

 

I'm a little confused on drawing this over the canvas, I've figured out how to draw around it, but not on-top(on?) it. 

[horkoda]

Canvas is just another HTML element like div, span, input, img, a, etc.

Simply position an input element over the canvas element by using relative/absolute offsets. Set the z-index if needed.

 

Since you say you have no prior experience with web development this is best explained by going through tutorials which teach the basics of HTML, CSS, JS and their interaction together. The site I've linked to is an excellent beginner's resource. But after you learn the basics, seek knowledge elsewhere.

 

Does this mean using option #2 to implement input text box will save you from learning the basics of web development? Maybe.

[christian.tucker]

Canvas is just another HTML element like div, span, input, img, a, etc.

Simply position an input element over the canvas element by using relative/absolute offsets. Set the z-index if needed.

 

Since you say you have no prior experience with web development this is best explained by going through tutorials which teach the basics of HTML, CSS, JS and their interaction together. The site I've linked to is an excellent beginner's resource. But after you learn the basics, seek knowledge elsewhere.

 

Does this mean using option #2 to implement input text box will save you from learning the basics of web development? Maybe.

 

Doing this with a fixed(absolute) position is simple, however it won't draw when using relative, which is required for re-sizable games, such as mine. 

[efusien]

You can have a hidden input text field (DOM), trigger a click on it to pop the keyboard, and listen for user key press events.

Then display the user inputs right in your canvas, in a "fake text field".

 

The bad thing is you have to manage the keyboard display and user behavior (switch to portrait/landscape mode, etc) over multiple devices (IOS, Android, etc).

UX job. Time consuming.

[Senthil_SKR]

 

    Text1.inputEnabled = true;
    Text1.events.onInputDown.add(OneDeer, this, 2, 1, 0);
    function OneDeer() {
            if(genVal=="Deer"){
                levelOneRoundOneEnd();
                levelCompleteSound.play();
                Text1.stroke = '#277309';
                Text1.strokeThickness = 5;                
                createLevelRoundTwo();        
                score = score + 10;
                scoreText.setText("Score: " + score);            
                game.time.events.remove(timer);
            }
            else{
                wrongSound.play();                
                Text1.stroke = '#A83816';
                Text1.strokeThickness = 5;            
            }
    }

 

 

    Text2.inputEnabled = true;
    Text2.events.onInputDown.add(OneBear, this, 2, 1, 0);
    function OneBear() {
            if(genVal=="Bear"){
                levelOneRoundOneEnd();
                levelCompleteSound.play();
                Text2.stroke = '#277309';
                Text2.strokeThickness = 5;                
                createLevelRoundTwo();        
                score = score + 10;
                scoreText.setText("Score: " + score);            
                game.time.events.remove(timer);
            }
            else{
                wrongSound.play();                
                Text2.stroke = '#A83816';
                Text2.strokeThickness = 5;            
            }
    }

/****************/

This is my actual code, Im having the different events of Text1, Text2............. Text10. What's my issue is, If im selecting wrong button wrong text is glows, this is works only by 1st wrong click, the 2nd wrong click was not glows? can anyone help me...

[Softmixt]

Phaser Input Some description here about how awesome this Phaser Input library is, because it works on Canvas AND WebGL. Oh did I mention mobile to? no? Well it supports mobile.. Key features: Works on mobile and Desktop Included TypeScript support Also runs under WebGL renderer Pure Phaser implementation Easy configurable Production hardened

https://github.com/orange-games/phaser-input

[malcolm]

On 18/8/2016 at 4:20 PM, Softmixt said:

Phaser Input Some description here about how awesome this Phaser Input library is, because it works on Canvas AND WebGL. Oh did I mention mobile to? no? Well it supports mobile.. Key features: Works on mobile and Desktop Included TypeScript support Also runs under WebGL renderer Pure Phaser implementation Easy configurable Production hardened

https://github.com/orange-games/phaser-input

This is good for password/email/username only. If you want to create chat game, that plugin input slow down typing after few messages you create. Not worth to try that I spend one day to profile whats going on in my game.

[Teena_m]

On 8/18/2016 at 8:50 PM, Softmixt said:

Phaser Input Some description here about how awesome this Phaser Input library is, because it works on Canvas AND WebGL. Oh did I mention mobile to? no? Well it supports mobile.. Key features: Works on mobile and Desktop Included TypeScript support Also runs under WebGL renderer Pure Phaser implementation Easy configurable Production hardened

https://github.com/orange-games/phaser-input

Hello, 

I am using this phaser input plugin in my game, but it is not working on mobile devices/tablets? What could be be the problem?

Please help me out.

 

Thank You.

[Teena_m]

On 8/18/2016 at 8:50 PM, Softmixt said:

Phaser Input Some description here about how awesome this Phaser Input library is, because it works on Canvas AND WebGL. Oh did I mention mobile to? no? Well it supports mobile.. Key features: Works on mobile and Desktop Included TypeScript support Also runs under WebGL renderer Pure Phaser implementation Easy configurable Production hardened

https://github.com/orange-games/phaser-input

Hello, 

I am using this phaser input plugin in my game, but it is not working on mobile devices/tablets? What could be be the problem?

Please help me out.

 

Thank You.

[farhan]

It is working on latest IOS devices but not android nor older ios like ios 8 or 9 for whatever reason.

 

Update: It seems that it works great on Phaser 2.6.2, for some reason Phaser 2.11.0 doesn't work