1. Flash Particle System
leonskywalker@163.com

2. 1.Overview

3. A particle system
usually consists of
3 parts.*
Physics
*Typical Implementation

4. Emitter

5. This is an emitter

6. What an emitter do:
1.emit particles.
2.controls how to emit particles.
(birthrate, velocity, direction..etc).
3.holds a zone to generate particles.
(can be a point, textfield or any bitmapdata using
alpha mask..etc)

7. Uniform
Directional

8. Point
TextField

9. Particle

10. Particle is What is a particle?
1.What you just see(the little blocks).
2.Basic units of a particle system.
3.Usually in (really) large number.
4.Does not necessarily be small.

11. This is particle.

12. This is particle.

13. This is also particle!

14. Physics

15. Physics system controls the motion
of every particle.
v a
G

16. Even more advanced physics
• Mutual Gravity

17. Even more advanced physics
Turbulence

18. 2.Implement

19. Physics

20. Global Environmental Variables
• Gravity
• Air Resistence Factor
• Wind
Physics calculations
Concrete calculation is in each
particle’s loop.

21. Physics

22. Particle • Position
Attributes* • Velocity (speed and direction)
• Color
• Lifetime
• Age
• Shape
• Size
• Transparency
*By Siggraph

23. Particle • Position
Attributes • Velocity (speed and direction)
• Color
• Lifetime
• Age
• Shape
• Size
• Transparency

24. Value Object ItemRenderer
• Velocity • Position
• Lifetime • Transparency
• Age • Color
• Position • Shape
• Mass • Size
• Update()

25. Pseudo code
function update(){
age++;
if(age > lifetime){
dispose();
return;
}
…
calculateAcceleration(SpeedX,SpeedY);
updatePosition(acceleration,oldX,oldY);
…
draw();
}

26. Physics

27. We need one major loop to
• Generate and dispose particles.
• Interacting with mouse position(if
needed).
• Update particles’ attributes(position,
rotation, alpha..etc.).
We can put it in Emitter class

28. ENTER_FRAME
particle = new Particle() n times
n = number per frame
= birthrate / framerate
setInitialAttribute(particle);
foreach particle in particlesArray
particle.update();

29. A very basic particle system

30. 3.Optimize

31. Facts #1:
• large amount of objects are being
generated.
• at the same time large amount of
objects are marked for GC.

32. Try using Object Pool.

33. Destroy particles
Emitter
Create
Object Pool
recycling to pool
Trying to find an instance

34. if(pool.length >0){
return pool.pop();
create }else{
return new Particle();
}
particle.initialize();
destroy pool.push(particle);

35. Facts #2:
• large amount of objects are being
displayed at the same time.

36. Try using BitmapData.

37. Value Object ItemRenderer
• Velocity • Position
• Lifetime • Transparency
• Age • Color
• Position • Shape
• Mass • Size
• Update()

38. Value Object BitmapCanvas
ItemRenderer
• Velocity • Position
• Lifetime • Transparency
• Age • Color
• Position • Shape
• Mass • Size
• Update()

39. Value Object BitmapCanvas
ItemRenderer
• Velocity
• Lifetime
• Age
• Transparency
• Color
• Shape
• Position
• Mass
• Update()

40. bitmapdata.lock()
point foreach particle in particleArray
bitmapdata.setpixel32()
bitmapdata.unlock();
bitmap Bitmapdata.copyPixels()
(No rotation and scale)
sprite bitmapdata.draw(source,
matrix, colorTransform
)

41. • More memory usage
(compared to cacheAsBitmap=false)
• Drastic performance boost
Because we manually overrode the process of native displaying,
bypassed the native rasterize engine

42. More speed means
more effects available.

43. Glowing trails

44. Depth of Field

45. Advanced glow and motion blur

46. 4.Real world use

48. Some popular open
source particle engines
You can start building your works today

49. http://flintparticles.org/
http://code.google.com/p/stardust-
particle-engine/

50. Plugin Structure
Provides more flexibility

51. Initialize
addInitializer(new Color(color));
addInitializer(new Position(new
SinglePoint(320, 480)));
addInitializer(new Velocity(bitmapZone));
addInitializer(new Life(new
UniformRandom(120, 30)));

52. Particle Behavior:
var gravity:Gravity = new Gravity();
gravity.addField(new UniformField(0, 0.1));
addAction(gravity);
addAction(new Age());
addAction(new DeathLife());
addAction(new Move());
addAction(new AlphaCurve(0, 60));

53. Examples used in previous slides:
• http://mrdoob.com/lab/pv3d/dof/06/
• http://co.youa.baidu.com/content/promo/10
0shops7/index.html

54. Thank you!
Q&A
leonskywalker@163.com
Mar 2010