Fenopiù

How to render a HTML page inside Phaser?

Recommended Posts

Good morning guys!

 

I've to load a HTML page (rules, instructions, settings, ecc...) inside my Phaser game, how can I reach this goal?

Can I control that page with Phaser buttons?

Can I render some Phaser button inside this HTML to manage the settings?

 

I need that is a HTML or PHP page to be reachable  and visible even outside the game.

Share this post


Link to post
Share on other sites

If it is in the same page as your game then you can display it in front of the game canvas via css. You can show / hide via the display property, and place it in front of the canvas via position and z-depth properties.

Share this post


Link to post
Share on other sites

Thanks for the answer @alex_h.

No, it's in another page.

I've parsed the page as a string and substringed it in a variable.

Now, while I render the variable with

mydiv.innerHTML = mystring;

it render it full page.

I've tested cutting my HTML file to just the div that I want and render the full page with:

mydiv.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"" + myhtmlpage + "\" ></object>";

it render mydiv size.

How can I have the same result in the string version too?

 

Update:

The problem is that with the first method all divs in mystring have width 100% and height 100% instead of width and height of parent div (mydiv).

Edited by Fenopiù
Update info

Share this post


Link to post
Share on other sites
16 hours ago, Fenopiù said:

The problem is that with the first method all divs in mystring have width 100% and height 100% instead of width and height of parent div (mydiv).

What you are trying to do sounds very weird to me, but anyway, with width/height 100% that refers to 100% of the containing element. So as long as your parent div has fixed width and height then you shouldn't have a problem.

Share this post


Link to post
Share on other sites
On 2/3/2018 at 8:16 AM, alex_h said:

What you are trying to do sounds very weird to me, but anyway, with width/height 100% that refers to 100% of the containing element. So as long as your parent div has fixed width and height then you shouldn't have a problem.

The problem was that parent div has fixed width and height but the child div do not inherited them and had 100% innerwindow width and height without any reason.

Solved with a CSS rule... but in any tutorial I've saw says it is unnecessary because there it should be implicit inheritance.

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.