Poryg Posted September 25, 2017 Share Posted September 25, 2017 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 25, 2017 Share Posted September 25, 2017 .load(onAssetsLoad()) // <-- You call the function here!!! .load(onAssetsLoad); // function is stored inside loader, will be called later. Seems like simple JS problem Poryg 1 Quote Link to comment Share on other sites More sharing options...
Poryg Posted September 25, 2017 Author Share Posted September 25, 2017 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) Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 25, 2017 Share Posted September 25, 2017 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; } Quote Link to comment Share on other sites More sharing options...
Poryg Posted September 25, 2017 Author Share Posted September 25, 2017 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 25, 2017 Share Posted September 25, 2017 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 Quote Link to comment Share on other sites More sharing options...
Poryg Posted September 25, 2017 Author Share Posted September 25, 2017 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 25, 2017 Share Posted September 25, 2017 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: Quote Link to comment Share on other sites More sharing options...
Poryg Posted September 25, 2017 Author Share Posted September 25, 2017 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 25, 2017 Share Posted September 25, 2017 Slack is multi-account system. you create an acc per every team you join. Sent you an invite to mail. Quote Link to comment Share on other sites More sharing options...
xerver Posted September 25, 2017 Share Posted September 25, 2017 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. ivan.popelyshev and Poryg 2 Quote Link to comment Share on other sites More sharing options...
Poryg Posted September 25, 2017 Author Share Posted September 25, 2017 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 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.