Using the template

Here you can find how to use the Car template to create your application.

Changing car model

The CarModel project contains the car models used in the template and the textures that the models use.

When you want to use your own car model, to move parts of a car model, such as rotate wheels and open doors, group meshes by function. As an example of how to do this and how to scale a car model, see the CarModelReference.fbx model.

To change the car model:

1. In the CarModel project, import the 3D model of the car that you want to use.

2. In the CarTemplateMain project, in the Library > State Managers > CarString state manager, select the state where you want to use your car model, and set the CarString property to the name of the prefab name in the CarModel project that you want to use.

   

The CarTemplateMain project loads the car model using a binding in the Viewport 2D > Scene > CarModelPrefabView node. The binding expression adds the value of the CarString property set by the CarString state manager to the kzb URL and binds the Prefab Template property to the result.

Changing car color

The car paint color is set in the CarTemplateMain project in the Control state manager 03 CarColor state group. To change the color, select a state and set the color in the Car_Color property.

To change the car paint shader, edit the bindings coming from the meshes that use car paint. In the template, the property in the shader is KanziPBR_Albedo_Car.

Changing environment

The Showroom project defines the environment and contains the environment assets. The CarTemplateMain project instantiates the environment in the Environment prefab.

When you change the environment, the template animates the change with a fade-in, fade-out effect. This is created with the Blend Intensity property in the ENV_Sunset and ENV_Showroom prefabs.

The visibility of an environment is toggled based on the current value of the Blend Intensity property in the node:

• For the Showroom environment:

  MAX(1-{@../Environment_Switch}*2,0)
  

  

• For the Sunset environment:

  MIN((({@../Environment_Switch}-0.499)*2),1)
  

  

These bindings ensure that only one environment is shown at the same time. It animates the Blend Intensity of the first environment to 0 and only then the Blend Intensity of the new environment to 1.

Each environment in the Showroom project shows a different approach to create an environment:

• ENV_Showroom shows an environment that uses 3D meshes to build a showroom around the car model.

  

• ENV_Sunset shows an environment that uses a texture mapped on a skybox sphere.

  

To change the environment:

• To change the ENV_Showroom environment, use your own meshes to build up the environment around the scene.

• To change the ENV_Sunset environment, use your own environment image. To use the image in a skybox sphere, in addition to the cubemaps used by the 3D models, create a regular texture. To create the texture from an HDR image, in the Library > Resource Files > Images, right-click your environment texture and select Create > Texture.

If you change the environment textures or meshes, to set the car paint reflections, use the cubemaps from the same environment. In the CarModel project, use the cubemaps in the ColorSwitch state manager.

Changing UI appearance

You can adjust the appearance of different parts of the template user interface.

Adjusting UI colors

The UI colors are set in the CarTemplateMain project.

To adjust the UI colors, in the Control state manager 02 Theme state group, select the state of a theme and set these properties:

Property	Description
Focus_Color	Focus color for UI content.
Glass_Color	Color of the glass tile.
HL_Color	Color of the glass edge highlights.
TextDefaultColor	Color of default text.
TextHighlightColor	Color of highlighted text and of the focus in the BottomShape.

Setting the colors in a state manager allows you to define more than one distinct set of colors. If you want to use a single theme, in the Controls node remove the State Manager property and set the colors directly in the Controls node.

Adjusting text appearance

The appearance of the user interface text is defined by styles in the CarTemplateMain project.

To adjust text appearance, in the Library > Styles, select one of these styles, and modify and add property values:

Style	Description
Font_Debug	Sets the appearance of the debug text.
Font_FeatureSelection	Sets the appearance of the text at the bottom of the UI.
Font_PopupDefault	Sets the appearance of popup text.
Font_PopupHeadline	Sets the appearance of popup headers.

Adjusting Popup appearance

The Popup window is defined in the in the CarTemplateMain project.

You can adjust the appearance of the Popup node in these ways:

• To modify the size, adjust the Layout Width and Layout Height properties.

  

  The size of child nodes of the Popup node bind to these properties and adjust accordingly. Keep in mind that if you increase the Popup width, in some cases you must adjust the Render Transformation Translation X property field in the PopUpActivation state manager OFF state.

• To customize other visual details, adjust the material properties in the nodes:

  • Popup > GlassTileShape

  • BottomShape > GlassTileShapeBottom

  For example, you can set the radius, outlineWidth, blurOpacity properties.

  

Adjusting rendering

The rendering is defined in the CarModel project.

To adjust the rendering, in the Library > Rendering > Render Pass Prefabs adjust the MainRender render pass. The render pass defines the drawing of the background, the main scene, transparent objects, light beams and overlays, and the Blit Render Pass applies the scene tonemapping.

Keep in mind that the Control state manager 02 Theme state group states sets the value of the Material > Exposure property based on the selected theme.

Adjusting features

The features in the template are defined in the CarTemplateMain project.

Changing a feature

For example, to change the Car Model feature into a Car Settings feature:

1. In the Node Tree:

   • Rename the RootPage > Popup > UI_Content > CarModel (UI Content Toggle Button 2D) prefab instance to CarSettings.

     

   • In the RootPage > BottomShape > FeatureSwitch Toggle Button Group 2D > Stack Layout 2D > CarModel (Feature Toggle Button 2D) and change the Label property value to Car Settings.

     

2. In the Library:

   • In the Property Types > 01_Feature property, rename the CarModel key to CarSettings.

     

   • In the State Managers:

     • In the BottomFocusPosition, rename the 4 CarModel state to 4 CarSettings.

       

     • In the CameraView, rename the CarModel state to CarSettings.

       

3. In the Prefabs > UI_CarModel prefab:

   • In the PopupHeadline node, change the Label property value to Car Settings.

     

   • Delete all child nodes, except the PopupHeadline.

     

   • Add the nodes and content that you want to show instead of the Car Model.

Changing feature positions in the bottom menu

For example, to change switch positions of Theme and Car Model features:

1. In the Library:

   • In the Property Types > 01_Feature property, rename the Theme key to CarModel and the CarModel key to Theme.

     

   • In the State Managers > BottomFocusPosition state manager:

     • Rename the 4 CarModel state to 2 Theme and set the 01_Feature property to Theme.

     • Rename the 2 Theme state to 4 CarModel and set the 01_Feature property to CarModel.

     

   • In the State Managers > CameraView state manager:

     • Rename the CarModel state to Theme and set the 01_Feature property to Theme.

     • Rename the Theme state to CarModel and set the 01_Feature property to CarModel.

     

2. In the Node Tree, in the RootPage > Popup > UI_Content:

   • In the CarModel prefab instance, set the CurrentUIContent property to 2.

     

   • In the Theme prefab instance, set the CurrentUIContent property to 4.

     

   • (Optional) Switch the position of the Theme and CarModel prefab instances.

     

3. In the RootPage > BottomShape > FeatureSwitch Toggle Button Group 2D > Stack Layout 2D, switch the positions of the Theme and CarModel toggle buttons.

   

4. In the Preview click Restart.

   

Adding features

For example, to add a feature called Car Settings:

1. In the Library > Property Types > 01_Feature property, add the CarSettings key after the CarModel key.

   

   Tip

   The fastest way to do this is, starting from the bottom, to copy the key names and move them one text box lower. Then add the Value to the last key.

2. In the Node Tree, in the RootPage > BottomShape > FeatureSwitch Toggle Button Group 2D > Stack Layout 2D:

   1. Duplicate the CarModel toggle button.

   2. Rename the node to CarSettings.

   3. Change the Label property to Car Settings.

   

3. In the Prefabs, select the Feature Toggle Button 2D prefab and change the Layout Width property to 200.

   

4. In the Library > State Managers, in the BottomFocusPosition state manager:

   1. Duplicate the 4 CarModel state, rename it to 5 CarSettings, and set the 01_Feature property to CarSettings.

   2. Rename states and make sure that each state has the correct value for the 01_Feature controller property:

      Old name	New name
      5 Interior_Seat	6 Interior_Seat
      6 Interior_STW	7 Interior_STW
      7 Interior_IP	8 Interior_IP

      

   3. In each state, change the Render Transformation Translation X property field to these values:

      State	Translation X
      0 Exterior	-750
      1 Interior	-450
      2 Theme	-150
      3 ColorSwitch	150
      4 CarModel	450
      5 CarSettings	750
      6 Interior_Seat	-450
      7 Interior_STW	-450
      8 Interior_IP	-450

   

5. In the Node Tree:

   1. In the RootPage > Controls, edit the binding for the InteriorView to:

      f = {../Viewport 2D/01_Feature}
      STEP(f,1.0) * STEP(1.0,f) + STEP(6.0,f)
      

      This binding calculates the value for the InteriorView property.

      

   2. In the RootPage > Popup > UI_Content > Interior (UI Content Toggle Button), edit the binding for the Toggle State to:

      f = {@./01_Feature}
      c = {@./CurrentUIContent}
      f == c || f > 5
      

      This binding shows the Interior content when the value of the 01_Feature property is either 1 or above 5.

      

   3. In the RootPage > Scroll View 2D, edit the binding for the Visible property to:

      STEP({@../Controls/01_Feature},5)
      

      This binding enables scrolling when the value of the 01_Feature property is lower than 6.

      

6. In the Prefabs, in the UI_Interior > Interior Toggle Button Group 2D > Stack Layout 2D for the child nodes set the Index In Group property to these values:

   • Seat to 6

   • Steering to 7

   • InstrumentPanel to 8

   

7. In the Library > State Managers, in the CameraView state manager:

   1. Duplicate the CarModel state and rename it to CarSettings.

   2. In the CarSettings state, set the 01_Feature property to CarSettings.

   3. (Optional) Adjust the camera properties to position the camera according to your needs.

   

8. In the Prefabs:

   1. Duplicate the UI_CarModel prefab and rename it to UI_CarSettings.

   2. In the UI_CarSettings prefab, delete everything except the PopupHeadline node.

   3. In the PopupHeadline node, set the Label property to Car Settings.

   4. In the UI_CarSettings, add the content that you want to show in this feature.

   

9. In the Node Tree:

   1. In the RootPage > Popup > UI_Content, duplicate the CarModel prefab instance and rename it to CarSettings.

      

   2. In the CarSettings prefab instance, set the CurrentUIContent property to 5.

      

   3. In the CarSettings > CarModel, set the Prefab Template property to UI_CarSettings.

      

Removing features

For example, to remove the CarModel feature:

1. In the Node Tree:

   • From the RootPage > Popup > UI_Content delete the CarModel prefab instance.

   • From the RootPage > BottomShape > FeatureSwitch Toggle Button Group 2D > Stack Layout 2D delete the CarModel (Feature Toggle Button 2D).

   

2. In the Prefabs:

   • In the Feature Toggle Button 2D prefab set the Layout Width to 400.

     

   • Delete the UI_CarModel prefab.

     

3. In the Library > State Managers, in the BottomFocusPosition state manager:

   • Delete the CarModel state.

     

   • In each state, change the Render Transformation Translation X property field to these values:

This example does not change the key-value pairs of the 01_Feature property. For details on how to do that, see Adding features.