can I make a html form-like page

[scofieldly]

hi guys, I'm newbie for phaser framework, currently I have a problem that:

I want to make a setting page in the game, when I click the setting button, it will popup a setup page (have some option to choose, just like a html form). after setting done, close the popup setting page and continue the game.

But I have no idea how to implement this feature, is anyone have some idea or suggestion, (I don't know how to use original html dom in phaser) many thanks.

[drhayes]

I'm going to assume that you display the form in HTML. You should definitely read up on how to handle HTML forms from a tutorial site somewhere else.

One thing you could do is create the form in your index.html file but give it a "hidden" attribute to hide it. Give it an ID as well (e.g. <form id="my-settings-form" hidden>). When the player clicks the setting button in the Phaser game (e.g. Phaser.Button.onInputDown.add(this.handleClick, this);) you can then show the settings form (e.g. document.getElementById('my-settings-form').hidden = false;). You could attach a click handler to the submit button of the form (read those tutorials!) and set your data based on the "value" attributes of the input elements you picked.

[scofieldly]

4 hours ago, drhayes said:

I'm going to assume that you display the form in HTML. You should definitely read up on how to handle HTML forms from a tutorial site somewhere else.

One thing you could do is create the form in your index.html file but give it a "hidden" attribute to hide it. Give it an ID as well (e.g. <form id="my-settings-form" hidden>). When the player clicks the setting button in the Phaser game (e.g. Phaser.Button.onInputDown.add(this.handleClick, this);) you can then show the settings form (e.g. document.getElementById('my-settings-form').hidden = false;). You could attach a click handler to the submit button of the form (read those tutorials!) and set your data based on the "value" attributes of the input elements you picked.

hi drhayes, 

thanks for your reply,

do you mean I should create a html form out of the PHASER generated canvas, and use the button in the game to trigger display and input the form and post. I think is should be ok.

but is there any idea that I can make it in the game canvas. because after I submit the form ,it should apply to the game without refresh page, I'm not sure how to communicate between out part and game canvas, thanks.

[rgk]

I use HTML to submit a form, and warning this could be an issue if you want to go full screen. But what you can do is use https://github.com/orange-games/phaser-input and buttons etc... and submit specific data when someone clicks a save button. You don't need an actual form when its within the canvas, just update the database with AJAX.

[drhayes]

Yeah, I meant display an HTML form -- not display it on the canvas. When you say "not sure how to communicate": values the user sets in the form are read by your code. Your code can then set variables in the Phaser game, or globally, or anywhere you like.

@rgk is right. Displaying the form on the canvas is a good way to go if you want to preserve the ability to go full-screen, or on mobile.