melonjs
    Preparing search index...

    Class ParticleEmitter

    Particle Emitter Object.

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    _defaultParticle _dt _updateCount alpha alwaysUpdate ancestor anchorPoint autoDepth autoSort autoTransform backgroundColor blendMode body clipping currentTransform edges enableChildBoundsUpdate floating GUID indices isDirty isKinematic isPersistent mask name onChildChange onVisibilityChange points pos root settings shader sortOn type updateWhenPaused

    Accessors

    bottom centerX centerY depth height inViewport isFlippedX isFlippedY isFloating left parentApp right tint top width

    Methods

    addChild addChildAt angleTo burstParticles centerOn clone contains containsRectangle copy distanceTo draw equals flipX flipY forEach getAbsolutePosition getBounds getChildAt getChildByGUID getChildByName getChildByProp getChildByType getChildIndex getChildren getIndices getNextChild getOpacity getRandomPointX getRandomPointY getRootAncestor hasChild isAttachedToRoot isConvex isFinite isRunning lookAt moveDown moveToBottom moveToTop moveUp onCollision onDestroyEvent overlaps postDraw preDraw recalc removeChild removeChildNow reset resize rotate scale scaleV setChildsProperty setOpacity setShape setSize setVertices shift sort stopStream streamParticles swapChildren to2d toIso toPolygon transform translate union updateBounds

    Constructors

    • Parameters

      • x: number

        x position of the particle emitter

      • y: number

        y position of the particle emitter

      • Optionalsettings: {
            angle: number;
            angleVariation: number;
            blendMode: string;
            duration: number;
            floating: boolean;
            followTrajectory: boolean;
            framesToSkip: number;
            frequency: number;
            gravity: number;
            height: number;
            image: HTMLCanvasElement;
            maxEndScale: number;
            maxLife: number;
            maxParticles: number;
            maxRotation: number;
            maxStartScale: number;
            minEndScale: number;
            minLife: number;
            minRotation: number;
            minStartScale: number;
            onlyInViewport: boolean;
            speed: number;
            speedVariation: number;
            textureAdditive: boolean;
            textureSize: number;
            tint: string;
            totalParticles: number;
            width: number;
            wind: number;
        } = {}

        the settings for the particle emitter.

        • angle: number

          Start angle for particle launch in Radians

          Math.PI / 2
        • angleVariation: number

          letiation in the start angle for particle launch in Radians.

          0
        • blendMode: string

          the blend mode to be applied when rendering particles. (note: this will superseed the textureAdditive setting if different than "normal")

          normal
        • duration: number

          Duration that the emitter releases particles in ms (used only if emitter is Stream). After this period, the emitter stop the launch of particles.

          Infinity
        • floating: boolean

          Render particles in screen space.

          false
        • followTrajectory: boolean

          Update the rotation of particle in accordance the particle trajectory.
          The particle sprite should aim at zero angle (draw from left to right).
          Override the particle minRotation and maxRotation.

          false
        • framesToSkip: number

          Skip n frames after updating the particle system once. This can be used to reduce the performance impact of emitters with many particles.

          0
        • frequency: number

          How often a particle is emitted in ms (used only if emitter is a Stream).

          100
        • gravity: number

          Vertical force (Gravity) for each particle

          0

          World.gravity

        • height: number

          Height of the particle spawn area

          1
        • image: HTMLCanvasElement

          image used for particles texture (by default melonJS will create an white 8x8 texture image)

          undefined

          textureSize

        • maxEndScale: number

          Maximum end scale ratio for particles

          0
        • maxLife: number

          Maximum time each particle lives once it is emitted in ms.

          3000
        • maxParticles: number

          Maximum number of particles launched each time in this emitter (used only if emitter is Stream).

          10
        • maxRotation: number

          Maximum start rotation for particles sprites in Radians

          0
        • maxStartScale: number

          Maximum start scale ratio for particles (1 = no scaling)

          1
        • minEndScale: number

          Minimum end scale ratio for particles

          0
        • minLife: number

          Minimum time each particle lives once it is emitted in ms.

          1000
        • minRotation: number

          Minimum start rotation for particles sprites in Radians

          0
        • minStartScale: number

          Minimum start scale ratio for particles (1 = no scaling)

          1
        • onlyInViewport: boolean

          Update particles only in the viewport, remove it when out of viewport.

          true
        • speed: number

          Start speed of particles.

          2
        • speedVariation: number

          letiation in the start speed of particles

          1
        • textureAdditive: boolean

          Enable the Texture Additive by composite operation ("additive" blendMode)

          false

          blendMode

        • textureSize: number

          default texture size used for particles if no image is specified (by default melonJS will create an white 8x8 texture image)

          8

          image

        • tint: string

          tint to be applied to particles

          "#fff"
        • totalParticles: number

          Total number of particles in the emitter

          50
        • width: number

          Width of the particle spawn area.

          1
        • wind: number

          Horizontal force (like a Wind) for each particle

          0

      Returns ParticleEmitter

      // Create a particle emitter at position 100, 100
      let emitter = new ParticleEmitter(100, 100, {
          width: 16,
          height : 16,
          tint: "#f00",
          totalParticles: 32,
          angle: 0,
          angleVariation: 6.283185307179586,
          maxLife: 5,
          speed: 3
      });

      // Add the emitter to the game world
      me.game.world.addChild(emitter);

      // Launch all particles one time and stop, like a explosion
      emitter.burstParticles();

      // Launch constantly the particles, like a fountain
      emitter.streamParticles();

      // At the end, remove emitter from the game world
      // call this in onDestroyEvent function
      me.game.world.removeChild(emitter);

    Properties

    _defaultParticle

    _defaultParticle: CanvasRenderTarget | undefined

    _dt

    _dt: number

    _updateCount

    _updateCount: number
    alpha: number

    Define the renderable opacity
    Set to zero if you do not wish an object to be drawn

    • Renderable#setOpacity
    • Renderable#getOpacity
    1.0
    alwaysUpdate: boolean

    Whether the renderable object will always update, even when outside of the viewport

    false
    ancestor: Container | Entity

    a reference to the parent object that contains this renderable

    undefined
    anchorPoint: ObservablePoint

    The anchor point is used for attachment behavior, and/or when applying transformations.
    The coordinate system places the origin at the top left corner of the frame (0, 0) and (1, 1) means the bottom-right corner

    a Renderable's anchor point defaults to (0.5,0.5), which corresponds to the center position.

    Note: Object created through Tiled will have their anchorPoint set to (0, 0) to match Tiled Level editor implementation. To specify a value through Tiled, use a json expression like json:{"x":0.5,"y":0.5}. 

    <0.5,0.5>
    autoDepth: boolean

    Specify if the children z index should automatically be managed by the parent container

    true
    autoSort: boolean

    Specify if the children list should be automatically sorted when adding a new child

    true
    autoTransform: boolean

    When enabled, an object container will automatically apply any defined transformation before calling the child draw method.

    true

    // enable "automatic" transformation when the object is activated
    onActivateEvent: function () {
        // reset the transformation matrix
        this.currentTransform.identity();
        // ensure the anchor point is the renderable center
        this.anchorPoint.set(0.5, 0.5);
        // enable auto transform
        this.autoTransform = true;
        ....
    }
    backgroundColor: Color

    define a background color for this container

    (0, 0, 0, 0.0)

    // add a red background color to this container
    this.backgroundColor.setColor(255, 0, 0);
    blendMode: string

    the blend mode to be applied to this renderable (see renderer setBlendMode for available blend mode)

    "normal"
    • CanvasRenderer#setBlendMode
    • WebGLRenderer#setBlendMode

    body

    body: Body

    the renderable physic body

    // define a new Player Class
     class PlayerEntity extends me.Sprite {
         // constructor
         constructor(x, y, settings) {
             // call the parent constructor
             super(x, y , settings);

             // define a basic walking animation
             this.addAnimation("walk",  [...]);
             // define a standing animation (using the first frame)
             this.addAnimation("stand",  [...]);
             // set the standing animation as default
             this.setCurrentAnimation("stand");

             // add a physic body
             this.body = new me.Body(this);
             // add a default collision shape
             this.body.addShape(new me.Rect(0, 0, this.width, this.height));
             // configure max speed, friction, and initial force to be applied
             this.body.setMaxVelocity(3, 15);
             this.body.setFriction(0.4, 0);
             this.body.force.set(3, 0);
             this.isKinematic = false;

             // set the display to follow our position on both axis
             me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);
         }

         ...

    }
    clipping: boolean

    Specify if the container draw operation should clip his children to its own bounds

    false
    currentTransform: Matrix2d

    the renderable default transformation matrix

    edges: Vector2d[]

    The edges here are the direction of the nth edge of the polygon, relative to the nth point. If you want to draw a given edge from the edge value, you must first translate to the position of the starting point.

    enableChildBoundsUpdate: boolean

    Specify if the container bounds should automatically take in account all child bounds when updated (this is expensive and disabled by default, only enable if necessary)

    false
    floating: boolean

    If true, this renderable will be rendered using screen coordinates, as opposed to world coordinates. Use this, for example, to define UI elements.

    false
    GUID: string

    (G)ame (U)nique (Id)entifier"
    a GUID will be allocated for any renderable object added
    to an object container (including the me.game.world container)

    indices: number[]

    a list of indices for all vertices composing this polygon

    isDirty: boolean

    when true the renderable will be redrawn during the next update cycle

    true
    isKinematic: boolean

    If true then physic collision and input events will not impact this renderable

    true
    isPersistent: boolean

    make the renderable object persistent over level changes

    false
    mask: Polygon | Rect | Ellipse | Line | RoundRect

    A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible.

    undefined

    // apply a mask in the shape of a Star
    myNPCSprite.mask = new me.Polygon(myNPCSprite.width / 2, 0, [
       // draw a star
       {x: 0, y: 0},
       {x: 14, y: 30},
       {x: 47, y: 35},
       {x: 23, y: 57},
       {x: 44, y: 90},
       {x: 0, y: 62},
       {x: -44, y: 90},
       {x: -23, y: 57},
       {x: -47, y: 35},
       {x: -14, y: 30}
    ]);
    name: string

    The name of the renderable

    ""
    onChildChange: () => void

    a callback to be extended, triggered after a child has been added or removed

    onVisibilityChange: Function

    an event handler that is called when the renderable leave or enter a camera viewport

    undefined

    this.onVisibilityChange = function(inViewport) {
        if (inViewport === true) {
            console.log("object has entered the in a camera viewport!");
        }
    };
    points: Vector2d[]

    Array of points defining the Polygon
    Note: If you manually change points, you must call recalcafterwards so that the changes get applied correctly.

    pos: Vector2d

    origin point of the Polygon

    root: boolean

    whether the container is the root of the scene

    false
    settings: {
        angle: number;
        angleVariation: number;
        blendMode: string;
        duration: number;
        floating: boolean;
        followTrajectory: boolean;
        framesToSkip: number;
        frequency: number;
        gravity: number;
        height: number;
        image: HTMLCanvasElement;
        maxEndScale: number;
        maxLife: number;
        maxParticles: number;
        maxRotation: number;
        maxStartScale: number;
        minEndScale: number;
        minLife: number;
        minRotation: number;
        minStartScale: number;
        onlyInViewport: boolean;
        speed: number;
        speedVariation: number;
        textureAdditive: boolean;
        textureSize: number;
        tint: string;
        totalParticles: number;
        width: number;
        wind: number;
    }

    the current (active) emitter settings

    Type Declaration

    • angle: number

      Start angle for particle launch in Radians

      Math.PI / 2
    • angleVariation: number

      letiation in the start angle for particle launch in Radians.

      0
    • blendMode: string

      the blend mode to be applied when rendering particles. (note: this will superseed the textureAdditive setting if different than "normal")

      normal
    • duration: number

      Duration that the emitter releases particles in ms (used only if emitter is Stream). After this period, the emitter stop the launch of particles.

      Infinity
    • floating: boolean

      Render particles in screen space.

      false
    • followTrajectory: boolean

      Update the rotation of particle in accordance the particle trajectory.
      The particle sprite should aim at zero angle (draw from left to right).
      Override the particle minRotation and maxRotation.

      false
    • framesToSkip: number

      Skip n frames after updating the particle system once. This can be used to reduce the performance impact of emitters with many particles.

      0
    • frequency: number

      How often a particle is emitted in ms (used only if emitter is a Stream).

      100
    • gravity: number

      Vertical force (Gravity) for each particle

      0

      World.gravity

    • height: number

      Height of the particle spawn area

      1
    • image: HTMLCanvasElement

      image used for particles texture (by default melonJS will create an white 8x8 texture image)

      undefined

      textureSize

    • maxEndScale: number

      Maximum end scale ratio for particles

      0
    • maxLife: number

      Maximum time each particle lives once it is emitted in ms.

      3000
    • maxParticles: number

      Maximum number of particles launched each time in this emitter (used only if emitter is Stream).

      10
    • maxRotation: number

      Maximum start rotation for particles sprites in Radians

      0
    • maxStartScale: number

      Maximum start scale ratio for particles (1 = no scaling)

      1
    • minEndScale: number

      Minimum end scale ratio for particles

      0
    • minLife: number

      Minimum time each particle lives once it is emitted in ms.

      1000
    • minRotation: number

      Minimum start rotation for particles sprites in Radians

      0
    • minStartScale: number

      Minimum start scale ratio for particles (1 = no scaling)

      1
    • onlyInViewport: boolean

      Update particles only in the viewport, remove it when out of viewport.

      true
    • speed: number

      Start speed of particles.

      2
    • speedVariation: number

      letiation in the start speed of particles

      1
    • textureAdditive: boolean

      Enable the Texture Additive by composite operation ("additive" blendMode)

      false

      blendMode

    • textureSize: number

      default texture size used for particles if no image is specified (by default melonJS will create an white 8x8 texture image)

      8

      image

    • tint: string

      tint to be applied to particles

      "#fff"
    • totalParticles: number

      Total number of particles in the emitter

      50
    • width: number

      Width of the particle spawn area.

      1
    • wind: number

      Horizontal force (like a Wind) for each particle

      0
    shader: GLShader

    (Experimental) an optional shader, to be used instead of the default built-in one, when drawing this renderable (WebGL only)

    undefined
    sortOn: string

    The property of the child object that should be used to sort on this container value : "x", "y", "z"

    "z"
    type: string = "Rectangle"

    The shape type (used internally).

    updateWhenPaused: boolean

    Whether to update this object when the game is paused.

    false

    Accessors

    • get isFloating(): boolean

      Whether the renderable object is floating (i.e. used screen coordinates), or contained in a floating parent container

      Returns boolean

      Renderable#floating

    Methods

    • Add a child to the container
      if auto-sort is disable, the object will be appended at the bottom of the list. Adding a child to the container will automatically remove it from its other container. Meaning a child can only have one parent. This is important if you add a renderable to a container then add it to the World container it will move it out of the orginal container. Then when the World container reset() method is called the renderable will not be in any container.
      if the given child implements a onActivateEvent method, that method will be called once the child is added to this container.

      Parameters

      • child: any

        Child to be added

      • Optionalz: number

        forces the z index of the child to the specified value

      Returns Renderable

      the added child

    • Launch all particles from emitter and stop (e.g. for explosion)

      Parameters

      • Optionaltotal: number

        number of particles to launch

      Returns void

    • Returns true if the polygon contains the given point.
      (Note: it is highly recommended to first do a hit test on the corresponding
      bounding rect, as the function can be highly consuming with complex shapes)

      Parameters

      • x: number

        x coordinate or a vector point to check

      • y: number

        y coordinate

      Returns boolean

      True if the polygon contain the point, otherwise false

      if (polygon.contains(10, 10)) {
        // do something
      }
      // or
      if (polygon.contains(myVector2d)) {
        // do something
      }

    • Returns true if the polygon contains the given point.
      (Note: it is highly recommended to first do a hit test on the corresponding
      bounding rect, as the function can be highly consuming with complex shapes)

      Parameters

      Returns boolean

      True if the polygon contain the point, otherwise false

      if (polygon.contains(10, 10)) {
        // do something
      }
      // or
      if (polygon.contains(myVector2d)) {
        // do something
      }

    • The forEach() method executes a provided function once per child element.
      the callback function is invoked with three arguments:

      • The current element being processed in the array
      • The index of element in the array.
      • The array forEach() was called upon.

      Parameters

      • callback: Function

        fnction to execute on each element

      • OptionalthisArg: object

        value to use as this(i.e reference Object) when executing callback.

      Returns void

      // iterate through all children of this container
      container.forEach((child) => {
         // do something with the child
         child.doSomething();
      });
      container.forEach((child, index) => { ... });
      container.forEach((child, index, array) => { ... });
      container.forEach((child, index, array) => { ... }, thisArg);

    • returns the list of childs with the specified name
      as defined in Tiled (Name field of the Object Properties)
      note : avoid calling this function every frame since it parses the whole object list each time

      Parameters

      • name: string | number | boolean | RegExp

        child name

      Returns Renderable[]

      Array of children

    • return the child corresponding to the given property and value.
      note : avoid calling this function every frame since it parses the whole object tree each time

      Parameters

      • prop: string

        Property name

      • value: string | number | boolean | RegExp

        Value of the property

      Returns Renderable[]

      Array of childs

      // get the first child object called "mainPlayer" in a specific container :
      let ent = myContainer.getChildByProp("name", "mainPlayer");

      // or query the whole world :
      let ent = container.getChildByProp("name", "mainPlayer");

      // partial property matches are also allowed by using a RegExp.
      // the following matches "redCOIN", "bluecoin", "bagOfCoins", etc :
      let allCoins = container.getChildByProp("name", /coin/i);

      // searching for numbers or other data types :
      let zIndex10 = container.getChildByProp("z", 10);
      let inViewport = container.getChildByProp("inViewport", true);

    • Returns true if the vertices composing this polygon form a convex shape (vertices must be in clockwise order).

      Returns boolean | null

      true if the vertices are convex, false if not, null if not computable

    • onCollision callback, triggered in case of collision, when this renderable body is colliding with another one

      Returns boolean

      true if the object should respond to the collision (its position and velocity will be corrected)

      // colision handler
      onCollision(response) {
          if (response.b.body.collisionType === me.collision.types.ENEMY_OBJECT) {
              // makes the other object solid, by substracting the overlap vector to the current position
              this.pos.sub(response.overlapV);
              this.hurt();
              // not solid
              return false;
          }
          // Make the object solid
          return true;
      },

    • Removes (and optionally destroys) a child from the container.
      (removal is immediate and unconditional)
      Never use keepalive=true with objects from pool. Doing so will create a memory leak.

      Parameters

      • child: any

        Child to be removed

      • Optionalkeepalive: boolean

        True to prevent calling child.destroy()

      Returns void

    • Reset the emitter with particle emitter settings.

      Parameters

      • settings: {
            angle: number;
            angleVariation: number;
            blendMode: string;
            duration: number;
            floating: boolean;
            followTrajectory: boolean;
            framesToSkip: number;
            frequency: number;
            gravity: number;
            height: number;
            image: HTMLCanvasElement;
            maxEndScale: number;
            maxLife: number;
            maxParticles: number;
            maxRotation: number;
            maxStartScale: number;
            minEndScale: number;
            minLife: number;
            minRotation: number;
            minStartScale: number;
            onlyInViewport: boolean;
            speed: number;
            speedVariation: number;
            textureAdditive: boolean;
            textureSize: number;
            tint: string;
            totalParticles: number;
            width: number;
            wind: number;
        } = {}

        [optional] object with emitter settings. See ParticleEmitterSettings

        • angle: number

          Start angle for particle launch in Radians

          Math.PI / 2
        • angleVariation: number

          letiation in the start angle for particle launch in Radians.

          0
        • blendMode: string

          the blend mode to be applied when rendering particles. (note: this will superseed the textureAdditive setting if different than "normal")

          normal
        • duration: number

          Duration that the emitter releases particles in ms (used only if emitter is Stream). After this period, the emitter stop the launch of particles.

          Infinity
        • floating: boolean

          Render particles in screen space.

          false
        • followTrajectory: boolean

          Update the rotation of particle in accordance the particle trajectory.
          The particle sprite should aim at zero angle (draw from left to right).
          Override the particle minRotation and maxRotation.

          false
        • framesToSkip: number

          Skip n frames after updating the particle system once. This can be used to reduce the performance impact of emitters with many particles.

          0
        • frequency: number

          How often a particle is emitted in ms (used only if emitter is a Stream).

          100
        • gravity: number

          Vertical force (Gravity) for each particle

          0

          World.gravity

        • height: number

          Height of the particle spawn area

          1
        • image: HTMLCanvasElement

          image used for particles texture (by default melonJS will create an white 8x8 texture image)

          undefined

          textureSize

        • maxEndScale: number

          Maximum end scale ratio for particles

          0
        • maxLife: number

          Maximum time each particle lives once it is emitted in ms.

          3000
        • maxParticles: number

          Maximum number of particles launched each time in this emitter (used only if emitter is Stream).

          10
        • maxRotation: number

          Maximum start rotation for particles sprites in Radians

          0
        • maxStartScale: number

          Maximum start scale ratio for particles (1 = no scaling)

          1
        • minEndScale: number

          Minimum end scale ratio for particles

          0
        • minLife: number

          Minimum time each particle lives once it is emitted in ms.

          1000
        • minRotation: number

          Minimum start rotation for particles sprites in Radians

          0
        • minStartScale: number

          Minimum start scale ratio for particles (1 = no scaling)

          1
        • onlyInViewport: boolean

          Update particles only in the viewport, remove it when out of viewport.

          true
        • speed: number

          Start speed of particles.

          2
        • speedVariation: number

          letiation in the start speed of particles

          1
        • textureAdditive: boolean

          Enable the Texture Additive by composite operation ("additive" blendMode)

          false

          blendMode

        • textureSize: number

          default texture size used for particles if no image is specified (by default melonJS will create an white 8x8 texture image)

          8

          image

        • tint: string

          tint to be applied to particles

          "#fff"
        • totalParticles: number

          Total number of particles in the emitter

          50
        • width: number

          Width of the particle spawn area.

          1
        • wind: number

          Horizontal force (like a Wind) for each particle

          0

      Returns void

    • scale the renderable around his anchor point. Scaling actually applies changes to the currentTransform member wich is used by the renderer to scale the object when rendering. It does not scale the object itself. For example if the renderable is an image, the image.width and image.height properties are unaltered but the currentTransform member will be changed.

      Parameters

      • x: number

        a number representing the abscissa of the scaling vector.

      • Optionaly: number = x

        a number representing the ordinate of the scaling vector.

      Returns Renderable

      Reference to this object for method chaining

    • Automatically set the specified property of all childs to the given value

      Parameters

      • prop: string

        property name

      • value: object

        property value

      • Optionalrecursive: boolean

        recursively apply the value to child containers if true

      Returns void

    • Shifts the Polygon to the given position vector.

      Parameters

      • x: number

        The x coordinate or a vector point to shift to.

      • Optionaly: number

        The y coordinate. This parameter is required if the first parameter is a number.

      Returns void

      polygon.shift(10, 10);
      // or
      polygon.shift(myVector2d);

    • Shifts the Polygon to the given position vector.

      Parameters

      Returns void

      polygon.shift(10, 10);
      // or
      polygon.shift(myVector2d);

    • Launch particles from emitter constantly (e.g. for stream)

      Parameters

      • Optionalduration: number

        time that the emitter releases particles in ms

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods