loading-screen with custom elements

[Heptalon]

Hello.

I am curently trying to create a loading-screen which uses custom elements like a custom background-image and a custom loading-bar texture.

First approach

    preload(){
        /**
         * Add assets for loading screen
         */

        this.load.image("screen_background","assets/gui/screen_background.png");
        this.load.image("loading_bar","assets/gui/loading_bar.png");

        /**
         * Create loading screen
         */
        this.add.sprite(0,0,"screen_background").setOrigin(0,0);
        this.loadingBar = this.add.sprite(0,0,"loading_bar").setOrigin(0,0);

        this.load.on('progress', function (value) {
            this.loadingBar.setScale(value,1);
        });

        this.load.on('complete', function () {
            this.add.text(100,100,"Done loading!");
        });

        /**
         * Load other assets
         */
        this.load.tilemapTiledJSON("asset1","assets/asset1");
        this.load.tilemapTiledJSON("asset2","assets/asset2");
        this.load.tilemapTiledJSON("asset3","assets/asset3");
        
    }

Problem: The only things that are rendered are some strange green rectangles.

 

Second approach:

    preload(){
        /**
         * Add assets for loading screen
         */

        this.load.image("screen_background","assets/gui/screen_background.png");
        this.load.image("loading_bar","assets/gui/loading_bar.png");
    }

    create(){
        
        /**
         * Create loading screen
         */
        this.add.sprite(0,0,"screen_background").setOrigin(0,0);
        this.loadingBar = this.add.sprite(0,0,"loading_bar").setOrigin(0,0);

        this.load.on('progress', function (value) {
            this.loadingBar.setScale(value,1);
        });

        this.load.on('complete', function () {
            this.add.text(100,100,"Done loading!");
        });

        /**
         * Load other assets
         */
        this.load.tilemapTiledJSON("asset1","assets/asset1");
        this.load.tilemapTiledJSON("asset2","assets/asset2");
        this.load.tilemapTiledJSON("asset3","assets/asset3");
    }

Problem: The loading events are not working anymore when used this way.

 

Is there some workaround for these problems or am I approaching the problem completely wrong ?

Or is it simply not possible to use custom elements in a loading-screen?

 

Thanks in advance.

[samme]

Any assets/textures you want to draw during the loading phase need to be fully loaded themselves beforehand. You can use the scene files payload for this.

You need to add the loader event listeners during preload (or earlier), because the load queue has already finished by create. See the load progress example.

[Heptalon]

Thank you for the quick answer. It works like a charm.

[rblopes]

If you want to use an image as your progress bar, you could use a camera viewport to simulate a texture crop (until proper support for cropped textures land in Phaser 3).

This is similar to the Loader#setPreloadSprite() from Phaser 2.

Example.

const images = ['arrow', 'atari1200xl', 'blue_ball', 'budbrain_chick', 'chain', 'chunk', 'clown', 'columns-orange', 'columns-red', 'eggplant', 'elephant', 'enemy-bullet', 'exocet_spaceman', 'explosion', 'fuji', 'interference_ball_48x48', 'maggot', 'melon', 'orb-red', 'oz_pov_melting_disk', 'palm-tree-right', 'pepper', 'phaser', 'phaser-dude', 'phaser-ship', 'phaser1', 'phaser2', 'pineapple', 'plane', 'platform', 'player', 'purple_ball', 'ship', 'shmup-baddie', 'shmup-bullet', 'shmup-ship', 'skull', 'sonic', 'spaceman', 'spinObj_02', 'spinObj_04', 'steelbox', 'thrust_ship', 'tinycar', 'treasure_trap', 'wabbit', 'wasp', 'xenon2_ship', 'yellow_ball', 'zelda-hearts']; 

new Phaser.Game({
  width: 400,
  height: 300,
  type: Phaser.AUTO,
  loader: {
    baseURL: 'https://labs.phaser.io/',
    path: 'assets/sprites/',
    crossOrigin: true
  },
  scene: class extends Phaser.Scene {
    constructor() {
      super({
        key: 'loader',
        
        files: [
          /* splash screen and progress bar files could go here */
          {
            key: 'healthbar',
            type: 'image'
          }
        ]
      })
    }
    
    preload() {
      // (1) Load main game assets.
      this.load.image(images);

      // (2) Add the progress bar image off screen, keep its
      //     coordinates and dimensions for reference.
      const img = this.add.image(20, -20, 'healthbar').setOrigin(0);
      const {x, y, width: w, height: h} = img;
      
      // (3) Create a camera to fake a texture crop.
      const camera = this.cameras.add(150, 145, 0, h)
        .setScroll(x, y);
      
      // (4) Bind the 'progress' event, use its value to
      //     stretch the viewport width.
      this.load.on(
        'progress', 
        n => camera.setSize(Math.ceil(n * w), h)
      );
    }
    
    create() {
      /* load game scene ... */
    }
  }
});

 

[Heptalon]

This looks like another good solution. My main problem was that I did not know how to load assests that I want to use in the preload function.