×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
查看: 8274|回复: 24

简单的粒子系统

  [复制链接]
发表于 2011-3-26 08:32:40 | 显示全部楼层 |阅读模式
本帖最后由 cao4811 于 2011-3-26 08:39 编辑

简单的粒子系统

首先在硬盘的任意目录下建一个名为 parts 的文件夹(学习使用路径),把 Particle1.as 类文件保存在文件夹中。

粒子类:Particle1.as
  1. package parts
  2. {
  3.         import flash.display.Shape;
  4.        
  5.         public class Particle1 extends Shape
  6.         {
  7.                 private var velx:Number;
  8.                 private var vely:Number;

  9.                 public function Particle1()
  10.                 {
  11.                         super();
  12.                         init();
  13.                 }
  14.                
  15.                 private function init():void
  16.                 {
  17.                         //设置随机的位置
  18.                         x = Math.random() * 445;
  19.                         y = Math.random() * 445;
  20.                         //设置随机的速度
  21.                         velx = Math.random() * 10 - 5;
  22.                         vely = Math.random() * 10 - 5;
  23.                         //绘制矩形,填充色随机
  24.                         graphics.beginFill(Math.random() * 0xFFFFFF);
  25.                         graphics.drawRect(0, 0, 20, 20);
  26.                         graphics.endFill();
  27.                 }
  28.                
  29.                 public function update():void
  30.                 {
  31.                         //更新位置
  32.                         x += velx;
  33.                         y += vely;
  34.                         //检测边界
  35.                         if (x < 0)
  36.                         {
  37.                                 x = -x;
  38.                                 velx = -velx;
  39.                         }
  40.                        
  41.                         //计算横边界
  42.                         else if (x > 445)
  43.                         {
  44.                                 x = 445 - (x - 445);
  45.                                 velx = -velx;
  46.                         }
  47.                         //check if hitting top edge of swf
  48.                         if (y < 0)
  49.                         {
  50.                                 y = -y;
  51.                                 vely = -vely;
  52.                         }
  53.                        
  54.                         //计算纵边界
  55.                         else if (y > 445)
  56.                         {
  57.                                 y = 445 - (y - 445);
  58.                                 vely = -vely;
  59.                         }
  60.                 }

  61.         }
  62. }
复制代码
解释:定义私有变量 velx 和 vely 存储粒子速度。构造函数Particle1() 中调用 super()和 init() 函数,super()是用于调用超类(也叫父类)的构造函数中的所有代码。init()方法用于x、y位置和velx、vely初始化设置和绘制 20 X 20 的正方型。update()方法用于x、y位置的更新和x、y边界的检测。

然后再建一个名为 ParticlesExample1.as 的类文件保存在 parts 文件夹平行的目录中。

主类:ParticlesExample1.as
  1. package
  2. {
  3.         import flash.display.Sprite;
  4.         import flash.events.Event;
  5.         //导入parts.Particle1类
  6.         import parts.Particle1;
  7.        
  8.         [SWF(backgroundColor="#333333", frameRate="30", width="465", height="465")]
  9.         public class ParticlesExample1 extends Sprite
  10.         {
  11.                 private const PARTICLE_NUMBER:uint = 25;
  12.                 private var particles:Array;

  13.                 public function ParticlesExample1()
  14.                 {
  15.                         super();
  16.                         init();
  17.                 }
  18.                
  19.                 private function init():void
  20.                 {
  21.                         //储存
  22.                         particles = [];
  23.                         //生成粒子
  24.                         for (var i:uint=0;i<PARTICLE_NUMBER;i++)
  25.                         {
  26.                                 //随机的位置和速度生成粒子
  27.                                 var p:Particle1 = new Particle1();
  28.                                 //把粒子添加到显示列表
  29.                                 addChild(p);
  30.                                 //压入
  31.                                 particles.push(p);
  32.                         }
  33.                         //注册帧事件侦听器
  34.                         addEventListener(Event.ENTER_FRAME, loop);
  35.                 }
  36.                 //响应函数
  37.                 private function loop(event:Event):void
  38.                 {
  39.                         //循环遍历
  40.                         for (var i:uint=0;i<PARTICLE_NUMBER;i++)
  41.                         {
  42.                                 //更新每一个粒子
  43.                                 particles[i].update();
  44.                         }                       
  45.                 }

  46.         }
  47. }
复制代码
解释:生成25个 Particle1 实例并加入到舞台中,注册进入帧事件侦听器,对数组的每一个元素进行循环遍历。形成25个粒子在舞台中随机移动,碰到边界后弹回的效果

以 Particle1 为模板改写为 Particle2

Particle2.as
  1. package parts
  2. {
  3.         import flash.display.Shape;
  4.        
  5.         public class Particle2 extends Shape
  6.         {
  7.                 private var velx:Number;
  8.                 private var vely:Number;

  9.                 public function Particle2()
  10.                 {
  11.                         super();
  12.                         init();
  13.                 }
  14.                
  15.                 private function init():void
  16.                 {
  17.                         //设置x、y位置于舞台的中心
  18.                         x = 232.5;
  19.                         y = 232.5;
  20.                         //设定一个随机的方向运动
  21.                         var angle:Number = 2 * Math.PI * Math.random();
  22.                         //设定随机的运动速度
  23.                         var speed:Number = 5 + Math.random()* 5;
  24.                         //转换x 和 y方向而且加速度
  25.                         velx = speed * Math.sin(angle);
  26.                         vely = speed * Math.cos(angle);
  27.                         //清除先前绘制的正方形
  28.                         graphics.clear();
  29.                         //绘制随机颜色的正方形
  30.                         graphics.beginFill(Math.random() * 0xFFFFFF);
  31.                         graphics.drawRect(0, 0, 20, 20);
  32.                         graphics.endFill();
  33.                 }
  34.                
  35.                 public function update():void
  36.                 {
  37.                         //更新位置
  38.                         x += velx;
  39.                         y += vely;
  40.                         //如果粒子飞出边界调用init()函数把粒子加入到舞台中
  41.                         if (x < -20 || x > 465 || y < -20 || y > 465)
  42.                                
  43.                                 init();
  44.                                
  45.                                 parent.addChild(this);
  46.                 }

  47.         }
  48. }
复制代码
注释已经很清楚,废话不多说了。

PlayingExample2.as
  1. package
  2. {
  3.         import flash.display.Sprite;
  4.         import flash.events.Event;
  5.        
  6.         import parts.Particle2;
  7.        
  8.         [SWF(backgroundColor="#333333", frameRate="30", width="465", height="465")]
  9.         public class PlayingExample2 extends Sprite
  10.         {
  11.                 private const PARTICLE_NUMBER:uint = 100;
  12.                 private var particles:Array;

  13.                 public function PlayingExample2()
  14.                 {
  15.                         super();
  16.                         init();
  17.                 }
  18.                
  19.                 private function init():void
  20.                 {
  21.                         //somewhere to store a reference to the particles
  22.                         particles = [];
  23.                         //create particles
  24.                         for (var i:uint=0;i<PARTICLE_NUMBER;i++)
  25.                         {
  26.                                 //create a particle with random position and velocity
  27.                                 var p:Particle2 = new Particle2();
  28.                                 //add particle to stage
  29.                                 addChild(p);
  30.                                 //store reference to particle for later
  31.                                 particles.push(p);
  32.                         }
  33.                         //start looping
  34.                         addEventListener(Event.ENTER_FRAME, loop);
  35.                 }
  36.                
  37.                 private function loop(event:Event):void
  38.                 {
  39.                         //loop through the particles
  40.                         for (var i:uint=0;i<PARTICLE_NUMBER;i++)
  41.                         {
  42.                                 //tell each particle to update itself
  43.                                 particles[i].update();
  44.                         }                       
  45.                 }

  46.         }
  47. }
复制代码
100个粒子不断的从舞台中心涌出的效果

Particle3.as
  1. package parts
  2. {
  3.         import flash.display.Shape;
  4.        
  5.         public class Particle3 extends Shape
  6.         {
  7.                 private var velx:Number;
  8.                 private var vely:Number;
  9.                
  10.                 private var accx:Number = 0;
  11.                 private var accy:Number = 0.3;

  12.                 public function Particle3()
  13.                 {
  14.                         super();
  15.                         init();
  16.                 }
  17.                
  18.                 private function init():void
  19.                 {
  20.                         //set to center of swf
  21.                         x = 232.5;
  22.                         y = 232.5;
  23.                         //随机方向运动
  24.                         var angle:Number = 2 * Math.PI * Math.random();
  25.                         //随机的速度
  26.                         var speed:Number = 3 + Math.random()* 3;
  27.                         //转换x、y方向而且加速
  28.                         velx = speed * Math.sin(angle);
  29.                         vely = speed * Math.cos(angle);
  30.                         //clear any previous square
  31.                         graphics.clear();
  32.                         //draw a square
  33.                         graphics.beginFill(Math.random()*0xFFFFFF);
  34.                         graphics.drawRect(0, 0, 20, 20);
  35.                         graphics.endFill();
  36.                 }
  37.                
  38.                 public function update():void
  39.                 {
  40.                         //更新速度
  41.                         velx += accx;
  42.                         vely += accy;
  43.                         //更新位置
  44.                         x += velx;
  45.                         y += vely;
  46.                         //检查边界
  47.                         if (x < -20 || x > 465 || y < -20)
  48.                         {
  49.                                 //if so, restart
  50.                                 init();
  51.                                 //and bring to front of display list
  52.                                 parent.addChild(this);
  53.                         }
  54.                         //check if hitting bottom edge of swf
  55.                         else if (y > 445)
  56.                         {
  57.                                 //if so, bounce up
  58.                                 y = 445 -(y - 445);
  59.                                 //and scrub off some velocity so bounces lower each time
  60.                                 vely = -vely * 0.8;
  61.                         }
  62.                 }

  63.         }
  64. }
复制代码
Particle3 与Particle2 的区别是加入了引力(也叫重力)。

   说一下力与加速度:速度改变了物体的位置,从而使物体实现运动,加速度则是改变速度。当速度变化时,物体的运动称为变速运动。
加速度是通过力来实现的,力用F表示,加速度用a表示,它们之间的关系称为牛顿第二定律:

F = m * a

其中,m 是物体的质量。可以把物体看成是质点,即物体的质量为1,就有了下面的公式:

F= a

表示的意思是:力即加速度。

加速度是影响速度的向量,使用方法简单,只需把旧速度加上加速度:

新速度=旧速度+加速度

在程序中处理加速度更简单:

速度=速度+加速度  更简洁的方式:速度+=加速度

引力(重力)

自由落体运动是受到引力作用的运动,物体开始时是静止的,即速度为0,然后受到引力的作用,速度不断加快,从而实现竖直向下的加速运动。

实现自由落体运动,需定义速度和加速度:

var gra:Number=5;
var vy:Number=0;

变量gra表示引力产生的加速度,变量vy是初始速度,物体开始是静止的,所以初始值为0。
然后使用引力改变速度的公式:

va+=gra;

最后通过速度改变物体的位置:

mc.y+=vy;

ParticlesExample3.as
  1. package
  2. {
  3.         import flash.display.Sprite;
  4.         import flash.events.Event;
  5.        
  6.         import parts.Particle3;
  7.        
  8.         [SWF(backgroundColor="#333333", frameRate="30", width="465", height="465")]
  9.         public class ParticlesExample3 extends Sprite
  10.         {
  11.                 private const PARTICLE_NUMBER:uint = 50;
  12.                 private var particles:Array;

  13.                 public function ParticlesExample3()
  14.                 {
  15.                         super();
  16.                         init();
  17.                 }
  18.                
  19.                 private function init():void
  20.                 {
  21.                         //somewhere to store a reference to the particles
  22.                         particles = [];
  23.                         //create particles
  24.                         for (var i:uint=0;i<PARTICLE_NUMBER;i++)
  25.                         {
  26.                                 //create a particle with random position and velocity
  27.                                 var p:Particle3 = new Particle3();
  28.                                 //add particle to stage
  29.                                 addChild(p);
  30.                                 //store reference to particle for later
  31.                                 particles.push(p);
  32.                         }
  33.                         //start looping
  34.                         addEventListener(Event.ENTER_FRAME, loop);
  35.                 }
  36.                
  37.                 private function loop(event:Event):void
  38.                 {
  39.                         //loop through the particles
  40.                         for (var i:uint=0;i<PARTICLE_NUMBER;i++)
  41.                         {
  42.                                 //tell each particle to update itself
  43.                                 particles[i].update();
  44.                         }                       
  45.                 }

  46.         }
  47. }
复制代码
加入引力后形成物体下落效果,物体飞出左右边界后重置回舞台中心,落到底边界时反弹回来。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?[免费注册]

x

评分

参与人数 1 +8 +2 收起 理由
sanbos + 8 + 2 多谢教程,辛苦了。

查看全部评分

发表于 2011-3-26 09:05:46 | 显示全部楼层
收下学习了
回复 支持 反对

使用道具 举报

发表于 2011-3-26 11:49:39 | 显示全部楼层
看起来好麻烦啊
回复 支持 反对

使用道具 举报

发表于 2011-3-26 12:04:08 | 显示全部楼层
这些代码还真复杂!
回复 支持 反对

使用道具 举报

发表于 2011-3-26 13:28:41 | 显示全部楼层
不算复杂啦
回复 支持 反对

使用道具 举报

发表于 2011-3-28 16:47:57 | 显示全部楼层
老师:第二个Particle2.as文件放在第一个文件夹pasts可以的吧?第一个出效果了,第二个怎么没有效果呢?
回复 支持 反对

使用道具 举报

发表于 2011-3-28 22:58:40 | 显示全部楼层
运行后没有东西输出呀?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-3-29 12:18:27 | 显示全部楼层
本帖最后由 cao4811 于 2011-3-29 12:21 编辑

回复 知否 的帖子

所有的Particlex.as都放在parts 文件夹中。
回复 支持 反对

使用道具 举报

发表于 2011-3-29 12:51:33 | 显示全部楼层
本帖最后由 知否 于 2011-3-29 20:00 编辑

cao4811老师,你好!我照着您提示的要求全部重新操作了一下,第一第三个出效果了,唯独第二个,既不报错也不出效果!{:1_169:}

报告老师!问题终于找出来了!第二个as文件名应该是PlayingExample2;我把它写成和第一第三个一样的了!谢谢老师的教材!关于粒子的教材资料,还会继续下去的吧!企盼!
回复 支持 反对

使用道具 举报

发表于 2011-3-29 14:47:36 | 显示全部楼层
好东东,适合我们初学者,
回复 支持 反对

使用道具 举报

发表于 2011-4-5 15:54:44 | 显示全部楼层
老师,我怎么能把这些方块变成照片,最后码放在屏幕前,替换方块的变量
回复 支持 反对

使用道具 举报

发表于 2011-4-18 07:30:00 | 显示全部楼层
老师好,我下载了两遍。第一次下载的怎么也搞不成功,测试时老是报错,说多余的“else”语句。我删除了又出现新的报错。我又改。接着又出现问题。叫我改得乱七八糟。我心一烦就全删除了。第二次我吸收教训,严格按照老师的打求做。结果成功了。谢谢楼主。希望楼主能继续开发下去。
回复 支持 反对

使用道具 举报

发表于 2013-5-28 11:10:58 | 显示全部楼层
学习了,谢谢!!!!
回复 支持 反对

使用道具 举报

发表于 2014-4-13 12:51:08 | 显示全部楼层
非常好的教程,慢慢学吧,由于基础太差,谢谢老师!
回复 支持 反对

使用道具 举报

发表于 2014-6-7 12:39:38 | 显示全部楼层

由于基础太差,谢谢老师
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [免费注册]

本版积分规则