Skip to main content

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





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": "#e6733a"
},
"speed": {
"start": 10,
"end": 200,
"minimumSpeedMultiplier": 1
},
"acceleration": {
"x": 0,
"y": 0
},
"maxSpeed": 0,
"startRotation": {
"min": -90,
"max": -90
},
"noRotation": false,
"rotationSpeed": {
"min": 50,
"max": 50
},
"lifetime": {
"min": 0.1,
"max": 0.75
},
"blendMode": "normal",
"frequency": 0.001,
"emitterLifetime": -1,
"maxParticles": 25,
"pos": {
"x": heroSprite.x+heroSprite.width-125,
"y": heroSprite.y+250
},
"addAtBack": false,
"spawnType": "circle",
"spawnCircle": {
"x": 0,
"y": 0,
"r": 10
}
});


//add
let particle:Particle=new Particle(this.emitter);
this.emitter.emit=true;
        
//update the emitter
update(delta:number)
{
this.emitter.update(delta);
}






e








































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