Skip to main content

2D scene composition

After importing content, the photoshop (.psd) image is converted to editable scenes in Scene Composer. Since the Import Settings in the Smart Importer have been left unmodified, the newly imported Car_Cluster, Car_Status, Incoming_Call scenes (as performed in here) are located by default under Solution > Resources of the Solution Explorer. 

  • Solution Explorer panel is located on the left-side of Scene Composer.
  • If the Solution Explorer is not visible, make sure to check View > Solution Explorer from the menu bar. 

After performing an import operation, a new folder with the same name as the Photoshop file 
Car_Cluster is created below Solution > Resources in Solution Explorer. The newly created scenes Car_Cluster, Car_Status, Incoming_Call are located in a Scenes folder inside of that folder. To make the scenes easier to find, move those scenes by drag and drop operation. As seen below, move them under Scenes folder shown in the right-side image (with orange highlight). 

drawing-5-1697183957.png


Introduction to Scene Tree and Controls 

After performing the Smart Importer operation, the main window containing the SceneTree, Scene Editor and Properties is displayed.

drawing-5-1697184247.png
Scene Tree 

An important panel/view when editing scenes is the Scene Tree in the lower left. The Scene Tree contains all the objects or nodes comprising the scene, organized in a hierarchical manner (parent-child-sibling relationship).

  • If the Scene Tree is not visible, select View > Scene > Scene Tree from the menu bar. 
Scene Editor 

Scene Editor is the main panel in this application. 

Properties

Each node in the Scene Tree has properties that are configurable according to preference. When a node is selected from the tree, its properties are also displayed in the Properties panel. 

  • If the properties panel is not visible, select View > Properties from the menu bar to display it. 

What’s particularly convenient when using the Smart Importer to import a scene is that functional controls can be created right from the import stage. After the scene is created, these controls are readily usable as seen in the image. Items under the Scene tree are called Nodes, and an item with a blue icon is a Control. A Control is a composite node containing a collection of nodes and behaviors to achieve a specific functionality. A Behavior is a generic function for adding an interaction and/or small process to graphical nodes. 

drawing-5-1697184517.png


If you double-click on RPMGauge control in the Scene Tree, it will open and expand the Gauge control template which contains the collection of nodes and behaviors as described. To navigate back to the more complete Scene Tree, click the left arrow button at the upper left. 


Setting Properties of a Control 

As can be seen from the recent import, the Text Value controls have the default text “Trip: 000km”. To display speed and rpm values appropriately, formatting of the Text Value controls need to be updated. 


1. Double click Scene > Car_Cluster in Solution Explorer.

  • Car_Cluster tree is displayed in Scene Tree. 
    drawing-4-1678158080.png


2. Click SpeedValue below Cluster > SpeedGauge_Group.

  • SpeedValue property is shown in Properties. 

3. Set the SpeedValue properties as shown below. 

Target item Setting value
Format Text %d
Text Alignment Center

4. Apply the same steps above to RPMValue under Cluster > RPMGauge_Group. 

  • “%d” is a format string usually used in programming which represents how the text will be formatted dynamically. 
  • %d represents a placeholder for integer formatted text. 
Back to top