PIXI.Texture.fromImage() with loader and dynamic filenames?

[alexandervrs]

I have a Javascript class that handles Graphics in my game, as such I have some functions dedicated to load images to be used as sprites later on.
I use an asset loader however when I am trying to use Texture.fromImage() there is a Javascript error.

The problem seems to be with the line resources.spriteName.texture
I am trying to load a file "dummy.png" so if I change that to resources.dummy.texture it will work fine, however I need that line to be dynamic based off the contents of spriteName function argument, how could I achieve this?

CreateSprite2D(spriteName, filename) {

		var texture;
		var sprite;
	
		console.log("loading");
		
		var loader = PIXI.loader.add(spriteName, filename);
	
		loader.load((loader, resources) => {
		
			console.log( resources.spriteName.texture );
		
			texture = PIXI.Texture.fromImage(resources.spriteName.texture);
			sprite  = new PIXI.Sprite(texture);
			
			this.sprites2D[spriteName] = sprite;
			this.textures2D[spriteName] = texture;
			
			console.log("loaded");
		});
		
	};

 

[ivan.popelyshev]

texture = resources[spriteName].texture

You have a problem with javascript, dont worry - you'll get experienced soon  Just read David Flanagan and use normal IDE, VSCode or WebStorm. 

[xerver]

CreateSprite2D(spriteName, filename) {
		console.log("loading");
		
		PIXI.loader.add(spriteName, filename).load((loader, resources) => {
			var texture = resources[spriteName].texture;

			console.log(texture);
			
			this.sprites2D[spriteName] = new PIXI.Sprite(texture);
			this.textures2D[spriteName] = texture;
			
			console.log("loaded");
		});
		
	};

 

[ivan.popelyshev]

Yeah, there's also mishap with loader - I'm not sure that code can work, you have to add callback on specific resource instead of "load" method. @xerver imagine that he's loading multiple things.

[alexandervrs]

Quote

I've triedYou have a problem with javascript, dont worry - you'll get experienced soon  Just read David Flanagan and use normal IDE, VSCode or WebStorm

lolz I have been using JS for more than 10 years  (I do forget a few things here and there since I didn't use it that often lately) but yeah, tried resources[spriteName].texture and seemed it didn't work for some reason.
I am not that experienced with PIXI though, so it seems my reasoning of what a "Sprite" was, was a bit misleading (coming from GameMaker Studio background on this). It seems I'll need to create a new sprite during every image I want rendered and not once when I load the texture.
So I just moved the Sprite to the render part in the gameobjects' render events instead and just rendered them there.
I do a var sprite = new PIXI.Sprite(texture); for every single sprite I want to draw on canvas, I gather this is the standard way to do it in PIXI?

My loading code was changed to be,

 

var loader = PIXI.loader.add(spriteName, filename);
	
		loader.load((loader, resources) => {
		
			texture = PIXI.Texture.fromImage(filename);

			this.textures2D[spriteName] = texture;
			
			if (onComplete != undefined) {
				onComplete();
			}
			//console.log("loaded");
		});

It works but I hope I am not doing anything weird

[xerver]

Remember to call reset before calling .load() a second time on the same instance of a loader. Usually it is best to .add() all the resources you want to load, then call .load() once. Then reset and load again if you need to load another batch of resources. Calling add/load/reset for each resource is not going to work well.

[ivan.popelyshev]

So far the code you've posted is really weird. Did you look at https://github.com/kittykatattack/learningPixi ?

I dont know why do you need CreateSprite2D in first place, the supposed way for you is to load all textures through loader, then create stage when loader finishes everything. In stage there can be many sprites with same texture,you can take textures either using "loader.resources[name].texture" either using ""Texture.fromImage" , also there are shortcuts like "Sprite.fromImage".

There's no sense in creating sprite just after one texture load.

Also CreateSprite2D looks just like "Sprite.fromImage" .