Solved: there is a missing line at the end of create function.
this.add.image(400, 300, ‘einstein’);
I am checking out the dom element examples and the einstein image is not loading for any of the 5 div position tests or ‘using a div.js’. The image loads for div depth.js and other scripts such as skew and rotate. The path is the same in all the files so I’m stumped at what is wrong. The div position tests do run but there is no image just a green rectangle rotating from different points.
Maybe the peoblem is the position of the opening brace? Is the image being loaded too soon or too late? Any ideas?
This works (div depth.js):
var config = {
type: Phaser.AUTO,
backgroundColor: ‘#00002d’,
scale: {
mode: Phaser.Scale.FIT,
parent: ‘phaser-example’,
width: 800,
height: 600
},
dom: {
createContainer: true
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image(‘einstein’, ‘assets/pics/ra-einstein.png’);
}
function create ()
{
var div1 = document.createElement(‘div’);
div1.style = ‘background-color: salmon; width: 220px; height: 100px; font: 48px Arial; font-weight: bold’;
div1.innerText = ‘Phaser 3’;
var div2 = document.createElement('div');
div2.style = 'background-color: yellow; width: 220px; height: 100px; font: 48px Arial; font-weight: bold';
div2.innerText = 'Phaser 3';
var element1 = this.add.dom(300, 0, div1);
var element2 = this.add.dom(400, 0, div2);
element1.setDepth(2);
this.tweens.add({
targets: [ element1, element2 ],
y: 600,
angle: 200,
duration: 3000,
scaleX: 2,
ease: 'Sine.easeInOut',
loop: -1,
yoyo: true
});
this.add.image(400, 300, 'einstein');
}
This DOES NOT show the einstein image (div position test 1.js):
var config = {
type: Phaser.CANVAS,
scale: {
mode: Phaser.Scale.FIT,
parent: ‘phaser-example’,
width: 800,
height: 600
},
dom: {
createContainer: true
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload () {
this.load.image(‘einstein’, ‘assets/pics/ra-einstein.png’);
}
function create ()
{
var element = this.add.dom(200, 150, ‘div’, ‘background-color: rgba(255, 255, 0, 0.5); width: 300px; height: 200px; font: 48px Arial; font-weight: bold’, ‘Phaser 3’);
var marker = this.add.rectangle(200, 150, 16, 16, 0xff00ff);
this.tweens.add({
targets: element,
duration: 3000,
angle: 360,
scaleX: 2,
scaleY: 2,
ease: 'Sine.easeInOut',
loop: -1,
yoyo: true
});
}