Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flash Particle System

3,806 views

Published on

Published in: Technology

Flash Particle System

  1. 1. Flash Particle System leonskywalker@163.com
  2. 2. 1.Overview
  3. 3. A particle system usually consists of 3 parts.* Physics *Typical Implementation
  4. 4. Emitter
  5. 5. This is an emitter
  6. 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. 7. Uniform Directional
  8. 8. Point TextField
  9. 9. Particle
  10. 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. 11. This is particle.
  12. 12. This is particle.
  13. 13. This is also particle!
  14. 14. Physics
  15. 15. Physics system controls the motion of every particle. v a G
  16. 16. Even more advanced physics • Mutual Gravity
  17. 17. Even more advanced physics Turbulence
  18. 18. 2.Implement
  19. 19. Physics
  20. 20. Global Environmental Variables • Gravity • Air Resistence Factor • Wind Physics calculations Concrete calculation is in each particle’s loop.
  21. 21. Physics
  22. 22. Particle • Position Attributes* • Velocity (speed and direction) • Color • Lifetime • Age • Shape • Size • Transparency *By Siggraph
  23. 23. Particle • Position Attributes • Velocity (speed and direction) • Color • Lifetime • Age • Shape • Size • Transparency
  24. 24. Value Object ItemRenderer • Velocity • Position • Lifetime • Transparency • Age • Color • Position • Shape • Mass • Size • Update()
  25. 25. Pseudo code function update(){ age++; if(age > lifetime){ dispose(); return; } … calculateAcceleration(SpeedX,SpeedY); updatePosition(acceleration,oldX,oldY); … draw(); }
  26. 26. Physics
  27. 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. 28. ENTER_FRAME particle = new Particle() n times n = number per frame = birthrate / framerate setInitialAttribute(particle); foreach particle in particlesArray particle.update();
  29. 29. A very basic particle system
  30. 30. 3.Optimize
  31. 31. Facts #1: • large amount of objects are being generated. • at the same time large amount of objects are marked for GC.
  32. 32. Try using Object Pool.
  33. 33. Destroy particles Emitter Create Object Pool recycling to pool Trying to find an instance
  34. 34. if(pool.length >0){ return pool.pop(); create }else{ return new Particle(); } particle.initialize(); destroy pool.push(particle);
  35. 35. Facts #2: • large amount of objects are being displayed at the same time.
  36. 36. Try using BitmapData.
  37. 37. Value Object ItemRenderer • Velocity • Position • Lifetime • Transparency • Age • Color • Position • Shape • Mass • Size • Update()
  38. 38. Value Object BitmapCanvas ItemRenderer • Velocity • Position • Lifetime • Transparency • Age • Color • Position • Shape • Mass • Size • Update()
  39. 39. Value Object BitmapCanvas ItemRenderer • Velocity • Lifetime • Age • Transparency • Color • Shape • Position • Mass • Update()
  40. 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. 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. 42. More speed means more effects available.
  43. 43. Glowing trails
  44. 44. Depth of Field
  45. 45. Advanced glow and motion blur
  46. 46. 4.Real world use
  47. 47. Some popular open source particle engines You can start building your works today
  48. 48. http://flintparticles.org/ http://code.google.com/p/stardust- particle-engine/
  49. 49. Plugin Structure Provides more flexibility
  50. 50. Initialize addInitializer(new Color(color)); addInitializer(new Position(new SinglePoint(320, 480))); addInitializer(new Velocity(bitmapZone)); addInitializer(new Life(new UniformRandom(120, 30)));
  51. 51. 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));
  52. 52. Examples used in previous slides: • http://mrdoob.com/lab/pv3d/dof/06/ • http://co.youa.baidu.com/content/promo/10 0shops7/index.html
  53. 53. Thank you! Q&A leonskywalker@163.com Mar 2010

×