Jump to content

Can't see html elements when Phaser Fullscreen is used


weratius
 Share

Recommended Posts

Hello guys.

I have some interfaces in my game, for example: a clan interface. There is a list of users, which is made via html (<ul>).

When I do smth like this:

game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;

game.scale.startFullScreen(false);

I can't see html at all, how can I solve such a problem?

Thank you in advance!!!

Link to comment
Share on other sites

Hey there,

Phaser uses the browser's build-in fullscreen API that will take any given HTML element, and make it stretch to your window's size. By default, Phaser passes the canvas element to make it full screen.

What you want to do is change this fullscreen target (http://phaser.io/docs/2.3.0/Phaser.ScaleManager.html#fullScreenTarget) and pass the Element that contains both your UL and your canvas like so:

 

//html
<div id='wrapper'>
  <ul id='userList'>
    <li>user1</li>
    <li>user2</li>
  </ul>
  <canvas id='game'>
</div>


//js
<script type="text/javascript">
game.scale.fullScreenTarget = document.getElementById('wrapper')
</script>

 

Link to comment
Share on other sites

23 hours ago, Str1ngS said:

Hey there,

Phaser uses the browser's build-in fullscreen API that will take any given HTML element, and make it stretch to your window's size. By default, Phaser passes the canvas element to make it full screen.

What you want to do is change this fullscreen target (http://phaser.io/docs/2.3.0/Phaser.ScaleManager.html#fullScreenTarget) and pass the Element that contains both your UL and your canvas like so:

 


//html
<div id='wrapper'>
  <ul id='userList'>
    <li>user1</li>
    <li>user2</li>
  </ul>
  <canvas id='game'>
</div>


//js
<script type="text/javascript">
game.scale.fullScreenTarget = document.getElementById('wrapper')
</script>

 

Thank you)

Link to comment
Share on other sites

On 26.02.2016 at 3:56 PM, Str1ngS said:

Hey there,

Phaser uses the browser's build-in fullscreen API that will take any given HTML element, and make it stretch to your window's size. By default, Phaser passes the canvas element to make it full screen.

What you want to do is change this fullscreen target (http://phaser.io/docs/2.3.0/Phaser.ScaleManager.html#fullScreenTarget) and pass the Element that contains both your UL and your canvas like so:

 


//html
<div id='wrapper'>
  <ul id='userList'>
    <li>user1</li>
    <li>user2</li>
  </ul>
  <canvas id='game'>
</div>


//js
<script type="text/javascript">
game.scale.fullScreenTarget = document.getElementById('wrapper')
</script>

 

how can I detect that the ESC was pressed when I am in fullscreen mode?
I'm trying to detect the event via jquery 'keydown', but I even can't get the code of pressed button. I don't have such a problem when I'm in normal screen mode. I think that the browser just binds this button to leave fullscreen mode.

How can I solve this problem?
Thank you in advance

Link to comment
Share on other sites

1 hour ago, weratius said:

how can I detect that the ESC was pressed when I am in fullscreen mode?
I'm trying to detect the event via jquery 'keydown', but I even can't get the code of pressed button. I don't have such a problem when I'm in normal screen mode. I think that the browser just binds this button to leave fullscreen mode.

How can I solve this problem?
Thank you in advance

I don't think it's possible to prevent ESC from closing fullscreen. Iirc browsers prevent that keypress (and probably F11) from being halted by Event.preventDefault() so that malicious programmers/advertisers can't prevent people from leaving fullscreen. FWIW if you want to try it I believe the keyCode for ESC is 27. It might work in some but not all browsers.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...