第 4 步 - 为 Car 屏幕创建状态¶
在本步骤中，您将使用 Kanzi 状态机在应用程序中从不同角度显示汽车，并动画化这些状态之间的迁移。
创建汽车阴影¶
在本节中，您将在 Car Settings 活动中调整用于汽车阴影的材质。
要创建汽车阴影：
在 Activity Browser 中，在 Car Settings 活动中，点击
。在汽车模型下方可以看到一个黑色平面。这是因为阿尔法混合模式不适合用于渲染阴影纹理的材质。
在 Prefabs 中，选择 Car > RootNode > Shadowplane 节点。在 Properties 中，点击 Cluster Material 属性旁边的
。这样即可转到 Shadow 材质的属性。
在 Shadow 材质的 Properties 中，将 Blend Mode 属性设置为 Alpha: Automatic。
创建状态¶
在本节中，您将为汽车创建不同的状态，每个状态侧重于汽车的不同部分。在下一节中，您将创建用于在这些状态之间切换的 UI 控件。
在 Kanzi 中，状态机是创建丰富用户界面最重要的功能之一。
要创建状态：
在 Prefabs 中，双击 Car Settings 活动，在新的 Preview 选项卡中将其打开。
当您在 Preview 中单独打开 Car Settings 时，背景为黑色，因为默认情况下未设置活动的背景。在本教程中，活动显示 Screen > RootNode 的背景。
在 Node Tree 中，选择 Car Settings > Viewport 2D > Car > RootNode > Camera_Root 节点。
在 State Tools 窗口中，点击 Create State Manager，在 Camera_Root 节点中创建状态机。
您可以在 Preview 窗口下方找到 State Tools 窗口。
Kanzi Studio 创建一个新的状态管理器并将其分配给 Camera_Root 节点。
当 State Tools 处于活动状态时，Preview 选项卡显示为橙色，您可以使用 State Tools 创建状态。在此状态下，Kanzi Studio 会跟踪所有属性值的更改，您可以使用 State Tools 将这些值存储到状态中。
在 State Tools 中，单击 Create State 以创建一个状态。
创建三个状态。
双击每个状态的名称，然后将状态命名为 Brakes、Roof、Suspension。
在 Node Tree 中，选择 Car Settings > Viewport 2D > Car > RootNode > Camera_Root > Camera 节点。
在 Preview 中，选择 Camera tool
并点击 
。启用此选项时，Kanzi Studio 会将自由摄像机的当前位置存储到您在 Camera tool 下拉菜单中选择的 Camera 节点。
在本案例中，是指您在 Node Tree 中选择的 Camera 节点。
在 Node Tree 中，选择 Car Settings > Viewport 2D > Car > RootNode > Car 节点。在 Preview 的 Camera tool 中，点击
使摄像机靠近汽车。
在 Preview 中，在 Camera tool 中使用轨道摄像机
设置汽车的位置。在 State Tools 中，点击 
将当前摄像机位置保存到该状态。例如，当您对位置感到满意时，在 Brakes 状态下的 State Tools 中，单击
以将 Camera 节点的当前位置存储到该状态。
Orbit Camera 允许您移动：
您在 Node Tree 中选择的节点。
您使用相机的 Constraints > Look At 属性设置的节点。
要使用轨道摄像机移动，使用以下控件：
控件
描述 (Description)
点击鼠标左键并拖动。
旋转 (Rotate)
点击鼠标中键并拖动。
按下 Space 键，然后单击并拖动鼠标左键。
平移
滚动鼠标滚轮。
按下 Shift 和 Alt 键，然后单击并拖动鼠标左键。
缩放
按住 Alt 并单击鼠标左键。
选择或取消选择节点。
重复上一步，直到为所有状态创建位置。
在 Preview 中，点击
进入 Interact 模式。在 State Tools 中，点击各状态查看应用程序处于该状态时的外观。
在 State Tools 中，单击 Edit State Manager 以停用 State Tools。
创建在不同状态之间迁移的控件¶
在本节中，您将创建控件，以在上一节中创建的状态之间进行迁移。
要创建在状态之间迁移的控件：
在 Node Tree 中，在 Car Settings > Viewport 2D 节点中 按 Alt 并右键单击，选择 Stack Layout 2D，并将其命名为 CarControl。
在 Node Tree 中，选择 CarControl 节点。在 Properties 中，将 Direction 属性设置为 Y。
使用 Direction 属性设置您希望 Stack Layout 节点沿其堆叠子节点的轴。
在 Prefabs 中，点击
，创建一个 Button 2D 预设件，并在 Button 2D 中创建一个 Image 节点。您可以使用此预设件控制在本步骤的前面部分创建的状态机。
在 Prefabs 中，选择 Button 2D > Image 节点。在 Properties 中，添加并设置：
将 Layout Width 和 Layout Height 属性设置为 100
将 Layout.Item > Vertical Margin 属性的 Top 和 Bottom 属性字段设置为 5
在 Image 属性旁边单击
。这可让您在工程中为该预设件的每个实例显示不同的图像。
小技巧
要添加属性，请在 Properties 中右键单击，选择 Add Property，然后选择要添加的属性。
将 Button 2D 预设件从 Prefabs 拖到 Node Tree 中，并放到 Car Settings > Viewport 2D > CarControl 节点上。拖动该预设件三次，以创建三个按钮。
Kanzi Studio 在 CarControl 节点中实例化 Button 2D 预设。
选择每个 Button 2D 预设实例，按下 F2，并将其重命名为 Brakes、Roof 和 Suspension。
在 Node Tree 中，在 CarControl 节点中选择第一个实例化的 Button 2D 预设件：
在 Properties 中，添加 FirstApplication.Button2D.Image 属性，并将其设置为 StateBrakes 图像。
在 Node Components 中，按 Alt 并右键单击 Triggers，并选择 Message Trigger > Button > Click。
在 Node Components 中，在 Button: Click 触发器中 按 Alt 并右键单击，选择 Dispatch Message Action > State Manager > Go to State，并在 State Manager: Go to State 动作中设置：
Target Item 到 Prefabs/Car/Car/RootNode/Camera_Root
State 到 Camera_Root State Manager/StateGroup/Brakes
重复上一步，设置其余两个 Button 2D 预设件：
使用 StateRoof 和 StateSuspension 图像。
将 Go to State 动作设置为指向 Roof 和 Suspension 状态。
小技巧
要添加设置相似的触发器，在 Node Components 中：
右键单击一个触发器，然后选择 Copy。
选择要添加触发器的节点，在 Node Components 中右键单击 Triggers，然后选择 Paste。
编辑该触发器及其动作。
在 Preview 中，点击 CarControl 节点中的按钮时，Kanzi Studio 会使用默认的线性迁移切换到相应状态。您可以使用 State Transition Editor 调整迁移。请参阅 使用状态迁移。
调整按钮位置¶
在本节中，调整控制汽车状态的按钮的位置。
要调整按钮位置：
单击主菜单下的 Screen 选项卡以在 Preview 中显示整个应用程序。
在 Activity Browser 中，激活 Car Settings Activity。在 Prefabs 中，选择 Car Settings > Viewport 2D > CarControl 节点。在 Properties 中，添加 Transform 2D > Render Transformation 属性，并设置：
将 Translation X 设置为 20
将 Translation Y 设置为 75
另请参阅¶
要了解有关使用状态机的更多信息，请参阅 使用状态机。
要详细了解有关使用触发器和动作的信息，请参阅 触发器 (Triggers)。
要了解有关使用 Preview Camera tool 的更多信息，请参阅 使用 Camera 节点。