Sign in to follow this  
scofieldly

can I make a html form-like page

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.