Can't see html elements when Phaser Fullscreen is used

[weratius]

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!!!

[Str1ngS]

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>

 

[weratius]

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)

[weratius]

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

[1-800-STAR-WARS]

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.