Skip to main content

Particles

This section provides guidance on setting up Particles. Studio has a built-in particle system component intended for rendering common visual effects found in games and animations.

Particles can be added to the entity via the Studio interface or in code. Adding them in Studio is done via the "New Component" button.

ParticlesNewComponent

MeshNewComponent

Like most particle engines, parameters fall into two categories, emission and simulation.

Emission

Emission attributes define the way particles are placed into the world and some of the global attributes that affect every particle equally.

  • Stopped: If checked the emitter will not emit.
  • Emitter Life: Defines the lifetime of the emitter
  • Particles Per Shot: How many particles are placed every time the emitter fires.
  • Emit Delay: delay between emissions in seconds.
  • Lifespan: Sets a range representing the time particles remain in the scene before despawning.
  • Mass: the mass of each particle, only relevant when simulating physics
  • Gravity: adds a force downwards that makes particles fall.
  • Forces: simple forces in the X, Y and Z relative axis that are applied to every particle.
  • Spread: is the angle the particles move in relation to the emitter.
  • Radial Velocity: if set above 0, the emitter velocity type will change to radial. Radial Velocity is calculated relative to the observer and vectorial forces are influenced by radial force.

Spawn Area Type

Spawn areas change the starting coordinate of the particles.

  • Point: Spawn is set to the coordinates of the emitter.
  • Box: Defines a box using width, height and depth.
  • Sphere: Defines a spawn area of a sphere with a defined radius.
note

These spawn areas won't work properly if dimensions are set to 0.

Bounding zone Type

Bounding boxes dictate the spatial boundaries within which particles are generated.

  • Box: Defines a box using width, height and depth.
  • Sphere: Defines a spawn area of a sphere with a defined radius.
note

These bounding zones won’t work properly if dimensions are set to 0 or negative. If using Spawn Area, the bounding zone needs to occupy a bigger volume than the Spawn Area.

Resource Type

This system is able to render glb assets and simple sprites. Choose a model for 3D or sprite for 2D sprites. Use a publicly accessible url to load the asset to the emitter.

  • Sprites: They have blending options that work similarly to basic photoshop layer effects. These are very handy when creating visual effects like fire, stars or smoke.

Simulation

These parameters will affect the way particles behave on their own after being placed in the world.

  • Color: If sprites are set as a resource type then sprites can change color. Input a hex value of the starting and ending color for them to shift gradually.
  • Random drift: particles will randomly drift in accordance with the random drift range parameter.
  • Collision: If particles get near each other an opposite force will be applied between them.

Parameters

NameTypeDescription
stoppedboolSwitching states will reset emitterLife.
emitterLife numberThe life of the emitter in seconds
particlesPerShotnumberParticles each emission
emitDelaynumberDelay between emissions
minimumLifespannumber Min. range for particle lifetime
maximumLifespannumberMax. range for particle lifetime
massnumberMass of the entity
gravitynumberGravity
scalenumberScale in every dimension
forceXnumberForce applied to particle in X
forceYnumberForce applied to particle in Y
forceZnumberForce applied to particle in Z
spreadnumberArea and direction where the particle spawns relative to its origin
radialVelocitynumberCan be set to 0, else changes the force type applied to each particle to radial velocity
spawnAreaType[point, box, sphere]Point: from origin
spawnAreaWidthnumberSpawnArea width for box type
spawnAreaHeightnumberSpawn Area Height for box type
spawnAreaDepthnumberSpawn Area Depth for box type
spawnAreaRadiusnumberSpawn Area radius for sphere type
boundingZoneType[none, box, sphere]Bounding Zone type
boundingZoneWidthnumberBounding Zone width for box type
boundingZoneHeightnumber Bounding Zone height for box type
boundingZoneDepthnumberBounding Zone depth for box type
boundingZoneRadiusnumberBounding Zone radius for sphere type
resourceType[sprite, model]Sprite: an image, Model: 3d model
resourceUrlstringURL
blendingMode[none, normal, add, multiply, subtract]Only works for sprite. See examples here
animateColorboolEnables color animation
colorStartColor String in hex, example: #fcba03Starting color
colorEndColor String in hex, example: #fcba03Ending color
randomDriftboolEnable Drift
randomDriftRangenumberDrift range and speed
collisionsboolEnable collisions

Examples

GLB emitter

ecs.ParticleEmitter.set(world, component.eid, {
stopped: false,
emitterLife: 10,
particlesPerShot: 5,
emitDelay: 1,
minimumLifespan: 1,
maximumLifespan: 3,
mass: 1,
gravity: 1,
scale: 1,
forceX: 0,
forceY: 60,
forceZ: 0,
spread: 120,
radialVelocity: 0,
spawnAreaType: 'point',
resourceType: 'model',
resourceUrl: 'https://static.8thwall.app/assets/Moon-lowpoly-v3-yg6nmdc1uj.glb',
})

Turn the emitter on after creation

If we want to initialize an emitter with the attribute ‘stopped’ set to true like so:

ecs.ParticleEmitter.set(world, component.eid, {
stopped: true,
//....,
})

We can manually turn it back on like this:

ecs.ParticleEmitter.set(world, component.eid, {stopped: false})