# 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 : <span style="color: rgb(230, 126, 35);">[2D Editing Helpers](https://doc316en.candera.eu/books/preferences/page/2d-editing-helpers "2D Editing Helpers")</span>

---

#### <span style="color: rgb(0, 0, 0);">General</span>

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 &gt; Editors &gt; Scene Editor \].

- Scene Editor menu on the Menu Bar  
    <div drawio-diagram="8610"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-7-1760593129.png" alt=""/></div>
- The \[ Display Scene Editor \] icon on the toolbar  
    <div drawio-diagram="8611"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-7-1760593264.png" alt=""/></div>
    
    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.
    
    <table border="1" style="border-collapse: collapse; width: 53.6082%;"><colgroup><col style="width: 20.2873%;"></col><col style="width: 79.7127%;"></col></colgroup><tbody><tr><td><div drawio-diagram="8612"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-7-1760593313.png" alt=""/></div>
    
    </td><td>The Scene Editor -0 is displayed.</td></tr><tr><td><div drawio-diagram="8613"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-7-1760593331.png" alt=""/></div>
    
    </td><td>The Scene Editors -0 and -1 are displayed.</td></tr><tr><td><div drawio-diagram="8614"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-7-1760593345.png" alt=""/></div>
    
    </td><td>Scene Editors -0 through -2 are displayed.</td></tr><tr><td><div drawio-diagram="8615"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-7-1760593361.png" alt=""/></div>
    
    </td><td>Scene Editors -0 through -3 are displayed.</td></tr></tbody></table>
    
    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".  
    <div drawio-diagram="8616"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-10/drawing-7-1760593389.png" alt=""/></div>

<p class="callout info">Additionally, scene editors (1) to (3) support floating display. By using floating display, you can display any scene editor on a separate display.</p>

<p class="callout info">If the displayed Scene (or Control) is updated, it will be reflected in all Scene Editors.</p>

---

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:

<div class="contents" id="bkmrk-editor-camera%3A-a-def"><div class="contents"><div class="contents"><div class="textblock">- **Editor camera:** A default camera named "Editor", which can be used to edit the scene including all scene cameras from an outer perspective.
- **Scene cameras:** Further, each camera part of the scene is listed in the combo box. If a scene camera is selected, the scene is displayed from that camera's perspective. Scene cameras are created by dragging an item of type "Camera" from the Toolbox panel and dropping it into the Scene Tree panel.

</div></div></div></div><div drawio-diagram="6246"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-06/drawing-5-1718376200.png" alt=""/></div>

<div class="contents" id="bkmrk-in-scene-camera-view"><div class="contents"><div class="textblock"><dl class="note"><dd><p class="callout info">In scene camera view, the camera properties can only be edited in the "Properties" panel.</p>

</dd></dl></div></div></div>##### Camera Panning and Zooming

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

<div class="contents" id="bkmrk-panning%3A-move-the-mo"><div class="contents"><div class="textblock">- **Panning:** Move the mouse while holding the middle mouse button down;   
    or move the mouse while holding the &lt;CTRL&gt; and &lt;SHIFT&gt; keys and the left mouse button
- **Zooming:** Rotate the mouse wheel forward for zooming in and backward for zooming out

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

<div class="contents" id="bkmrk-tick-%22enable-scene-c"><div class="contents"><div class="contents"><div class="textblock">- Tick **"Enable scene camera manipulation"** in the "Editor Preferences" dialog opened from File-Preferences menu option.

</div></div></div></div><div drawio-diagram="6247"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-06/drawing-5-1718376410.png" alt=""/></div>

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.

<div drawio-diagram="5740"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-05/drawing-5-1715937672.png" alt=""/></div>

##### Reset Camera

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

<div drawio-diagram="6250"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-06/drawing-5-1718376517.png" alt=""/></div>

##### Camera Preview Thumbnail

<div class="contents" id="bkmrk--0"></div>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:

<div class="contents" id="bkmrk-512x512px-for-2d-cam"><div class="contents"><div class="textblock">- 512x512px for 2D cameras

</div></div></div>If the camera is associated to a render target, the preview will be generated:

<div class="contents" id="bkmrk-on-a-surface-of-the-"><div class="contents"><div class="contents"><div class="textblock">- on a surface of the same dimensions and then reduced to a thumbnail image - for 2D cameras

</div></div></div></div><div drawio-diagram="6251"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-06/drawing-5-1718376911.png" alt=""/></div>

<div class="contents" id="bkmrk--26"><div class="contents">  
</div></div>By selecting the camera whose perspective should be viewed in the Scene Tree, the camera preview thumbnail will be displayed in the property grid.

<div class="contents" id="bkmrk-the-%22alpha-blend-fac"><div class="contents"><div class="textblock"><dl class="note"><dt></dt><dd><p class="callout info">The "Alpha Blend Factor" and the "Alpha Destination Blend Factor" in the Default Render Mode Configuration should be set properly. For instance, the former value could be InverseSourceAlpha and the latter value could be DestColor.</p>

</dd></dl></div></div></div><div drawio-diagram="5043"></div>

---

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

<div drawio-diagram="5044"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-01/drawing-5-1705061460.png" alt=""/></div>

<div class="contents" id="bkmrk-groups-cannot-be-pic"><div class="contents"><div class="textblock"><dl class="note"><dt></dt><dd><p class="callout info">**Groups** cannot be picked in the render view; they need to be selected in the "Scene Tree" panel. The "Scene Editor" and "Scene Tree" panels are synchronized in terms of the selected item.</p>

</dd><dd></dd></dl>---

</div></div></div>##### 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:

<div drawio-diagram="6252"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-06/drawing-5-1718376955.png" alt=""/></div>

##### 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 <span style="color: rgb(230, 126, 35);">[Adorners](https://doc316en.candera.eu/books/scene-design/page/adorners)</span>.

<div drawio-diagram="6255"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-06/drawing-5-1718377189.png" alt=""/></div>


##### Translate

Three options are available for this mode:

<div class="contents" id="bkmrk-%22pivot-and-object%22-w"><div class="contents"><div class="contents"><div class="textblock">- **"Pivot and Object"** will move the selected object with its pivot
- **"Only object"** will move only the object selected and
- **"Pivot only"** will move only the pivot of the selected object.

</div></div></div></div><div drawio-diagram="6253"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-06/drawing-5-1718377021.png" alt=""/></div>

<div class="contents" id="bkmrk--37"><div class="contents"><div class="textblock">  
</div></div></div>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.

<div drawio-diagram="6254"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-06/drawing-5-1718377063.png" alt=""/></div>

<div class="contents" id="bkmrk-the-fixed-angle-valu"><div class="contents"><div class="textblock">  
</div></div></div>##### Scale

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

<div drawio-diagram="930"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-4-1676442562.png" alt=""/></div>

<div class="contents" id="bkmrk--42"><div class="contents">  
</div></div>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:

<div class="contents" id="bkmrk-the-object-itself-x-"><div class="contents"><div class="contents"><div class="textblock">- the object itself
- X axis controller - when dragging the axis, the object will be scaled on the local x axis
- Y axis controller - when dragging the axis, the object will be scaled on the local y axis
- Lock scaling controller - displayed on the lower right corner of the render node. When dragging it, the object will be scaled proportional on each axis.

</div></div></div></div>##### Rotate

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

<div drawio-diagram="932"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-4-1676442583.png" alt=""/></div>

<div class="contents" id="bkmrk--45"><div class="contents">  
</div></div>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.

<div class="contents" id="bkmrk-the-fixed-angle-valu-1"><div class="contents"><div class="textblock">- the fixed angle values shall be multiples of 45
- the angle snapping tolerance shall be 22.5 degrees.

</div></div></div>##### 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 <span style="color: rgb(230, 126, 35);">[2D Editing Helpers](https://doc316en.candera.eu/books/preferences/page/2d-editing-helpers "2D Editing Helpers")</span> for further information.