pranadevil Posted March 11, 2015 Share Posted March 11, 2015 hi guys, im here again asking for your wise advices i wonder how to achieve different ways to show loading bars in phaser. i mean something like a bar filling another and a % number indicating how it goes. would you mind to share with me some example? i would like to explore other ways to improve my load state Link to comment Share on other sites More sharing options...
Nikow Posted March 12, 2015 Share Posted March 12, 2015 Hi ! Like that ? :var loadingBar = this.add.sprite(game.width/2,game.height/2,"loadingbar");loadingBar.anchor.setTo(0.5,1);this.load.setPreloadSprite(loadingBar,0); pranadevil 1 Link to comment Share on other sites More sharing options...
BattyMilk Posted March 12, 2015 Share Posted March 12, 2015 I knocked one of these out yesterday. This will give you a progress bar and a percentage counter: PreloadScene.prototype.preload = function () { //show percentage this.progress = this.game.add.text(this.game.world.centerX, this.game.world.centerY-30, '0%', {fill: 'white'}); this.progress.anchor.setTo(.5,.5); //show progress bar var progressBar = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'progressBar'); progressBar.anchor.setTo(0.5, 0.5); this.game.load.setPreloadSprite(progressBar); this.game.load.onFileComplete.add(this.fileComplete, this); };PreloadScene.prototype.fileComplete = function (progress, cacheKey, success, totalLoaded, totalFiles) { this.progress.text = progress+"%";}; frenetikm and pranadevil 2 Link to comment Share on other sites More sharing options...
pranadevil Posted March 17, 2015 Author Share Posted March 17, 2015 I knocked one of these out yesterday. This will give you a progress bar and a percentage counter: PreloadScene.prototype.preload = function () { //show percentage this.progress = this.game.add.text(this.game.world.centerX, this.game.world.centerY-30, '0%', {fill: 'white'}); this.progress.anchor.setTo(.5,.5); //show progress bar var progressBar = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'progressBar'); progressBar.anchor.setTo(0.5, 0.5); this.game.load.setPreloadSprite(progressBar); this.game.load.onFileComplete.add(this.fileComplete, this); };PreloadScene.prototype.fileComplete = function (progress, cacheKey, success, totalLoaded, totalFiles) { this.progress.text = progress+"%";}; in phaser it works???? i got errors Link to comment Share on other sites More sharing options...
Nikow Posted March 17, 2015 Share Posted March 17, 2015 Try my slution and look at this : http://docs.phaser.io/Loader.js.html#sunlight-1-line-39 Link to comment Share on other sites More sharing options...
pranadevil Posted March 18, 2015 Author Share Posted March 18, 2015 Try my slution and look at this : http://docs.phaser.io/Loader.js.html#sunlight-1-line-39 thanks man Link to comment Share on other sites More sharing options...
weratius Posted February 21, 2016 Share Posted February 21, 2016 Maybe, I'm late, but I made smth like this: Here is a boot file: // Boot.js module.exports = { preload: function() { //resources for preloader }, create: function() { game.load.onLoadStart.add(this.loadStart, this); game.load.onLoadComplete.add(this.loadComplete, this); this.start(); }, loadStart: function() { loadingProcess = new loadingProcessModule(); loadingProcess.show(true); }, loadComplete: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.world.setBounds(0, 0, 6000, 6000); this.game.state.start("Play"); }, update: function() { //show loading in percentage, magic if(loadingProcess != null && loadingProcess.loadingProcessInPercentage != null) { loadingProcess.loadingProcessInPercentage.text = game.load.progress + ' %'; } }, start: function() { //here we load our resources for a game } }; and here we show our preloader: module.exports = LoadingProcess; function LoadingProcess() { this.landingSprite = {}; this.preloader = {}; this.loadingProcessInPercentage = {}; } LoadingProcess.prototype.show = function(showPercentage) { this.landingSprite = //background this.preloader = // loading animation //here we prepare text object for percentages if(showPercentage) { this.loadingProcessInPercentage = game.add.text(game.width / 2 - 20, game.height / 2 - 100, 0 + ' %', { font: '50px "Press Start 2P"', fill: '#000000' }); this.loadingProcessInPercentage.fixedToCamera = true; } } LoadingProcess.prototype.hide = function() { this.preloader.kill(); this.landingSprite.kill(); if(this.loadingProcessInPercentage != null) { this.loadingProcessInPercentage.kill(); } } easy and clear I think) SET001 1 Link to comment Share on other sites More sharing options...
GoodOldSnoopy Posted April 9, 2017 Share Posted April 9, 2017 On 21/02/2016 at 0:18 AM, weratius said: Maybe, I'm late, but I made smth like this: Here is a boot file: // Boot.js module.exports = { preload: function() { //resources for preloader }, create: function() { game.load.onLoadStart.add(this.loadStart, this); game.load.onLoadComplete.add(this.loadComplete, this); this.start(); }, loadStart: function() { loadingProcess = new loadingProcessModule(); loadingProcess.show(true); }, loadComplete: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.world.setBounds(0, 0, 6000, 6000); this.game.state.start("Play"); }, update: function() { //show loading in percentage, magic if(loadingProcess != null && loadingProcess.loadingProcessInPercentage != null) { loadingProcess.loadingProcessInPercentage.text = game.load.progress + ' %'; } }, start: function() { //here we load our resources for a game } }; and here we show our preloader: module.exports = LoadingProcess; function LoadingProcess() { this.landingSprite = {}; this.preloader = {}; this.loadingProcessInPercentage = {}; } LoadingProcess.prototype.show = function(showPercentage) { this.landingSprite = //background this.preloader = // loading animation //here we prepare text object for percentages if(showPercentage) { this.loadingProcessInPercentage = game.add.text(game.width / 2 - 20, game.height / 2 - 100, 0 + ' %', { font: '50px "Press Start 2P"', fill: '#000000' }); this.loadingProcessInPercentage.fixedToCamera = true; } } LoadingProcess.prototype.hide = function() { this.preloader.kill(); this.landingSprite.kill(); if(this.loadingProcessInPercentage != null) { this.loadingProcessInPercentage.kill(); } } easy and clear I think) Where do I put the loadingProcess function? I'm always getting a ReferenceError: loadingProcess is not defined error Link to comment Share on other sites More sharing options...
samme Posted April 9, 2017 Share Posted April 9, 2017 See Project Templates/Basic/Preloader.js#L23 Link to comment Share on other sites More sharing options...
Recommended Posts