owen Posted May 19, 2015 Share Posted May 19, 2015 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? ThanksOwen Link to comment Share on other sites More sharing options...
Nikow Posted May 20, 2015 Share Posted May 20, 2015 i'm looking for this too... Link to comment Share on other sites More sharing options...
Code Looper Posted May 20, 2015 Share Posted May 20, 2015 I had the same problem, to the point that I had to put that part of my project on the back burner. Link to comment Share on other sites More sharing options...
owen Posted May 20, 2015 Author Share Posted May 20, 2015 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. Link to comment Share on other sites More sharing options...
end3r Posted May 20, 2015 Share Posted May 20, 2015 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... Link to comment Share on other sites More sharing options...
skaplun Posted May 20, 2015 Share Posted May 20, 2015 Why not open modal (like vex for example) ? Link to comment Share on other sites More sharing options...
owen Posted May 20, 2015 Author Share Posted May 20, 2015 Why not open modal (like vex for example) ? What is that please? Got a link for it? Link to comment Share on other sites More sharing options...
owen Posted May 20, 2015 Author Share Posted May 20, 2015 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. Link to comment Share on other sites More sharing options...
grumpygamer Posted May 20, 2015 Share Posted May 20, 2015 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 owen 1 Link to comment Share on other sites More sharing options...
venomdev Posted May 20, 2015 Share Posted May 20, 2015 Can you layer a HTML input element over the canvas? Link to comment Share on other sites More sharing options...
drhayes Posted May 20, 2015 Share Posted May 20, 2015 If you could post a minimal code example we can help you figure out what's up. Link to comment Share on other sites More sharing options...
owen Posted May 22, 2015 Author Share Posted May 22, 2015 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 Link to comment Share on other sites More sharing options...
owen Posted May 22, 2015 Author Share Posted May 22, 2015 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. Link to comment Share on other sites More sharing options...
grumpygamer Posted May 22, 2015 Share Posted May 22, 2015 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? OwenNope, 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. Link to comment Share on other sites More sharing options...
alex_h Posted May 22, 2015 Share Posted May 22, 2015 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. owen 1 Link to comment Share on other sites More sharing options...
claycr4ne Posted May 22, 2015 Share Posted May 22, 2015 I had this same problem and ended up to create a keyboard of my own. It looks like this: POISTA = Remove characterVÄ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. owen and Befive.Info 2 Link to comment Share on other sites More sharing options...
super_frog Posted May 22, 2015 Share Posted May 22, 2015 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. Link to comment Share on other sites More sharing options...
spencerTL Posted May 22, 2015 Share Posted May 22, 2015 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? Link to comment Share on other sites More sharing options...
owen Posted May 22, 2015 Author Share Posted May 22, 2015 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. Link to comment Share on other sites More sharing options...
benlooi Posted March 18, 2016 Share Posted March 18, 2016 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. Link to comment Share on other sites More sharing options...
Softmixt Posted August 18, 2016 Share Posted August 18, 2016 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 Befive.Info and brendaespadas 2 Link to comment Share on other sites More sharing options...
vastron Posted February 16, 2018 Share Posted February 16, 2018 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. Link to comment Share on other sites More sharing options...
alessa Posted June 22, 2018 Share Posted June 22, 2018 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? Link to comment Share on other sites More sharing options...
Davaaron Posted September 10, 2018 Share Posted September 10, 2018 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. Link to comment Share on other sites More sharing options...
farhan Posted September 15, 2018 Share Posted September 15, 2018 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 Link to comment Share on other sites More sharing options...
Recommended Posts