Template structure¶

The template consists of these Kanzi Studio projects:

CarTemplateMain defines the application structure, contains the user interface elements of the application, and defines the global controls for changing the content appearance. See CarTemplateMain project.
CarModel project contains the car model and the textures that the model uses. See CarModel project.
Showroom defines the environment and contains the environment assets. See Showroom project.

CarTemplateMain project¶

The CarTemplateMain project defines the application structure, contains the user interface elements of the application, and defines the global controls for changing the content appearance. This is the main project that refers to the other template projects.

Controls¶

The RootPage > Controls node serves as an access point to control the general appearance of the application.

However, most of the controls are set in the Control state manager. This enables you to define multiple distinct sets of colors.

../_images/library-state-managers-control.png

The Control state manager is divided by functions into these state groups:

State group	Property	Description
02 Theme	02_Theme	Sets the theming of the UI, including text colors, popup window color and highlight colors. See Adjusting UI colors.
03 CarColor	03_CarColor	Sets the car paint main color. The main template colors are silver and red. See Changing car color.
04 CarModel	04_CarModel	Sets the prefab to load from the CarModel project. Changing car model.

Scroll View 2D¶

The RootPage > Scroll View 2D node rotates the car around the y-axis.

The binding that enables the rotation is in the RootPage > Viewport 2D > Scene > CameraController node and binds the Layout Transformation Rotation property field:

sx=MOD({@../../../Scroll View 2D/ScrollViewConcept.ScrollPosition}.x,360)
m = STEP(180,sx)
#Negative Rotation
n = m * (sx-360)
#Positive Rotation
p = (1 - m) * sx
r = (n + p)
createRotationY(r)

This binding ensures that the camera rotation angle remains within a constrained range between 180 and -180 degrees. This prevents excessive spinning of the camera during state transitions and maintains a smoother and controlled animation behavior.

../_images/node-tree-cameracontroller.png

../_images/binding-editor-cameracontroller.png

CarModelPrefabView¶

The RootPage > Viewport 2D > Scene > CarModelPrefabView node loads the 3D model of the car from the CarModel template project.

The Prefab Template is modified using a binding in the Controls node:

cs = {@./CarString}
"kzb://carmodel/Prefabs/" + cs

../_images/binding-editor-carmodelprefabview.png

The source for this control is in the CarString state manager assigned to this node and is controlled with the 04_CarModel controller property. This controller property sets the state and returns the CarString written to the prefab template kzb URL path.

For example, if you name the prefab in the CarModel project Car_new, you must add the Car_new name in the CarString state manager.

See Changing car model.

Light¶

To keep lighting consistent across projects, lighting is implemented in the CarModel project. The CarTemplateMain refers to the prefab in the RootPage > Viewport 2D > Scene > Light node using the kzb URL kzb://carmodel/Prefabs/point_light that loads the prefab to the project.

If you want to modify the position of lights, make the change in the CarModel project and export the kzb files so that Kanzi Studio loads them in the CarTemplateMain project.

BottomShape¶

The RootPage > BottomShape node contains nodes that control the UI features.

See Adjusting features.

FeatureSwitch Toggle Button Group 2D¶

The RootPage > BottomShape > FeatureSwitch Toggle Button Group 2D node manages views or features in the UI. Each view or feature is controlled by a Feature Toggle Button 2D prefab.

To ensure that only one feature is active at a time, the FeatureSwitch Toggle Button Group 2D contains a two-way binding that connects its Current Button Index property to the Controls node.

{#Controls/01_Feature}

../_images/binding-editor-featureswitch.png

The 01_Feature property is the primary scene controller and manages the camera view and the pop-up displays. It is an enumeration property with these values:

Feature	Value	Description
Exterior	0	Default Exterior view
Interior	1	Interior view
Theme	2	Theme selection view
ColorSwitch	3	Color selection view
CarModel	4	Car Model view
Interior_Seat	5	Fixed Interior seat view
Interior_STW	6	Fixed Interior steering wheel view
Interior_InstrumentPanel	7	Fixed Interior instrument panel view

Feature Toggle Button 2D prefab¶

The Feature Toggle Button 2D prefab defines the button for the features:

The UI text of the button is set by the Label Text Block 2D. Its Text property is bound to the Label property in the root of the prefab.
The Button 2D is visible when the Toggle State property in the root of the prefab is set to true. When user clicks this button, the button sets the value of the 01_Feature property in the Controls node to 0. This way the control reverts to the default exterior view.

FeatureFocus¶

The RootPage > BottomShape > FeatureFocus node positions the highlight texture based on the currently selected feature. The BottomFocusPosition state manager controls this functionality through the 01_Feature control property. States 6 Interior_Seat, 7 Interior_STW, and 8 Interior_InstrumentPanel share the Render Transformation property values with the 2 Interior state, reflecting that they are sub-features.

Glass tile effect¶

RootPage > Popup > GlassTileShape and RootPage > BottomShape > GlassTileShapeBottom nodes create a glass tile effect and real-time blur of the background content.

../_images/node-tree-glasstileshapebottom.png

In the Popup node:

FramedBlurCapture > SceneBlurCapture node:
- Renders the SceneRender render target using a Texture Brush.
- Binds to the Render Transformation property of the Popup parent node to align its position.
- Blurs the content by applying a Blur Effect 2D to the scene render.
FramedBlurCapture node crops the SceneBlurCapture output and renders it to the BlurredSceneRender Render Target.
GlassTileShape uses BlurredSceneRender as input and applies additional glass effects with the ProcedualRoundedGlassTileMaterial shader.

State managers¶

CameraView¶

The Viewport 2D node uses CameraView as the central mechanism for setting the camera position and field-of-view across features. To apply camera settings for each feature, it uses the 01_Feature property as the controller property.

ResetCameraRotation¶

You can rotate the camera around the car by swiping left or right on the screen. However, when transitioning between features, the camera returns to its predefined position as specified in the CameraView state manager. This is made possible by the ResetCameraRotation state manager in the CameraController node.

The ResetCameraRotation state manager contains these states:

State1 does not override any properties. It maintains the current camera orientation.
State2 resets all Layout Transformation properties to 0 (with scales sets to 1). This ensures that the camera returns to its initial position.

../_images/library-resetcamerarotation.png

To animate the scroll position, the activation is managed through triggers:

Scroll View 2D node uses a Scroll Started trigger to initiate State1 in ResetCameraRotation, preserving the camera rotation during scrolling.
Viewport 2D node uses an Entered State trigger to respond to feature changes. Setting off this trigger:
- Switches ResetCameraRotation to State2, smoothly animating the CameraController node Layout Transformation back to 0 within 200ms (as defined in the state transition settings of ResetCameraRotation).
- Following a 300ms delay, the same trigger resets the camera scroll position to 0, to align scroll position with the Layout Transformation of the CameraController node.

CarModel project¶

The CarModel project contains the car model and the textures that the model uses. To keep the rendering consistent across template projects, this project implements the render pass for post-processing. See Changing car model and Changing car color.

SportsCar_Root prefab¶

The SportsCar_Root prefab contains the components that make up the sports car model in the template. The prefab meshes are grouped by function. For example, to enable opening separate doors, each door is in its own group.

The prefab uses ##Template bindings to control the:

Cubemap shown on the car paint
Main color of the car paint
Blend intensity of the car windows

Note that the windows are more transparent from inside the car.

These bindings point to the root of the CarModelPrefabView node in the CarTemplateMain project.

The meshes that set car paint, such as SportsCar_Root > Exterior > Body > CarPaint_6, use ##Template bindings in a similar way to get the value from the prefab root. To remove the functionality to change car paint color or change the shader that has a different property that controls the color, change these bindings accordingly.

RWCar_Root prefab¶

The RWCar_Root prefab contains the components that make up a generic car model in the template. The functionality and implementation of the generic car model is the same as that for the SportsCar_Root prefab.

Showroom project¶

The Showroom project defines the environment and contains the environment assets. If you want to create your own environment, define it in this project. See Changing environment.

The Environment prefab instantiates prefabs that define environments in the project.