Scene Tree Editing

Scene Tree UI

This section explains the User Interface of the Scene Tree panel.

drawing-4-1730098877.png
No. Name Description
1 Navigation button

This button is enabled when multiple scenes are displayed.

The button has a back (left arrow) and forward (right arrow) function.
Clicking the triangle button at the bottom right of each arrow button displays the display history.
2 Lock button

This button is enabled when a node is selected in the scene tree.

Pressing the button locks the selected node. For details, please refer to here. When a lock is set, the lock icon is displayed. The child node icons will be displayed in grey.
3 Rendering button

This button is enabled when a node is selected in the scene tree.

This button is used to set whether or not the node will be rendered at design-time and run-time. If rendering is disabled, child nodes will also not be rendered. If rendering is disabled, the rendering disabled icon will be displayed.
4 Transparency

This function is enabled when a node is selected in the scene tree.

This sets the local alpha transparency (Alpha Value) of the selected node. The effective alpha value is combined with the material alpha value of the node.
5 Search field Searches for items in the scene tree and extra scene tree. Nodes containing the input keywords are highlighted.
6 Scene tree The nodes that make up the scene displayed in the Scene Editor panel are displayed in a tree.
7 Extra scene tree The behaviour set for the selected node is displayed here.
8 Rendering disabled icon

If rendering is disabled using Rendering button, the rendering disabled icon will be displayed.
9 Lock icon If the node is locked using Lock button, a lock icon will be displayed. If the locked node has child nodes, these will also be displayed with a lock icon (greyed out).
10 Annotation

The status of each node is displayed using four-colour icons.

  • Orange : If a node has a behaviour set
  • Blue : If a node has an animation property set
  • Yellow : If a script is set for the node
  • Red : If an error/warning/message is displayed for a node
11 Fusion Displays the Fusion panel for the node currently selected in the scene tree.

Create Nodes

Create Nodes from Toolbox

Drag an item from the Toolbox and drop it

  • either into the Scene Tree to sort the node properly into the scene graph
  • or directly into the render view of the Scene Editor to create the node on a specific display coordinate.
drawing-5-1717750498.png

When adding a node to the scene tree, note the following:

  1. The new node will be created as the last child of the node on which the node is dropped.
  2. To modify the scene tree structure, hold the "Ctrl" key while moving the node along the scene tree to the desired position. The dragged node will be positioned below the node it was dropped on.
  3. Moving a node along the scene tree without keeping the "Ctrl" key pressed will move the selected node inside the node it was dropped on.

Create Nodes from Imports

Drag an item from a user-defined import (a template scene node) and drop it to Scene Editor or Scene Tree.

drawing-5-1717751024.png

Scene Editor: Drop the template scene node in the Scene Editor to create an instance of this node at the given location. The new scene node will be created at the top level of the scene graph.

Scene Tree: As an alternative, the template scene node from Imports can also be dropped to the Scene Tree. This way it is possible to hierarchically sort the new node into the scene graph.

Bitmaps from Imports can only be dropped on an already existing RenderNode or BitmapNode. In this case, a BitmapBrushAlphaBlend effect will be created on that node referencing the given bitmap.

When adding a node to the scene tree, note the following:

  1. The new node will be created as the last child of the node on which the node is dropped.
  2. To modify the scene tree structure, hold the "Ctrl" key while moving the node along the scene tree to the desired position.
  3. Moving a node along the scene tree without keeping the "Ctrl" key pressed will move the selected node inside the node it was dropped on.
drawing-4-1730102263.png

Properties of Nodes Created from Imports

All node properties of a selected node are displayed in "Properties" panel.

For nodes created from imports, additional properties are available:

  • Import Path: Specifies the path to the imported artifact that serves as the source
  • Status:
    > OK: Template exists and type matches
    > New: Parent instance item is linked to a template which was modified by adding new children
    > Missing: Template item cannot be found

Manage Nodes

Copy, Move Scene Nodes

Scene nodes are all the items which form a scene. They can be toolbox scene nodes or template scene nodes created from the "Imports" panel.

Sometimes during solution creation one scene needs to be split into more separate scenes, or many elements from different scenes need to be combined to keep the Solution clean and manageable. Instead of creating the nodes again they could be copy-pasted in as many other scenes as necessary.

First, right-click on the desired node in the Scene Tree and from the contextual menu select "Copy".

drawing-4-1730102358.png

Second, switch to the desired scene and right-click on the main node in the Scene Tree. Then select the Paste option. The desired element will be copied into the selected scene.

Another similar possibility is to get the desired nodes by using Cut option and to paste them into the new scene. The usual combos are available: Ctrl + c for Copy, Ctrl + x for Cut and Ctrl + v for Paste.

Upon copy/cut/paste operations, the SceneComposer will allow any operation and display a set of errors/warnings depending on the raised violations (e.g. missing references, bad paths and so forth).

It is possible to select and to cut/copy/paste two or more Nodes only if they are at the same level in the scene hierarchy. By using Ctrl + C shortcut it is possible to copy the path of any selected object together with all the properties to the clipboard. The path can be copied directly in the Properties panel.


Clone, Delete, Rename Scene Nodes

Clone

Clone a scene node via the "Clone" context menu. The clone of the item will have the same name as the item, suffixed by a number, and will be placed in the same group or scene.


If there is necessary to realize many clones of the same item, the "Multiple Clone" option should be used. As can be seen in the image below, the user has just to specify the "Base Name" of all the clones and how many copies are needed.

drawing-5-1717751784.png

When cloning (or pasting a node) the name of the new node will automatically check if there is already a number at the end of the name. If there is a number this should be increased automatically. For instance, if an existing "Node_1" (or "Node1") is cloned the name of the clone will be "Node_2" (or "Node2") and not "Node_1_1" (or "Node1_1").

The duplication of the item names is incremented based on the numeric suffix with our without an _ separator.

To duplicate an item into the selected location hold left shift while drag and dropping an item.  Upon dropping a copy of the item will be created in the target location. Currently duplicating as a child of itself is not supported. 

drawing-4-1730102547.png

Delete

Delete a scene node via the "Delete" context menu.

  • If the item is not used anywhere, a simple prompt to confirm the deletion will appear.
  • If the item is used in an animation, the "Delete Item" dialog will be open and list the paths of the items from the animation where the scene node is used. The "OK" button is disabled so the scene node cannot be deleted.

Rename

Rename a scene node via the "Rename" context menu.

  • Item is not used anywhere; the renaming will take place as the user presses Enter key after editing.
  • Item with same name already exists (in the same location); warning message pops up.

Properties of the instance items can also be modified in the user defined scene. Properties that have been changed can be reset to their value in the template item by clicking the "revert" button on the left of the property to be restored.

drawing-5-1717752095.png

The first change of a property from the value from the template will cause the name of the property and its value to appear in bold in the "Properties" panel of the main view.

Reset Node Structure

Groups which have been created from a template item (an imported scene graph) can be reset to the template structure with the context menu "Reset Structure" on the group:
Deleted or modified group elements will be restored to the default structure.

Multi-Selection and Comparison of Nodes

For multi-selection of nodes, press the Ctrl key while left clicking all the desired elements to select.
When the last desired element is selected the Ctrl key can be released.

Another way is to use one of select options from the Scene Tree context menu for multi-selection:

  • Select Leaf Nodes
  • Select Children
  • Select All Descendants

Examples:

drawing-4-1730102620.png

After the multi-selection operation it is possible to copy, move or delete all selected items as desired.

Locking UI Elements

In different circumstances it could be useful to have the possibility to avoid any type of accidental SceneComposer solution modification. SceneComposer offers the locking option to provide the possibility to avoid such unfortunate mistakes.

Locking is available via context menu for all items excepting folders.

To lock a selected item the user has to right click on that item. From the context menu it is possible to select the "Lock" option.

drawing-4-1730102743.png

The locking state of the items can be: unlocked or locked (directly or by an ancestor). The item icon is decorated in such a way that it is clearly indicate if it is locked. The properties (including the name) and the structure of locked items cannot be changed using direct means (properties panel, scene tree etc.)

Another way to lock a selected item is to check the "Is Locked" checkbox in Properties.

drawing-5-1717752535.png

The re-import of content used by locked items is not possible.

If it is necessary to unlock a sub-item it is possible to use the "Force Unlock" option from the context menu. When the "Force Unlock" option is used not only the sub-item is unlocked, the parent node is unlocked as well.

drawing-4-1730102854.png

Generally speaking this feature is a soft lock mechanism. References used by a node can be modified, but not the locked object directly. For instance, if a node which has associated a texture that uses a bitmap is locked, the bitmap still can be modified so, in this way, the locked node can be modified.

Bitmap Preview

Use Bitmap Preview

Whenever a Bitmap is selected - for example from the "Imports" panel, "Scene Tree" panel or "Solution Explorer" panel - a preview of the selected Bitmap is displayed in the "Properties" panel in addition to the specific Bitmap properties.

drawing-5-1717755230.png

Image properties in the properties panel also show a preview of the image as a tooltip when they are hovered over with the mouse.

drawing-5-1717756645.png

Flipped Bitmaps

The platform definition has been extended and defined via meta-info if the bitmaps shall be flipped or not for 2D and 3D. Each bitmap written into the asset specifies the info if flipped or not (the new attribute) SceneComposer writes the bitmap data in the flipped or not flipped data format depending on the platform's specification.

A new property (Origin) is available for bitmaps to configure the layout of the pixels in the asset.

drawing-5-1717756945.png

If the option PlatformDependent is selected, the following verifications will be performed:

  • Bitmap is used only in 2D content, the platform setting for the 2D engine will be used;
  • Bitmap is used in 3D content, the platform setting for the 3D engine will be used;
  • otherwise the imported content will be exported without any flipping.

Pivot Hint

Pivot Hint is a property of a Bitmap which allows to set the coordinates of a point that will be used as default Pivot Point for the RenderNode that uses the Bitmap.

The example hereafter presents the situation of replacing the Hour Needle Image on an AnalogClock control with a bitmap having or not having set the Pivot Hint.

drawing-5-1717759443.png

Including Solution Items in Scene Explorer

Creation

Solution items can be added in the Scene Explorer via copy-paste or drag-and-drop.
The image below exemplify the adding (by drag-and-drop) the Text Control into the Solution Explorer:

drawing-4-1730164152.png

When the solution items are copied in Scene Explorer the class is copied, not the instance.

After adding the solution item (Text control, in our case) in the Solution Explorer the newly created copy is shown in the destination folder (1) from Solution Explorer and also in the Controls panel in the Category Common (2). Also, in the case of the controls and behavior building blocks, the solution item becomes active (3) and its content is shown in the Scene Tree.

Following solutions items support this feature:

  • controls
  • behavior building blocks
  • templates
  • shader fragments
  • shader programs
  • render targets

Usage

Once the solution item is copied in the Solution Explorer it can be edited and then instantiated in the Scene Tree. As exemplification, the Category property was changed to "MyControls" and the control TextNode2D properties were changed to show a different text and color:

drawing-4-1730164427.png

Isolated Editing

For a graphic designer or a technical artist, sometimes it is very useful to have the possibility to shape a single graphic object without seeing the whole scene context. For instance, the designer needs to switch to a special context where only one object (e.g. car) is visible and can be edited. To address this need, SceneComposer allows to edit a single object within the regarding scene hiding all other rendered elements and temporary set the edited object in the view center.

To use this feature, in SceneTree having multiple objects selected, right click > Isolated Edit - this will enter in a special Single Editing Mode, where a scope is applied to the selection.

drawing-4-1730164731.png

Another possibility to enter in a special Single Editing Mode is to use the "Isolated Edit" button which is placed in the Toolbar near the "Active Rendering" button.

drawing-5-1717762518.png

All objects will be rendered with the built-in scope. Turning off this mode can be realized from the toolbar, this mode being highlighted. In this way more complex scenarios can be applied.

If you refresh the current scene or switch to another scene, the isolated edit mode will be automatically turned off.

Usage and Dependencies

Find Usage & Dependencies

Use this feature by opening a SceneComposer solution to activate and select the Graph Dependencies panel.

  • Activate the panel by selecting "View" > "Editors" > "Graph Dependencies".
  • The graph panel represents in a visual form the nodes and the connections that unify them.

The edges that link the nodes show the dependencies that exist among the items. The layout graph panel can be docked in SceneComposer.

By using the "Export" button the user is allowed to export the "Dependency Graph" as an .xml file with nodes based on items types and names.

drawing-4-1676379622.png

After the Graph Dependencies panel is selected, right-click on the scene and select "Dependencies" or "References" from the context menu (see below).

drawing-4-1730163661.png

If the "Dependencies" option is selected, the graph will become visible inside the Graph Dependencies panel. If the "References" option is selected, the current selected scene will become visible inside the Graph Dependencies panel. When the current selected scene is pressed, two option are displayed as two buttons near the selected scene icon: "Show the dependencies of this node" and "Show the references where this object is used".

drawing-5-1717764191.png

On the left side of the panel there is a cursor, which allows to establish the dimensions of the graph. There are several different possibilities to set the dimensions of the graph:

  • By using the 1:1 button (the graph will have an optimal dimension)
  • By using the "Fill" button (the graph will fill the whole panel)
  • By using the cursor (the dimensions should be set in a range between 0 and 100.00)
  • By using the combo Ctrl + Mouse Wheel

At the same time, there are some combinations that can be seen in the next figure:

drawing-4-1676379663.png

On the top side of the Graph Dependencies panel there are some other possible options. First, it is possible to select the desired layout type of the graph by using the "Pick Layout Type" list. There are several different algorithms to display the graph:

  • Bounded FR
  • Circular
  • Compound FDP
  • Efficient Sugiyama
  • ISOM
  • KK
  • Lin Long
  • Tree

The most common one from all these graph types is the Efficient Sugiyama.

drawing-4-1676379675.png

The second menu list available on the top of the Graph Dependencies panel allows to filter the desired category of items displayed: "Select a Filter Category". There are several available categories:

  • Animations
  • Bitmaps
  • Controls 3D
  • Controls 2D
  • Display
  • Scene 3D
  • Scene 2D
  • Shaders
  • Shader Programs
  • Vertex Buffers
drawing-4-1682407550.png

By left-clicking on a node in the graph two buttons will appear in the right corner:

  • "Show references" which will display the usage of an item in a graph with navigation and scene tree synchronization
  • "Show all dependencies" which will display all the dependencies of an item in a graph

Another given possibility is to move the graph in the Graph Dependencies panel. For example, if the "Scene" category is selected, you will be able to see the relationships between the main scene and all the scenes associated with those imported .fbx that are used in the main scene.

It is possible to select and to move the whole graph; to do this, just left click somewhere near the graph and hold down the left button of the mouse. On this way, it is possible to move the entire graph in any desired place inside the panel. If just one of the scenes is selected by clicking on it, it will be possible to move just that element.

When a category with many elements is filtered by using the specific menu list, the graph will not be centered and the only visible elements can be some peripheral parts of the tree.

To center the graph, first, the "Fill" button has to be used. After this, the "1:1" button will center the graph instantly. Last but not least, even though the filter category is used to show a specific category, it is possible to choose one or many elements that do not pertain to that category to be shown. To obtain this effect let's suppose that the Scene category was previously selected. By right-clicking on any scene displayed in the graph, there is a "Pinned" option available in the context menu.

drawing-5-1717764352.png

In the case of the main scene, these "Pinned" option is enabled. For any other secondary scene this option is disabled. If this option is enabled, the graph will display all the elements of that category, plus the "pinned" elements from the previous category.


Activation of Items Referenced

If necessary, it is possible to activate items referenced through paths. The Activate button will load the item in the property grid and in others panels linked to the type of the item.

This feature is available for any referenced item as can be seen in the examples below.

For a TextStyle referenced by a text node:

drawing-5-1717764495.png

For a Bitmap referenced by a bitmap node:

drawing-5-1717764664.png

For a Render target referenced by a camera:

drawing-5-1717765002.png

Locking/Unlocking the Properties Panel

Some behaviors like e.g. the ForwardValue behavior have a property TargetNode. The appropriate TargetNode can be assigned by pressing the respective icon button, which will open the "Choose Item" dialog as shown in a Behavior example.

There is an alternative - possibly more comfortable - way to configure the TargetNode via drag & drop.

Like various DCC tools and Game Development Platforms, Scene Composer employs a locking and unlocking method for the Properties panel to significantly enhance the workflow efficiency for designers.

This method the user to lock the properties panel on the top right side of the property panel and move SCItems via drag and drop into the property fields. The value that is being copied into the fields is the path (if the field requires it) or the name of the item. 

How to use the Locking/Unlocking method

  1. Select the target node from the scene tree, and then select the behavior displayed in the extra scene tree.
    drawing-4-1730163161.png


  2. Click the Lock button in the upper right of the properties panel for the selected behavior to lock the properties panel.
    • While locked, the properties of the object selected when locking will be displayed and maintained.
      drawing-4-1730163257.png


  3. In the scene tree, select the node you want to set as the TargetNode, and drag and drop it onto the [TargetNode] in the Properties window, where it will be displayed in step 2.
    drawing-4-1730163466.png


  4. Click the Lock button in the top right of the Properties panel again to unlock the Properties panel.

Limitation: Drag&drop to Properties panel doesn't work for external (windows) files.