systemx17 Posted May 1, 2015 Share Posted May 1, 2015 var sprites = {};var loader = PIXI.loader.add('cloudstars',"imgs/cloudstars.jpg").load(function (loader, resources){ sprites.cloudstars = new PIXI.TilingSprite(resources.cloudstars.texture); }).add('star1',"imgs/star1.png").load(function (loader, resources){ sprites.star1 = new PIXI.TilingSprite(resources.star1.texture); }).add('star2',"imgs/star2.png").load(function (loader, resources){ sprites.star2 = new PIXI.TilingSprite(resources.star2.texture); }).add('star3',"imgs/star3.png").load(function (loader, resources){ sprites.star3 = new PIXI.TilingSprite(resources.star3.texture); }).add('star4',"imgs/star4.png").load(function (loader, resources){ sprites.star4 = new PIXI.TilingSprite(resources.star4.texture); }).add('ship',"imgs/ship_blue.png").load(function (loader, resources){ sprites.ship = new PIXI.Sprite(resources.ship.texture); }).add('shield_straight',"imgs/shield_straight.png").load(function (loader, resources){ sprites.shield_straight = new PIXI.Sprite(resources.shield_straight.texture); }).add('shield_edge',"imgs/shield_edge.png").load(function (loader, resources){ sprites.shield_edge = new PIXI.Sprite(resources.shield_edge.texture); }).add('title_ship',"imgs/title_ship.png").load(function (loader, resources){ sprites.title_ship = new PIXI.Sprite(resources.title_ship.texture); }).once('complete',function(){ var ready = setTimeout(accountSetup,3000); }).load() This seams to work but I figure it's not the correct way to do this as I kinda guessed my way through some of it. Will this cause a problem if I use this method to load all of my sprites into a standard javascript array for use later on? Talking about maybe 100 sprites including some tiling sprites for backgrounds. Also do I really need to use the "loader" in "function(loader, resources)" part? I don't seem to use it inside the function. Quote Link to comment Share on other sites More sharing options...
xerver Posted May 2, 2015 Share Posted May 2, 2015 Generally, creation of game objects is just done in the load callback: var sprites = {};var loader = PIXI.loader .add('cloudstars',"imgs/cloudstars.jpg") .add('star1',"imgs/star1.png") .add('star2',"imgs/star2.png") .add('star3',"imgs/star3.png") .add('star4',"imgs/star4.png") .add('ship',"imgs/ship_blue.png") .add('shield_straight',"imgs/shield_straight.png") .add('shield_edge',"imgs/shield_edge.png") .add('title_ship',"imgs/title_ship.png") .load(function (loader, resources) { sprites.cloudstars = new PIXI.TilingSprite(resources.cloudstars.texture); sprites.star1 = new PIXI.TilingSprite(resources.star1.texture); sprites.star2 = new PIXI.TilingSprite(resources.star2.texture); sprites.star3 = new PIXI.TilingSprite(resources.star3.texture); sprites.star4 = new PIXI.TilingSprite(resources.star4.texture); sprites.ship = new PIXI.Sprite(resources.ship.texture); sprites.shield_straight = new PIXI.Sprite(resources.shield_straight.texture); sprites.shield_edge = new PIXI.Sprite(resources.shield_edge.texture); sprites.title_ship = new PIXI.Sprite(resources.title_ship.texture); var ready = setTimeout(accountSetup,3000); })Are yo looking for something easier than that? The loader passes itself as the first param to the complete callback. It does this so you can bind the method to run under whatever context you want and no matter what you have access to the loader instance since it is passed in. Remember the loader is generic and not specific to PIXI, so it covers a lot of use cases ponk and systemx17 2 Quote Link to comment Share on other sites More sharing options...
d13 Posted May 2, 2015 Share Posted May 2, 2015 Remember the loader is generic and not specific to PIXI, so it covers a lot of use cases Is it possible to use it to load sound and font files too? Quote Link to comment Share on other sites More sharing options...
systemx17 Posted May 3, 2015 Author Share Posted May 3, 2015 That's a lot cleaner code especially when it gets bigger I am sure I will appreciate it doing the way you have put it. I plan to run other functions after to load other media such as music and fonts. If say I wanted to include some sort of loading bar, would I be best off just incrementing the value of a variable called loadProgress or something like that? I understand that the larger images will take longer to load so this won't give an accurate "time till live" loading bar but that's not important to me. Just want to make the user feel like something is actually progressing. Any suggestions other than a += 1 value and a hard coded count of the number of images? d13 1 Quote Link to comment Share on other sites More sharing options...
xerver Posted May 4, 2015 Share Posted May 4, 2015 > Is it possible to use it to load sound and font files too? You can load them as blobs (binary) but there is no special parsing for audio or font files. Feel free to write a middleware for it. > If say I wanted to include some sort of loading bar... Use the progress event:PIXI.loader.on('progress', function (loader, loadedResource) { console.log('Progress:', loader.progress + '%');}); systemx17 1 Quote Link to comment Share on other sites More sharing options...
systemx17 Posted May 5, 2015 Author Share Posted May 5, 2015 Getting this warning (not error) when using this code now.. do I just add the "extras." part in front? The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on. Quote Link to comment Share on other sites More sharing options...
xerver Posted May 5, 2015 Share Posted May 5, 2015 Yup Quote Link to comment Share on other sites More sharing options...
d13 Posted May 28, 2015 Share Posted May 28, 2015 @systemx17: This might be what you're looking for?PIXI.loader .add([ "images/one.png", "images/two.png", "images/three.png" ]) .on("progress", loadProgressHandler) .load(setup);function loadProgressHandler(loader, resource) { //Display the file `url` currently being loaded console.log("loading: " + resource.url); //Display the precentage of files currently loaded console.log("progress: " + loader.progress + "%"); //If you gave your files names with the `add` method, you can access //them like this //console.log("loading: " + resource.name);}function setup() { console.log("All files loaded");}Yay, Pixi's new loader is awesome Quote Link to comment Share on other sites More sharing options...
Wanderer777 Posted September 3, 2015 Share Posted September 3, 2015 I really like the simplicity of the loader and to avoid code clustering I would like to use it to preload my sound files, too (I plan to use the Howler sound library for my game). How could this be done? I just need to know if all sounds are loaded completely and ready to use, so the loader would do a good job here -but would howler be able to access them then? Are assets loaded by the PIXI loader put to the browser's cache? If so, would I be able to load a sound file named "laser.wav", for example, and would Howler then be able to automatically grab the loaded sound from the browser's cache instead of loading a second instance? Quote Link to comment Share on other sites More sharing options...
xerver Posted September 3, 2015 Share Posted September 3, 2015 I really like the simplicity of the loader and to avoid code clustering I would like to use it to preload my sound files, too (I plan to use the Howler sound library for my game). How could this be done? I just need to know if all sounds are loaded completely and ready to use, so the loader would do a good job here -but would howler be able to access them then? Are assets loaded by the PIXI loader put to the browser's cache? If so, would I be able to load a sound file named "laser.wav", for example, and would Howler then be able to automatically grab the loaded sound from the browser's cache instead of loading a second instance? Yes it will go into the browser cache (depending on the headers from the server), but how to use it would be different based on the API of your lib and what API it uses underlying. Quote Link to comment Share on other sites More sharing options...
Randore Posted March 9, 2017 Share Posted March 9, 2017 Hello, Please help me with this loader thing. 1. I want the loader to load all assets while showing a progress bar 2. After loading all assets and 100% progress bar, I want to add game MainStage where game will be played. Here is my code, I have tried so many things but both loader and cat image is visible on stage. Please help me to fix this, Thank you in advance. window.onload = () => { const game = new PIXI.Application(), Container = PIXI.Container, loader = PIXI.loader, Texture = PIXI.Texture, TextureCache = PIXI.utils.TextureCache, resources = PIXI.loader.resources, Sprite = PIXI.Sprite; //Add application to DOM document.body.appendChild(game.view); let stage_1 = new Container(), stage_2 = new Container(); loader .add('cat', 'sprites/cat.png') .add('dice_1', 'sprites/dice_01.png') .add('dice_2', 'sprites/dice_02.png') .add('dice_3', 'sprites/dice_03.png') .add('dice_4', 'sprites/dice_04.png') .add('dice_5', 'sprites/dice_05.png') .add('dice_6', 'sprites/dice_06.png') .add('dice_7', 'sprites/dice_07.png') .add('dice_8', 'sprites/dice_08.png') .add('dice_9', 'sprites/dice_09.png') .add('dice_10', 'sprites/dice_10.png') .load(loadProgress); loader.once('complete', mainStage); //Global variables used in functions let cat, progressBar, progWrapper, progWrapperTex, progressBarTex; progWrapperTex = Texture.fromImage('sprites/white-silloute.png'); progressBarTex = Texture.fromImage('sprites/redbar.png'); function loadProgress(loader, res) { progWrapper = new Sprite(progWrapperTex); progressBar = new Sprite(progressBarTex); progWrapper.x = (game.renderer.width / 2 - progWrapper.width / 2); progWrapper.y = (game.renderer.height / 2 - progWrapper.height / 2); progressBar.x = (game.renderer.width / 2 - progressBar.width / 2); progressBar.y = (game.renderer.height / 2 - progressBar.height / 2); stage_1.addChild(progWrapper); stage_1.addChild(progressBar); game.stage.addChild(stage_1); progressBar = Math.round(loader.progress); console.log("Loader:", res.name, "Progress:", Math.round(loader.progress)); } //Loader function mainStage() { cat = new Sprite(resources.cat.texture); //Positions cat.x = game.screen.width / 2 - cat.width /2; cat.y = game.screen.height / 2 - cat.height /2; //Rotate around the center cat.anchor.set(0.5, 0.5); //Add cat to the scene stage_2.addChild(cat); game.stage.addChild(stage_2); //Listen for the frame updates game.ticker.add(function() { cat.rotate += 1; }); } } Quote Link to comment Share on other sites More sharing options...
xerver Posted March 9, 2017 Share Posted March 9, 2017 The callback you pass into the .load() method is the function to call when loading *completes*. You want: loader .add('cat', 'sprites/cat.png') .add('dice_1', 'sprites/dice_01.png') .add('dice_2', 'sprites/dice_02.png') .add('dice_3', 'sprites/dice_03.png') .add('dice_4', 'sprites/dice_04.png') .add('dice_5', 'sprites/dice_05.png') .add('dice_6', 'sprites/dice_06.png') .add('dice_7', 'sprites/dice_07.png') .add('dice_8', 'sprites/dice_08.png') .add('dice_9', 'sprites/dice_09.png') .add('dice_10', 'sprites/dice_10.png') .on('progress', loadProgress) .load(mainStage); Also move all your object creation out of the loadProgress function, or it will create them every time you load a resource, which you don't want. Just move it out of the function to just above it. Randore 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.