Mattias Posted November 20, 2013 Share Posted November 20, 2013 How can I create a basic input box which people can input text in?And then later I want to fetch the data from those inputs with a regular button. Link to comment Share on other sites More sharing options...
rich Posted November 20, 2013 Share Posted November 20, 2013 I'd suggest you just use a normal web form (textinput), then you can be sure the virtual keyboard will appear and you can style it with CSS. Link to comment Share on other sites More sharing options...
Cudabear Posted November 20, 2013 Share Posted November 20, 2013 To expand on what Rich said, you can float the form over the canvas element and style it so it looks as though it's part of the game. I'd suggest using a JQuery dialog, if JQuery is within the scope of your project. Link to comment Share on other sites More sharing options...
Mattias Posted November 21, 2013 Author Share Posted November 21, 2013 Oh, so I can add normal html elements into the game? Is there an example on how to do this?The places these will go will be when you enter your name to save it to highscore, and the other state it will be used in is a "share" screen. Name + email. I'll experiment some and see how it goes. Edit: Just saw Cudabear's answer. I will most likely do that. Right now trying to find the scaling variable to set the correct size and position for the input, since I have a input background in the game already. Link to comment Share on other sites More sharing options...
Mattias Posted November 21, 2013 Author Share Posted November 21, 2013 I tried adding an input on top of the canvas with jquery, but no matter which z-index I use I can't get it on top of the canvas.Is there something more I need to do? I use position absolute to position it. edit: now for some reason it works, at least in chromium. Maybe I had some cache causing it somewhere Link to comment Share on other sites More sharing options...
rich Posted November 21, 2013 Share Posted November 21, 2013 Just to say that game.stage.offset.x/y contain the CSS calculated bounds of the canvas and are refreshed every 2500ms, so pretty safe to use re: positioning of DOM elements offset from the canvas coordinates. Link to comment Share on other sites More sharing options...
Mattias Posted November 22, 2013 Author Share Posted November 22, 2013 Thanks for the help, I managed to get the scale of the scene from the Input class and now I just need to keep updating the input positions in case the screen changes.I also got the margin-left from the canvas style since I append the inputs to body. and then I use that leftOffset to get it to the correct position.I think I got this to work, haven't actually tried fetching data from them yet but I don't think that would be a problem at all Link to comment Share on other sites More sharing options...
albertofortes Posted January 12, 2015 Share Posted January 12, 2015 Obviously Rich's answer is the best solution, but alternatively if you need a form in the own game you could make a "fake form".In a recent project I needed a form to match an user code inside a state of the game and we can't use a HTML form so I made this fake form: https://github.com/albertofortes/Phaser-fake-formMaybe this helps you Link to comment Share on other sites More sharing options...
Recommended Posts