A sample Phaser game, using a camera to fake a texture crop for use on a loader progress bar.

by rblopes

HTML

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>

JavaScript

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