Jump to content

Vue + Phaser 3 in iframe performance


Recommended Posts


I have problem with phaser performance. The phaser CPU usage is too high.


- 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: [


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



Link to comment
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



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...