Jump to content

loading-screen with custom elements


Heptalon
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 ... */
    }
  }
});

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...