[Phaser3]Full screen表示を行う

やりたいこと

Phaser3でFullScreen表示を行います。

ブラウザの表示部分に大きく表示するわけではなく、動画などをFull Screen表示した場合と同様にブラウザのGUIは非表示になり、ESCでFull Screen表示が終了します。

Sceneの子供のクラスからは以下を呼ぶだけです。

this.scale.startFullscreen();

Sceneの子供のクラスからは以下を呼ぶだけです。

this.scale.stopFullscreen();

startFullscreen/stopFullscreenはシーンの中のあるのでシーンを移動するとFull Screenの状態が引き継がれないかと心配しましたが、そういうことはなくシーンを移動してもFull Screenの状態は引き継がれます。

以下のエラーが表示されるFull screenにならないことがあります。

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

これはユーザ操作がなくrequestFullscreenが呼ばれているのが原因です。ボタンクリック時などに呼ばれるようにしてください。（ページ読み込み→自動でFull screenにはできません。）

以下のようにFull Screen表示にしたときにゲーム画面が表示にフィットしないときがあります。

これはPhaser3が作成しいるCanvasを最大化しているわけではないからです。

main.jsで指定しているcontainerやその親のクラスを見直してください。（必要ならFullScreen時にクラス/スタイルを書き直す。）私の場合はcontainerの親のdivのHeightのスタイルが悪さしていました。

Phaser3でFullScreen表示を行うことができました。