博维数孪CreateTwins—案例教程—案例实战(生肖计算)

生肖计算

案例展示

点击查看案例

功能列表：

• 显示当前年份和对应的生肖
• 输入年份计算和显示对应的生肖
• 输入年龄计算和显示对应的生肖

本章知识点：

• 获取当前时间
• 从当前时间中提取年份
• 进行数字的数学运算（减，取余）
• 获取输入框的输入值

开始我们的制作吧

准备素材

上传UI素材，点我下载

相关链接：

导入/上传资源

画布设置

相关链接：

场景属性-画布设置

背景设置

设置背景图，使用资源："背景图”

最终效果：

创建2D对象

创建2个输入框，用于输入年份和年龄，创建文本用于填充当前年份

创建5个2D节点，3个用于动态显示生肖头像，2个用于点击时触发年份和年龄的转换

最终效果：

制作交互

变量

创建用于存储文本的列表变量”生肖序列“，为列表添加12项，对应的值为”鼠，牛，虎，兔，龙，蛇，马，羊，猴，鸡，狗，猪“

创建用于存储图片的字典变量“生肖资源表”，为字典添加12项，并指定对应的图片

相关链接：

蓝图-变量-列表

蓝图-变量-字典

蓝图事件

创建事件”当前年份转生肖“

• 获取当前时间：日期时间(当前时间)
• 从当前时间中提取年份：获取属性 日期时间(年)
• 将当前年份（数值）赋给"文本_当前年份"

将年份转换成生肖：

• 将当前年份减去4，再用12取余（2021 - 4 = 2017，2017用12取余 = 1）
• 从“生肖序列”中查找索引为1的项，得到“牛”
• 用“牛”作为键，在字典”生肖资源表“中找到到对应的图片
• 将得到的图片设置为2D节点“当前年份计算结果”的背景图

相关链接：

蓝图-变量-日期时间

创建事件“年份转生肖”，用于找到此年份对应的生肖头像

创建事件“年龄转生肖”，用于先将年龄转换到年份，再由年份找到对应的生肖头像

• 获取当前年份
• 将当前年份与输入的年龄相减，得到出生年份
• 使用此年份计算，查找资源

连接事件

将场景的”入场“事件，与蓝图事件“当前年份转生肖”连接

将“年份计算生肖”组件的“点击”事件，与蓝图事件“年份转生肖”连接

将“年龄计算生肖”组件的“点击”事件，与蓝图事件“年龄转生肖”连接

保存并预览您的项目吧