owen

HTML text input within Phaser canvas

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

keyboard.png

 

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

 



56eb68d9c6c76_SimulatorScreenShot18Mar2056eb6914db177_SimulatorScreenShot18Mar2056eb6901ba808_SimulatorScreenShot18Mar20

 

 

Simulator Screen Shot 18 Mar 2016, 10.30.44 AM.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :D

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.