Dom element in fullscreen mode

Phaser 3
1

I can’t figure out how to pass dom element into fullscreen mode ? I have tried many options , but unsuccessful .

this.html_element = this.add.dom(textfield_cam.scrollX+5, textfield_cam.scrollY+6).createFromCache('nameform_2')  .setAlpha(0.7)   .setOrigin(0,0)  .setDepth(4);

this.scale.fullscreenTarget = document.getElementById( this.game.config.parent );

part of my game config :

var config = {
    type: Phaser.AUTO,
    scale: {
    mode: Phaser.Scale.FIT,
    parent: 'app',
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 1000,
    height: 760
        },
      dom: {
     createContainer: true
    },.......

I tried set ‘app’ as “id” in my html object and also wrap it in “div”, it is only allows show either game or either html element but not combine them together.

Here is example of my html element :

<div id="app"> 
<input name="text_input" type="text" class="my_stl" autocomplete="off" id="my_txt" value=""/>
   </div>
2

The problem is solved by myself.
If someone interested :
I wraped all my code of index.html in < div id=“app”> … < /div >
And I wrote in config : " … parent: ‘app’ … "
in create() : this.scale.fullscreenTarget = document.getElementById(‘app’);

After this Dom elements can be loaded successfully in fullscreen mode

4 Likes
3

Thank you so much!

4

beautiful, thank you.

5

I know the thread is a bit old, but just in case somebody comes across this and finds it useful.

@Andrio 's solution is correct but worth noting that you can use the config property fullscreenTarget in the game config to specify the dom element by providing either the id as a string or the domElement itself.

Cheers!

1 Like
6

To expound on @fielding’s answer with code, this is how I’ve been creating a fullscreen UI

const ratio = Math.max(window.innerWidth / window.innerHeight, window.innerHeight / window.innerWidth);
const DEFAULT_HEIGHT = 820;
const DEFAULT_WIDTH = ratio * DEFAULT_HEIGHT;

var config = {
	type: Phaser.AUTO,
	parent: 'parentDiv',
	fullscreenTarget: 'parentDiv',
	banner: false,
	backgroundColor: '#000000',
	//...
	scene: [ //... ],
	scale: {
   mode: Phaser.Scale.FIT,
   autoCenter: Phaser.Scale.CENTER_BOTH,
   width: DEFAULT_WIDTH,
   height: DEFAULT_HEIGHT
 },
};
var game = new Phaser.Game(config);
1 Like