Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Platform:
Language:

Effects

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify a block's effects through the block API. Effects can be added to any shape or page. You can create and configure multiple effects and apply them to blocks. Effects will be applied in the order they are appended to the block's effects list. If the same effect appears multiple times in the list it will also be applied multiple times.

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

Creating an Effect#

To create an effect simply use createEffect(type: string): number.

We currently support the following effect types:

  • '//ly.img.ubq/effect/adjustments'
  • '//ly.img.ubq/effect/black_and_white_color_mixer'
  • '//ly.img.ubq/effect/cross_cut'
  • '//ly.img.ubq/effect/dot_pattern'
  • '//ly.img.ubq/effect/duotone_filter'
  • '//ly.img.ubq/effect/extrude_blur'
  • '//ly.img.ubq/effect/glow'
  • '//ly.img.ubq/effect/half_tone'
  • '//ly.img.ubq/effect/hsp_selective_adjustments'
  • '//ly.img.ubq/effect/linocut'
  • '//ly.img.ubq/effect/liquid'
  • '//ly.img.ubq/effect/lut_filter'
  • '//ly.img.ubq/effect/mirror'
  • '//ly.img.ubq/effect/outliner'
  • '//ly.img.ubq/effect/pixelize'
  • '//ly.img.ubq/effect/posterize'
  • '//ly.img.ubq/effect/radial_pixel'
  • '//ly.img.ubq/effect/sharpie'
  • '//ly.img.ubq/effect/shifter'
  • '//ly.img.ubq/effect/tilt_shift'
  • '//ly.img.ubq/effect/tv_glitch'
  • '//ly.img.ubq/effect/vignette'

Note: Omitting the prefix is also accepted, e.g. 'glow' instead of '//ly.img.ubq/effect/glow'.

Configuring an Effect#

You can configure effects just like you configure design blocks. See Modify Properties for more detail.

Adding an Effect#

  • appendEffect(block: number, effect: number)

    Inserts an effect at the end of the list of effects. The same effect can appear multiple times in the list and won't be removed if appended again.

  • hasEffects(id: number): boolean

    Queries whether the block supports effects.

Managing the order of Effects#

  • insertEffect(id: number, effectId: number, index: number): void

    Inserts an effect at the given index into the list of effects of the given block. The same effect can appear multiple times in the list and won't be removed if appended again.

  • removeEffect(id: DesignBlockId, index: number): void

    Removes the effect at the given index.

  • getEffects(id: DesignBlockId): DesignBlockId[]

    Get a list of all effects attached to this block

Enabling and Disabling Effects#

  • setEffectEnabled(effectId: DesignBlockId, enabled: boolean): void

    Sets the enabled state of an 'effect' block.

  • isEffectEnabled(effectId: DesignBlockId): boolean

    Queries whether an 'effect' block is enabled and therefore applies its effect.

File:
// Create and configure a 'Pixelize' effect
const pixelize = engine.block.createEffect('pixelize');
engine.block.setInt(pixelize, 'pixelize/horizontalPixelSize', 5);


// Append the effect to the existing stack
engine.block.appendEffect(block, pixelize);
// Move the effect to the beginning of the effect stack
engine.block.insertEffect(block, pixelize, 0);
engine.block.removeEffect(block, 1);


// Query for effects
if (engine.block.hasEffects(block)) {
  const effects = engine.block.getEffects(block);
  engine.block.isEffectEnabled(effects[0]);
  engine.block.setEffectEnabled(effects[0], false);
}