Better Memory management with PixiJS or How to manage cpu and cpu memory in PixiJS.

PixiJS is my favorite framework when i am looking for a web games specially for mobile or desktop

 PixiJS is fast blazing fast and you can get a decent FPS even on older device.

 

so here is my optimization techniques for PixiJs

1. manage your sprites in a better way use spritesheet to reduce the draw calls create big sprite sheet which contain multiple sprites can be draw in gpu with a single draw call.

use TexturePacker https://www.codeandweb.com/texturepacker best tool when its comes to spritesheet

2. for floating point calculation round off calculation for example

let speed=0.75;

let position=100;

console.log(Math.round(speed*position))

3. don't create very big canvas when u need a big canvas size game just try to create a small canvas and translate it.

4. its very important one managing TextureCache in memory you can get all TextureCache list by using 

Object.entries(PIXI.utils.TextureCache);

so even you use app.stage.removeChild(alienContainer); or this. removeChild(yourContainer); still sprite or container not removed completely from the memory let me show you example using video

so after watching above video you can see using Object.entries(PIXI.utils.TextureCache); still 6 TextureCache in your memory but you don't want them so use 

alienContainer.destroy({children:true, texture:true, baseTexture:false});

    alienContainer=undefined;

1. clean all children and container

2.  because texture holds strong reference with sprite or container so use sprite.destory(true) or

alienContainer.destroy({children:true, texture:true, baseTexture:false});  check out second parameter use true if you want texture cache removed from the memory else false. Even you can remove baseTexture using true.

    

best method 

this.removeChild(yourcontainer);

yourcontainer.destroy({children:true, texture:true, baseTexture:false});

5. don't update too many animation inside update loop . Updating too many sprite inside update loop can decrease your game frame rate very fast try to use tween libraries to complete most of the animation task like https://greensock.com/ is one of my favorite.

6.  Nested container in pixi is a good practice as container is very lightweight and can they can hold children when you are dealing with complex ui so use them no problem.

7. To change color frequently (sprite or shape) use  Tint when your game or application running on Webgl it's free and no overhead but in canvas case try to avoid it.

8.use cacheAsBitmap or use flat JPEG images where you don't need transparent background images PNG is always heavy than JPEG due to lossless data compression and supports transparent layers.

9.https://tinypng.com/ is great tool to compress your image without losing  any  image quality when dealing with sprites.

10. fixed time step is best way to deal physics simulation like box2d

 more about fixed time step--> more about fix time step

https://gafferongames.com/post/fix_your_timestep/

Performance tips by Pixijs team below

  

https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips