Particle Component

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 App Creator’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

Please 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 group that will be well positioned across devices.
Appearance Set the appearance of the particle effect.
Particle Image Browse the Image Folder for the particle image.
Emission rate Scale 0 to 2. Sets rate of movement of particles. 0 slowest to 2 fastest.
Quantity Scale 0 to 1000. Sets number of particle objects – 1000 being the highest number of objects.
Gravity Scale -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 angle Scale -180 to 180. Sets minimum angle of flow.
Max angle Scale -180 to 180. Sets maximum angle of flow.
Min size Scale 0 to 300. Sets minimum size of particles.
Max size Scale 0 to 300. Sets maximum size of particles.
Min x speed Scale -20 to 20. Sets minimum speed on x axis.
Max x speed Scale -20 to 20. Sets maximum speed on x axis.
Min y speed Scale -20 to 20. Sets minimum speed on y axis.
Max y speed Scale -20 to 20. Sets maximum speed on y axis.
Min life Scale 1 to 1000. Sets minimum time that particles stay active.
Max life Scale 1 to 1000. Sets maximum time that particles stay active.
Min alpha Scale 0 to 100. Sets minimum opacity for particles
Max alpha Scale 0 to 100. Sets maximum opacity for particles
Color Blending Set colors to blend as particles flow.
Enable blending Checkbox. If checked, blending colors is enabled.
Initial Color Use color picker to pick the starting color.
Middle Color Use color picker to pick the middle color.
Final Color Use 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 Size Scale -5 to 5. Incrementally controls the size of the particles – 0 being normal.
Delta opacity Scale -5 to 5. Incrementally controls the opacity of the particles – 0 being normal.
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 app 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.