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.
// Create and configure a 'Pixelize' effectconst pixelize = engine.block.createEffect('pixelize');engine.block.setInt(pixelize, 'pixelize/horizontalPixelSize', 5);// Append the effect to the existing stackengine.block.appendEffect(block, pixelize);// Move the effect to the beginning of the effect stackengine.block.insertEffect(block, pixelize, 0);engine.block.removeEffect(block, 1);// Query for effectsif (engine.block.hasEffects(block)) {const effects = engine.block.getEffects(block);engine.block.isEffectEnabled(effects[0]);engine.block.setEffectEnabled(effects[0], false);}