博维数孪CreateTwins—案例教程—案例实战(计时器)

计时器

案例展示

点击查看案例

功能列表：

• 显示当前时间（时，分，秒）
• 启动计时器
• 暂停计时器
• 计时器清零
• 显示毫秒，秒，分
• 100毫秒后秒进1
• 60秒后，分进1

本章知识点：

• 布尔值取反
• 数学运算（乘法，指定小数点位数，向上取整）
• 帧间隔

开始我们的制作吧

准备素材

上传UI素材，点我下载

相关链接：

导入/上传资源

背景设置

设置背景色为黑色

创建2D对象

添加表盘，开始键，复位键，暂停键，时，分，秒，毫秒，以及时间之间的分隔符号

最终效果：

制作交互

变量

创建数字变量

• num_microSecond：记录当前的毫秒数
• num_second：记录当前的秒数
• num_minute：记录当前的分钟数

创建文本变量

• txt_microSecond：用于将num_microSecond处理为文本
• txt_second：用于将num_second处理为文本
• txt_minute：用于将num_minute处理为文本

创建布尔变量

• watchStarted：用于记录计时器是否已经启动（用于之后暂停计时器时使用）

蓝图事件

创建事件”getCurTime“，用于处理当前时间

• 获取当前时间
• 从当前时间中提取小时
• 从当前时间中提取分钟
• 从当前时间中提取秒
• 将以上数值赋给对应的文本组件

创建事件”startOrstopWatch"，用于启动和暂停计时器

• 将布尔变量watchStarted的值取反（如watchStarted的值为false，取反后变为true）
• 执行事件“fillStartOrStopInfo”（用于控制按钮的状态）

相关链接：

蓝图-变量-布尔-输入的补

蓝图-节点-调用事件

创建事件“fillStartOrStopInfo”，用于启动和暂停状态下显示不同的按钮

• 判断watchStarted是否为真
• 为真：说明计时器已经启动，开始按钮隐藏，暂停按钮显示
• 为假：说明计时器已经暂停，开始按钮显示，暂停按钮隐藏

创建事件“calTime”，用于增加毫秒

• 判断watchStarted是否为真
• 为真：说明计时器已经启动，调用事件“addMicroSecond，开始增加毫秒

创建事件”addMicroSecond"，用于计算毫秒及秒的进位

• 获取两帧的间隔时间，不断往num_microSecond变量上累加
• 当值大于1后，num_microSecond减1，调用事件"addSecond"，让秒加1
• 无论条件为真或假，调用事件“fillMSInfo"，在用户界面上显示毫秒

相关链接：

蓝图-节点-获取系统信息-帧间隔时间

创建事件”addSecond"，用于计算秒及分的进位

• 获取num_second的值，加1
• 当num_second的值大于60，调用事件“addMinute”，num_second清零
• 无论条件为真或假，调用事件“fillSInfo"，在用户界面上显示秒

创建事件“addMinute"，用于计算分

• 获取num_minute的值，加1
• 当num_minute的值大于60，num_second清零
• 无论条件为真或假，调用事件“fillMInfo"，在用户界面上显示分

创建事件“resetWatch"，用于将分，秒，毫秒清零

• 将数字变量num_microSecond重置为0
• 将文本控件watch_ms的内容重置为"00"
• 将数字变量num_second重置为0
• 将文本控件watch_s的内容重置为"00"
• 将数字变量num_minute重置为0
• 将文本控件watch_m的内容重置为"00"

创建事件”fillMSInfo“，用于显示毫秒

• 获取num_microSecond的值，取小数点后两位
• 将两位小数乘以100
• 使用向上舍入保证值为整数
• 将计算后的值赋给文本变量“txt_microSecond"
• 将txt_microSecond设置给文本控件watch_ms

相关链接：

蓝图-变量-数字-指定小数位数

蓝图-变量-数字-相乘

蓝图-变量-数字-向上舍入

创建事件”fillSInfo“，用于显示秒

• num_second在10以下时，我们希望以01,02的形式显示，可通过文本拼接完成（在前面拼接0）
• 将计算后的值赋给文本变量“txt_second"
• 将txt_second设置给文本控件watch_s

创建事件“fillMInfo"，用于显示分

• num_minute在10以下时，我们希望以01,02的形式显示，可通过文本拼接完成（在前面拼接0）
• 将计算后的值赋给文本变量“txt_minute"
• 将txt_minute设置给文本控件watch_m

连接事件

将场景的”帧循环“事件，与蓝图事件“getCurTime"和"calTime"相连

将按钮btn_pause，btn_start的点击事件，与蓝图事件"startOrStopWatch”相连

将按钮btn_reset的点击事件，与蓝图事件“resetWatch”相连