- ×Show All
- Easy to use It takes only a dozen lines of code to create a particle animation effect.
- Multiple effects Use Proton to create flames, fireworks, bullets, explosions, and more.
- Any scene You can use it in frameworks such as
- Efficient rendering Its rendering efficiency is very high, you can render tens of thousands of particles in the page.
- Simulated physics Proton can simulate various physical properties including gravity and Brownian motion.
- Several renderers Proton provides a variety of renderers, of course you can also customize your own renderer
CanvasRenderer- Proton's canvas renderer
DomRenderer- Proton's dom renderer, supporting hardware acceleration.
WebGLRenderer- Proton's webgl renderer.
PixelRenderer- Proton's pixel renderer, It can implement pixel animation.
EaselRenderer- Easeljs proton renderer.
EaselRenderer- Pixi.js proton renderer.
CustomRenderer- Use a custom renderer that can be applied to any scene.
Install using npm
Note: NPM package-name has been changed from
npm install proton-engine --save
import Proton from 'proton-engine';
OR include in html
Proton is very simple to use, a dozen lines of code can create a particle animation.
const proton = new Proton(); const emitter = new Proton.Emitter(); //set Rate emitter.rate = new Proton.Rate(Proton.getSpan(10, 20), 0.1); //add Initialize emitter.addInitialize(new Proton.Radius(1, 12)); emitter.addInitialize(new Proton.Life(2, 4)); emitter.addInitialize(new Proton.Velocity(3, Proton.getSpan(0, 360), 'polar')); //add Behaviour emitter.addBehaviour(new Proton.Color('ff0000', 'random')); emitter.addBehaviour(new Proton.Alpha(1, 0)); //set emitter position emitter.p.x = canvas.width / 2; emitter.p.y = canvas.height / 2; emitter.emit(5); //add emitter to the proton proton.addEmitter(emitter); // add canvas renderer const renderer = new Proton.CanvasRenderer(canvas); proton.addRenderer(renderer);
Proton.getSpan) is a very important concept of the Proton engine, it's everywhere. If you understand its usage, you can create almost any desired effect!
If you want to create wind, rain, or snow, etc, you can use the
emitter.preEmitmethod to pre-render the scene.
Proton.Colorat the same time. I suggest you'd better use the
Proton.Cyclonebehavior, you can make vortex effects with Cyclone. Demo please check here.
proton.fpsIn most cases, you don't need to set this property. You can set this property when the game engine has fixed fps or some browsers have a higher refresh rate.
Use Euler integration calculation is more accurate (default false)
Proton.USE_CLOCK = false or true;.
Proton has now been upgraded to the v4 version. Performance has been greatly improved and api also has some improvements. For more details, please check here.
nodeis a dependency, use terminal to install it with:
git clone git://github.com/drawcall/Proton.git ... npm install npm run build
And run example
npm start //vist http://localhost:3001/example/
Detailed changes for each release are documented in the release notes.
Proton is released under the MIT License. http://www.opensource.org/licenses/mit-license