[Elisabeth]

Hi all,

 

I try to change the emission rate of a particle element corresponding to some user input (e.g. visualizing the input force for a spaceship). Following the docs, the maxParticles or the particleLifespan property is the way to go.

 

In the following example there are two emitters. The emitters should emit particles according to a simulated input (sinus). On the left, the maxParticles property is changed, on the right the particleLifespan property. As you can see, both emitters produce strange results (left: reset of already emitted particles, right: ?).

 

Here’s the code (you need to add a particle texture named “particle.png”):

import VPlay 1.0
import QtQuick 1.1

GameWindow {
  activeScene: scene
  width: 960
  height: 640

  property int time_ms: 0

  Timer {
    id: timer
    interval: 200; running: true; repeat: true
    onTriggered: {
      var scale = 0.5 + Math.sin(time_ms / 1000 * 0.7) * 0.5;
      particles1.item.maxParticles =  Math.floor(scale * 30);
      particles2.item.particleLifespan = scale;
      inputText.text = "Input: " + Math.floor(100.0 * scale) / 100.0 + 
      "\nmaxParticles: " + particles1.item.maxParticles + 
      "\nparticleLifespan: " + Math.floor(100.0 * particles2.item.particleLifespan) / 100.0;
      time_ms += timer.interval;
    }
  }

  Component{
    id: particle

    Particle {
      // Particle configuration properties
      maxParticles: 30
      particleLifespan: 1.9
      particleLifespanVariance: 0.0
      startParticleSize: 5
      startParticleSizeVariance: 2
      finishParticleSize: 15
      finishParticleSizeVariance: 10
      angleVariance: 10
      rotation: -90

      // Emitter Behaviour
      emitterType: Particle.Gravity
      duration: Particle.Infinite
      positionType: Particle.Free

      // Gravity Mode (Gravity + Tangential Accel + Radial Accel)
      gravity: Qt.point(-100,0)
      speed: 85
      speedVariance: 2

      // Appearance
      startColor: Qt.rgba(0.76, 0.25, 0.12, 1)
      startColorVariance: Qt.rgba(0, 0, 0, 0)
      finishColor: Qt.rgba(0, 0, 0, 1)
      finishColorVariance: Qt.rgba(0,0,0,0)
      blendFuncSource: Particle.GL_SRC_ALPHA
      blendFuncDestination: Particle.GL_ONE
      textureFileName: "particle.png"

      // start when finished loading
      autoStart: true
    }
  }

  
  Scene {
    id: scene
    width: 480
    height: 320
    
    Rectangle {
      id: backRect
      anchors.fill: parent
      color: "grey"  
    }

    Rectangle {
      id: emitterRect1
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.horizontalCenterOffset: -100
      anchors.verticalCenter: parent.verticalCenter
      anchors.verticalCenterOffset: 50
      width: 20
      height: 40
      color: "red"  
      
      Loader {id: particles1; sourceComponent: particle; x: emitterRect1.width / 2 }
    }

    Rectangle {
      id: emitterRect2
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.horizontalCenterOffset: 100
      anchors.verticalCenter: parent.verticalCenter
      anchors.verticalCenterOffset: 50
      width: emitterRect1.width
      height: emitterRect1.height
      color: "blue"  

      Loader {id: particles2; sourceComponent: particle; x: emitterRect2.width / 2 }
    }

    Rectangle {
      id: floor
      anchors.top: emitterRect1.bottom
      anchors.left: parent.left
      width: parent.width
      height: 10
      color: "black"  
    }

    Text{
      id: inputText
      x: 20; y: 20;
      text: ""
    }

  }
}

 

Any comment on how to achieve the above mentioned is highly appreciated!

 

Cheers,

Thomas

[AlexFelgo Team]

Hi Thomas,

do you want something like the afterburner of the spaceship getting stronger?

Then i recommend using the particle size. I took your code, added a fire-style particle.png, and modified the particle size like this:

Timer {
  id: timer
  interval: 200; running: true; repeat: true
  onTriggered: {
    var scale = 0.5 + Math.sin(time_ms / 1000 * 0.7) * 0.5;
    particles1.item.startParticleSize = Math.floor(scale * 10);
    /*particles2.item.particleLifespan = scale;
    inputText.text = "Input: " + Math.floor(100.0 * scale) / 100.0 + 
    "\nmaxParticles: " + particles1.item.maxParticles + 
    "\nparticleLifespan: " + Math.floor(100.0 * particles2.item.particleLifespan) / 100.0;*/
    time_ms += timer.interval;
  }
}

With this, or maybe in combination with finishParticleSize and speed, you should be able to achieve the result you are looking for.

Let me know if that works for you!

 

Best Regards,

Alexander

 

[Elisabeth]

Hi Alex,

 

thanks for the quick reply!

 

> do you want something like the afterburner of the spaceship getting stronger?

Exactly.

 

> Then i recommend using the particle size[…]

I think it should be possible to approximate the desired effect by modifying the particle size. Anyhow, it feels a little bit like a workaround (particles are constantly emitted, just not visible or very small). IMHO the most suitable and intuitive property for the afterburner example and similar use cases would be the emissionRate.

 

For now I’ll try the suggested solution. Thanks and Goodbye,

Thomas