【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实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》:本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s

C++快速排序超详细讲解

《C++快速排序超详细讲解》快速排序是一种高效的排序算法,通过分治法将数组划分为两部分,递归排序,直到整个数组有序,通过代码解析和示例,详细解释了快速排序的工作原理和实现过程,需要的朋友可以参考下... 目录一、快速排序原理二、快速排序标准代码三、代码解析四、使用while循环的快速排序1.代码代码1.由快

Win32下C++实现快速获取硬盘分区信息

《Win32下C++实现快速获取硬盘分区信息》这篇文章主要为大家详细介绍了Win32下C++如何实现快速获取硬盘分区信息,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 实现代码CDiskDriveUtils.h#pragma once #include <wtypesbase

Python结合Flask框架构建一个简易的远程控制系统

《Python结合Flask框架构建一个简易的远程控制系统》这篇文章主要为大家详细介绍了如何使用Python与Flask框架构建一个简易的远程控制系统,能够远程执行操作命令(如关机、重启、锁屏等),还... 目录1.概述2.功能使用系统命令执行实时屏幕监控3. BUG修复过程1. Authorization

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

Spring AI与DeepSeek实战一之快速打造智能对话应用

《SpringAI与DeepSeek实战一之快速打造智能对话应用》本文详细介绍了如何通过SpringAI框架集成DeepSeek大模型,实现普通对话和流式对话功能,步骤包括申请API-KEY、项目搭... 目录一、概述二、申请DeepSeek的API-KEY三、项目搭建3.1. 开发环境要求3.2. mav

Python如何快速下载依赖

《Python如何快速下载依赖》本文介绍了四种在Python中快速下载依赖的方法,包括使用国内镜像源、开启pip并发下载功能、使用pipreqs批量下载项目依赖以及使用conda管理依赖,通过这些方法... 目录python快速下载依赖1. 使用国内镜像源临时使用镜像源永久配置镜像源2. 使用 pip 的并

SpringBoot快速接入OpenAI大模型的方法(JDK8)

《SpringBoot快速接入OpenAI大模型的方法(JDK8)》本文介绍了如何使用AI4J快速接入OpenAI大模型,并展示了如何实现流式与非流式的输出,以及对函数调用的使用,AI4J支持JDK8... 目录使用AI4J快速接入OpenAI大模型介绍AI4J-github快速使用创建SpringBoot

使用Python快速实现链接转word文档

《使用Python快速实现链接转word文档》这篇文章主要为大家详细介绍了如何使用Python快速实现链接转word文档功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 演示代码展示from newspaper import Articlefrom docx import