Canvas Element-Position of Phaser Game using Blaze js in Meteor

Phaser 3
1

I am failing to give the canvas created by Phaser 3.55 a declared position inside the html of my multi-paged Meteor 2.8.0 Application. My goal is to take an existing

-Element and let Phaser built it in there. I’m using the Blaze Js OnCreated() function to create the game:

Template.instance_map.onCreated(function() {

  var config = {
    type: Phaser.AUTO,
    parent: 'gameWrapper',
    domCreateContainer: true,
    width: 800,
    height: 600,
    scene: {
    preload: preload,
    create: create,
    update: update
    },
    };
    
    var game = new Phaser.Game(config);
 
function preload () { ... }
    
function create () { ... }
    
});

Then I create the instance_map-template in another template “A”. Outcome: It gets created above all other html-files in template “A”.

I tried the parent-field in the config-object:

  var config = {
    type: Phaser.AUTO,
  **parent: 'gameWrapper',**
    domCreateContainer: true,
    width: 800,
    height: 600,
    scene: {
    preload: preload,
    create: create,
    update: update
    },
    };

Then creating a div with an ID “gameWrapper”. I expected the Canvas to appear inside the div#gameWrapper. Outcome: It didn’t change anything.

I also tried the domCreateContainer-field to test if this would create a div around the canvas at all. It didn’t. I’m not sure if the issue is with Blaze or if I’m doing something wrong with Phaser. I hope someone with experience in Blaze could enlighten me if there’s some problem with creating phaser canvas with onCreated Functions of blaze-

I hope someone can help me, thanks in advance

2

The parent needs to exist when the game boots.

var config = {
  // …
  callbacks: {
    preBoot: function () {
      console.assert(document.getElementById('gameWrapper'));
    }
  }
});
3

Thank you for the reply. The issue actually was the onCreated-Function. For Blaze Js you need to create the game inside the onRendered-Function