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

Scene Lifecycle

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to save scenes through the scene API and export them to PNG.

At any time, the engine holds only a single scene. Loading or creating a scene will replace the current one.

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 Scene#

  • create(): number Create a new scene, along with its own camera. Returns the new scene's handle.
  • createVideo(): number Create a new video scene, along with its own camera. Returns the new scene's handle.
  • getMode(): 'Design' | 'Video' Get the mode of the current scene. The mode can either be a static design or a video.
  • createFromImage(url: string, dpi = 300, pixelScaleFactor = 1): Promise<number> Loads the given image and creates a scene with a single page showing the image. Fetching the image may take an arbitrary amount of time, so the scene isn't immediately available. Returns the new scenes handle.
  • createFromVideo(url: string): Promise<number> Loads the given video and creates a scene with a single page showing the video. Fetching the video may take an arbitrary amount of time, so the scene isn't immediately available. Returns the new scenes handle.

Loading a Scene#

  • loadFromString(sceneContent:string): Promise<number> Loads the contents of a scene file. It returns the block id of the loaded scene.
  • loadFromURL(url: string): Promise<number> Loads a scene file directly from a URL. It returns the block id of the loaded scene. The URL has to be reachable and loadable from the context of your app. If you require more complicated requests than a simple GET, load the scene in your application code and then use the loadFromString() method.

Saving a Scene#

  • saveToString(): Promise<string> Serializes the scene into a string.
  • saveToArchive(): Promise<Blob> Saves the current scene and all of its referenced assets into an archive. The archive contains all assets, that were accessible when this function was called. Blocks in the archived scene reference assets relative to the location of the scene file. These references are resolved relative to the archive's locations when loading such a scene via loadSceneFromURL.

Events#

  • onActiveChanged(callback: () => void): () => void Subscribe to changes of the active scene, that's rendered by the engine.
File:
// Creating scenes
let scene = engine.scene.create();
scene = engine.scene.createVideo();
const mode = scene.getMode();
scene = await engine.scene.createFromImage(
  'https://img.ly/static/ubq_samples/sample_4.jpg'
);
scene = await engine.scene.createFromVideo(
  'https://img.ly/static/ubq_video_samples/bbb.mp4'
);


scene = engine.scene.loadFromString(SCENE_CONTENT);
scene = await engine.scene.loadFromURL(
  'https://cdn.img.ly/packages/imgly/cesdk-js/1.11.1/assets/templates/cesdk_postcard_1.scene'
);


// Save the scene
scene = await engine.scene.saveToString();
const archive = await engine.scene.saveToArchive();


// Subscribe to scene changes
const unsubscribe = engine.scene.onActiveChanged(() => {
  const newActiveScene = engine.scene.get();
});