Skip to main content

starting with pixijs ,typescript and gsap( https://greensock.com/?product-plugin=js-pixiplugin )

Here is a little example of how we can combine the power of WebGL using pixijs , typescript gsap for tween.

i am using https://stackblitz.com which is vscode type online editor

add necessary dependencies

 working example below =>
https://stackblitz.com/edit/typescript-h7u5zm

NPM Install for pixijs

npm install pixi.js

Typescript Definitions for Pixi.js v4


https://github.com/pixijs/pixi-typescript


npm install gsap


https://greensock.com/?product-plugin=js-pixiplugin for pixijs











































Comments











Post a Comment






























Popular posts from this blog



















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 ap...




















Post a Comment









Read more





























adding particles Effect in pixijs using https://pixijs.io/pixi-particles-editor/




























adding particle in pixijs is very easy using the below tool more information can be found below https://github.com/pixijs/pixi-particles https://pixijs.io/pixi-particles-editor/ required packages  /// < reference  path = "node_modules/pixi-particles/ambient.d.ts"  /> import  'pixi-particles' code of particle delcare a     global variable       private  emitter ?: Emitter ;  const  img = PIXI . Texture . from ( "./assets/images/particle.png" );          this . emitter = new  Emitter ( this ,[ img ],{             "alpha" :  {                 "start" :  0.62 ,                 "end" :  0.39             },             "scale" :  {                 "start" :  0.1 ,                 "end" :  0.9 ,                 "minimumScaleMultiplier" :  1.25             },             "color" :  {                 "start" :  "#ffff8f" ,                 "end" :  ...




















Post a Comment









Read more