Introduction
The 2D Render Media uses a Canvas and Layering system.
This Media type enables you to create, display and overlay images on top of eachother as well as enable you to manipulate them with user inputs via Linked Features.
Utilizing multiple layers of Rendered Images with Transparency enabled stacked on top of eachother
Usage
Navigate to the Visualization section and in the Left side menu, scroll down and look for Add 2D Render and click Add.
Doing so will open a new interface.
2D Render Media Interface
Base settings
On the top left side of the screen, you will see 2 Input fields:
- The Placeholder Image for the Thumbnail
- Name for the media ( Default is set to 2D Render )
The Image you put inside the thumbnail, will be used as an icon in the Media Gallery
The Name of the Media will be used wherever there is a reference to it. ( e.g. within the Rules section )
Canvas Settings
In the bottom left corner, you will find the Canvas Settings. Here you can set the base Width and Height of your 2D Render Media. ( Default is 1920 x 1080 )
Layers
On the Left side of the screen, you will find a toolbox named Layers.
Similar to many other graphical design interfaces, you can adjust the depth of each Shape within the Canvas.
This means that each layer will be drawn above the layer below it, as if it were in front of it. *See examples ahead
Layers have a visibility property, which as the name suggests, defines whether the layer is visible or not. This property can be set either manually by clicking the eye icon or by setting it within the configurator’s rules.
Each layer can be duplicated or removed by clicking on the icon and selecting the desired option.
Layers Example
Say we have:
- A red rectangle inside the top layer
- A green triangle inside the middle layer,
- And a blue circle inside the bottom layer,
The rectangle will be drawn on top, followed by the triangle and lastly the circle.
Different shapes in separate layers
Result of layered shapes
Shapes
On the right side of the screen, you will find a toolbox with the title Shapes.
Upon clicking on Add shape you will be presented with many different choices. Here you can choose a primitive shape like a Rectangle, Circle, Triangle, … or opt for a more complex shape like an Image, Image Collection or Text.
Clicking on a shape will add it to the Canvas of the active layer, as well as add it to the Interior Layers.
Say we add a Triangle and a Rectangle to the scene. The Triangle will be rendered above the rectangle, because of its order inside the ordered list of shapes.
Shape Appearance
Each shape’s properties can be adjusted in the Appearance settings.
Each shape has transforms which control its position, scale, rotation (Angle), the transform origin and its opacity. Depending on the chosen shape, you will have different inputs available *see shape inputs section
Edit Shape
When you click on the button Edit Shape a new interface will pop-up, where you can write the script to define how the shape should be drawn using the FabricJS Library and expose parameters to manipulate specific parts of the shape itself. Under Shape > Appearance > Inputs
Shape Inputs
Exposed parameters ( Inputs ) can be either set manually, or linked to a feature by clicking on the chain icon on the right of the input. Doing so will change the input field into a drop-down type.
This allows you to connect or link an input to a feature. This will copy the value of the selected option from the chosen feature once you launch the configurator.
Toolbar
At the top of the canvas, is the toolbar which is active only when you have a shape selected. This toolbar is used for quick shape adjustments, such as:
- Aligning the shape relative to the canvas,
- Moving it to the front or to the back of the selected layer,
- Edit, Duplicate or Delete the shape,
- Locking the shape (so that you don’t click it by accident inside the canvas)
- Add the selected shape to your Shapes Library
