PIXI loader doesn't recognize pictures?

[Poryg]

Hi,

I have a huge problem with PIXI.loader. The thing is, I am trying to create an animated sprite, however no loading method I do does any good. The images aren't corrupted and can be opened without any troubles, so the problem is not there...

However, when I try to load the pictures through PIXI.loader, the texture should be created automatically... But it isn't and PIXI.loader.resources [resourcepath].texture throws me undefined (also, if I show the resources in console, it will tell me that isImage = false). If I use PIXI.Texture.fromImage, it returns its' dimensions as 1x1.

The only way I can manage to create some textures is to combine both. So use PIXI.loader, then use PIXI.Texture.fromImage. This throws me double entry warnings (because the resource has already been loaded), creates a 1x1 texture in textureCache, but at least I finally have a valid texture in PIXI.loader. Or an easy fix is to hit Back and Forward in my browser, that will display the animation sprite with no problem.

However, that is both annoying and impractical. I'm fighting with this for two days and still cannot figure out how to tame the pixi textures!

var renderer = new PIXI.CanvasRenderer (window.innerWidth-40, 800);

renderer.autoResize = true

var keyboard;

var stage = new PIXI.Container ();

 

PIXI.loader

    .add (['img/angel1.png', 'img/angel2.png', 'img/angel3.png', 'img/angel4.png', 'img/angel5.png', 'img/angel6.png', 'img/angel7.png', 'img/angel8.png'])

    .load (onAssetsLoaded())

 

function onAssetsLoaded () {

    var frames = []

    for (var i = 1; i<9; i++) {

frames.push (PIXI.Texture.fromImage("img/angel" + i + ".png"))

    }

}

 

So far this is the only code with which I have succeeded to have some usable texture. If I use only Texture.fromImage, I will get textures 1x1, and if I use only loader, it will not make textures and won't recognize these png as images.

I use PIXI version 4.5.6 btw. And canvas or webGL renderer is not relevant, the problem is the same.

Thank you very much.

[ivan.popelyshev]

.load(onAssetsLoad()) // <-- You call the function here!!!

.load(onAssetsLoad); // function is stored inside loader, will be called later.

Seems like simple JS problem

[Poryg]

And guess what, seems you were right

I checked with my book to see if it taught me wrong or I was just being stupid... And have to blame it all on me

Thank you!

I still wonder what is wrong with this code though. (this was me using directly PIXI.Texture.fromImage and constantly created 1x1 textures - I know using unpreloaded resources can cause trouble, so I just want to know if it was me or pixi)

var angelTextures = []

for (var i = 1; i<9; i++){

angelTextures.push (PIXI.Texture.fromImage ("img/angel" + i + ".png"))

}

var angel = new PIXI.extras.AnimatedSprite(angelTextures)

angel.play()

stage.addChild(angel)

[ivan.popelyshev]

I dont see problems in that code, it should work. ITs fine to use "fromImage" if it doesnt bring you problems. Problems mostly appear because you need to do somethign with an image after it was loaded - like, use its width/height.

Btw, if you dont want to write "img/", you just have to creat your own loader instead of using pixi default.

Also, use fromFrame if you want it to crash if it doesnt find the texture. There are multiple ways to get the texture from loader - fromFrame, from resources, and as a second parameter in callback.

var myLoader = new PIXI.loaders.Loader("img/");

myLoader.add(["angel1.png", ...]);
myLoader.load(onAssetsLoad);

function onAssetsLoad(loader, resourcesPassedToMyFunction) {
    var tex1 = PIXI.Texture.fromFrame("angel1.png");

    var tex2 = myLoader.resources["angel2.png"].texture;

    var tex3 = resourcesPassedToMyFunction["angel3.png"].texture;
}

 

[Poryg]

Thanks. I hope I won't be using callbacks, because I like to keep it simple  - and callbacks are just as scary as callers or getters  - not to mention, right now I'm trying to build a site about RPG maker stuff, so nothing complicated for now

The reason I used fromImage was exactly because fromFrame crashed upon not finding textures and I was trying to push them in. But I will keep that in mind

Well, the only thing left for me to wish is to be better in programming. So far it takes me about 5 hours to make 20 lines of code, due to making lots of typos and errors likethat one... If only there was a way

[ivan.popelyshev]

Yes, certainly, callbacks can be a problem if you are not experienced in async coding. Its good decision to avoid them.

I happen to be responsible for RMMV integration with pixijs. Shame I dont have much time for it  

[Poryg]

I know about that actually, have made a research about rpg maker's pixi and found your post

It is still amazing though how many performance issues rmmv has. So many that I have begun to study some pixi to be able to just pixify all the systems I need and relieve cpu of the unnecessary strain. 

But then... First problem: RMMV pixi doesn't even have a loader  So you need to load everything through Texture.fromImage (luckily it works without trouble unless you export it on the browser)

Then I have recently came to realization that PIXI.extras.AnimatedSprite is glitched in RMMV... Normal sprites work without issues, AnimatedSprite does too... until you add it to the scene.

And last but not least, I'Ve been trying to decipher how the rpg maker draws tilemaps, but well, so far haven't made it

[ivan.popelyshev]

The problem is that RMMV requires more features from loader, and PIXI loader is just different. I will make big update of Bitmap class and ImageCache that'll affect performance. Its possible that AnimatedSprite is glitched, because it uses separate requestAnimationFrame from the one that RMMV does. The correct way is to switch off autoUpdate and call update from RMMV .

Btw, if you use slack, I can send you an invite to pixijs slack, there's special channel about rmmv issues related to pixi. There are people who make things like that: 

 

[Poryg]

Yeah, it's the same issue as when you're trying to make pixi and three.js work together  You can't have two different tickers running even there.Always have to deactivate one when you want to use the other. And there is no reason to deactivate RMMV's, since it would cause another troubles.

Although it is true that I have no idea how to call the rmmv update from PIXI.Animated sprite... I know how to stop the autoUpdate though

I don't use slack, but maybe it might be worth it to create an account  After all, there's not too much information about pixi available online and even less in mv pixi, because there aren't many people who use pixi in mv. I've created some basic tutorials about it, but I doubt it will convince too many people

[ivan.popelyshev]

Slack is multi-account system. you create an acc per every team you join. Sent you an invite to mail.

[xerver]

1 hour ago, ivan.popelyshev said:

I dont see problems in that code, it should work. ITs fine to use "fromImage" if it doesnt bring you problems. Problems mostly appear because you need to do somethign with an image after it was loaded - like, use its width/height.

Btw, if you dont want to write "img/", you just have to creat your own loader instead of using pixi default.

Also, use fromFrame if you want it to crash if it doesnt find the texture. There are multiple ways to get the texture from loader - fromFrame, from resources, and as a second parameter in callback.

var myLoader = new PIXI.loaders.Loader("img/");

myLoader.add(["angel1.png", ...]);
myLoader.load(onAssetsLoad);

function onAssetsLoad(loader, resourcesPassedToMyFunction) {
    var tex1 = PIXI.Texture.fromFrame("angel1.png");

    var tex2 = myLoader.resources["angel2.png"].texture;

    var tex3 = resourcesPassedToMyFunction["angel3.png"].texture;
}

 

You can just assign the baseUrl property before adding resources, you don't have to create a new loader.

1 hour ago, Poryg said:

And guess what, seems you were right

I checked with my book to see if it taught me wrong or I was just being stupid... And have to blame it all on me

Thank you!

I still wonder what is wrong with this code though. (this was me using directly PIXI.Texture.fromImage and constantly created 1x1 textures - I know using unpreloaded resources can cause trouble, so I just want to know if it was me or pixi)

var angelTextures = []

for (var i = 1; i<9; i++){

angelTextures.push (PIXI.Texture.fromImage ("img/angel" + i + ".png"))

}

var angel = new PIXI.extras.AnimatedSprite(angelTextures)

angel.play()

stage.addChild(angel)

fromImage is working here but the image is loaded asynchronously. Which means you won't know the size until later after the image has loaded. There are events you can listen to, but it is honestly easier and more robust to use the loader than it is to use the fromX() methods.

[Poryg]

36 minutes ago, ivan.popelyshev said:

Slack is multi-account system. you create an acc per every team you join. Sent you an invite to mail.

So far nothing has come neither to pm nor to actual email, not even to spam. But well, I'll take a look later. Edit: it came now

@xerver Noted down. I'll be using loader whenever I can.  It's time to return to work. Thank you guys