Sign in to follow this  
Fit_dev

Vue + Phaser 3 in iframe performance

Recommended Posts

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

test1.png

test2.png

Share this post


Link to post
Share on other sites

Samee, thanks for your time. I had a lot of work recently, that’s why I could’t answer.

vue.esm.js:985 was responsible for the communication with vue during the game, but I fixed it. I also got rid of the text animation (points) and merged 8 atlases into 1. Now the game with vue works properly, but the problem still exists in the main page – composite layers lag. I enclose screenshots of the performance of the game and of the main page of the game in iframe. Maybe you will have some idea how to fix it.

Thank you in advance

game.png

main_page.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.