HTML text input within Phaser canvas

[owen]

Hi, this is really simple, I just want to include an HTML text input for my hi score entry page where the player can enter their name. I want the text input to appear right in the middle of my game canvas.  But I am having trouble positioning any HTML element in relation to the game canvas, or any items within the game div.  (I can't seem to even make the input appear on the top left corner of the game canvas).

 

Is there a simple example for displaying an html INPUT element within a Phaser game?  Or is there maybe a better way of grabbing text input within a Phaser game?

 

Any ideas?

 

 

Thanks

Owen

[Nikow]

i'm looking for this too...

[Code Looper]

I had the same problem, to the point that I had to put that part of my project on the back burner.

[owen]

Well I'm glad it's not just me!  Now just thinking of some possible ways around it.  How about these:

 

1. I could write my own text input.  This seems a lot of work for a simple feature and won't include all the mobile-friendly assistance built into HTML5/CSS3.  On the plus side it would be reusable in later projects and would integrate nicely within the framework.

 

OR

 

2. Make a separate HTML page outside of the game, which looks similar to the game canvas, but is not a canvas at all, just an HTML web form.  Redirect there when user gets a hi score.  Then go back to the game when they click submit.  This is possibly the easiest way.  The hard part is keeping the web form at the exact same size and position as the game div, to make it unnoticeable.

[end3r]

I had an ugly workaround for that - a prompt box. It looks and works like alert, but the player can input the text there:
 

var name = prompt("Please enter your name", "Anonymous");if(name) {    console.log("Hello "+name+", nice to meet you!");}

It's centered on the screen, is not a separate HTML that you'd have to handle yourself, but you can't control the position and look of it - it's a system thing.

 

I'd love to have a proper way of implementing an input too though...

[skaplun]

Why not open modal (like vex for example) ?

[owen]

Why not open modal (like vex for example) ?

 

What is that please?  Got a link for it?

[owen]

I had an ugly workaround for that - a prompt box. It looks and works like alert, but the player can input the text there:

 

var name = prompt("Please enter your name", "Anonymous");if(name) {    console.log("Hello "+name+", nice to meet you!");}

It's centered on the screen, is not a separate HTML that you'd have to handle yourself, but you can't control the position and look of it - it's a system thing.

 

I'd love to have a proper way of implementing an input too though...

 

Well JS prompt is certainly another option I hadn't considered.  The problem is the look and feel is so horribly different and you can't control the details of the input (eg. max length).  It could work as a temporary workaround though.  Thanks for the idea.

[grumpygamer]

hmm... I think I'd rather do it in the canvas itself.

Most of the job is already done for you too: 

http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input

[venomdev]

Can you layer a HTML input element over the canvas?

[drhayes]

If you could post a minimal code example we can help you figure out what's up.

[owen]

hmm... I think I'd rather do it in the canvas itself.

Most of the job is already done for you too: 

http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input

 

CanvasInput looks like a really good solution... nice and easy... in theory.

 

But I cannot get it to work. First it gave an error, not finding my canvas even though the ID was correct, then I found a workaround for that so it finds the canvas and now it seems to display the input beneath the canvas, not on top, so I cannot see it.

 

Have you managed to sucessfully use CanvasInput?  If so please can you share the code?

 

Owen

[owen]

Can you layer a HTML input element over the canvas?

 

In theory yes but I can't get a reference to the position of the canvas or position my HTML element in relation to it, so for example it sits in the middle of the canvas.

[grumpygamer]

CanvasInput looks like a really good solution... nice and easy... in theory.

 

But I cannot get it to work. First it gave an error, not finding my canvas even though the ID was correct, then I found a workaround for that so it finds the canvas and now it seems to display the input beneath the canvas, not on top, so I cannot see it.

 

Have you managed to sucessfully use CanvasInput?  If so please can you share the code?

 

Owen

Nope, never used it, but I'm porting other code over from other "plugins" to integrate their functionality into my project.

Usually you only need to fix scoping and how parameters are passed.

That plugin is not for phaser so I suppose you'll need to port it over too.

On the bright side all the logic of it is already done.

[alex_h]

One alternative approach is to cobble together your own on-screen keyboard and use that to allow the player to type characters into a normal (non-input) text field. It's potentially a bit long winded but it does avoid all the messing around with input fields which tends to be fairly problematic. If you are just wanting to enable entering names into a high score table then it doesn't need to be a fully featured keyboard either, just basic characters and backspace really.

[claycr4ne]

I had this same problem and ended up to create a keyboard of my own. It looks like this:

 

 

POISTA = Remove character
VÄLI = Space

 

By doing this it's very easy to input names and anything on any screen. In addition to that using keyboard is also allowed on PC.

 

By making your own keyboard like this you can also make it look the same as your game. 

[super_frog]

If you want to use html, you can do it by placing canvas element in a div and give that div position: relative and width same as the canvas element then, inside that div add another div (this will be your high score entry).

<div id="holder">    <div id="highscore">        highscore stuff    </div>    <div id="fake-canvas">fake canvas</div></div>

 

and css:

#holder { position: relative; width: 400px; }#highscore { position: absolute; width: 200px; height: 200px; padding: 5px; left: 25%; top: 25%; background: #DDD; }#fake-canvas { width: 400px; height: 400px; background: #CCC; }

This way you can also implement ads inside your game, sort of.

 

[spencerTL]

In regards to having an input box in the canvas, don't you hit the problem that on touch devices there is no way of triggering the keyboard to appear? If you're only targeting desktop no problem but I wasn't aware of any way to to overcome this on mobile without some sort of DOM input field. Or am I wrong?

[owen]

Thanks.

Now I am leaning toward the self-made on screen keyboard as per MarkPal's suggestion.  For the purpose of hi-score name entry it might just do the trick and I could make it look nice too.

[benlooi]

Using a modal seems like a good workaround.
CSS frameworks like Semantic UI, JQuery gives easy implementation of modals. A grayed-out transparent background, and input boxes that overlays the canvas element.

You can capture the input values and pass it back to Phaser.

If you are doing it on a mobile, I guess you can use Ionic Framework as a container for the Phaser div, and call the $ionicModal, and store the variable in $scope.  You can then use the device's native keyboard instead of making your own keyboard. 

In theory it seems to work....will give it a go and let you guys know the outcome.

 

UPDATE:  Ok, it works.

Added a "star" as a trigger, so when user clicks on the star, the modal pops up.

Put your Phaser script within the controller "gameCtrl". I'll put up a github repository soon.

When the close Modal button is clicked, it grabs the $scope.contact.name which is in the input referenced as ng-model="contact.name", then do a game.add.text(X,Y, $scope.contact.name, style) to your game.

 

 

 

 

[Softmixt]

I use this one : 

 

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

 

Features : 

works on Canvas AND WebGL 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

[vastron]

It is a great plugin but unfortunately it does not work on mobiles.

Edit!!!!!!!!!!!!! It does if you put <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, width=device-width" />
on your html file.

[alessa]

On 8/18/2016 at 5:23 PM, Softmixt said:

I use this one : 

 

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

 

Features : 

works on Canvas AND WebGL 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

 

Hey, can you please provide me some info on how you load it into the project? I managed to load it, but then I try `this.add.plugin(PhaserInput.Plugin);` and it gives an error `Uncaught reference Error: Phaser is not defined`.

EDIT: Solved, loaded the library before I was loading Phaser... I am indeed an idiot.

I am using @samme Brunch template for phaser 2 though, so that might be the issue?

[Davaaron]

Unfortunately, the plugin is not working for me tho (Android). But it works on iPhone 6.

The event KeyBoard.open and KeyBoard.close are triggered on android (i change a visible text), but no keyboard is popped up.

[farhan]

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

Works great with Phaser 2.6.2 but does not work right with Phaser CE 2.11.0

I believe whatever updates added to 2.11.0 broke the phaser-input plugin. I wish Phaser CE 2.11.0 has backward compatibility.

Speaking on Phaser CE 2.11.0 I found out that it defaulting the game to use Canvas instead of WebGL. Is there a reason to use Canvas as default?

Having Canvas as default option is just a bad idea because Canvas sucks on mobile devices. Which is why I change to 2.6.2 which it uses WebGL as the default option PLUS phaser-input works