phaser
phaser copied to clipboard
A project launched using the Vue3 template, I don't know why it keeps repeatedly rendering the DOM
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
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
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 ] };