Doc: Update particle system documentation

Update particle system documentation and add downloadable fire
particle example.

Task-number: QDS-6190
Change-Id: Id2922f536a8400029b290328c1bdc6c1bd408fd6
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
This commit is contained in:
Mats Honkamaa
2022-02-10 15:56:34 +02:00
parent 8ad7ab2d2a
commit f87c25acb5
4 changed files with 17 additions and 22 deletions

View File

@@ -74,12 +74,8 @@
In \uicontrol Navigator, select \e particleSystem and in
\uicontrol Properties, set \uicontrol Translation > \uicontrol Y to 193.
\li Set the \e rain-drop-white-square.png as texture for the particles.
From \uicontrol Library > \uicontrol Components, drag a \uicontrol Texture
to \e spriteParticle.
\li In \uicontrol Navigator, select \uicontrol texture1 and in \uicontrol
Properties, set \uicontrol Source to \e rain-drop-white-square.png.
\li In \uicontrol Navigator, select \uicontrol spriteParticle and in the
\uicontrol Properties, set \uicontrol Sprite to texture.
From \uicontrol Library > \uicontrol Assets, drag
\e {rain-drop-white-square.png} to \e spriteParticle.
\li Adjust the apperance and behavior of the sprite further. In \uicontrol
Properties, set:
\list

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -92,22 +92,9 @@
\li Drag-and-drop an instance of the \uicontrol {Particle System}
component from \uicontrol Library to a scene component instance
in \l Navigator.
\li Drag-and-drop an instance of the \uicontrol Texture component
from \uicontrol Library > \uicontrol Components >
\uicontrol {Qt Quick 3D} to the sprite particle instance
in \uicontrol Navigator.
\li Drag-and-drop the sprite image from \uicontrol Library >
\uicontrol Assets to the texture instance in \uicontrol Navigator.
\li Select the sprite particle instance in \uicontrol Navigator to
display its properties in \l Properties.
\li In \uicontrol Sprite, select the texture instance.
\li Select the emitter instance in \uicontrol Navigator to
display its properties in \uicontrol Properties.
\li In \uicontrol Particle, select the particle instance to emit.
\li Select the vector 3D instance in \uicontrol Navigator to
display its properties in \uicontrol Properties.
\li In \uicontrol Direction, set the emitted particle velocity
towards the target vector.
\uicontrol Assets to the sprite particle instance
in \uicontrol Navigator.
\endlist
Add instances of other components according to your use case. The following
@@ -122,6 +109,9 @@
their property values, such as particle source images and their color, life
span, and fading effects, to simulate fire.
You can download the completed project from
\l {https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/FireParticles}{here}.
We will need the following \l{Assets}{assets}:
\list
@@ -199,12 +189,16 @@
\uicontrol {Particle end scale} to \e 5.00 for the flame
particles and to \e 6.00 for the smoke particles.
We can now modify the appearance of the particles by setting their color in
We can now modify the appearance of the particles by selecting the
\e spriteParticle in \uicontrol Navigator and then setting their color in
\uicontrol Properties > \uicontrol Particle. We select transparent yellow,
orange, and transparent gray in \uicontrol Color and set values for
\uicontrol {Color variation} to use slightly different colors for the
individual particles.
We can also try changing the \uicontrol{Blend Mode} for the particle to get
a more realistic fire effect.
\image studio-3d-particles-fire-properties-particle.png "Particle properties"
We set \uicontrol {Fade in effect} and \uicontrol {Fade out effect} values
@@ -220,6 +214,11 @@
\image studio-3d-particles-fire-properties-sprite-particle.png "Sprite Particle properties"
In \uicontrol{Particle Rotation}, we also need to set \uicontrol Rotation
and \uicontrol{Velocity Variation} for all emitters to 0.
\image studio-3d-particles-fire-properties-rotation.png "Emitter rotation properties"
Finally, we will specify the direction in which the particles move by
modifying the property values of the \uicontrol {Vector Direction} component
instances in \uicontrol Properties > \uicontrol {Particle Vector Direction}.