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

Fills

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify a block's fill through the block API. The fill defines the visual contents within a block's shape.

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 a Fill#

To create a fill simply use createFill(type: string): number.

We currently support the following fill types:

  • '//ly.img.ubq/fill/color'
  • '//ly.img.ubq/fill/gradient/linear'
  • '//ly.img.ubq/fill/gradient/radial'
  • '//ly.img.ubq/fill/gradient/conical'
  • '//ly.img.ubq/fill/image'
  • '//ly.img.ubq/fill/video'

Note: short types are also accepted, e.g. 'color' instead of '//ly.img.ubq/fill/color'.

Functions#

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

  • getFill(block: number): number queries the current fill of a design block.
  • destroy(block: number): void destroys a fill in the same way as it destroys design blocks.
  • setFill(block: number, fill: number) applies the fill to an existing design block.

Remember to first destroy the previous fill if you don't need it any more. A single fill can also be connected to multiple design blocks. This way, modifying the properties of the fill will apply the changes to all connected design blocks at once.

  • hasFill(block: number) checks if a block supports fills.
  • setFillEnabled(block: number, enabled: boolean): void allows temporarily disabling a fill without destroying it.
  • isFillEnabled(block: number): boolean checks whether a fill is enabled.
File:
const solidColor = engine.block.createFill('color');
engine.block.setColorRGBA(solidColor, 'color/value', 0.44, 0.76, 0.76, 1.0);
const previousFill = engine.block.getFill(block);
engine.block.destroy(previousFill);
engine.block.setFill(block, solidColor);
engine.block.hasFill(block);
engine.block.setFillEnabled(block, false);
engine.block.isFillEnabled(block);