Search the Community

I need to display a large number (for example 400) of high resolution textures at the same time, for this I used the ParticleContainer from the example - https://pixijs.io/examples/#/demos-basic/particle-container.js. But in the end, I get FPS = 10-15, the more sprites, the lower the FPS, even if you turn off the animation - there is no difference, the image in idle mode also heavily loads the browser, which is why the page scroll is very freezing. - https://codesandbox.io/s/admiring-lamarr-p8bvyf?file=/index.html I could not find a solution anywhere, so I will be grateful for your help.

Hello friends. I need a little help in my project. I have array of images with id and url. any part of those images can be rendered in different occasions, based on user filtering. I have custom resource manager which saves all downloaded images (or failed downloads) with id and resource returned by PIXI.Loader, and for each new image checks if texture is already available, if not adds id and url to Loader and loads. Now my problem is that image array itself is also user defined, so url's might be incorrect or duplicate. If there's two images (two different IDs) to be displayed and they have same url, I technically dont have them downloaded because I'm checking with id and they have different id, so I'm adding both to the Loader resource and load. I dont know how loader handles that but it throws this warning: BaseTexture added to the cache with an id [image url] that already had an entry Warning itself is not big of a problem, but I think loader still downloads the image twice and then tries to cache it, and then is this warning thrown. so I dont want download to be performed twice when I know that i already have a texture (or will have with different resource I guess). Can anyone please help me. I dont even know what can be the correct fix in this case, let alone how to do that

Hello friends. My first post here. So, I'm working on a small project with around hundred images on big ViewPort. I have basic drag-and-drop functionality of images and I'm using manual requestAnimationFrame to render stage only during image dragging. Now I need to add drop-shadow on all Images. I have tried @Pixi/filters-drop-shadow package by bigtimebuddy but during dragging it significantly drops frame rate. Can anyone please suggest any other way to make drop-shadows with good performance. (P.S. I have thought of using pieces of shadow as a png and scale and skew them and assembly them in a way to look as real drop-shadow on any size of image on any zoom factor. But, that's kind of ridiculously complicated idea and I'm hoping for better suggestions. ) Thank you in advance.

Considering: I am curious if there is some sort of configuration which can crop drawings outside a particular boundary? Thanks

Hi, all! https://jsfiddle.net/OlegShaygu/ra303eu9/12/ Is it piossible to refuse black screen delay when the game starts? It happens on first milliseconds of the start.. Thanks in advance

Hi community, I have been using Pixi js for some time now, absolutely love it. I am using their latest version 4.3.4 and notice in Google Chromes Console there is 256+ Warnings looking like this: My world is currently 2000x2000px, with roughly 200 sprite objects in it (pretty tiny really) I have tried: removing all of my pixi Graphics objects, the warnings still show commenting out all of my world sprites, the warnings still show commenting out all of my player sprites, the warnings still show There is a performance degradation if the browser loads the game loop prior to the warnings finished, probably because of a race condition with the Web Socket requests. Any help would greatly be appreciated!

If we can, please explain with some steps! Thanks!

Hi Team, I'm looking to increase my world from 2000px2 => 8000px2+ (maybe even 12k if it works out) I haven't been successful in finding a way I could crop/clone so to speak a rectangle within the main app.renderer object to my other viewport canvas. //Proposed canvas setup (pseudo setup): app_canvas = { styles: { width: "8000px", height: "8000px", display: "none" } }; viewport_canvas = { styles: { width: window.innerWidth, height: window.innerHeight } }; /******************************* * * Proposed render logic (pseudo): * ******************************** ** ** While rendering... ** get the coordinates of my camera... ** clone the texture of app_canvas ** Plot the cloned texture into viewport_canvas ** ********************************/ Is this possible? Is there a better way to do this? I am aware of the other threads talking about culling techniques but I'm willing to keep that conversation to the side and focus on this topic. Thanks