Search the Community

Hello, html5 freaks I trying to make idle game using pixijs, but when I put animated sprite that is 1024x512 in size it freeze game short time. From profiler I saw that texImage2d took 180ms and from that 104ms was imageDecode. I read somewhere to preload the animations before hand and just make them visible when needed, but it didn't work and same texImage2d happend. How I can prevent that other than downscaling the sprite? Also is there possibility to do that in webworker? I read somewhere that pixi is starting to be capable of rendering on webworker. Cheers, Jakub

I am trying to replace a texture atlas of the animated sprite with another one, and play it. On every click I first fetch the texture atlas image from server. Than I make periodic checks if there is any animation still running. Once there is no animation running, I replace animatedSprite.textures with the new on and upload that texture atlas to the gpu. After it is uploaded, I set canRunNext to true, signaling, that everything is uploaded and ready to go. The issue is that app.renderer.plugins.prepare.upload uploads every second texture, for reasons unknown to me. Now this could be hard to visualize so I created a dummy example. After each animation, I run a random next one. you MUST run this on a slow mobile device to see my issue. Well, just don't run it on latest iphones and androids and you should see the issue. The textures in use are just placeholders to convey message. Link: http://forwardingsolutions.club/ Now, the first and second texture are uploaded as expected. if you click on square, the animation is triggered right away. But watch out, the 3. one is not, then the 4. is uploaded, then the 5. again, is not and so on. On every second click, my animation is not uploaded to gpu. I am not getting why is this happening. How would you fix this issue? All the code is available at the website I posted. The meat are these two functions: setupSpritesAnimation() setupNextSpritesAnimation() setupNextSpritesAnimation has a case statement (I trimmed that off to save some space), but inside the case I am basically just fetching a new image from server, and waiting for animation to be over. Once it is over, I create frames for each animation frame and upload them to the gpu. function setupNextSpritesAnimation(){ var newLoader = new PIXI.loaders.Loader() .add('nextSprite', 'pathToSprote.png') .load(function (loader, resources){ start = +new Date(); var interval = setInterval(function(){ if (!isAnimating){ clearInterval(interval); if (!firstRun){ nextSprite.textures = setupFrames(resources["nextSprite"].texture.baseTexture); app.renderer.plugins.prepare.upload(nextSprite, function(){ console.log("updoaded now"); canRunNext = true; isAnimating = false; newLoader.reset(); //console.log("kill"); end = +new Date(); var diff = end - start; console.log(diff); }); } } },50); }); } I hope you can help me out with this stubborn issue. This question is a follow up question on with the live example included. The previous question got no response, probably because of lack of live example.Best regards, Mitt

Hello I would like to know if there's any technique or method to use an animated sprite as a mask. It seems as though you can mask an object with an animated sprite but you loose the animation ability there for end up with a sprite. Any ideas? Thanks