Search the Community

Hello! I upgraded my engine to use PIXI v6 instead of v4 and noticed a significant increase in the drawing time (especially pronounced in iPad 6th Gen). Left is V6 and Right is V4, in the same scene. I originally thought it was a problem with the getLocalBounds call in spines that I had in the render loop and managed to improve the scripting time by about 10% but I then noticed that the rendering and painting had increased dramatically... the same game that runs at 30-40fps with V4 runs at 15-25fps with V6 in an iPad. Weirdly though, the draw calls in V4 were about 170 and in v6 dropped to about 60 (checked with spector.js chrome extension) which would indicate to me that the fps would be better but they are not, sadly. Setting 'transparent' to true or false when creating the PIXI.Renderer does nothing 😕 Is this a known thing? I searched for days and could not find anything about this EDIT: I can send the Spector.js reports for V4 and V6 if it helps but they are too big to be embedded here!

Hi Everyone, I'm working on a Guitar Hero / Rocksmith like game in Pixi.js: a song plays and some boxes scroll towards a cursor that lets a guitarist know how to play along. Website if anyone is interested: aimusiclessons.com. I'm running into performance issues, specifically with stutter and after 1.5 weeks going through PIXI issues and HTML5 dev forums and trying a bunch of different approaches I'm completely lost with what to do next. The stutter really impacts UX and my sanity. Any help/guidance would be greatly appreciated. There's no crazy animations, filters, or massive amounts of sprites, so it should be running smooth even on a crappy device. For the experiments below I removed all the microphone monitoring and processing, it's just straight up PIXI and Howler (playing the mp3 file). Example video of stutter issue (sorry for Justin Bieber - I'm sorry too, it's been my test song for 1.5 weeks). app_stutter_example.mp4 I'm developing in Chrome (other browsers affected as well): dev tools says 60fps and no dropped frames, all render ticks are happening well within 16.6ms acceptable bounds. Mobile performance has stutter too, and lower fps ~40fps. I've tried 2 different approaches to drawing boxes (boxes are variable width, so need to be scalable). There's max 15 boxes on screen at a time and max maybe 3000 boxes total in a 3.5min song. Each box is Pixi.Container containing a graphics object drawing roundedRect for the foreground, roundedRect for the background shadow, Pixi.Text for the number. I read there's a potentially a bunch of performance issues with Pixi.Graphics so I've also tried calling cacheAsBitmap on each box after assembling it when loading the stage to try to speed up rendering later on: seems to be a bit more stable in terms of stutter than my other attempts but still noticeably bad. I also don't love this approach because I need to change the box tint realtime and then need to disable cacheAsBitmap then re-enable which seems inefficient. ^ this is a frame that takes longer to render (some take 2ms, some 9ms like this one). With this approach, relatively low GPU usage (GPU tasks are each under 1ms), 60fps (we don't drop a frame), but stutter exists I think because variability in length of time to render frame. Don't appear to have bad GC calls. I found this post that Ivan responded to that suggests a sprite for the left of rounded rect, sprite for middle, and sprite for right of rounded rect. I created images in a sprite sheet for the left, middle (1px), and right of the boxes (sprite for each) and then setting .width on the middle sprite (tried both Sprite and TilingSprite) to have variable width boxes. Instead of using Pixi.Text, load image of text number from spritesheet. Stutter still exists. No bad GC calls. ^ with this approach all the frame renders seem to be much shorter (<2.5ms each). In other performance snapshots I saw longer GPU tasks in bad stutter sections (some up to 10ms long), but can't recreate that today. Edit: was able to recreate it this morning, here's the performance snapshot (see the bunch of grey peaks in the timeline corresponding with long GPU tasks): Here's Spector.js rendering out a frame I've tried 2 different approaches to scrolling, culling: Putting all the boxes into one Pixi.Container. Changing the x position of the Container every tick to scroll all the boxes over. Culling algorithm runs every mod 15 frames that sets .visible/.renderable on off-screen boxes. Pooling: constructing a pool of 20 boxes on load and request/releasing them in culling algorithm when they would be on screen. Swap texture for text number I need. Set width (stretch) middle sprite to have the correct width box. Scroll by changing x position of each active box on stage directly: ~15 DisplayObject position updates per frame. Other things I've tried: Seemingly every combination of PIXI.settings (antialiasing, resolution, GC_MODE, ROUND_PIXELS, etc.) https://github.com/pixijs/pixijs/issues/7771: I do subclass PIXI containers and Sprites in my OOP code. I painstakingly changed that structure and it didn't help. Removing every object/widget on the screen except for the background guitar fretboard and the scrolling note boxes. Still stutter. Using pixi preloader (although I think loading BaseTexture from sprite atlas loads up the GPU anyways so redundant). POT spritesheet to enable MIPMAP. I ran into a bunch of issues with artifacts on the screen, but still didn't help stutter. Disabling all browser extensions running There's no transpiling happening with Babel, etc. I just want this thing to run smoothly. It should be able to and that's why I'm frustrated (and length of time debugging this). I created a CodePen with a minimal example that demonstrates the stutter: https://codepen.io/gburlet/pen/QWqxxLE. This uses @ivan.popelyshev's idea of rendering variable length boxes with 3 sprites and culls using a Sprite pool. If you sit and watch the movement, sometimes it's smooth and then stutters here and there, and sometimes gets into bad sections of stutter then recovers, at least on my macbook, mac pro, iPad, iPhone (all > 2017 devices). On my beefy gaming computer with nvidia card seems to run OK. Any suggestions, guidance, advice, help? Thanks!

Hello everyone, I'm suggesting using pixi (v5) for a component on a really bloated site, and its bringing too much weight to the final bundle. We don't need everything the library offers, so I was wondering if we can import what we need and maybe minimize the impact on the final bundle weight. Has anyone encountered a similar issue? How did you manage it?

Hello I have an application where i need to display approximately 1000 elements (with 5 main shapes and dynamic colors). I have think at several different approach : - Using only Graphics but as it is says in the documentation (Using 300 or more graphics objects can be slow, in this instance use sprites, if you can create a texture to share between them.) - Using Sprites from Textures from Graphic (the problem of this approach it that i have elements colored dynamically, and i'm not able to generate a Texture from a Graphic => I don't want to use either @pixi/canvas-graphics) - Using Shaders I don't have any overview regarding shaders performances. Is it better than Sprites ? than Graphics ? I would like to make the right decision in terms of performances and good practices. Thank you in advance. Have a good day !

I am using Pixi.js to make a 2d graphics editing engine similar to Figma. The demand scenario is that users need to create up to 10k+ graphics in the Container and have free editing, grouping, and sorting functions. Besides, the visual area needs to be moved and zoomed. For the various performance issues that might be involved in this scenario, I searched a lot of existing posts and learned the following optimization measures: I am optimistic about the performance of Pixi.js in this scenario. I believe that algorithm-level optimizations can solve most performance problems, but there are still problems remaining: Finally, even if I am very satisfied with the performance, various out-of-the-box features, and powerful extendibility of Pixi.js, I still want to know, in the scenario of the 2d graphics editing engine: I searched a lot of posts and information, but still have a lot of confusion above, I am very sorry for asking so many questions?! You can cite relevant documents or links to answer my questions as much as possible, and I will learn more about it, which can save you precious time! If possible, I hope that my product will eventually become an excellent example of Pixi.js, and I have confidence in this! I would like to thank the Pixi.js team for their continuous contribution to the WebGL field!

I'm researching about creating a visual " algebra geometry " desktop game-oriented app for students which the user can create 2D primitive shapes and parametric shape patterns with help of numeric-nodes. the similar application would be something like " grasshopper " plugin for " rhino 3d ". In parametric patterns user may create some thing around 1000 to 1500 user-defined shapes which each shape: - has its own animation for vertices, position, rotation - may response to mouse interactions - has its own color or texture and stroke - will be generated dynamically in runtime base on user input also I have to code a mini node base editor . I've seen and study web-techs and precious libs and frameworks like Pixi and searched alot about best practices. I have some questions and I'll be grateful if you help me to find the answers: - is web-techs suitable for the application? - according to what I absorbed from API docs, PIXI.Graphics is designed for none-continues changing shapes so should I instead extend PIXI.Mesh or the Graphics does the job? what is the best way of creating such a shape? - should the custom-shape class be my biggest concern or there are other performance related things I need to take care of? - any further suggestion ? thanks ?

I couldn't seem to find a clear solution online that would apply to me anywhere but if this has been discussed elsewhere feel free to link me there. My game's fps dips after running for only a few minutes. Shortly after my os slows down because my game uses up all the memory of the browser. I suspect the culprit is how I currently draw sprites because my "game" currently only involves placing a few sprites/text on the screen. I have my custom game framework setup to only really use Pixi.js primitives like PIXI.Texture, PIXI.Sprite, PIXI.Text, etc. My Spritesheet class currently contains a single texture attribute that refers to the texture of the entire spritesheet. When it's time to take a single sprite from the Spritesheet, the Spritesheet object creates a copy of its texture attribute and creates a new PIXI.Sprite object using that copy. I create a copy of the texture because changing rect of the Spritesheet's texture attribute would affect all sprites that use that Spritesheet. Drawing involves only adding the PIXI.Sprite object to the stage and clearing just removes all children from the app stage (I don't currently use containers). Here's the method that creates a sprite from the Spritesheet: SpriteSheet.prototype.getSprite = function(index_X, index_Y){ let rect = this._getRectFromIndex(index_X, index_Y); let texture = new PIXI.Texture(this.texture); texture.frame = rect; return new PIXI.Sprite(texture); }; this._getRectFromIndex is just an internal calculation that returns the PIXI.Rectangle object for the frame Here's the draw method: Renderer.prototype.draw = function(child){ this.app.stage.addChild(child); }; And here's the clear method: Renderer.prototype.clear = function(){ this.app.stage.removeChildren(); }; I'm pretty sure creating new Textures/Sprites every frame and only clearing the stage is the cause so I'm wondering what's the best way to improve performance with what I've given. Would just iterating and destroying these textures in clear every frame suffice?

[SOLVED] We finally found out the culprit, I set the antialias to true in PixiJS while createJs didn't. My player reported that after turning off the antialias, it works better than the createJs. Hello everybody, my name is Draco. I am the creator of a web game called stabfish.io My game was built using createJS with Animate export plugin. Unsatisfied with the performance, recently I convert the whole game using PixiJS v5, with pixi-animate plugin. After revamping the game, the performance of the game on my computers has a significant boost. However, there are reports by 2-3 players that the performance has dropped after the update. I would like to know if you have any insight into what might be causing this. In case you guys interested to compare, these are the link: createjs: https://stabfish.io/old pixiJs: https://stabfish.io/pixi I had a debug session with the player who has a performance issue where I try to gather some information and try something to see if the performance improves, these are some clues: 1. The frame rate is dropping significantly when he is playing in full screen in a bigger resolution. (10fps he said) 2. He has 60 fps with createJs version. 3. Both versions have the same amount of displayed object. No special culling in either version. 4. The scripting part (logic/cpu) seems to run smoothly, as I have a built-in detection using setInterval to detect whether the game update frequency is not reaching 60 updates per sec 5. I asked him to turn off the 'hardware acceleration' in the chrome browser to fallback to canvas2d purposely, where he reported no significant change, however, it shows that the logic update is affected immediately in my log Please tell me if you know what's the difference between createJS and PixiJS that could cause such issue. Thank you .

I've been playing around with pixi-layers for a few days now and I've noticed 2 things: The layer.on("sort", ...) callback is being called continuously (on each tick if I had to guess). Each elements within layers have an updateOrder attribute that's continuously incrementing: Screen Recording 2020-06-04 at 21.38.49.mov All of that lead me to believe that layers are being continuously re-sorted (I may be mistaken), and I was wondering what was the point of doing such thing? Wouldn't be better to listen for an element's zOrder to change? This behavior can be observed on the example files as well.

I'm just curious what are regarded as best practices to avoid the dreaded GC pauses that can mess with the framerate of your game. I've only made some really simple games so I don't really have that much experience with this. Generally the way I've made objects when outside gamedev type situations is pretty close the Crockford-style way of making objects by have a factory function that returns an object literal with functions that closures that refers to variables inside functioning as private variables. (Technically I use TypeScript, but I don't really need to get into the types for this discussion.) const createObject = (someArg) => { let variable = someArg; return { changeVariable: (change) => { variable += change; }, getVariable: () => variable, }; }; const o = createObject(42); o.getVariable(); // 42 o.changeVariable(3); o.getVariable(); // 45 From a purely programming ergonomics perspective this is the way of writing objects I find the most comfortable (not trying to convince anyone else here, this is just my preference). However, I've read many places that aspects of this can be bad for performance (even Crockford admits this about his own pattern). in typical JavaScript programming this seems fine to me, but for games I worry that I'm limiting myself in performance which can lead to slowness or limits to for exampe how many objects I can have running in my game. This has made me think that I maybe ought to be using ES6 classes (or something else that uses prototypes) instead of my closure based approach. Also, maybe I should use object pools? Or hell, maybe even entity-component-systems? Suddenly this stuff seems really complicated (I'm _almost_ wishing I could just use malloc and free, haha). How do you people deal with this? How do you balance ease of testing out ideas while having an reasonable path towards optimization if needed be? I'm generally thinking of using Pixi.js for graphics (hence why I posted in this forum), and Matter.js for the times I want a dedicated physics engine. Sorry for the long post! I'll be very grateful for any thoughts on this!

Hey. I would like to know about drawCalls and their optimization. For example, there is an atlas, one of the pictures with additive blending mode. - Can we do it all in 1 drawCall. (If possible, explain why it is impossible and how it would be possible). The second question, is the developer Yggdrasil in his games uses sequence, an atlas filled with sequences. My developers said that the sequence in Pixi js is bad, and it is better not to use them because of optimization. But Yggdrasil normally uses them and is not afraid of it. Do they use webgl instances? with vertex shader? Can you tell me?

I have written a simple demo to render 8000 cubes in BabylonJS. But found out it's quite slower than in ThreeJS. Demo in BabylonJs: https://jsfiddle.net/6ng7usmj/ Demo in ThreeJS: https://jsfiddle.net/pofq4827/ It does not make sense, because BabylonJS supports more performance related features like vao. Any help would be greatly appreciated.

So I've been looking into the new updates to Phaser CE (2.7.0+) and what has caught my eye the most is the updates to the way Phaser handles textures. It now seems to have the ability to handle texture compression formats for WebGL which is exciting! Previous to this, all the games I had worked in were just loading PNG RGBA data into the graphics card and having come from other engines that support texture compression for GPU RAM optimizations, it was definitely a feature I missed. I've branched on an old project I had in order to test this new compression system but I'm not sure how it would work with atlases. I was already using Texture Packer before to generate Texture Atlases for the game but they were just PNG atlases. I came across this Advanced Rendering Tutorial where it explains how to set up your Texture Packer project. I've gone ahead and done that but the examples only show the ability to load an image with those compression settings. Here is a doc reference to the load image function. Currently, I am using this.game.load.atlasJSONHash('key', 'texturePNGURL', 'jsonURL'); It seems the new update only supports the following two calls this.game.load.image('factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' }); this.game.load.texture('factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' }); How would I go about loading my atlases with the accompanying JSON information using the new compression system?

I have canvas 1920 x 1080 and 5 different Spine animations that uses a lot of textures. Add 20 animations of every type all over the screen Test performance in two ways. For this I use GPU-Z and check GPU load parameter 1) Every animation has its own atlas with images and json file - GPU Load 47% 2) Every animation has its own json file but uses the same atlas with images - GPU Load 61% Made the same tests with sprites as well, total amount of sprites is 180, 10 of each type. 1) Each sprite has its own download link - GPU Load 90 % 2) All textures are in the same spritesheet - GPU Load 63% Why tests with Spine have opposite results? PC config is Google Chrome v65, Windows 10, AMD Radeon HD 7450, Intel Xeon x5650

Hi everybody, I am starting with Pixisjs and getting a small performance issue with something that should be really simple to process: when I draw a triangle (moveTo, lineTo) on each mousemove event with one of the points which is the mouse position, it performs well at the beginning, but the more i follow on with mouse move, the worse get the performance. After a minute, the FPS ist really low. I made a pen to illustrate it: https://codepen.io/daviddarx/pen/MLEbvE If I clear the graphic at the beginning of each mouse move event (//graphics.clear();), the performance stays good all the time. But unfortunately, it given't the effect that I will reach anymore :( . Am I missing something? Should I try another approach to draw elements on the stage on high frequency without erasing the stage first? Thank you a lot for your support! David

I have a heavy load Babylon scene (all meshes are optimized), which runs sufficiently well on desktops and tablets. The same site is slugish, slow or does not run at all on many mobiles when accesing through the mobiles browsers. I guess this is pretty normal since mobile GPUs are not as powerful as let's say tablets' GPU. So I guess the best thing to do is to test if the site is being accessed by a mobile device and divert the user to a mirror site where the textures are of lesser quality and the mesh sizes are smaller. Is that a correct solution? Is there any other ways of boosting performance Secondly, will wrapping the site into a Mobile app such as Cordova boost performance as compared to accessing the site through the mobiles' browser? Has anybody had experience with Windows apps running Babylon.js and were there any performance gains?

Hey! Did anybody compare Phaser and pixi for performance? We're going to make isometric game. bottom line is about objects you could render per screen. What do you think? What to choose? Phaser 2, PIXI, or maybe Phaser 3? Need the canvas renderer of course, not webgl. Update: I've the same question in the phaser slack channel. It seems that the PIXI would be better for isometric game then Phaser 2.

I've loaded two animations in Pixi with spritesheets. I wanna swap to second animation right after the first animation is finished. However, (It's happen with a 3840x1080 resolution, and the GPU memory usage is mainly fall between 90%-99%) 1. there's a significant lag of the transition between these two animations in the first time. 2. After the first play, if I remove and add the animatedSprite from the stage immediately, the transition is very smooth. 3. After the first play, If I remove the 2 animatedSprite from the stage, wait for ~2-3 minutes and add the 2 animatedSprite into the stage again, the transition is lagging again. I wanna know the proper way of swapping two animation in Pixi and also the reason of this phenomenon.

Hi, I have problem with phaser performance. The phaser CPU usage is too high. Configuration : - game is on phaser 3 with vue - main page is on vue with game in iFrame this.gameInstance = new Phaser.Game({ width: properties.width, height: properties.height, resolution: PIXEL_RATIO, "callbacks.postBoot": function() { document.getElementsByTagName("canvas")[0].style.width = properties.width + "px" document.getElementsByTagName("canvas")[0].style.height = properties.height + "px" }, scaleMode: 0, type: Phaser.CANVAS, parent: document.getElementById('game'), title: '☕️ Brunch with Phaser and ES6', // 'My Phaser 3 Game' url: 'https://github.com/samme/brunch-phaser-es6', version: '0.0.1', banner: { background: ['#e54661', '#ffa644', '#998a2f', '#2c594f', '#002d40'] }, fps: { min: 10, target: 60, forceSetTimeout: true, }, loader: { path: 'static/phaser/', }, physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 300 }, }, }, scene: [ LoaderScene, BootScene, DefaultScene, GameOverScene, ], }); CPU usage: - Phaser = 40% - Phaser with vue = 80-90% - main page without iframe = 5-10 % - main page with iframe = 100% js heap size: - Phaser = 50 - 70 MB - Phaser with vue ~ 70 - 100MB - main page without iFrame ~ 50 - 80 MB - main page with iFrame ~ 100 - 150 MB The game is equipped with 20-30 icons, 10 atlases, 19 mp3 sounds and 5 background image, with total size of assets about 3MB. Thank you in advance

Hi everyone, I'm new with PIXI, and I'm wondering this situation. I want to make a rectangle, and its border can be changed when we hover. I tried search on Google and almost people say I should redraw the rectangle everytime mouse over or out the rectangle to change its border. Like this: But then I ask myself why don't create another rectangle on top of the first rectangle, set it the color we want, make it invisibe and only show it when hover. By doing this we don't have to redraw the original rectangle everytime mouse hover. This is good for optimization, I think. Does anyone can explain me this is good or bad? Thank you for your answer.

When I run my game in Firefox, after a few minutes of gaming or even just rotating the camera, the FPS in the game starts periodically drops. Of the stable 60 FPS drops by about a couple of seconds to 20-30 or even just stops. And it starts to happen more and more often. To fix this i need to reboot the browser, nothing else helps. I researched in the performance devtools in the browser and found that this is due by "Cycle Collection" process. ( Note: when I start recording performance, all FPS drops disappear, as if I restarted the browser. And I have to wait again for a while before they start. ) Has anyone else experienced this issue? What could it be? Another Firefox's WebGL bug? In Chrome and Edge i have no problems.

I am troubleshooting a rendering performance problem with PIXI. I have an 1920 x 1080 image slideshow. The images fill the entire window and are scaled up if needed. Once an image has loaded, I load another image on top of that image (with alpha = 0) then fade it in. When the new image is faded in, the previous one is removed from the PIXI.Container. All this works 100% awesome on my brand new MacBook Pro. 60fps, very low memory consumption. It's great! But when I load it onto a BrightSign player (basically a ROKU box made specifically for Digital Signage) it has TERRIBLE performance. I was able to attach a chrome debugger to the chromium instance on the player and found that it's running around ~10 fps on average. The thing I don't understand is why each frame takes ~120ms. It looks like the CPU time for each frame is only around ~8ms max, sometimes a lot less. Does anyone here know what might be causing this? Here's my code in case it's helpful. // Begin PixiPlugin Hack ////////////////////////////// // // This is the only way to force PixiPlugin to be included in the bundle // import PixiPlugin from "gsap/PixiPlugin"; var b = PixiPlugin; console.log(b != null ? "PixiPlugin Loaded" : ""); // End PixiPlugin hack ////////////////////////////// import { TimelineMax } from "gsap"; import { NewsFetcher, NewsItem } from "../data"; import { isWebGL, getScreenSize } from "../layout"; import { scalePhoto } from "../layout"; let fetcher = new NewsFetcher(window.model); let begin = async () => { const screenSize = getScreenSize(); const w = screenSize.width; const h = screenSize.height; let app = new PIXI.Application({ width: screenSize.width, height: screenSize.height, antialias: true, forceCanvas: !isWebGL(), backgroundColor: 0x0 }); document.body.appendChild(app.view); const photoLayer = new PIXI.Container(); app.stage.addChild(photoLayer); let index: number = 0; let content: NewsItem; const feed = fetcher.feed; const next = async () => { // The next() function will download the image and store it in the texture cache // if it is not already in the texture cache. content = await feed.next(); // getImage() returns a new PIXI.Sprite using the texture from the cache let photo = content.getImage(); scalePhoto(photo, screenSize); photo.position.set(w / 2 - photo.width / 2, h / 2 - photo.height / 2); photoLayer.addChild(photo); var tl = new TimelineMax({ onComplete: () => { if (index > 0) { // Remove previous photo after new photo has faded in on top of it. photoLayer.children[0].destroy(); } index++; next(); } }); // This just fades in the photo tl.from(photo, 1, { pixi: { alpha: 0 } }, 0); }; next(); }; begin();

TL;DR - How can I programmatically detect slow / choppy animation? My company uses pixi.js to create animations for digital signage (screens in waiting rooms, train stations, airports, billboards, etc). Our clients use a wide variety of hardware to display our animated content. Some of them are high powered, but most of them are pretty crappy. Most of our animations are rendered at HD (1920x1080) or 4K (3840x2160) and often have large images in them (news photo with headline). I have noticed on really low-end hardware when we animate the images using a ken-burns effect or a slide-in effect, the animation is VERY choppy, even for devices which support WebGL. We want to be able to programmatically detect choppy playback and use that info to adapt the animation. Here's some psuedo code... if (isLowQuality()) { // Show content without animation effects } else { // Use high-quality animation effects (filters, cross-fades, etc) } Does anyone here have advice how I could implement the isLowQuality() function? Do I measure average ticker.FPS over a few seconds? If so, what's the best way to do that? I am new to PIXI. Any help is appreciated

I'm writing a 2D space shooter. It started as a single player Phaser2 game a couple of years back, and now it's multiplayer with socketcluster.io providing the back end on node.js. The game is at the point where performance is starting to matter (and degrade), and I'm having a bad time rendering the slither.io-quantity of sprites on the screen. I'm probably just writing bad code, and I'm quite happy to work through that myself, but I'm not sure that I'm using the right frameworks underneath, and I'd like some help sorting that out before I start working through the problems I am having. What I'm wondering is whether I should persist with Phaser2 and socketcluster.io and debug my performance issues here (Chrome dev-tools reckons that most of my time is being spent in drawImage or textaImage2D in Phaser2), or if I should first upgrade from Phaser2 to something else like Phaser3 or PIXI4? Perhaps socketcluster is not as important as I once thought? Can anyone give me a kick in the right direction on this? Thanks!

Hello, So I need to add like 500 images and this is How I'm doing it: class CreateP extends PIXI.Container { constructor(id, x, y, width, height) { super() this.id = id this.bla = PIXI.Sprite.fromImage(`blabla.png`) //images/textures are not same this.bla.anchor.x = 0.5; this.bla.anchor.y = 0.5; this.bla.x = x this.bla.y = y this.bla.width = width this.bla.height = height this.addChild(this.bla) } } module.exports = CreateP this.blas = new PIXI.Container(); this.stage.addChild(this.blas); . . . this.blas.addChild(new CreateP(id, x, y, width, height)) now it kinda effects on performance pretty a lot, well I know this is a big number but I was wondering if there are some ways to improve the performance? maybe there is a better way to add these images? this doesn't seems normal to me. is this updateTransform and GC normal here? I mean I'm not changing anything about those sprites. they are already added BTW the sprites never move or change or any thing. they just get destroyed after a while. Could RenderTexture help here? I read the docs but honestly couldn't understand what is the purpose of it Thanks