Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ParticleComponent

The Particle Component enables a tiled pattern to be created from an image.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Particle Demo', particleDemo)
.addParameter('Particle', uActions.ParamType.PARTICLE)
.register();
function particleDemo(comp) {
    var particleComp = uComps.cast.toParticle(comp);
    particleComp.particleImage = 'presets/umajin.png';
    particleComp.emissionRate = 0.5;
    particleComp.quantity = 50;
    particleComp.gravity = 2;
    particleComp.initialColor = '#9bead8';
    particleComp.middleColor = '#16865a';
    particleComp.finalColor = '#1d3e4f';
}

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

alpha

alpha: number

The alpha transparency of the Component. Range from 0 to 100.

clippingType

clippingType: ClippingType

Clip the components contents using one of the options in ClippingType.

components

components: ComponentList

Access this Component's sub-components.

deltaAngle

deltaAngle: number

Controls the left/right rotation of particles. Negative values rotate particles to the left and positive values rotate to the right. The higher the value, the faster the rotation. Range -20 to 20.

var particleComp = uComps.cast.toParticle(comp);
particleComp.deltaAngle = -5;

deltaOpacity

deltaOpacity: number

Controls the changing opacity of the particles. Range -5 to 5.

var particleComp = uComps.cast.toParticle(comp);
particleComp.deltaSize = 0.4;

deltaSize

deltaSize: number

Controls the size of the particles. Range -5 to 5.

var particleComp = uComps.cast.toParticle(comp);
particleComp.deltaSize = 2;

emissionRate

emissionRate: number

Rate of movement of particles. Range 0 to 2.

var particleComp = uComps.cast.toParticle(comp);
particleComp.emissionRate = 0.2;

enableBlending

enableBlending: boolean

If true, blending colors is enabled.

var particleComp = uComps.cast.toParticle(comp);
particleComp.enableBlending = true;

finalColor

finalColor: string

Color for the end part of the particle's life.

var particleComp = uComps.cast.toParticle(comp);
particleComp.finalColor = '#1d3e4f';

formEnabled

formEnabled: boolean

Whether or not is component is enabled for the parent form. Only relevant when inside a Form Component.

formFieldName

formFieldName: string

Label used to identify the field this Component belongs to in a form. Only relevant when inside a Form Component.

gravity

gravity: number

Amount of gravity for particles to fall downwards. Range -10 to 10.

var particleComp = uComps.cast.toParticle(comp);
particleComp.gravity = 2;

height

height: number

The height of the Component.

initialColor

initialColor: string

Starting color for the particle.

var particleComp = uComps.cast.toParticle(comp);
particleComp.initialColor = '#9bead8';

mask

mask: RectangleComponent | CircleComponent

Shape component to be used as a mask. Can be either a Rectangle or Circle Component.

maxAlpha

maxAlpha: number

Maximum opacity for particles. Range 0 to 100.

var particleComp = uComps.cast.toParticle(comp);
particleComp.maxAlpha = 100;

maxAngle

maxAngle: number

Maximum angle of flow. Range -180 to 180.

var particleComp = uComps.cast.toParticle(comp);
particleComp.maxAngle = 135;

maxLife

maxLife: number

Maximum time particles stay active. Range 1 to 1000.

var particleComp = uComps.cast.toParticle(comp);
particleComp.maxLife = 250;

maxSize

maxSize: number

Maximum size of particles. Range 0 to 300.

var particleComp = uComps.cast.toParticle(comp);
particleComp.maxSize = 100;

middleColor

middleColor: string

Color for the middle part of the particle's life.

var particleComp = uComps.cast.toParticle(comp);
particleComp.middleColor = '#16865a';

minAlpha

minAlpha: number

Minimum opacity for particles. Range 0 to 100.

var particleComp = uComps.cast.toParticle(comp);
particleComp.minAlpha = 0;

minAngle

minAngle: number

Minimum angle of flow. Range -180 to 180.

var particleComp = uComps.cast.toParticle(comp);
particleComp.minAngle = 45;

minLife

minLife: number

Minimum time particles stay active. Range 1 to 1000.

var particleComp = uComps.cast.toParticle(comp);
particleComp.minLife = 10;

minSize

minSize: number

Minimum size of particles. Range 0 to 300.

var particleComp = uComps.cast.toParticle(comp);
particleComp.minSize = 10;

name

name: string

Name of the component.

parent

parent: Component

Access this Component's parent component.

particleImage

particleImage: string

Filename of the image to appear as a particle.

var particleComp = uComps.cast.toParticle(comp);
articleComp.particleImage = 'presets/umajin.png';

passedFormValidation

passedFormValidation: boolean

Whether or not the Component has passed form validation. Only relevant when inside a Form Component.

quantity

quantity: number

Number of particles. Range 0 to 1000.

var particleComp = uComps.cast.toParticle(comp);
particleComp.quantity = 50;

type

type: string

Type of the component.

uniqueId

uniqueId: string

Unique ID of the component.

visible

visible: boolean

Whether or not the Component is visible.

width

width: number

The width of the Component.

x

x: number

The x position of the Component relative to its parent.

xSpeedMax

xSpeedMax: number

Maximum speed on x axis. Range -20 to 20.

var particleComp = uComps.cast.toParticle(comp);
particleComp.xSpeedMax = 10;

xSpeedMin

xSpeedMin: number

Minimum speed on x axis. Range -20 to 20.

var particleComp = uComps.cast.toParticle(comp);
particleComp.xSpeedMin = -5;

y

y: number

The y position of the Component relative to its parent.

ySpeedMax

ySpeedMax: number

Maximum speed on y axis. Range -20 to 20.

var particleComp = uComps.cast.toParticle(comp);
particleComp.ySpeedMax = 10;

ySpeedMin

ySpeedMin: number

Minimum speed on y axis. Range -20 to 20.

var particleComp = uComps.cast.toParticle(comp);
particleComp.ySpeedMin = -5;

Methods

emit

  • emit(eventType: string, data: Object): void

  • Call each callback that is registered for the given eventType, in the order they were registered, passing the supplied data to each.

    Parameters

    • eventType: string

      The type of the event to emit.

    • data: Object

      Data object to pass to each callback.

    Returns void

focus

  • focus(): void

  • Set the keyboard focus to this component.

    new uActions.Action('set focus', setFocus)
        .addParameter('text entry',uActions.ParamType.TEXT_ENTRY)
        .register();
    function setFocus(textEntry) {
        textEntry.focus();
    }

    Returns void

get

  • get(propertyName: string): any

  • Get a property by name.

    var uActions = require('u-actions');
    new uActions.Action('get fontsize',getFontSize).register();
    function getFontSize() {
        var text1=uPages.current.components.getText('Text 1');
        console.log(text1.get('font_size'));
    }

    Parameters

    • propertyName: string

      The name of the property to get.

    Returns any

    Returned value can be of any type, or even null.

on

  • on(eventType: string, callback: Function): void

  • Adds the callback function to the end of the listeners array for eventType.

    Parameters

    • eventType: string

      The type of the event.

    • callback: Function

      The callback function

    Returns void

refresh

  • refresh(): void

  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

set

  • set(propertyName: string, value: any): void
  • set(data: Object): void

  • Set a properties value by name.

    var uActions = require('u-actions');
    new uActions.Action('set text color',setTextColor).register();
    function setTextColor() {
        uPages.get('follow').components.getText('Text 1').set('font_color','0x0000FFFF');
    }

    Parameters

    • propertyName: string

      The name of the property to set.

    • value: any

      The value to set. Can be of any type.

    Returns void

  • Set a number properties at once.

    Parameters

    • data: Object

      Data object containing property name and value pairs to set on this component.

    Returns void

tween

  • tween(seconds: number, params: Object, type?: TweenType): void

  • Tween a component property over time.

    Parameters

    • seconds: number

      The number of seconds to tween for.

    • params: Object

      An objects that contains key/value pairs of the properties and values to tween.

    • Optional type: TweenType

      (Optional) Tween type can be any type from "Tween.type"

    Returns void