flash particle system

54
Flash Particle System [email protected]

Upload: leonskywalker

Post on 25-Jun-2015

3.566 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Flash Particle System

Flash Particle [email protected]

Page 2: Flash Particle System

1.Overview

Page 3: Flash Particle System

A particle system usually consists of

3 parts.*

*Typical Implementation

Emitter Particle

Physics

Page 4: Flash Particle System

Emitter

Page 5: Flash Particle System

This is an emitter

Page 6: Flash Particle System

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)

Page 7: Flash Particle System

Uniform

Directional

Page 8: Flash Particle System

Point

TextField

Page 9: Flash Particle System

Particle

Page 10: Flash Particle System

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.

Page 11: Flash Particle System

This is particle.

Page 12: Flash Particle System

This is particle.

Page 13: Flash Particle System

This is also particle!

Page 14: Flash Particle System

Physics

Page 15: Flash Particle System

Physics system controls the motion of every particle.

v GP( x , y )

f

aSome high-

school Physics!

Page 16: Flash Particle System

Even more advanced physics

• Mutual Gravity

Page 17: Flash Particle System

Even more advanced physics

Turbulence

Page 18: Flash Particle System

2.Implement

Page 19: Flash Particle System

Emitter Particle

Physics

Page 20: Flash Particle System

Global Environmental Variables

• Gravity• Air Resistence Factor• Wind

Concrete calculation is in each particle’s loop.

Physics calculations

Page 21: Flash Particle System

Emitter Particle

Physics

Page 22: Flash Particle System

ParticleAttributes*

• Position• Velocity (speed and direction)• Color• Lifetime• Age• Shape• Size• Transparency

*By Siggraph

Page 23: Flash Particle System

ParticleAttributes

• Position• Velocity (speed and direction)• Color• Lifetime• Age• Shape• Size• Transparency

Page 24: Flash Particle System

Value Object

• Velocity• Lifetime• Age

• Position• Transparency• Color• Shape• Size

ItemRenderer

• Position• Mass• Update()

Page 25: Flash Particle System

Pseudo codefunction update(){

age++;if(age > lifetime){

dispose();return;

}…calculateAcceleration(SpeedX,SpeedY);updatePosition(acceleration,oldX,oldY);…draw();

}

Uses global physics variables

Page 26: Flash Particle System

Emitter Particle

Physics

Page 27: Flash Particle System

• Generate and dispose particles.

• Interacting with mouse position(if needed).

• Update particles’ attributes(position, rotation, alpha..etc.).

We can put it in Emitter class

We need one major loop to

Page 28: Flash Particle System

particle = new Particle() n timesn = number per frame = birthrate / frameratesetInitialAttribute(particle);

ENTER_FRAME

foreach particle in particlesArrayparticle.update();

Page 29: Flash Particle System

A very basic particle system

Page 30: Flash Particle System

3.Optimize

Page 31: Flash Particle System

• large amount of objects are being generated.

• at the same time large amount of objects are marked for GC.

Facts #1:

Page 32: Flash Particle System

Try using Object Pool.

Page 33: Flash Particle System

Object Pool

Emitter

particles

Create

Trying to find an instance

Destroy

recycling to pool

Page 34: Flash Particle System

create

if(pool.length >0){return pool.pop();

}else{return new Particle();

}

destroy particle.initialize();pool.push(particle);

Page 35: Flash Particle System

• large amount of objects are being displayed at the same time.

Facts #2:

Page 36: Flash Particle System

Try using BitmapData.

Page 37: Flash Particle System

Value Object

• Velocity• Lifetime• Age

• Position• Transparency• Color• Shape• Size

ItemRenderer

• Position• Mass• Update()

Page 38: Flash Particle System

Value Object

• Velocity• Lifetime• Age

• Position• Transparency• Color• Shape• Size

ItemRenderer

• Position• Mass• Update()

BitmapCanvas

Page 39: Flash Particle System

Value Object

• Velocity• Lifetime• Age

ItemRenderer

• Position• Mass• Update()

BitmapCanvas

• Transparency• Color• Shape

Page 40: Flash Particle System

pointbitmapdata.lock()foreach particle in particleArray

bitmapdata.setpixel32()bitmapdata.unlock();

sprite bitmapdata.draw(source,matrix, colorTransform)

bitmap Bitmapdata.copyPixels()

(No rotation and scale)

Page 41: Flash Particle System

•More memory usage (compared to cacheAsBitmap=false)

•Drastic performance boostBecause we manually overrode the process of native displaying, bypassed the native rasterize engine

Page 42: Flash Particle System

More speed means more effects available.

Page 43: Flash Particle System

Glowing trails

Page 44: Flash Particle System

Depth of Field

Page 45: Flash Particle System

Advanced glow and motion blur

Page 46: Flash Particle System

4.Real world use

We are looking

forward to see

your works!

Page 47: Flash Particle System
Page 48: Flash Particle System

Some popular open source particle enginesYou can start building your works today

Page 49: Flash Particle System

http://flintparticles.org/

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

Page 50: Flash Particle System

Plugin StructureProvides more flexibility

Page 51: Flash Particle System

addInitializer(new Color(color));

addInitializer(new Position(new SinglePoint(320, 480)));

addInitializer(new Velocity(bitmapZone));

addInitializer(new Life(new UniformRandom(120, 30)));

Initialize

Page 52: Flash Particle System

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

Particle Behavior:

Page 54: Flash Particle System

Thank you!

[email protected] 2010

Q&A