游戏粒子系统?什么是粒子系统?第一次听说这个东西,我再想这个东西是不是像化学原子分子那样的系统引擎。经过多年疑惑以及unity3d粒子系统使用,我才恍然明白原来这东西才是粒子系统。初中时候,化学老师告诉我们大千世界千物万物都是由分子原子组成,同样许多自然现象也是由很多微小的颗粒组成,它们都有很多相似的行为。如,烟花炮火,瀑布,喷泉,雪花飘飘,山崩地裂。游戏中的粒子系统是用来模拟这种自然现象,给人一种震感的动画效果。(原创:醉翁 )
顾名思义,粒子系统,他是多个部分组成的复杂系统。以unity3d游戏为例, 由粒子发射器,粒子渲染器,粒子动画器,粒子尾带器等组成,其中运用了美学,物理学动力等。我们先学粒子名专有名词:Particle粒子,ParticlesSystem粒子系统,emitter发射器。其原理就是再整个粒子系统生命周期中emitter发射器不断发射粒子,由粒子系统再生命周期每一帧不断使用物理力学地改变粒子的颜色、大小、角度达到一种变换无穷魅力效果。本文将以网页游戏粒子系统简单讲解粒子系统,我这里先看看烟花粒子效果,由于我的笔记本性能不好,运行效果并截图没有那么亮丽:
看看开源粒子系统源码:下载其开源源码这里http://github.com/flashhawk/Simple-Physics-Particle
粒子系统源码:请重点看看红色部分源码
public class ParticlesSystem extends EventDispatcher
{
private var _particlePool : ParticlePool;
private var _particles : Array = [];
private var l : int;
private var _renderBefore:Function;
private var _renderAfter:Function;
public static var STAGE:Stage;
public function ParticlesSystem(renderAfter:Function=null,renderBefore:Function=null)
{
_particlePool = new ParticlePool();
this._renderBefore=renderBefore;
this._renderAfter=renderAfter;
}
{
_particlePool = new ParticlePool();
this._renderBefore=renderBefore;
this._renderAfter=renderAfter;
}
public function createParticle(particleType : Class) : Particle
{
var p : Particle = _particlePool.get(particleType);
p.addEventListener(ParticleEvent.DEAD, removeDeadParticle, false, -1);
_particles.push(p);
return p;
}
//在这里就是粒子系统核心,在粒子系统生命周期不断调用粒子的update函数
来改变粒子
{
var p : Particle = _particlePool.get(particleType);
p.addEventListener(ParticleEvent.DEAD, removeDeadParticle, false, -1);
_particles.push(p);
return p;
}
//在这里就是粒子系统核心,在粒子系统生命周期不断调用粒子的update函数
来改变粒子
private function singleRender(event : Event) : void
{
if(_renderBefore!=null)_renderBefore();
l = _particles.length;
//_particles[l]是粒子发射器发射出来的粒子
while (l-- > 0) _particles[l].update();
if(_renderAfter!=null)_renderAfter();
}
{
if(_renderBefore!=null)_renderBefore();
l = _particles.length;
//_particles[l]是粒子发射器发射出来的粒子
while (l-- > 0) _particles[l].update();
if(_renderAfter!=null)_renderAfter();
}
//开始启动粒子系统:
public function startRendering() : void
{
STAGE.addEventListener(Event.ENTER_FRAME, singleRender);
}
............................
}
我们在看看粒子代码:
public class Particle extends EventDispatcher
{
public var position : Vector2D = new Vector2D();
public var point : Point = new Point();
//粒子开始速度,也就是说粒子往哪里运动
public var velocity : Vector2D = new Vector2D();
//加速度
public var acceleration : Vector2D = new Vector2D();
//粒子摩擦力,物理老师告诉我们摩擦力用来刹车用的
public var friction : Vector2D = new Vector2D(0.1, 0.1) ;
//粒子生命,每一阵减一
private var _life : Number;
private var _forces : Object = {};
//力综合:可能由重力Gravity、吸引力Attraction、旋转角力,排斥力Repulsion,布朗运动力SimpleBrownian
private var _sumForce : Vector2D = new Vector2D();
碰撞矩形边界,除了这个范围粒子生命周期就结束
public var boundary : Rectangle = null;
碰到边界时候的反弹强度系数,默认是2
public var bounceIntensity : Number = 2;
...........................
public function startRendering() : void
{
STAGE.addEventListener(Event.ENTER_FRAME, singleRender);
}
............................
}
我们在看看粒子代码:
public class Particle extends EventDispatcher
{
public var position : Vector2D = new Vector2D();
public var point : Point = new Point();
//粒子开始速度,也就是说粒子往哪里运动
public var velocity : Vector2D = new Vector2D();
//加速度
public var acceleration : Vector2D = new Vector2D();
//粒子摩擦力,物理老师告诉我们摩擦力用来刹车用的
public var friction : Vector2D = new Vector2D(0.1, 0.1) ;
//粒子生命,每一阵减一
private var _life : Number;
private var _forces : Object = {};
//力综合:可能由重力Gravity、吸引力Attraction、旋转角力,排斥力Repulsion,布朗运动力SimpleBrownian
private var _sumForce : Vector2D = new Vector2D();
碰撞矩形边界,除了这个范围粒子生命周期就结束
public var boundary : Rectangle = null;
碰到边界时候的反弹强度系数,默认是2
public var bounceIntensity : Number = 2;
...........................
}
如何实现烟花爆炸:
ParticlesSystem.STAGE=stage;
//设置粒子系统每帧回调函数,也就是这里不断改变粒子形状颜色位置等
ps=new ParticlesSystem(loop);
initCanvas();
private function loop() : void
{
canvasBmd.clear();
//找出所有粒子
l = ps.particles.length;
如何实现烟花爆炸:
ParticlesSystem.STAGE=stage;
//设置粒子系统每帧回调函数,也就是这里不断改变粒子形状颜色位置等
ps=new ParticlesSystem(loop);
initCanvas();
private function loop() : void
{
canvasBmd.clear();
//找出所有粒子
l = ps.particles.length;
while (l-- > 0)
{
var p:Particle=ps.particles[l];
if (ps.particles[l].extra.isFire)
{
//改变粒子位置大小以及颜色
canvasBmd.fillRect(new Rectangle(p.position.x, p.position.y, 4, 4), p.extra.color);
}
else
{
canvasBmd.fillRect(new Rectangle(p.position.x, p.position.y, 3, 3), ps.particles[l].extra.color);
}
}
//重画粒子模版
{
var p:Particle=ps.particles[l];
if (ps.particles[l].extra.isFire)
{
//改变粒子位置大小以及颜色
canvasBmd.fillRect(new Rectangle(p.position.x, p.position.y, 4, 4), p.extra.color);
}
else
{
canvasBmd.fillRect(new Rectangle(p.position.x, p.position.y, 3, 3), ps.particles[l].extra.color);
}
}
//重画粒子模版
blurBmd.draw(canvas, null, null, BlendMode.ADD);
//加上模糊特效
blurBmd.filter = blurFilter;
blurBmd.colorOffset(-5, -5, -5, 0);
postBmd.draw(blurBmp, matrix);
}
、//鼠标点击发射粒子
private function fire(e : MouseEvent) : void
{
var fireParticle : Particle = ps.createParticle(Particle);
//粒子活动范围,超过这个范围混灭粒子
fireParticle.init(canvasBmd.width / 2, canvasBmd.height, 2.6);
fireParticle.extra = {color:Math.random() * 0xffffff, isFire:true};
//这是开始粒子速度
fireParticle.velocity.reset(0, -(6.5 + Math.random() * 4));
//粒子旋转角度,也就是说我往左边或右边运动角度
fireParticle.velocity.rotate(15 - Math.random() * 30);
fireParticle.friction.reset(0, 0);
//加上重力,牛顿定律
fireParticle.addForce("g", gravity);
//烟花飞到空中开始毁灭自己,爆炸
fireParticle.addEventListener(ParticleEvent.DEAD, boom);
}
//这里开始爆炸
//加上模糊特效
blurBmd.filter = blurFilter;
blurBmd.colorOffset(-5, -5, -5, 0);
postBmd.draw(blurBmp, matrix);
}
、//鼠标点击发射粒子
private function fire(e : MouseEvent) : void
{
var fireParticle : Particle = ps.createParticle(Particle);
//粒子活动范围,超过这个范围混灭粒子
fireParticle.init(canvasBmd.width / 2, canvasBmd.height, 2.6);
fireParticle.extra = {color:Math.random() * 0xffffff, isFire:true};
//这是开始粒子速度
fireParticle.velocity.reset(0, -(6.5 + Math.random() * 4));
//粒子旋转角度,也就是说我往左边或右边运动角度
fireParticle.velocity.rotate(15 - Math.random() * 30);
fireParticle.friction.reset(0, 0);
//加上重力,牛顿定律
fireParticle.addForce("g", gravity);
//烟花飞到空中开始毁灭自己,爆炸
fireParticle.addEventListener(ParticleEvent.DEAD, boom);
}
//这里开始爆炸
private function boom(e : Event) : void
{
Particle(e.target).removeEventListener(ParticleEvent.DEAD, boom);
//这里是爆炸粒子数目
var fireNum : int = int(Math.random() * 100 + 200);
while (fireNum-- > 0)
{
// 想拥有你的特效吗请改变他 这里初始化爆炸粒子信息:速度,角速度,重力,摩擦力。改变这里你看到不一样的效果
var fireParticle : Particle = ps.createParticle(Particle);
fireParticle.init(e.target.position.x, e.target.position.y, 1.5);
fireParticle.extra = {color:e.target.extra.color, isFire:false,size:0.5};
fireParticle.velocity.reset(0, 2+Math.random()*2);
fireParticle.velocity.rotate(Math.random() * 360);
fireParticle.friction.reset(0.1, 0.1);
fireParticle.addForce("g", gravity);
}
}
这里是随便改变参数效果:
再看看其他粒子特效:火龙FireDragon
动动手,运用您的智慧,创造您的魅力来!
{
Particle(e.target).removeEventListener(ParticleEvent.DEAD, boom);
//这里是爆炸粒子数目
var fireNum : int = int(Math.random() * 100 + 200);
while (fireNum-- > 0)
{
// 想拥有你的特效吗请改变他 这里初始化爆炸粒子信息:速度,角速度,重力,摩擦力。改变这里你看到不一样的效果
var fireParticle : Particle = ps.createParticle(Particle);
fireParticle.init(e.target.position.x, e.target.position.y, 1.5);
fireParticle.extra = {color:e.target.extra.color, isFire:false,size:0.5};
fireParticle.velocity.reset(0, 2+Math.random()*2);
fireParticle.velocity.rotate(Math.random() * 360);
fireParticle.friction.reset(0.1, 0.1);
fireParticle.addForce("g", gravity);
}
}
这里是随便改变参数效果:
再看看其他粒子特效:火龙FireDragon
动动手,运用您的智慧,创造您的魅力来!