浅入浅出游戏粒子系统

       游戏粒子系统？什么是粒子系统？第一次听说这个东西，我再想这个东西是不是像化学原子分子那样的系统引擎。经过多年疑惑以及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;
  }

  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函数
来改变粒子 

  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();
  }
 

  //开始启动粒子系统：
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;

   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);
    }
   }
//重画粒子模版 

   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);
  }

//这里开始爆炸 

  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
 

 

 

      动动手，运用您的智慧，创造您的魅力来！

评论

1 楼 梁梓程 2017-07-16  

GitHub里面的那个sand的代码可以换成java的吗？