Hi,
I have problem with phaser performance. The phaser CPU usage is too high.
Configuration :
- game is on phaser 3 with vue
- main page is on vue with game in iFrame
this.gameInstance = new Phaser.Game({
width: properties.width,
height: properties.height,
resolution: PIXEL_RATIO,
"callbacks.postBoot": function() {
document.getElementsByTagName("canvas")[0].style.width = properties.width + "px"
document.getElementsByTagName("canvas")[0].style.height = properties.height + "px"
},
scaleMode: 0,
type: Phaser.CANVAS,
parent: document.getElementById('game'),
title: '☕️ Brunch with Phaser and ES6', // 'My Phaser 3 Game'
url: 'https://github.com/samme/brunch-phaser-es6',
version: '0.0.1',
banner: {
background: ['#e54661', '#ffa644', '#998a2f', '#2c594f', '#002d40']
},
fps: {
min: 10,
target: 60,
forceSetTimeout: true,
},
loader: {
path: 'static/phaser/',
},
physics: {
default: 'arcade',
arcade: {
debug: false,
gravity: {
y: 300
},
},
},
scene: [
LoaderScene,
BootScene,
DefaultScene,
GameOverScene,
],
});
CPU usage:
- Phaser = 40%
- Phaser with vue = 80-90%
- main page without iframe = 5-10 %
- main page with iframe = 100%
js heap size:
- Phaser = 50 - 70 MB
- Phaser with vue ~ 70 - 100MB
- main page without iFrame ~ 50 - 80 MB
- main page with iFrame ~ 100 - 150 MB
The game is equipped with 20-30 icons, 10 atlases, 19 mp3 sounds and 5 background image, with total size of assets about 3MB.
Thank you in advance