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 hope someone can help me, thank you.
I don't really know how blaze works, but if I understand the documenation right (link to blaze documentation).
I assume you should use onRendered
rather than onCreated
, since phaser will be added right away, and if the parent
element doesn't exist (yet), it will simply be appended to the dom (as mentioned in the phaser documentation ).