Skip to main content
Platform
Language

Effects & Filters

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. The available types are described here and range from LUT based color filters to advanced effects.

createEffect(type: EffectType): DesignBlockId

Create a new effect block, fails if type is unknown or not a valid effect block type.

  • type: The type id of the effect.
  • Returns The created effects handle.

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/green_screen'
  • '//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/recolor'
  • '//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(id: DesignBlockId, effectId: DesignBlockId): void

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. Required scope: 'appearance/effect'

  • id: The block to append the effect to.
  • effectId: The effect to append.
supportsEffects(id: DesignBlockId): boolean

Queries whether the block supports effects.

  • id: The block to query.
  • Returns True, if the block can render effects, false otherwise.

Managing the Order of Effects#

insertEffect(id: DesignBlockId, effectId: DesignBlockId, 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. Required scope: 'appearance/effect'

  • id: The block to update.
  • effectId: The effect to insert
  • index: The index at which the effect shall be inserted.
removeEffect(id: DesignBlockId, index: number): void

Removes the effect at the given index. Required scope: 'appearance/effect'

  • id: The block to remove the effect from.
  • index: The index where the effect is stored.
getEffects(id: DesignBlockId): DesignBlockId[]

Get a list of all effects attached to this block

  • id: The block to query.
  • Returns A list of effects or an error, if the block doesn't support effects.

Enabling and Disabling Effects#

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

Sets the enabled state of an 'effect' block.

  • effectId: The 'effect' block to update.
  • enabled: The new state.
isEffectEnabled(effectId: DesignBlockId): boolean

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

  • effectId: The 'effect' block to query.
  • Returns True, if the effect is enabled. False otherwise.