Heptalon Posted March 14, 2018 Share Posted March 14, 2018 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 More sharing options...
samme Posted March 14, 2018 Share Posted March 14, 2018 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. Link to comment Share on other sites More sharing options...
Heptalon Posted March 14, 2018 Author Share Posted March 14, 2018 Thank you for the quick answer. It works like a charm. samme 1 Link to comment Share on other sites More sharing options...
rblopes Posted March 15, 2018 Share Posted March 15, 2018 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 More sharing options...
Heptalon Posted March 15, 2018 Author Share Posted March 15, 2018 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. Link to comment Share on other sites More sharing options...
Recommended Posts