03：kanzi渲染效果之快速实现仪表盘
其他/设计爱好者/36天前/529浏览
版权
03：kanzi渲染效果之快速实现仪表盘
一、效果预览
二、资源文件
参考附件的模型和贴图。
三、工程创立
1、项目初始化
1.1 创建新工程
步骤：
- 打开Kanzi Studio
- 创建新工程，选择Kanzi版本（如3.9.12）
- 进入工程后，首先调整画布分辨率
1.2 设置分辨率
操作步骤：
- 找到Screen节点
- 在属性窗口中找到Window的Screen Resolution属性
- 仪表盘项目设置为1280 x 480
- 删除默认的占位节点，保持工程为空
重要提示：
- 分辨率设置应该在项目开始时就确定，后续修改可能影响布局
- 分辨率需要与最终运行设备匹配
2、资源导入与优化
2.1 导入3D资源
步骤：
- 点击菜单：File → Import → Import 3D Assets
- 选择3D资源文件（如FBX格式）
- 导入后，资源会出现在左下角的Library窗口中
- 导入的资源会以Prefab形式保存
注意事项：
- 3D文件导入后，会包含模型、材质、灯光、摄像机等所有信息
- 如果只需要模型，建议使用Merge方式导入，只导入需要的部分
- 导入的3D资源需要实例化到场景中才能使用
2.2 导入图片资源
步骤：
- 点击菜单：File → Import → Import Images
- 选择图片文件（支持PNG、JPG等格式）
- 可以多选批量导入
图片格式优化（重要）：
为什么需要压缩？
- PNG格式不是GPU直接识别的格式
- 运行时CPU需要将PNG解压缩成GPU可用的格式（如RGBA）
- 这个过程会消耗CPU资源，影响性能
ASTC压缩方案：
- 选择需要压缩的图片
- 在属性窗口找到Image Format属性
- 选择ASTC格式
- 设置压缩质量：4x4：推荐设置，平衡质量和性能采样器越大，压缩越粗糙
- 压缩速度选择：Very Fast：快速压缩，质量略低Medium：中等速度，质量更好如果图片模糊，可以尝试从Very Fast改为Medium
导出KZB时的处理：
- 导出KZB文件时，会弹出"压缩图像"窗口
- 如果图片已设置为ASTC，选择Yes会自动压缩并打包到KZB中
- 选择No则保持PNG格式（不推荐）
批量修改图片格式：
- 多选图片时，可以同时修改图片格式
2.3 导入字体资源
步骤：
- 点击菜单：File → Import → Import Fonts
- 选择字体文件夹（不是单个字体文件）
- Kanzi会自动识别文件夹中的字体
- 按住Shift多选需要的字体
- 点击顶部确认导入
注意事项：
- 必须选择字体文件夹，不能选择单个字体文件
- 字体导入后可以在文字节点的属性中选择使用
3、基础界面搭建
3.1 节点树结构理解
重要概念：
- 节点树（Screen）：左上角的节点树，采用树形结构
- 父子关系：父节点包含子节点
- 兄弟节点：同一层级的节点
- 渲染顺序：先绘制父节点，再绘制子节点；同级节点从上到下绘制
节点类型：
- 2D节点：只能包含2D子节点
- 3D节点：只能包含3D子节点
- Viewport2D：特殊的2D节点，可以创建3D场景（类似Photoshop图层）
3.2 创建背景
步骤：
- 在根节点下创建Image节点
- 命名为BG（Background）
- 在属性窗口选择图片资源
- 如果图片尺寸与画布一致，会自动填充整个场景
自动适配原理：
- 如果不设置Layout的宽高，Image节点会自动使用图片的原始尺寸
- 如果图片是1280x480，画布也是1280x480，会完美贴合
3.3 创建3D表盘
步骤：
- 在根节点下创建Viewport2D节点
- 命名Gauges
- 将导入的3D表盘场景拖拽到Viewport2D下
- 表盘会显示在预览窗口中
4、交互功能实现
4.1 属性系统
创建属性：
- 在属性窗口右键，选择Add New Property创建新的属性
- 选择属性类型：Float：浮点数Integer：整数Boolean：布尔值（true/false）String：字符串
- 设置属性名称、默认值、最小值、最大值、步进值
属性命名规范：
- 使用有意义的名称，如speed、rpm、turnLightSwitch
- 布尔属性可以用isXXX或XXXSwitch命名
4.2 指针旋转功能
实现步骤：
- 创建控制属性创建int类型属性，命名为Speed，设置范围：最小值0，最大值260，步进1创建int类型属性，命名为Rpm，设置范围：最小值0，最大值8000，步进1
- 找到指针节点在节点树中找到速度表的指针节点速度指针Gauges/RootNode/Model/SpeedGauge/SpeedNeedle节点转速指针Gauges/RootNode/Model/RPMGauge/RPMNeedle节点
- 绑定旋转选择指针节点点击Add Binding在属性窗口找到Render Transformation → Rotation Z在绑定表达式中：将speed属性拖入表达式编写公式：-speed（负号用于调整方向）如果方向相反，添加负号即可
- 转速表特殊处理转速表范围是0-12000，但表盘只显示0-8000的部分需要将360度分成12份，每份30度公式：-rpm / 33.33（1000对应30度）如果方向相反，添加负号
4.3 文字显示
3D文字：
- 在表盘节点下创建Stack Layout 3D节点
- 在Stack Layout 3D下创建Text Block 3D节点
- 设置文字内容、字体、大小
- 调整2D to 3D属性控制文字大小
- 设置字体：在Font属性中选择导入的字体
- 设置颜色：在Color属性中调整RGB值
布局对齐：
- 使用Layout节点控制文字排列
- Layout的Direction属性：X横向排列，Y纵向排列
文字绑定数据：
- 选择文字节点，在Text属性中添加绑定
- 将数据属性拖入表达式
4.4 点光源效果
创建点光源：
- 进入表盘的Gauges/RootNode/Model/SpeedGauge/SpeedNeedle/SpeedNeedlePlane节点
- 创建Point Light节点
- 调整位置：Translation设置为(0, 1, 4)（根据实际情况调整）
光源属性：
- 颜色（Color）：调整光源颜色和强度
- 衰减（Attenuation）：Constant：整体亮度衰减Linear：线性衰减（推荐0.1-0.13）
4.5 转向灯闪烁
实现步骤：
- 创建转向灯节点创建新的Viewport 2D（用于分组），命名为Turnlight创建Image节点，命名为left设置图片资源设置Blend Mode为Alpha Premultiplied（透明模式）
- 创建控制属性创建Boolean属性，命名为leftTurnLightSwitch，并且添加到Turnlight这个Viewport中。
- 创建定时器触发器选择转向灯节点在Triggers窗口创建On Timer触发器设置间隔：1000毫秒（1秒）
- 设置闪烁逻辑在On Timer的Action中添加Set Property设置图片属性，在两张图片间切换添加延迟：500毫秒逻辑：先设置为亮色图片，500ms后设置为灰色图片
- 添加控制条件在On Timer的Condition中添加条件选择判断属性leftTurnLightSwitch只有当开关为true时才闪烁
- 初始状态设置创建On Attached触发器（启动时执行）设置初始图片为灰色（关闭状态）
右转向灯：
- 可以复制左转向灯节点
- 使用Render Transformation → Scale X = -1实现镜像
- 修改trigger中判断属性为rightTurnLightSwitch
4.6 按钮功能
创建按钮：
- 创建Button2D或Button3D节点
- 设置按钮图片和文字
- 对于有开关状态的按钮，使用Toggle Button
按钮事件：
- On Click：点击事件
- On：打开状态
- Off：关闭状态
测试按钮：
- 在按钮的Trigger中添加Write Log
- 点击按钮时会在Log窗口输出信息
- 注意：编辑模式下无法触发点击，需要切换到预览模式
5、状态机
5.1 状态机基础
该工程中状态机用途：
- 控制不同状态之间的切换
- 实现动画效果
- 管理界面状态
创建状态机：
- 创建控制属性创建属性（Boolean或Integer）作为状态机的控制变量
- 创建状态机在Library → State Managers中创建新状态机
- 设置状态组创建状态组（State Group）设置控制属性：选择刚才创建的属性创建状态：根据控制属性的值创建对应状态Boolean类型：创建false和true两个状态Integer类型：可以创建多个状态（0, 1, 2...）
- 设置状态对象在每个状态下创建State Object设置路径：找到要控制的节点设置属性值：设置该状态下节点的属性值
路径设置方法：
- 相对路径：使用.表示当前节点，..表示父节点
- 绝对路径：从根节点开始的完整路径
- 别名路径：使用#别名的方式（需要先设置别名）
状态机动画：
- 创建动画在状态机属性中添加Animation选择动画类型：Any to Any：任意状态间都有动画State 0 to State 1：特定状态间的动画
- 动画参数Duration：动画持续时间（毫秒）Easing Function：动画曲线Easing Mode：模式Ease In：渐入Ease Out：渐出Ease In Out：渐入渐出
- 自定义动画曲线选择Custom曲线在Library → Animations中创建动画曲线设置关键帧和时间
5.2 表盘开合动画
实现步骤：
- 创建控制属性创建Boolean属性：GaugesStatus
- 创建状态机创建状态机，控制属性选择GaugesStatus创建两个状态：false（关闭）和true（打开）
- 设置关闭状态在false状态下，设置表盘的初始位置和旋转复制表盘的Render Transformation值
- 设置打开状态在true状态下，设置表盘的展开位置调整Translation（平移）和Rotation（旋转）
- 添加动画添加Any to Any动画持续时间500毫秒曲线选择Linear或Ease In Out
- 绑定到按钮将控制属性绑定到按钮在按钮的On和Off事件中设置属性值
5.3 透明度动画
Viewport 2D透明度：
- 使用Opacity属性
- 范围0-1，0完全透明，1完全不透明
- 可以通过状态机控制透明度变化
渐隐渐显：
- 创建状态机控制透明度
- 从1到0实现渐隐，从0到1实现渐显
- 配合缩放可以实现更丰富的效果
5.4 页面切换
实现步骤：
- 创建页面创建空节点，命名为MenuDetail创建多个页面节点
- 创建状态机创建Integer属性：CaseNum（页面索引）创建状态机，控制属性选择CaseNum创建多个状态：0, 1, 2...
- 设置页面显示每个状态下设置对应页面的透明度为1其他页面透明度为0使用Any to Any动画实现切换效果
- 按钮切换左按钮：Previous State（上一页）右按钮：Next State（下一页）需要设置状态机的路径和状态组名称
四、工程导出和演示
开发完成后，点击菜单栏File→Export→Export as KZB Player for Windows，可以打包成一个可直接运行的 Windows exe 应用。
exe文件所在位置为Tool_project\Application Player目录中，双击即可执行程序。
1
Report
声明
收藏
Share
相关推荐
in to comment
Add emoji
喜欢TA的作品吗？喜欢就快来夸夸TA吧！
推荐素材
You may like
相关收藏夹
Log in
1Log in and synchronize recommended records
收藏Log in and add to My Favorites
评论Log in and comment your thoughts
分享Share