【Unity实战篇】| 快速制作一个简易时钟,包括2D和3D时钟

2024-06-17 10:52

本文主要是介绍【Unity实战篇】| 快速制作一个简易时钟,包括2D和3D时钟,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

请添加图片描述

      • 前言
  • 【Unity实战篇】| 快速制作一个时钟,包括2D和3D时钟
    • 一、2D时钟制作
      • 1.1 钟表盘制作
      • 1.2 指针制作
      • 1.3 钟表搭建
      • 1.4 设置时钟的中心点
      • 1.5 时钟旋转逻辑
    • 二、3D时钟制作
      • 2.1 搭建表盘和指针
      • 2.2 调整指针的位置和节点
      • 2.3 时钟旋转逻辑
  • 总结

请添加图片描述


前言

  • 时钟 这个东西想必不用多说,应该没有小伙伴不知道吧。
  • 本篇文章来写一下怎样使用Unity引擎快速制作一个时钟,包括2D和3D时钟。
  • 废话不多说,下面一起来看下具体做法是怎样的吧!

【Unity实战篇】| 快速制作一个时钟,包括2D和3D时钟

请添加图片描述

请添加图片描述


一、2D时钟制作

1.1 钟表盘制作

2D时钟制作时首先需要找一张背景图作为钟表盘,例如下面这种,找一张切图备用。

在这里插入图片描述

将切图放到Unity工程中,将图片类型Texture Type改为Sprite,就可以放到UI中的Image组件使用了。
在这里插入图片描述

如果想自己制作一张也很简单,找一张圆形图,然后按自己的喜欢添加一下代表时间的周边环纹即可。

1.2 指针制作

最基础的钟表中一般都包含时针、分针、秒针这三个指针,可以找一下相关的指针切图使用,也可以使用Unity直接制作三个指针。

新建三个Image组件,然后调整一下长宽就可以用了。
在这里插入图片描述

1.3 钟表搭建

新建一个游戏对象,在下面新建四个节点,分别用于钟表盘、时针、分钟、秒针,并按合适的位置进行摆放。

如下图所示:
在这里插入图片描述

1.4 设置时钟的中心点

有一个关键点需要注意,三个指针的 Pivot中心点 需要调整到表盘的最中心处,不然旋转起来之后就会乱七八糟,各转个的了。
在这里插入图片描述

这样设置之后再旋转的时候才会围绕表盘中心进行旋转,符合钟表的旋转逻辑。

1.5 时钟旋转逻辑

钟表是一个圆,转一圈需要360°,换算成时、分、秒的结果就是:

  • 时针 每小时旋转的角度= 360f / 12
  • 分针 每分钟旋转的角度 = 360f / 60
  • 秒针 每秒旋转的角度 = 360f / 60

所以只需要获取当前的具体时间,拿到小时数、分钟数及秒数,并将时针、分针及秒针分别旋转指定的角度即可完成钟表的功能逻辑。

通过Unity的API 可以拿到当前时间,包括当前的小时数、分钟数以及秒数。:DateTime.NowDateTime.Now.TimeOfDay

打印结果如下:
在这里插入图片描述

DateTime.Now可以获取当前的时间,不过返回的时间是整数型,只能实现秒针按秒进行跳动,不能平滑的旋转。而DateTime.Now.TimeOfDay可以获取精度更高的时间,实现秒针更平滑的旋转效果。

随后调用Unity让物体旋转的API Quaternion.Euler(Vector3 v3)将旋转的角度传进去即可实现效果。

完整代码如下:

using System;
using UnityEngine;public class ClockTest : MonoBehaviour
{public Transform hourTrans;public Transform minuteTrans;public Transform secondTrans;//是否平滑旋转public bool isContinuous;private const float hoursToDegrees = 360f / 12f;//时针每小时旋转的角度private const float minutesToDegrees = 360f / 60f;//分针每分钟旋转的角度private const float secondsToDegrees = 360f / 60f;//秒针每秒旋转的角度void Update(){if (isContinuous){TimeSpan timespan = DateTime.Now.TimeOfDay;//拿到当前的时、分、秒后,将时针、分针、秒针分别旋转指定的角度hourTrans.localRotation = Quaternion.Euler(0f, 0f, (float)timespan.TotalHours * -hoursToDegrees);minuteTrans.localRotation = Quaternion.Euler(0f, 0f, (float)timespan.TotalMinutes * -minutesToDegrees);secondTrans.localRotation = Quaternion.Euler(0f, 0f, (float)timespan.TotalSeconds * -secondsToDegrees);}else{DateTime time = DateTime.Now;hourTrans.localRotation = Quaternion.Euler(0f, 0f, time.Hour * -hoursToDegrees);minuteTrans.localRotation = Quaternion.Euler(0f, 0f, time.Minute * -minutesToDegrees);secondTrans.localRotation = Quaternion.Euler(0f, 0f, time.Second * -secondsToDegrees);}}
}

将脚本挂载到场景中,并将时/分/秒三个对象拖到脚本中,通过控制isContinuous可以实现是否使用平滑旋转的效果。
在这里插入图片描述

实现效果如下:
请添加图片描述


二、3D时钟制作

3D时钟的旋转逻辑与2D时钟一致,只不过表盘及指针换成3D效果展示,下面来快速演示一下实现的过程。

2.1 搭建表盘和指针

在场景中创建一个Capsule圆柱体,调整大小做成钟表的表盘,接着创建一些Cube调整大小做成表盘上的刻度,最后创建三个Cube立方体,调整长宽高做成指针。
在这里插入图片描述

2.2 调整指针的位置和节点

指针的位置和节点非常重要,如果调节的不正确,则指针就无法按照正常的钟表逻辑进行旋转。

这里调整的方法有多种,来展示一下本文使用到的一种方式。

新建三个游戏对象 h、m、s作为时分秒针的父节点,将这三个游戏对象放置到表盘的中心点。

接着将前面制作好的时分秒三个指针对象各自放置到这三个节点下,并调好位置,如下图所示:
在这里插入图片描述

2.3 时钟旋转逻辑

时钟旋转的逻辑与前面UI时钟的逻辑一致,将脚本挂载到场景中,将时分秒三个游戏对象拖到脚本中即可。
在这里插入图片描述

using System;
using UnityEngine;public class ClockTest : MonoBehaviour
{public Transform hourTrans;public Transform minuteTrans;public Transform secondTrans;public bool isContinuous;private const float hoursToDegrees = 360f / 12f;//时针每小时旋转的角度private const float minutesToDegrees = 360f / 60f;//分针每分钟旋转的角度private const float secondsToDegrees = 360f / 60f;//秒针每秒旋转的角度void Update(){if (isContinuous){TimeSpan timespan = DateTime.Now.TimeOfDay;//拿到当前的时、分、秒后,将时针、分针、秒针分别旋转指定的角度hourTrans.localRotation = Quaternion.Euler(0f, 0f, (float)timespan.TotalHours * -hoursToDegrees);minuteTrans.localRotation = Quaternion.Euler(0f, 0f, (float)timespan.TotalMinutes * -minutesToDegrees);secondTrans.localRotation = Quaternion.Euler(0f, 0f, (float)timespan.TotalSeconds * -secondsToDegrees);}else{DateTime time = DateTime.Now;hourTrans.localRotation = Quaternion.Euler(0f, 0f, time.Hour * -hoursToDegrees);minuteTrans.localRotation = Quaternion.Euler(0f, 0f, time.Minute * -minutesToDegrees);secondTrans.localRotation = Quaternion.Euler(0f, 0f, time.Second * -secondsToDegrees);}}
}

演示效果如下:

请添加图片描述


总结

  • 本文介绍了怎样使用Unity制作一个简易时钟,包括2D和3D时钟的制作。
  • 制作的功能点在于如何让指针按正确的逻辑旋转,以及如何拿到当前的时间。
  • 功能比较简单,适合新手练习,可以优化UI和3D对象,尝试制作出更精美的时钟效果!

  • 🎬 博客主页:https://xiaoy.blog.csdn.net

  • 🎥 本文由 呆呆敲代码的小Y 原创 🙉

  • 🎄 学习专栏推荐:Unity系统学习专栏

  • 🌲 游戏制作专栏推荐:游戏制作

  • 🌲Unity实战100例专栏推荐:Unity 实战100例 教程

  • 🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!

  • 📆 未来很长,值得我们全力奔赴更美好的生活✨

  • ------------------❤️分割线❤️-------------------------

请添加图片描述请添加图片描述请添加图片描述

请添加图片描述

资料白嫖,技术互助

学习路线指引(点击解锁)知识定位人群定位
🧡 Unity系统学习专栏 🧡入门级本专栏从Unity入门开始学习,快速达到Unity的入门水平
💛 Unity实战类项目 💛进阶级计划制作Unity的 100个实战案例!助你进入Unity世界,争取做最全的Unity原创博客大全。
❤️ 游戏制作专栏 ❤️ 难度偏高分享学习一些Unity成品的游戏Demo和其他语言的小游戏!
💚 游戏爱好者万人社区💚 互助/吹水数万人游戏爱好者社区,聊天互助,白嫖奖品
💙 Unity100个实用技能💙 Unity查漏补缺针对一些Unity中经常用到的一些小知识和技能进行学习介绍,核心目的就是让我们能够快速学习Unity的知识以达到查漏补缺

在这里插入图片描述

这篇关于【Unity实战篇】| 快速制作一个简易时钟,包括2D和3D时钟的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1069241

相关文章

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

MybatisX快速生成增删改查的方法示例

《MybatisX快速生成增删改查的方法示例》MybatisX是基于IDEA的MyBatis/MyBatis-Plus开发插件,本文主要介绍了MybatisX快速生成增删改查的方法示例,文中通过示例代... 目录1 安装2 基本功能2.1 XML跳转2.2 代码生成2.2.1 生成.xml中的sql语句头2

8种快速易用的Python Matplotlib数据可视化方法汇总(附源码)

《8种快速易用的PythonMatplotlib数据可视化方法汇总(附源码)》你是否曾经面对一堆复杂的数据,却不知道如何让它们变得直观易懂?别慌,Python的Matplotlib库是你数据可视化的... 目录引言1. 折线图(Line Plot)——趋势分析2. 柱状图(Bar Chart)——对比分析3

一文教你Java如何快速构建项目骨架

《一文教你Java如何快速构建项目骨架》在Java项目开发过程中,构建项目骨架是一项繁琐但又基础重要的工作,Java领域有许多代码生成工具可以帮助我们快速完成这一任务,下面就跟随小编一起来了解下... 目录一、代码生成工具概述常用 Java 代码生成工具简介代码生成工具的优势二、使用 MyBATis Gen

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

SpringBoot快速搭建TCP服务端和客户端全过程

《SpringBoot快速搭建TCP服务端和客户端全过程》:本文主要介绍SpringBoot快速搭建TCP服务端和客户端全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录TCPServerTCPClient总结由于工作需要,研究了SpringBoot搭建TCP通信的过程

Python使用Matplotlib绘制3D曲面图详解

《Python使用Matplotlib绘制3D曲面图详解》:本文主要介绍Python使用Matplotlib绘制3D曲面图,在Python中,使用Matplotlib库绘制3D曲面图可以通过mpl... 目录准备工作绘制简单的 3D 曲面图绘制 3D 曲面图添加线框和透明度控制图形视角Matplotlib