Skip to main content

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













Comments

Post a Comment

Popular posts from this blog

Creating a word Scramble game where you can drag and drop the word and create a complete word. (drag and drop word Scramble game).

Creating a word game using  phaser game engine which is a javascript based gaming engine  where u can drag and drop world like Word Scramble Game and complete a given word. your index.html file look like below < html > < head > < script src = "src/phaser.min.js" ></ script > < script src = "src/wordGame.js" ></ script > < script src = "src/main.js" ></ script > </ head > < body > </ body > </ html > 1.    <script src="src/phaser.min.js"></script> required to run the  phaser game engine. 2. rest of the two files deals with game logics      <script src="src/wordGame.js"></script>       <script src="src/main.js"></script> you can download whole project from https://github.com/manishchauhan/wordgame/tree/master just copy and paste the project in your local server and run ...
Post a Comment
Read more

starting with three.js and react with a very simple example

 1. three.js is undoubtedly the best library to create interactive content for the web in 3d. link https://threejs.org/ a working sample of three with react can be found below https://stackblitz.com/edit/react-7n5qf9?file=src%2FApp.js why choose threejs 1. lightweight  2.fast 3.big community  https://discourse.threejs.org/ 4. even you can use unity or unreal to publish html5 content but i don't think that would be acceptable in many cases. 5. open-source project. i created a running sample with React  https://stackblitz.com/edit/react-7n5qf9?file=src%2FApp.js
Post a Comment
Read more

A simple binary search tree with generic approach tree can store any type of data. (DFS and BFS)

 1. a binary search tree in c++ using a generic approach with both BFS and DFS approach    working tree    https://www.onlinegdb.com/edit/HkuQLdA-w code=> some properties of binary search tree-> 1. binary search tree is not always a balanced tree.  2. Inorder, traversing gives you sorted data.  3.  best is o(log n) and worst is O(n).  4. left node data is always less than root data and right node data always be greater than root data.  5. red-black tree STL map is a balanced binary search tree. *******************************************************************************/ #include <stdio.h> #include<iostream> #include<queue> using namespace std; template < typename T > class Node {   //can store any type of data private:   //genric data or store any type of data   T data;   //reference of left pointer   Node *left = nullptr;   //reference of right pointer   Node *rig...
Post a Comment
Read more