A project launched using the Vue3 template, I don't know why it keeps repeatedly rendering the DOM

[q975702873]

Version

• Phaser Version: 3.80.1

• Operating system: 3.80.1

• Browser:3.80.1

Description

Example Test Code

Additional Information

A project launched using the Vue3 template, I don't know why it keeps repeatedly rendering the DOM
App.vue

<script setup> import Phaser from 'phaser'; import { ref, toRaw } from 'vue'; import PhaserGame from './game/PhaserGame.vue'; import '@/assets/font/font.css' // The sprite can only be moved in the MainMenu Scene const canMoveSprite = ref(); // References to the PhaserGame component (game and scene are exposed) const phaserRef = ref(); // This event is emitted from the PhaserGame component: const currentScene = (scene) => { canMoveSprite.value = (scene.scene.key !== 'MainMenu'); } </script>

main.js
const config = {
type: Phaser.AUTO,
width: window.innerWidth * 4,
height: window.innerHeight * 4,
parent: 'game-container',
backgroundColor: '#fcc1db',
scale: {
mode: Phaser.Scale.FIT,
},
scene: [
Game
]
};

const StartGame = (parent) => {
return new Phaser.Game({ ...config, parent });
}

PhaserGame.vue

Game.js

    this.load.on('progress', value => {
        EventBus.emit('current-scene-progress', value);
    });

    this.load.on('complete', () => {
        // progress.destroy();
    });



    this.load.image('people', 'images/people.png');

  
    BoardsArr.forEach((items) => {
        this.load.image(`lattice${items.id}`, `images/${items.id}.png`);
    })


    this.load.image(`bg`, 'images/bg.jpg');

    this.load.image(`logo`, 'images/logo.png');
  
    this.load.image(`title`, 'images/title.png');
   
    this.load.image(`bigshots`, 'images/bigshots.png');
    
    this.load.image(`myprize`, 'images/myprize.png');

    this.load.image(`gamerules`, 'images/gamerules.png');
 
    this.load.image(`excludingprops`, 'images/excludingprops.png');

    this.load.image(`opportunities`, 'images/opportunities.png');

    this.load.image(`luckydraws`, 'images/luckydraws.png');


    this.load.image(`bg-intestine`, 'images/intestine.png');
    EventBus.emit('current-scene-ready', this);
    
    
    Opening it on WeChat on your phone will keep loading repeatedly

[q975702873]

It was ultimately discovered that the width: window. innerWidth * 4 was caused by an excessively large value thanks!

const config = {
type: Phaser.AUTO,
width: window.innerWidth * 4,
height: window.innerHeight * 4,
parent: 'game-container',
backgroundColor: '#fcc1db',
scale: {
mode: Phaser.Scale.FIT,
},
scene: [
Game
]
};