粒子

【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

杀马特。学长 韩版系。学妹 提交于 2020-03-24 08:05:28
3 月,跳不动了?>>> Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处。 前言 好吧,说是“粒子引擎”还是大言不惭而标题党了,离真正的粒子引擎还有点远。废话少说,先看[demo],扫描后点击屏幕有惊喜哦… 本文将教会你做一个简单的canvas粒子制造器(下称引擎)。 世界观 这个简单的引擎里需要有三种元素:世界(World)、发射器(Launcher)、粒子(Grain)。总得来说就是:发射器存在于世界之中,发射器制造粒子,世界和发射器都会影响粒子的状态,每个粒子在经过世界和发射器的影响之后,计算出下一刻的位置,把自己画出来。 世界(World) 所谓“世界”,就是全局影响那些存在于这这个“世界”的粒子的环境。一个粒子如果选择存在于这个“世界”里,那么这个粒子将会受到这个“世界”的影响。 发射器(Launcher) 用来发射粒子的单位。他们能控制粒子生成的粒子的各种属性。作为粒子们的爹妈,发射器能够控制粒子的出生属性:出生的位置、出生的大小、寿命、是否受到“World”的影响、是否受到”Launcher”本身的影响等等…… 除此之外,发射器本身还要把自己生出来的已经死去的粒子清扫掉。 粒子(Grain) 最小基本单位,就是每一个骚动的个体。每一个个体都拥有自己的位置