Particle

Create cascading raindrops or autumn leaves without having to code! You set the scene and attract attention to your products or service. This component allows you to create unique moving particle effects using Umajin Editor’s ‘Properties Inspector’ panel to adjust effects.

This component loads with a default preset and there are 7 other presets that can be loaded; Bubbles, Dandelion, Leaves, Pollen, Snow Flakes, Snow Realistic 1 and 2.


Particle Tutorial

Note: The video below was created using Umajin version1.1.0.0 and there have been considerable changes to the UI and naming conventions since then. How to set up new graphics and properties, however, remains fundamentally the same.

Using the Particle Component

  • This component is lots of fun and can be manipulated easily. The default preset is loaded automatically – the umajin logo. The video demonstrates setting up bubbles.The tutorial demonstrates how quickly and easily you can customize your particle effect.
  • The particles are emitted from within the shape you create with the component.
  • All behaviors of the particles can be tweaked at will. See the properties below for the different properties you can set.
  • You can load any of the preset particle effects as well as creating, saving and loading your own.

Properties of Particle Component

Name

When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name.

Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.

Position and Size

Set position and size.

As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations.

You can use millimeters to control aspects of size like width or height in order to create a particle component that’s size will be maintained across devices.

Preset

A Preset is a pre-determined set of properties and files for a component.

You can have a Predefined Preset (Umajin created) or a Custom Preset (custom designed by you).

Where the component has a Predefined Preset it will automatically be loaded into your Project as the default when you insert that component.

The ‘LOAD’ button opens the Preset Selector, which has tabs for Predefined and Custom, so you can choose which preset to load for your component.

Create your own Preset by building your assets, putting them in your Image folder and then selecting them in the Properties panel.

The ’SAVE’ button will enable you to name and save your preset under the Custom tab.

Appearance

Set the appearance of the particle effect.

Particle ImageBrowse the Image Folder for the particle image.
Emission rateScale 0 to 2. Sets rate of movement of particles. 0 slowest to 2 fastest.
QuantityScale 0 to 1000. Sets number of particle objects – 1000 being the highest number of objects.
GravityScale -10 to +10. Sets the amount of gravity for particles to fall downwards.

Initial Values

Set the initial values as the particles start to flow.

Min angleScale -180 to 180. Sets minimum angle of flow.
Max angleScale -180 to 180. Sets maximum angle of flow.
Min sizeScale 0 to 300. Sets minimum size of particles.
Max sizeScale 0 to 300. Sets maximum size of particles.
Min x speedScale -20 to 20. Sets minimum speed on x axis.
Max x speedScale -20 to 20. Sets maximum speed on x axis.
Min y speedScale -20 to 20. Sets minimum speed on y axis.
Max y speedScale -20 to 20. Sets maximum speed on y axis.
Min lifeScale 1 to 1000. Sets minimum time that particles stay active.
Max lifeScale 1 to 1000. Sets maximum time that particles stay active.
Min alphaScale 0 to 100. Sets minimum opacity for particles
Max alphaScale 0 to 100. Sets maximum opacity for particles

Color Blending

Set colors to blend as particles flow.

Enable blendingCheckbox. If checked, blending colors is enabled.
Initial ColorUse color picker to pick the starting color.
Middle ColorUse color picker to pick the middle color.
Final ColorUse color picker to pick the finishing color.

Particle Change

Alter rotation and opacity of particles.

Delta angle

Scale -20 to 20 Incrementally controls the left/right rotation of particles.

Minus values rotate particles to the left and plus values rotate to the right. The higher the value, the faster they rotate.

Delta sizeScale -5 to 5. Incrementally controls the size of the particles – 0 being normal.
Delta opacityScale -5 to 5. Incrementally controls the opacity of the particles – 0 being normal.

Events that can Trigger an Action on the Particle Component

On PressAction occurs when component is pressed.