Proton基础教程_一个 JavaScript 粒子引擎

Proton基础教程

官方网址:http://a-jie.github.io/Proton/

Proton基础教程_一个 JavaScript 粒子引擎

GitHub:https://github.com/a-jie/Proton

简介描述:一个 JavaScript 粒子引擎

Proton是一个灵活的html5粒子引擎。他默认支持canvas,dom,webgl,easeljs,pixel五种渲染方式,当然你还可以轻易的自定义自己的渲染器。只需10几行代码就可以打造你想要的粒子效果。 

Proton安装

npm install proton-js --save
... 
import Proton from 'proton-js';

使用

var proton = new Proton();
var 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
var renderer = new Proton.CanvasRenderer(canvas);
proton.addRenderer(renderer);

//use Euler integration calculation is more accurate (default false)
Proton.USE_CLOCK = false or true;

 

海计划公众号
(0)
上一篇 2020/03/06 09:10
下一篇 2020/03/06 09:09

您可能感兴趣的内容