# 2D scene composition

<span style="color: rgb(0, 0, 0);">Once the import operation is initiated in the Smart Importer, the data is transformed into editable scenes based on the configurations specified within the Smart Importer. These are located in the Solution Explorer panel under \[Resources &gt; Car\_Cluster &gt; Scenes\].</span>

<p class="callout info"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="55" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="56">If the Solution Explorer is not displayed, you can enable it via the menu bar choosing **\[View\] &gt; \[Solution Explorer\]**.</span></span></p>

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

1. <span style="color: rgb(0, 0, 0);">In the Solution Explorer move the three scenes to the Scenes folder according to the table below.</span>
    - <span style="color: rgb(0, 0, 0);">The scenes have been moved as shown in the image below.</span>  
        <table border="1" class="align-center" id="bkmrk-import-resources-pat" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 137.583px;"><span style="color: rgb(0, 0, 0);">**Scenes**</span></td><td style="background-color: rgb(53, 152, 219); width: 310.883px;"><span style="color: rgb(0, 0, 0);">**Move From Folder**</span></td><td style="background-color: rgb(53, 152, 219); width: 150.867px;"><span style="color: rgb(0, 0, 0);">**Move To Folder**</span></td></tr><tr><td style="width: 137.583px;"><span style="color: rgb(0, 0, 0);">Car\_Cluster</span>
        
        <span style="color: rgb(0, 0, 0);">Car\_Status</span>
        
        <span style="color: rgb(0, 0, 0);">Incoming\_Call</span>
        
        </td><td style="width: 310.883px;"><span style="color: rgb(0, 0, 0);">Solution &gt; Resources &gt; Car\_Cluster &gt; Scenes</span></td><td style="width: 150.867px;"><span style="color: rgb(0, 0, 0);">Solution &gt; Scenes</span></td></tr></tbody></table>

<div drawio-diagram="7105"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-10/drawing-4-1729471278.png" alt=""/></div>

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

<span style="color: rgb(0, 0, 0);">The default text setting is "Trip: 0000km" for the areas where the Text Value control was applied during import. In order to display the appropriate speed and RPM values, the formatting of the Text Value control must be changed.</span>

1. <span data-dl-original="true" data-dl-translated="true" data-dl-uid="84" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="85"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="86"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="87">In the Solution Explorer, double-click \[ Scenes&gt;Car\_Cluster \].</span></span></span></span>
    - <span data-dl-original="true" data-dl-translated="true" data-dl-uid="89" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="90"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="91"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="92">The "Car\_Cluster" scene appears in the scene tree.  
          
        </span></span></span></span>
2. <span data-dl-original="true" data-dl-translated="true" data-dl-uid="95" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="96">In the Scene Tree panel select \[SpeedGauge\_Group &gt; SpeedValue\].</span></span>
    - <span data-dl-original="true" data-dl-translated="true" data-dl-uid="97" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="97"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="98"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="99">In the Properties panel the SpeedValue property will be displayed.  
        </span></span></span></span>
3. <span data-dl-original="true" data-dl-translated="true" data-dl-uid="101" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="102"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="103">In the Properties panel's Control section configure the SpeedValue's properties according to the table below.</span></span></span>
    - <span data-dl-original="true" data-dl-translated="true" data-dl-uid="105" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="106"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="107"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="108">The %d is a format string used in programming, representing a placeholder for text in integer format.</span></span></span></span>
    - <span data-dl-original="true" data-dl-translated="true" data-dl-uid="109" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="110"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="111"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="112">Represents the way text is dynamically formatted.</span></span></span></span>  
        <table border="1" class="align-center" id="bkmrk-target-item-setting-" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col></col><col></col></colgroup><tbody><tr><td data-dl-original="true" data-dl-translated="true" data-dl-uid="113" style="border-width: 1px; background-color: rgb(53, 152, 219);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="114" style="color: rgb(0, 0, 0);">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="116"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="117"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="154">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="156"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="157">Target Item</span></span>**</span></span></span>**</span></td><td data-dl-original="true" data-dl-translated="true" data-dl-uid="118" style="border-width: 1px; background-color: rgb(53, 152, 219);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="119" style="color: rgb(0, 0, 0);">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="121"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="122"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="159">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="161"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="162">Setting Value</span></span>**</span></span></span>**</span></td></tr><tr><td data-dl-original="true" data-dl-translated="true" data-dl-uid="123" style="border-width: 1px;"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="124" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="125">Format Text</span></span></td><td data-dl-original="true" data-dl-translated="true" data-dl-uid="126" style="border-width: 1px;"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="127" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="128">%d</span></span></td></tr><tr><td data-dl-original="true" data-dl-translated="true" data-dl-uid="129" style="border-width: 1px;"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="130" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="131">Text Alignment</span></span></td><td data-dl-original="true" data-dl-translated="true" data-dl-uid="132" style="border-width: 1px;"><span style="color: rgb(0, 0, 0);">center</span></td></tr></tbody></table>
        
        <div drawio-diagram="6836"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-09/drawing-5-1726820313.png" alt=""/></div>
4. <span data-dl-original="true" data-dl-translated="true" data-dl-uid="134" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="135"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="136"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="137">In the Scene Tree panel select \[RPMGauge\_Group &gt; RPMValue\] and apply the same configuration as for the SpeedValue in step 3.</span></span></span></span>

<details id="bkmrk-%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%EF%BC%9A%E3%83%93%E3%83%98%E3%82%A4%E3%83%93%E3%82%A2%E3%81%A8fusion-"><summary data-dl-original="true" data-dl-translated="true" data-dl-uid="138">Control: Behaviors and Fusion</summary>

<span style="color: rgb(0, 0, 0);">As demonstrated in the previous step, using the Smart Importer for an import operation enables you to apply available controls during the import process. Each item shown in the scene tree is referred to as a node. Nodes with applied controls are marked with the control's distinct icon. A control represents a compound node, consisting of multiple nodes and behaviors designed to achieve a specific functionality.</span>

<p class="callout info"><span style="color: rgb(0, 0, 0);">Behaviors are general-purpose functions that provide interactions or small operations to graphics nodes.</span></p>

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

<span style="color: rgb(0, 0, 0);">The behavior configuration for controls can be viewed following the steps below. The operation is performed on the scene tree of Car\_Cluster.</span>

1. <span style="color: rgb(0, 0, 0);">In the Scene Tree panel double-click the \[RPMGauge\] control.</span>
    - <span style="color: rgb(0, 0, 0);">The Scene Tree panel changes from displaying the Car\_Cluster scene tree to displaying the Gauge control's tree.</span>
    - <span style="color: rgb(0, 0, 0);">The behavior configuration of the Gauge control will be displayed in the Extra Scene Tree.</span>
    - <span style="color: rgb(0, 0, 0);">Additionally, by clicking \[ Fusion... \] at the top of the Extra Scene Tree the [Fusion panel ](https://doc316en.candera.eu/books/fusion)will be opened, displaying the Gauge Control's Fusion diagram.</span>
2. <span style="color: rgb(0, 0, 0);">To return to the 'Car\_Cluster' view, click the left-arrow button located in the upper-left corner of the scene tree panel.</span>

<p class="callout info"><span style="color: rgb(0, 0, 0);">[Fusion ](https://doc316en.candera.eu/books/fusion "Fusion")combines a behavior tree view, and a properties panel for selected nodes. This provides an alternative way to manage behaviors.</span></p>

</details>##### <span data-dl-original="true" data-dl-translated="true" data-dl-uid="154" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="155">Display Settings</span></span>

<span style="color: rgb(0, 0, 0);">Configure the display in the Render Target panel. This tutorial uses the Empty template, so by default, a camera is configured for a 2D scene (Scene2D\\Camera) and a camera for a 3D scene (Scene3D\\Camera). Since each scene's camera has been added by importing resources, the next step is to link it to the render target.</span>

<p class="callout info"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="158" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="159">For more information on display configuration, see <span data-dl-original="true" data-dl-translated="true" data-dl-uid="160">[Display Configuration](https://doc316en.candera.eu/books/display-configuration)</span>.</span></span></p>

1. <span style="color: rgb(0, 0, 0);">Displays the \[Render Targets\] panel.</span>  
    
    - <span style="color: rgb(0, 0, 0);">The \[Render Targets\] panel is located in the upper right corner of Scene Composer by default.</span>
    - <span style="color: rgb(0, 0, 0);">If it is hidden, select \[Libraries &gt; Render Targets\] from the menu bar <span data-dl-original="true" data-dl-translated="true" data-dl-uid="55"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="56">under "View" </span></span>.</span>
2. <span style="color: rgb(0, 0, 0);">Uncheck the default cameras (Scene2D\\Camera and Scene3D\\Camera).</span>
    - <span style="color: rgb(0, 0, 0);">The checkboxes associated with the cameras toggle.</span><table border="1" class="align-center" id="bkmrk-default-cameras-acti" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col></col><col></col></colgroup><tbody><tr><td data-dl-original="true" data-dl-translated="true" data-dl-uid="113" style="border-width: 1px; background-color: rgb(53, 152, 219);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="114" style="color: rgb(0, 0, 0);">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="116"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="117"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="154">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="156"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="157">Default Cameras</span></span>**</span></span></span>**</span></td><td data-dl-original="true" data-dl-translated="true" data-dl-uid="118" style="border-width: 1px; background-color: rgb(53, 152, 219);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="119" style="color: rgb(0, 0, 0);">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="121"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="122"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="159">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="161"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="162">Action in Render Targets Panel</span></span>**</span></span></span>**</span></td></tr><tr><td data-dl-original="true" data-dl-translated="true" data-dl-uid="123" style="border-width: 1px;"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="124" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="125">Scene2D\\Camera</span></span></td><td data-dl-original="true" data-dl-translated="true" data-dl-uid="126" style="border-width: 1px;"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="127" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="128">uncheck</span></span></td></tr><tr><td data-dl-original="true" data-dl-translated="true" data-dl-uid="129" style="border-width: 1px;"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="130" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="131">Scene3D\\Camera</span></span></td><td data-dl-original="true" data-dl-translated="true" data-dl-uid="132" style="border-width: 1px;"><span style="color: rgb(0, 0, 0);">uncheck</span></td></tr></tbody></table>
3. <span style="color: rgb(0, 0, 0);">Check the checkboxes for the three cameras added during the resource import (Car\_Cluster\\DocumentView(0), Car\_Status\\DocumentView(0), and Incoming\_Call\\DocumentView(0)).</span>
    - <span style="color: rgb(0, 0, 0);">The checkboxes associated with the cameras toggle.</span>  
        <table border="1" class="align-center" id="bkmrk-imported-cameras-act" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col></col><col></col></colgroup><tbody><tr><td data-dl-original="true" data-dl-translated="true" data-dl-uid="113" style="border-width: 1px; background-color: rgb(53, 152, 219);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="114" style="color: rgb(0, 0, 0);">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="116"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="117"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="154">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="156"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="157">Imported Cameras</span></span>**</span></span></span>**</span></td><td data-dl-original="true" data-dl-translated="true" data-dl-uid="118" style="border-width: 1px; background-color: rgb(53, 152, 219);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="119" style="color: rgb(0, 0, 0);">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="121"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="122"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="159">**<span data-dl-original="true" data-dl-translated="true" data-dl-uid="161"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="162">Action in Render Targets Panel</span></span>**</span></span></span>**</span></td></tr><tr><td data-dl-original="true" data-dl-translated="true" data-dl-uid="123" style="border-width: 1px;"><span style="color: rgb(0, 0, 0);">Car\_Cluster\\DocumentView</span></td><td data-dl-original="true" data-dl-translated="true" data-dl-uid="126" style="border-width: 1px;"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="127" style="color: rgb(0, 0, 0);"><span data-dl-original="true" data-dl-translated="true" data-dl-uid="128">check</span></span></td></tr><tr><td data-dl-original="true" data-dl-translated="true" data-dl-uid="129" style="border-width: 1px;"><span style="color: rgb(0, 0, 0);">Car\_Status\\DocumentView</span></td><td data-dl-original="true" data-dl-translated="true" data-dl-uid="132" style="border-width: 1px;"><span style="color: rgb(0, 0, 0);">check</span></td></tr><tr><td style="border-width: 1px;"><span style="color: rgb(0, 0, 0);">Incoming\_Call\\DocumentView</span></td><td style="border-width: 1px;"><span style="color: rgb(0, 0, 0);">check</span></td></tr></tbody></table>
        
          
        <div drawio-diagram="6837"><img src="https://doc316en.candera.eu/uploads/images/drawio/2024-09/drawing-5-1726820557.png" alt=""/></div>

<p class="callout info"><span style="color: rgb(0, 0, 0);">To see a preview of the display, select \[Display &gt; Display-0\] from the menu bar under "View".</span></p>

<span style="color: rgb(0, 0, 0);">The 2D scene configuration work is completed. In the next step, we will explain how to configure HMI logic using Fusion.</span>