Skip to main content
CESDK/Web/Guides/APIs
Language:

Create a Scene

In this example, we will show you how to use the CreativeEditor SDK's Creative Engine to create scenes through the scene API.

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

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Setup#

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

Creating scenes#

  • create(): number
    creates an empty scene with a camera and returns its id.
  • createFromImage(url: string, dpi?: number, pixelScaleFactor?: number): Promise<number>
    loads the given image and creates a scene with a single page showing the image.
    The optional dpi parameter allows specifying the created scene's DPI setting. The optional pixelScaleFactor parameter allows configuring the display's pixel scale factor. It is applied to the final export resolution.
  • get(): number
    returns the id of the current scene.
File:
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/index.js';
const config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/assets'
};
// Fetch scene file and store it as a string.
const SCENE_CONTENT = await fetch(
'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
).then((response) => {
return response.text();
});
CreativeEngine.init(config).then(async (engine) => {
// Creating scenes
let scene = engine.scene.create();
scene = await engine.scene.createFromImage(
'https://img.ly/static/ubq_samples/sample_4.jpg'
);
// Export the scene to an image
let imageData = await engine.block.export(scene);
// Loading scenes
// highlight-loadFromString
scene = engine.scene.loadFromString(SCENE_CONTENT);
// highlight-loadFromURL
scene = await engine.scene.loadFromURL(
'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
);
imageData = await engine.block.export(scene);
// Save the scene
// highlight-saveToString
scene = await engine.scene.saveToString();
// highlight-saveToArchive
const archive = await engine.scene.saveToArchive();
// Apply a template scene
// highlight-applyTemplateFromString
engine.scene.applyTemplateFromString(SCENE_CONTENT);
// highlight-applyTemplateFromURL
engine.scene.applyTemplateFromURL(
'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
);
// Get the scene id
scene = engine.scene.get();
// highlight-zoom
engine.scene.setZoomLevel(1.0);
engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel());
await engine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0);
// highlight-zoom
engine.dispose();
});