Dynamically load image. Phaser.js

Question

Phaser provides 3 functions: preload, create, update. If the create function renders everything at the first start, then how can it be forced to draw pictures during dynamic loading?

 function preload(src = `images/Num_spin/Num_Spin_00359.png.webp`) { this.load.image('background', 'images/table_en.png.webp'); this.load.image('wheel', 'images/UpperWheel.png.webp'); this.load.image('roulette', src); } function create() { this.add.image(0, -160, 'background').setOrigin(0, 0).setScale(0.7); this.add.image(20, 30, 'wheel').setOrigin(0, 0).setScale(0.7); this.add.image(108, 110, 'roulette').setOrigin(0, 0).setScale(0.7) } function update() { //Here I call a function that changes url }

Answer 1

create does not run until the preload function has been called and the Loader has finished. If you want to display images as they are loaded, you need to either load them outside of preload , or use the various Loader Events to be notified by each file loading.

There are lots of examples showing each method here: http://labs.phaser.io/index.html?dir=loader/loader%20events/&q=