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.
Please Note: The video below was created using Umajin version188.8.131.52 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.