Jump to content

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


christian.tucker
 Share

Recommended Posts

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;
};


Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 4 months later...

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.

Link to comment
Share on other sites

  • 3 months later...
 

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

Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

  • 4 months later...
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.

Link to comment
Share on other sites

  • 8 months later...
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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 11 months later...

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