Search the Community

I would to use a a way to show loading progress for my loading scene but instead of a bar I have a gear sprite sheet that I would like to spin until loading is complete. Is there reference to this anywhere I have been combing through the P3 examples and can't figure out how to link the two together.

Hello everyone. The problem is I want to immediately display the loading screen. I don't want to see a black screen before the loading screen.I followed the example shown in phaser.io, http://examples.phaser.io/_site/view_full.html?d=loader&f=load+events.js&t=load events, but the loading progress always remains at 0. I can't figure out what the problem is. Can you help me? my boot state looks like this init: function () { game.stage.backgroundColor = "#012358"; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; }, preload: function () { atlas = game.load.atlas('mysprites', 'im/sprites.png', 'im/spritesJson.json'); game.load.spritesheet('anim', 'im/myloaderSheet.png', (animationFrameWidth + spaceBetweenFrames), animationFrameHeight, 30); }, create: function () { game.state.start('Loading'); } and my loading state looks like this preload: function () { game.load.json('txts', 'scripts/text.json'); game.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); game.load.start(); }, create: function () { myTxts = game.cache.getJSON('txts'); bg = game.add.tileSprite(0, 0, 1280, 720, 'mysprites'); bg.frameName = "bg"; animation = game.add.sprite((game.world.centerX - 25), (game.world.centerY - 50), 'animation'); loadingBar = new Phaser.Rectangle(game.world.centerX, spriteY, 10, 3); anim.animations.add('playAnim', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], true); anim.animations.play(playAnim', frameRate, true); game.load.onLoadStart.add(loadStart, this); game.load.onFileComplete.add(fileComplete, this); game.load.onLoadComplete.add(loadComplete, this); }, update: function () { loadingBar.inflate(1, 0); console.log(game.load.progress); }, render: function () { game.debug.geom(loadingBar, '#FFFFFF'); } function loadStart() { console.log('Loading'); } function fileComplete(progress, cacheKey, success, totalLoaded, totalFiles) { console.log("File Complete: " + progress + "% - " + totalLoaded + " out of " + totalFiles); loaded = true; } function loadComplete() { if (loaded) { changeState("Level 1"); loaded = false; } }

I have been trying to add a loading screen to my game. I know that I need to use .on('progress') and .once('complete') handlers. I run following code for loading an asset batch; assetManager.loadImageBatch = function(args, callback){ var ctr = 0; var toLoad = args.assets.length; args.assets.forEach(elm=>{ loadFile(elm.name, args.pathPrefix + elm.path); }) function loadFile(name, path){ assetManager.loader.add(name, path); assetManager.loader.once('complete', loadCallback); assetManager.loader.load(); } function loadCallback(){ console.log("loading"); ctr++; if(ctr == toLoad) callback(); } } it runs ok, loads all assets but as it has to log "loading" after loading each asset, it logs it after loading the whole asset batch. I tested it on both local and on my website. It results the same, nothing to do with download speed or whatsoever. I googled about loading screen usage on pixi but I wasn't able to find anything useful. Any thoughts?

Anybody knows how to customize babylon loading screen.

Just published a tutorial for beginners on how to add a loading screen that shows the progress of the asset loading process: http://www.gamedevacademy.org/how-to-create-a-loading-screen-in-phaser/

Hello there. Is there a way to add a loading bar/screen, other than the way shown in the resources/Project Templates/basic folder? I constructed my game inside one js file (and ofc the index.html) so inside that js file i have preload, create and update functions. And the "var game=new Phaser.Game(...)" is inside there too. I saw in the example there that i need to divide those functions into separate files. So any other way to do this? I tried to just make a boot.js file like in that example but with no success.

Hello to everyone.i have a one question.How to do simple game loading screen