How do I make my app run full screen on a tap?

Grimmy · April 28, 2021, 3:07pm

Thanks

Leonidas · April 28, 2021, 3:33pm

You can call the browser Fullscreen API, check here for how it works:

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Grimmy · April 28, 2021, 4:00pm

Thanks, so I just use
Element.requestFullscreen();
directly in PlayCanvas, or do I need to prepend something to to that line be able to access Element?

Leonidas · April 28, 2021, 4:10pm

I think for that to work it has to execute as a response to user input (clicking on a button, pressing a keyboard key etc.), check the examples on the MDN site:

yaustar · April 28, 2021, 4:20pm

Note that iOS Safari doesn’t have a full screen API.

We also have an API for fullscreen too that wraps around the browser API. https://developer.playcanvas.com/en/api/pc.GraphicsDevice.html#fullscreen

Leonidas · April 28, 2021, 4:22pm

I was under the impression that there was a motion to deprecate engine support for going fullscreen, and promote the usage of the browser Fullscreen API directly:

github.com/playcanvas/engine

Deprecate engine support for going fullscreen.

playcanvas:master ← playcanvas:remove-fullscreen

opened 06:32PM - 24 Jun 19 UTC

willeastcott

+63 -140

This PR removes fullscreen support from the Engine. Justification: 1. We …have to define a polyfill for the fullscreen API, plus the code for the fullscreen related functions themselves which the vast majority of developers don't use. With an every increasing emphasis on mobile (Safari has never supported it), the engine shouldn't try to abstract this away. 2. Our usage of the fullscreen API is not up to date. We pass Element.ALLOW_KEYBOARD_INPUT to requestFullscreen and that hasn't worked in years. 3. The latest spec for the fullscreen API uses Promises to notify when the request has been satisfied. Supporting that too is just going to complicate the engine even more. 4. We should avoid add DOM related code to the engine where possible (complicates the NodeJS version). 5. Browsers are gonna keep enabling/changing/deprecating behaviour around fullscreen API over time. We shouldn't have to track this ourselves. It's an unnecessary pain. I just ripped out the PlayCanvas fullscreen stuff from an old project and replaced it simply with: ```app.graphicsDevice.canvas.requestFullscreen();``` Easy. Yes, I know I probably should check for errors potentially generated by requestFullscreen, but for 99.9% of users, it's fine. No need to add all this to the engine. Just let the developer deal with it. Side effects of this PR: Functionality is still there BUT: 1. You'll get deprecation messages in debug if you try to call ```isFullscreen```, ```enableFullscreen``` or ```disableFullscreen```. 2. The shim is removed. So for browser that prefix the Fullscreen API, your app will now return call the supplied error function if you call ```enableFullscreen```. I confirm I have signed the [Contributor License Agreement](https://docs.google.com/a/playcanvas.com/forms/d/1Ih69zQfJG-QDLIEpHr6CsaAs6fPORNOVnMv5nuo0cjk/viewform).

Let me know if I am wrong!

Grimmy · April 28, 2021, 4:40pm

Thanks, but I really have no idea how I should be using that. The help just says:

boolean fullscreen

That doesn’t tell me anything of how I should call it using the PlayCanvas syntax.

yaustar · April 28, 2021, 4:49pm

this.app.graphicsDevice.fullscreen = true; // enter fullscreen
this.app.graphicsDevice.fullscreen = false; // exit full screen

Grimmy · April 28, 2021, 6:09pm

Perfect. Thank You!

yaustar · April 28, 2021, 6:23pm

Hmm… Before my time so not sure tbh. @will should know more

will · April 29, 2021, 8:22pm

Oh wow! There’s more fullscreen code in the engine? Geez, how did that get there?

I’ll deprecate that too when I get a second. Apps should be calling the fullscreen API directly instead of PlayCanvas doing it internally.