In an effort to document my learning in Unity, I figured I’d start by creating a blog post for each project I complete as I learn. This way, I can at least look back at where I’ve come from and compare myself against where I am now.

Over at catlikecoding.com, they offer some pretty great text-based Unity tutorials that I have seen pretty highly recommended around the web. I emphasize text-based because so many of the tutorials and resources for learning Unity are video-based. Don’t get me wrong, following along with a video tutorial can be great and very educational, and there are tons of fantastic video tutorials I’ll be sinking my teeth into. But sometimes I just want to read a guide at my own damn pace without having to flip back a few seconds when the instructor runs off without me.

I’ll be toying with the formatting of these Learning Project posts as we go, so bear with me as they shift from post to post for a while. In general, I will start each post with a description of what the project’s goal is (learning a specific skill, creating something, etc), then share my experience actually completing the project, finishing with any lessons learned, concepts I want to explore further, and ending with an embedded WebGL version of the final product where possible.

Overkill? Maybe. Probably. But laying things out like this is just how my brain works.

Project Details

Project Goal: Create a 3D-rendered clock face in Unity that shows the current system time
Tutorial Link: Creating a Clock at catlikecoding.com
Concepts Covered: Creating GameObjects, writing basic C# scripts, altering GameObjects in a scene via script, and basic in-scene animations

Creating the Clock

In general, creating a clock model inside Unity is pretty simple. As the tutorial walks you through, it’s a relatively simple matter of creating a cylinder 3D object and flattening it so that it appears as a short, flat circle. Then on top of that circle placing cube objects to represent each number of the clock and each of the three hands of the clock. With everything created, I ended up with a pretty good approximation of an analog clock:

My Unity editor window, complete with clock hands! HANDS!

From there, it was simply a matter of building out a C# script to determine the current time and rotate each of the hands of the clock to a specific angle based on that time. The scripting is relatively simple, with my background in object-oriented languages and some time with C# scripts in Unity under my belt, but some new concepts were introduced that I hadn’t played with before.

Aside from the methods shown interacting with time, Quaternions are 100% new to me. Catlikecoding does a pretty good job defining what they are and what they’re used for:

Quaternions are based on complex numbers and are used to represent 3D rotations. While harder to understand than simple 3D vectors, they have some useful characteristics. For example, they don’t suffer from gimbal lock.

UnityEngine.Quaternion is used as a simple value. It is a structure, not a class.

catlikecoding.com

I feel like I kind of understand Quaternions, but needless to say, I’ll need to do some additional learning on the subject to take them and use them on my own.

Finally, the tutorial walks you through enabling your time to be either discrete or continuous, meaning do the hands move only when the time changes or are they moving smoothly around the clock face. Both are great examples of how to use class methods to better refine the behavior of a script and allow user input to change behavior.

Lessons Learned

Aside from reinforcing some basics, this tutorial did a great job of walking me through using time methods and Quaternions (both of which I want to explore more in-depth later). It was easy to follow and helped really clearly show off some impacts of local and global rotation in a scene as well.

I also was reminded (a lot) that I shouldn’t assume I know what’s next in these tutorials, as I had to take a step back and re-read an instruction that I had skimmed past on my way to the goodies.

Always read the instructions!

Me, always, right before I refuse to read the instructions

Otherwise, what’s the point of following a thoughtfully written tutorial?

Final Product

This project was really fun to build, being simple and a quick payoff. So many projects take hours or days to wrap up, but this one managed to reinforce some basics while giving me something to play with pretty quickly. Plus, it reminded me of when my older brother took woodshop in high school and had to make a clock as a project. Feels like a pretty smart and easy to identify with project.

I also added a simple UI toggle (checkbox) that lets the viewer switch back and forth between discrete and continuous modes, for demonstration. Because I just can never seem to stick to the plan (scope creep is my frenemy). Note that switching between discrete and continuous will cause the hands to move, as they are at more ‘accurate’ angles based on the current time in continuous mode.

I could see easily expanding this project to allow for adding a ticking sound for when the hand advances in discrete mode and other enhancements to a simple clock face into something more interactive and alive.

Without further ado… I mean, its a clock. Nothing crazy to see here. So… enjoy?

Note: This project is embedded using Unity’s WebGL player, which is not supported on mobile.

View the source for this finished project on GitHub

Leave a Reply