2D Scene Design

• 2D Nodes
• Effects
• 2D Scene Editor
• 2D Laying Out
• MVG Nodes
• Referencing external resource

2D Nodes

2D Toolbox

The Toolbox for 2D scenes provides the following items:

Create 2D Nodes

Following items can be used to create a new node in the scene graph:

For each of these types, refer to the Properties panel for inspecting all properties specific for the type of node. Tooltips are available to explain the purpose of the property. Refer also to the Properties Overview listing the Tooltip descriptions.

About MVG nodes, please refer to MVG Nodes page. 

Position of 2D Nodes

By using the so-called "Object Inspector" feature, it is possible to display the following properties of a 2D node: Position, Scale, Rotation and BoundingBox. This can be done by right-clicking on a 2D node and selecting the "Object Inspector" from the context menu.

The displayed data (visible in the "Object Inspector" panel) is always refreshed reflecting all the changes made by the user.

WorldPivotPosition, WorldPosition and WorldBoundingBox can also be displayed in the Scene Editor panel.

This feature is disabled by default and can be enabled in "Preferences" > "Editor" > "2D" > "World Transformations". Alternatively, it can be enabled in "View" > "2D Editing Utilities" > "World Transformations".

Adding Text to the 2D Scenes

Text can be added to the scenes either by using a dedicated node called TextNode2D or by using a Render Node in conjunction with a text effect.

TextNode2D

The image below shows how to drag and drop the TextNode2D from the Toolbox to the scene tree:

The TextNode2D default properties are set so that the node is displayed after it is added to the scene tree.

 

Multi Line Text Input

Sometimes it could be necessary to introduce a long text - structured in multiple, successive lines - into a text field. To support this, SceneComposer allows multi-line input in any text field within the Properties panel. To insert a newline press Ctrl + Enter. This will put the cursor at the beginning of the next line.

More text layout properties are available when "Enable Text Layout" is checked .

Text Layout

Another category called "Text Layout" includes the following properties: TextAlignment, LineSpacing, Trimming, MultiLine and WordWrap.

This properties section is only visible if Enable Text Layout is checked. If it is unchecked, the default values of the properties will determine the way the text is rendered.

Effects

Effects describe the appearance of a RenderNode in a 2D scene. The number of effects may differ on each platform. A functional overview of each effect is provided in the table below (you can navigate to the detailed pages by using the links in the titles).

	Effect name	Description
1	BitmapBrushBlend	Renders a bitmap image as source content and blends it with the destination (store) buffer.
2	BitmapBrushColorBlend	Renders a bitmap, modulates its color (e.g., RGBA factors) and blends the result with the destination buffer.
3	BitmapBrushHslBlend	Renders a bitmap with hue/saturation/lightness adjustments and blends it with the destination buffer.
4	BlurBitmapBrushBlend	Produces a blurred bitmap image (post filter) and blends it into the destination buffer.
5	GlBitmapBrushColorMaskBlend	Renders a bitmap using a color-based alpha mask and blends it with the destination buffer.
6	GlBitmapBrushMaskBlend	Renders a bitmap with an alpha mask (mask texture) and blends it with the destination buffer.
7	GlDropShadowBitmapBrushBlend	Draws a drop shadow for the input bitmap and blends both shadow and image with the destination buffer.
8	GlDropShadowBitmapBrushColorBlend	Draws a drop shadow and applies color modulation to the bitmap output before blending to destination.
9	GlFlipBitmapBrushBlend	Flips the bitmap horizontally and/or vertically and blends it with the destination buffer.
10	GlFlipBitmapBrushColorBlend	Flips the bitmap, applies color modulation, and blends the result with the destination buffer.
11	GlLinearGradientBitmapBrushBlend	Applies a linear gradient over bitmap/text content and blends it to the destination buffer.
12	GlLinearGradientBrushBlend	Generates a linear-gradient brush as source pixels and blends it with the destination buffer.
13	GlMultiTextureBrushBlend	Blends two bitmap inputs (multi-texture combine) and then blends the result to the destination buffer.
14	GlOutlineBitmapBrushColorBlend	Creates an outline from the image alpha (notably for bitmap-cached text), modulates color, and blends to destination.
15	GlRadialGradientBrushBlend	Generates a radial-gradient brush as source pixels and blends it with the destination buffer.
16	GlSolidColorBrushMaskBlend	Fills with a solid color through an alpha mask and blends it with the destination buffer.
17	MVGArcBrush	Renders a vector arc shape (MVG) as a brush output (source pixels).
18	MVGEllipseBrush	Renders a vector ellipse/circle (MVG) as a brush output.
19	MVGPathBrush	Renders a vector path (MVG) as a brush output.
20	MVGRectBrush	Renders a vector rectangle/rounded-rect (MVG) as a brush output.
21	MirrorBitmapBrushBlend	Renders a bitmap together with its mirror reflection and blends the combined output to destination.
22	ShadowBitmapBrushBlend	Produces a shadow or glow around the bitmap and blends the effect and image with destination.
23	ShearBitmapBrushBlend	Shears (skews) the image by X/Y shear angles and blends it with the destination buffer.
24	SolidColorBrushBlend	Generates a solid-color rectangle as source pixels and blends it with the destination buffer.
25	SolidColorBrushColorBlend	Generates a solid-color rectangle, applies color modulation, then blends to the destination buffer.
26	SolidColorBrushHslBlend	Generates a solid-color rectangle with HSL correction and blends it with the destination buffer.

Combined Effects

The effects provided in SceneComposer are combined effects. They can be dragged from the toolbox and dropped onto a RenderNode.

Background information

Combined effects are a combination of two or three basic effect types that are combined to an effect chain.

The following three basic effect types are used to form this effect chain 

• Brush Effect: Acts as the input effect; it defines the source data for the node (e.g. SolidColorBrush, BitmapBrush)
• In-place Effect: Multiple different in-place effects can be concatenated (e.g. ConstantAlphaEffect, MaskEffect)
• Blend Effect: e.g. AlphaBlendEffect

A correctly configured effect chain consists of the following 

For usability reasons, Scene Composer only provides combined effects in the Toolbox by default.

Use Combined Effects

Several node types are already preconfigured with a specific combined effect. E.g when a BitmapNode is added to the scene graph, it is automatically linked to a BitmapBrushBlend combined effect

For user-defined nodes, use the following 2D node type:

Follow these steps to view and edit the effect:

1. Select the node in the left side of the Scene Tree panel.
2. The linked effect will appear on the right side.
3. Select the effect to display its properties in the Properties panel, where you can edit them.

2D Scene Editor

The "Scene Editor" is the main panel of the application in which scenes and animations are displayed ("render view"). It is the only panel that cannot be closed.

See Also : 2D Editing Helpers

---

General

By default, only one Scene Editor is displayed (Scene Editor -0 only). You can display up to four Scene Editors (Scene Editor -0 to -4) as needed. You can show or hide them from the menu bar [ View > Editors > Scene Editor ].

• Scene Editor menu on the Menu Bar
  
  
  
  
• The [ Display Scene Editor ] icon on the toolbar
  
  

  When you click the [ Display Scene Editor ] icon, four icons will appear for toggling the visibility of the Scene Editor. Please refer to the table below for details on each icon.

  	The Scene Editor -0 is displayed.
  	The Scene Editors -0 and -1 are displayed.
  	Scene Editors -0 through -2 are displayed.
  	Scene Editors -0 through -3 are displayed.

  When a display setting not listed in the table above is applied in the Scene Editor menu on the Menu Bar, the [ Display Scene Editor ] icon will display "Custom".
  
  

Additionally, scene editors (1) to (3) support floating display. By using floating display, you can display any scene editor on a separate display.

If the displayed Scene (or Control) is updated, it will be reflected in all Scene Editors.

---

The following is an explanation of the scene editor tool icons.

Camera Manipulation

The Camera combo box provides the following camera views for a 2D scene:

Camera Panning and Zooming

The scene content displayed in the Scene Editor can be modified like this when in Editor mode:

To enable panning and zooming also for scene cameras, a preference option is available:

It is possible to zoom any 2D scene oriented towards a point indicated by the cursor (similar with Google Earth zoom). By placing the cursor on any point in a 2D scene, when zooming operation is doing the whole scene towards that selected point.

Fit to Screen

When zooming or panning the editor camera of a 2D scene or a 2D Control, parts of your scene or Control might get out of sight.

To display the entire content of your 2D scene or 2D Control in the Scene Editor window, click the "Fit to Screen" button. All objects  of the scene or control will become visible - even those outside the yellow viewport rectangle.

Reset Camera

Use the "Reset Camera" button left to the Camera combo box to reset the selected view to the default location and orientation.

Camera Preview Thumbnail

Even though the current selected camera is the Perspective camera, it is possible to see the content displayed by other camera in the thumbnail available in property grid. If the camera is not associated to a render target, the preview will be done on a fixed size virtual render target surface:

If the camera is associated to a render target, the preview will be generated:

By selecting the camera whose perspective should be viewed in the Scene Tree, the camera preview thumbnail will be displayed in the property grid.

---

Picking and Transforming Items

In the Scene Editor, an item can be picked by clicking on it. After picking, the bounding box of the item is displayed together with the pivot point, and it is selected in the "Scene Tree" panel:

Interaction Modes: Selection, Edit the margin of objects inside a layout, Translate, Rotate, Scale

In the Toolbar, the following interaction modes are available for 2D scenes:

Select

When the button "Select" is enabled, the selected object will be highlighted in the Scene Editor but can't be transformed.

Edit the margin of objects inside a layout

For more information about this, please refer to Adorners.

Translate

Three options are available for this mode:

In Translate mode, another feature is the "Translation System" that allows choosing between Parent and View reference system. When Parent system is selected, the reference system is the coordinate system of the scene. Otherwise, the reference system is the coordinate system of the selected object. In both cases the object can be moved by using the arrow keys.

Scale

The scale gizmo is represented in a similar way as the translation gizmo:

Move the mouse while pressing left mouse button to translate, rotate or scale the selected object in the render view. The modification of the properties is also reflected in the "Properties" panel for the selected item.

The scale gizmo contains four controllers:

Rotate

In this mode, a rotation gizmo is represented by a circle:

Usually the object is freely rotated except the situations when the rotation angle is close to a fixed angle controlled by a tolerance. The tolerance defines the range between two multiple values where the object can freely rotate without being snapped.

Move Elements with Arrows Keys

Any element can be moved/scaled/rotated by using arrows. After the selection of the object use the Left, Right, Up and Down arrows to get the desired results.

Unselect an Item

The camera cannot be manipulated and vice versa when an item is selected.

Unselect an item by hitting the Esc key.

Please refer to section 2D Editing Helpers for further information.

2D Laying Out

Laying out is a feature specific to 2D scenes. Once a layout is applied to a 2D group, all children of that group will be affected by the given layout strategy.

Candera supports four built-in layouts: Stack, Grid, Baseline, Overlay, and DockPanel each layout having some specific configuration parameters.

General Layout Properties

The following properties can be set to any node which is arranged by a parent layouter.

A layout can only be set on a group, having some specific properties, while final laying out is determined by the properties set on all the arrangeable items that are contained in any group on which a layout was set.

After the creation of a layout, the borders of the grid cells - including bounding boxes - can be visualized simultaneously in the Scene editor. Actually, the border of every cell of the layout will be visible as a yellow line.

This border is visible if the entire group is selected or if just one single cell is selected.

Two different secondary borders - the bounding box of the parent node, and the bounding box of the effective node - will be visible, marked with blue, if some values are set.

The effective bounding box will become visible if layout values - like margin of the element - are added in Properties panel.

Row, Column Number

If the parent layout is a grid, the elements position in the grid can be changed. This has same effects like arranging a node in the Grid Editor Dialog.

Alignment

Vertical Alignment: Each layout-able element can specify its vertical alignment inside the area which is available by the parent layout.

The sample images below were created using an OverlayLayout (sized 200x100px) containing an image (sized 151x52px). The image's StretchBehavior property is set to Uniform and its HorizontalAlignment remains at the default value. 
To demonstrate the impact of different VerticalAlignment settings, this property has been varied across all options (from VTop to VStretchBottom). 

Horizontal Alignment: Each layout-able element can specify its horizontal alignment inside the area which is available by the parent layout.

The sample images below were created using an OverlayLayout (sized 100x200px) containing an image (sized 52x151px). The image's StretchBehavior property is set to Uniform and its VerticalAlignment remains at the default value. 
To demonstrate the impact of different HorizontalAlignment settings, this property has been varied across all options (from VLeft to VStretchRight). 

Size

Specify a fixed size for an element by setting the width and height. In case the element won't be asked for its preferred size.

Minimum Size: An element won't get smaller than its minimum size.

Maximum Size: An element won't get larger than its maximum size. If more space is available, it will be placed according to its alignment parameter (see above).

Margin

The margin for an element defines some extra space around itself. Different values can be set for left, top, right and bottom margin.

Stretch Behavior

If the items size (size of an image, text, or colored rectangle) is smaller than the available space one of the following stretch behaviors can be set:

Stack Layout

The layout type "Stack" realizes a stacked laying out either in horizontal or vertical direction. The order of the stack elements is given by the order of the child nodes within the laid out group.

Configuring the Stack Layout:

Grid Layout

In a Grid layout, every node part of the laid out group is assigned to a cell of the grid. A Grid Layout Editor is available to configure the grid and to arrange nodes in the grid's cells by drag & drop operation.

Configuring the Grid Layout:

Optional: Use the buttons "+","-" to configure the desired number of rows and columns in the "Grid layout editor" dialog, if not done already in the Properties panel.

Arrange the nodes of the group in the grid's cells by drag & drop operation.

Configure width and height for rows and columns by editing the values on the border of the grid. Values within the range [0...1] are considered as percentages and values greater than 1 as dimensions.

Confirm the layout configuration by pressing the "OK" button of the dialog "Grid layout editor".

Call the Do-Layout command using the shortcut keys "Ctrl+L" or from the "Edit" > "Do-Layout" menu.

See also:

Baseline Layout

The layout type "Baseline" realizes a stacked laying out in the horizontal direction. It behaves similar to the Horizontal Stack Layout. The major difference consists in its given reference: it aligns the objects to a line instead of aligning them to the client area. The main purpose of this layouter is to align different sizes formatted texts along the same baseline. For instance, if the center is chosen for alignment, the baseline of the text will be aligned to the given line (= baseline offset). The order of the elements is given by the order of the child nodes within the laid out group.

Configure the Baseline Layout by following these steps:

See also:

Overlay Layout

The layout type "Overlay" arranges the objects by laying out them on top of each other or by aligning the nodes according to their general layout properties. The order of the elements is given by the order of the child nodes within the laid out group.

Configuring the Overlay Layout:

See also:

DockPanel Layout

The "DockPanel" layout provides a layout area within it is possible to arrange child elements around the edge of the screen based on four direction: Top, Bottom, Left, and Right.

This type of layout arranges the elements by laying out them in the remaining space after the previous element was set. To dock an element to the center of the panel, it must be the last child of the panel.

Configure the DockPanel Layout by following these steps:

See also:

MVG Nodes

MVG Nodes can be created in CGI Studio SceneComposer via the Toolbox. Simply drag and drop the desired MVG Node into the Scene Editor or Scene Tree Panel.

The following MVG Nodes are available:

• MVG Arc Node

• MVG Ellipse Node

• MVG Path Node

• MVG Rect Node

You can see an application of MVG nodes in Scene Composer's 2D Basic sample.

Configure MVG Nodes

An MVG node is a RenderNode2D and therefore it has the same properties that can be configured in the properties panel:

• General. Name, Full Name, Description...
  
• 2D Render Node: Render Order Rank...
  
• Transformation: Position, Pivot Point, Pivot Offset...
  
• Asset: Id, Symbolic Name...
  
• Item: Scope Mask, Alpha Value...
  
• Layout: Vertical Alignment, Horizontal Alignment, Size...

Further details like the visual appearance of MVG nodes can be configured in the node's effect. Each type of MVG node has its appropriate effect:

MVG Node	MVG Brush
MVG Arc Node	MVGArcBrush
MVG Ellipse Node	MVGEllipseBrush
MVG Path Node	MVGPathBrush
MVG Rect Node	MVGRectBrush

Select the MVG Node in the Scene Tree and select the attached MVG effect in the right side of the Scene Tree to view its properties in the properties panel.

MVG Arc Node - MVGArcBrush

Can be used to render an arc.

The properties of the MVG Arc Node are those of a regular RenderNode2D. For the attached effect MVGArcBrush, the following properties can be configured:

Filter	Filter for rendering (choose between BilinearFilter and NearestFilter).
Line Width	Width of the rendered line in pixels.
Stroke Color	Color of the rendered line.
Size	Vertical (X) and horizontal (Y) size of the arc to be rendered.
Angle Start	The angle of the arc's starting point.
Angle End	The angle of the arc's end point.

The arcs starting and end point have to be entered in degrees. Please also see the sketch below.

MVG Ellipse Node - MVGEllipseBrush

Can be used to render an ellipse.

The properties of the MVG Ellipse Node are those of a regular RenderNode2dD. For the attached effect MVGEllipseBrush, the following properties can be configured:

Filter	Filter for rendering (choose between BilinearFilter and NearestFilter).
Line Width	Width of the rendered line in pixels.
Stroke Color	Color of the rendered line.
Size	Vertical (X) and horizontal (Y) size of the arc to be rendered.
Angle Start	The angle of the ellipse's starting point.
Angle End	The angle of the ellipse's end point.
FillColor	Fill color of the ellipse.
PaintMode	Configures if the ellipse will be rendered with outline and filling or with either of those (choose between Both, Fill and Stroke).

MVG Path Node - MVGPathBrush

Can be used to render paths with a combination of instructions.

The properties of the MVG Path Node are those of a regular RenderNode2dD. For the attached effect MVGPathBrush, the following properties can be configured:

Filter	Filter for rendering (choose between BilinearFilter and NearestFilter).
LineWidth	Width of the rendered line in pixels.
Stroke Color	Color of the rendered line.
FillColor	Fill color of the path.
PaintMode	Configures if the path will be rendered with outline and filling or with either of those (choose between Both, Fill and Stroke).
Segments	Defines segments. Input value VGPathSegment number of Data Description 0 ClosePath 0 Closing a path by connecting a final coordinate to a start coordinate. Therefore, the required number of Data is 0. 2 MoveTo 2 Specify coordinates of a path starting point. Therefore, the required number of Data is two (x0, y0). 4 LineTo 2 Draws a straight line. Specify an end point coordinates. Therefore, the required number of Data is two (x0, y0). A straight line is drawn from a coordinates specified in the previous Segment to a coordinates specified in this Segment. 6 HLineTo 1 Draws a horizontal line. The required number of Data is only one (x0). 8 VLineTo 1 Draws a vertical line. The required number of Data is only one (y0). 10 QuadTo 4 Draws a quadratic Bezier curve. Specify a coordinates of a control point and an end point. Therefore, the required number of Data is 4 (x0, y0, x1, y1). Please refer the below image as an example. 12 CubicTo 6 Draws a cubic Bezier curve. Specify coordinates of two control points and an end point. Therefore, the required number of Data is 6 (x0, y0, x1, y1, x2, y2). Please refer the below image as an example.
Data	Defines Data according to the specified Segment.

MVG Rect Node - MVGRectBrush

Can be used to render a rect.

The properties of the MVG Rect Node are those of a regular RenderNode2dD. For the attached MVGRectBrush, the following properties can be configured:

Filter	Filter for rendering (choose between BilinearFilter and NearestFilter).
LineWidth	Width of the rendered line in pixels.
Stroke Color	Color of the rendered line.
Size	Vertical (X) and horizontal (Y) size of the arc to be rendered
TopLeftRadius	Radius of the top left corner.
TopRightRadius	Radius of the top right corner.
BottomLeftRadius	Radius of the bottom left corner.
BottomRightRadius	Radius of the bottom right corner.
FillColor	Fill color of the path.
PaintMode	Configures if the rectangle will be rendered with outline and filling or with either of those (choose between Both, Fill and Stroke).

Referencing external resource

External resources can be referenced and drawn on the scene editor. This feature is only available when launching Scene Composer on the Android platform.

Resource Reference Menu

[ Set External Resource Path... ] in the menu bar under [ File ] to browse external resources. This menu is grayed out and not selectable for Scene Composer on non-Android platforms.

Referable external resource file formats are *.bmp, *.jpg, *.jpeg, *.gif, *.tga, *.png, *.dds, *.hdr, and *.exr.

Basic Usage

1. Run Scene Composer and open a new or existing solution file.
   
   
2. From [ File ] menu in the menu bar, select [ Set External Resource Path... ].
   
   
3. The ExternalResourceContainerPlugin dialog will appear.
   
   
   
   
   
4. Click the [ Browse... ] button in the dialog to select the external resource folder to be referenced.
   
   • Select the Android Studio project folder.
     

The behaviors Set External Bitmap, Check External Resource Change, and External Bitmap Provider are used to display external resources. For details on each behavior and their usage, please refer to this page.