2D scene composition

After importing content, the photoshopimport (.psd) imageoperation is converted to editable scenes in Scene Composer. Since the Import Settingsexecuted in the Smart ImporterImporter, havethey beenare leftconverted unmodified,into theeditable newlyscenes. imported Car_Cluster, Car_Status, Incoming_Call scenes (as performed in here)These are located by default under Solution > Resources ofin the Solution Explorer. 

Solution Explorer panel isunder located[ onResources>Car_Cluster>Scenes the]. left-side of Scene Composer.

If the Solution Explorer is not visible, make sure todisplayed, check View > "Solution ExplorerExplorer" 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). 

Introduction to Scene Tree and Controls 

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

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 fromon the menu bar under "View" to display it.

Imported Scenes

Move the three scenes (Car_Cluster, Car_Status, Incoming_Call) placed in [ Resources>Car_Cluster>Scenes ] to the Scenes folder by dragging and dropping them (to the orange frame on the right side of the figure below).

Configure Controls

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.

In the Solution Explorer, double-click [ Scenes>Car_Cluster ].

The "Car_Cluster" scene appears in the scene tree.

Select [ SpeedGauge_Group>SpeedValue ] in the scene tree.

The SpeedValue property appears in the Properties.

The following settings are made at the "Control" in the properties panel.

The %d is a format string used in programming, representing a placeholder for text in integer format. Represents the way text is dynamically formatted.
Target Item Setting Value Format Text %d Text Alignment center
For [ RPMGauge_Group>RPMValue ], make the same settings as in the step 3.

What’s

particularly

Control: whenBehaviors and Fusion

convenient

As performed in the previous step, an import operation using the Smart Importer allows you to importapply a scene is that functionalthe controls canavailable be created right fromat the import stage. AfterEach item displayed in the scene tree is created,called thesea node, and those to which controls arehave readilybeen usable as seen in the image. Items under the Scene treeapplied are calledindicated Nodes, and an item with aby blue iconicons. A control is a Control. A Control is a compositecompound node containingthat acontains collection ofseveral nodes and behaviors to achieve a specific functionality.behavior.

A

Behaviors Behaviorare isgeneral-purpose afunctions genericthat functionprovide forinteractions adding an interaction and/or small processoperations to graphicalgraphics nodes. 

Confirm

Pleasebehavior refer to Using Behaviors regarding its function and usage. 

configuration

IfThe youbehavior double-clickconfiguration within each control node can be viewed by performing the following operations. The operation is performed on the scene tree of Car_Cluster.

Double-click the [ RPMGauge ] control in the Scenescene Tree,tree. it

willThe openscene andtree expanddisplay changes from "Car_Cluster" to Gauge. The behavior configuration in the Gauge control templatewill whichbe containsdisplayed in the collectionExtra Scene Tree.
In addition, by clicking [ Fusion... ] at the top of nodes and behaviors as described. To navigate back to the more completeExtra Scene Tree, clickthe behavior configuration in the leftGauge arrowcontrol button at the upper left. 

Setting Properties of a Control 

As canwill be seendisplayed. fromThe theFusion recent import, the Text Value controls have the default text “Trip: 000km”. To display speed and rpm values appropriately, formattingdiagram of the TextGauge Value controls need to be updated. 

1. Double click Scene > Car_Cluster in Solution Explorer.

Car_Cluster treecontrol is displayed in the Fusion panel.

The display can be returned to "Car_Cluster" by clicking the left-arrow button in the upper left corner of the scene tree panel.

Fusion combines a behavior tree view, and a properties panel for selected nodes. This provides an alternative way to manage behaviors.

Display Settings

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.

For more information on display configuration, see Display Configuration.

Displays the [ Render Targets ] panel.

The [ Render Targets ] panel is located in the upper right corner of Scene Tree.Composer by default. If it is hidden, select [ Libraries > Render Targets ] from the menu bar under "View" .

Uncheck the default cameras (Scene2D\Camera and Scene3D\Camera).

Check the checkboxes for the three cameras added in the resource import (Car_Cluster\DocumentView(0), Car_Status\DocumentView(0), and Incoming_Call\DocumentView(0)).

2.To Clicksee SpeedValuea belowpreview Clusterof the display, select [ Display > SpeedGauge_Group.Display-0 ] from the menu bar under "View".

SpeedValue

The property2D scene configuration work is showncomplated. in Properties. 

3. SetIn the SpeedValuenext propertiesstep, aswe shownwill below. 

Target item Setting value Format Text %d Text Alignment Center

4. Applyexplain 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 placeholderprocedure for integerconfiguring formattedHMI text.logic using Fusion.