Membuat Jam Analog dengan Unity 3D

Materi :

• Membuat projek hirarki
• Membuat script dan menaruh pada objek
• Mengakses namespace
• Menggunakan Update method
• Rotasi jarum berdasarkan waktu skrg.

*

Gambar project yang akan kita buat

Pada tutorial kali ini kita akan membuat jam secara sederhana menggunakan Unity 3D. Kita asumsikan bahwa temen-temen udah familiar dengan unity 3d editor. Jika belum silahkan mempelajari tentang unity basic bagian unity editor. Jika sudah mari kita mulai.

Logika dasar, jam analog mempunyai 3 buah jarum yang menunjukkan jam, menit dan detik. Dimana kita akan mencoba memberi setiap jarum tersebut mempunyai animasi berputar sehingga menampilkan mirip dengan jarum jam. Jarum jam berputar paling lambat, jarum menit lebih cepat dan jarum detik paling cepat berputarnya.

Oke langsung saja menuju TKP.

 

1. Membuat Project Hirarki

Pertama kita buka Unity 3D, kao belum punya bias download dahulu Unity 3D game Egine disini. Setelah Unity 3D terbuka kita mulai dengan membuat project baru pada panel file dan pilih  New Project

Setelah itu kita berikan nama project, lokasi penyimpanan project dan jenis aplikasi 3D pada pilihan dibawah. Karna kita akan membuat jam analog berbasis 3D. Lebih jelasnya lihat gambar ibawah ini. 

Karena kita tidak akan menggunakan package maka biarkan saja checkbock dalam keadaan kosong lalu tekan create. Setelah itu kita menuju pada editor unity 3D.  

Sebelum membuat objek kita pastikan Main Camera pada posisi (0, 1, -10) yang berarti x=0, y=1 dan z=-10. Dan pada GameObject panel kita pilih Align View to Selected agar mempunya perspekif yang sama.

2. Membuat Jam Analog

Lalu kita bias memulai membuat objek-objek jarumnya. Buat GameObject pada panel GameObject. Create Empty dan set posisinya (0, 0, 0,) dan beri nama JamAnalog. 

Lalu kita buat lagi GameObject dan sebelum kita kasih nama kita duplikasi agar berjumlah 3 dengan clik (CTRL+D) lalu kita kasih nama, posisi dan scale. Secara berurutan :

Nama	Jam	Menit	Detik
Posisi	(0, 1, 0)	(0, 1.5, 0)	(0, 2, 0)
Scale	(0.5, 2, 0.5)	(0.25, 3, 0.25)	(0.1, 4, 0.1)

Lalu kita pilih jam, menit dan detik (CTRL+Klik) lalu Tarik menjadi sub pada jam analog

Lalu kita buat objek untuk masing-masing sub dari JamAnaog yakni jam, menit dan detik.

Menambahkan objek cube

* Tampilan project scene

3. Membuat Script Animasi

Kita membutuhkan script untuk dapat membuat animasi pada jarum jam. Langkahnya pilih pada tab JamAnalog lalu klik addcomponent. Ketik “JamAnimator”

*

Setelah itu buka script JamAnimator dan hapus code bawaan dari unity karna kita akan memulai dari nol.

Tuliskan script:

using UnityEngine; public class JamAnimator : MonoBehaviour { }

Membuat parameter untuk jam, menit dan detik

public Transform jam, menit, detik;

Lalu drag object dari hirarki kedalam transform :

*

Membuat method update

void Update () { // script update disini }

Logika perputaran jam.

1. Jam mempunyai bentuk lingkaran, dimana lingkaran memiliki 360°.
2. Jarum jam memiliki perbedaan kecepatan, maka itu akan kita bagi untuk setiap jarum.

Jam	360/12
Menit	360/60
Detik	360/60

Maka kita tuliskan parameter dan nilainya seperti gambar dibawah dan ditambah dengan lambang f sebagai penanda float:

private const float jamPutar = 360f / 12f, menitPutar = 360f / 60f, detikPutar = 360f / 60f;

Kita akan menggunakan system mesin yang akan mendeteksi jam / waktu sekarang.

using UnityEngine; using System;

void Update () { DateTime time = DateTime.Now; }

Lalu kita akan membuat jarum berputar dengan cara quaternions.

DateTime time = DateTime.Now; jam.localRotation = Quaternion.Euler (0, 0, time.Hour * -jamPutar); menit.localRotation = Quaternion.Euler (0, 0, time.Minute * -menitPutar); detik.localRotation = Quaternion.Euler (0, 0, time.Second * -detikPutar);

* Waktu menunjukkan pukul 13.38

Kita coba dan berjalan seperti yang kita harapkan.  :)

4. Pengembangan Jam

Dengan menambahkan kode berikut maka JamAnalog akan berputar tanpa berhenti. Dengan cara menambahkan parameter dan if else.

public bool analog;

void Update () { if (analog) { TimeSpan timespan = DateTime.Now.TimeOfDay; jam.localRotation = Quaternion.Euler (0, 0, (float)timespan.TotalHours * -jamPutar); menit.localRotation = Quaternion.Euler (0, 0, (float)timespan.TotalMinutes * -menitPutar); detik.localRotation = Quaternion.Euler (0, 0, (float)timespan.TotalSeconds * -detikPutar);     } else { DateTime time = DateTime.Now; jam.localRotation = Quaternion.Euler (0, 0, time.Hour * -jamPutar); menit.localRotation = Quaternion.Euler (0, 0, time.Minute * -menitPutar); detik.localRotation = Quaternion.Euler (0, 0, time.Second * -detikPutar);     } }

Jalankan project lalu bias kita pilih untuk aktif atau non aktifkan pada checkbox analog seperti gambar dibawah:

*

*

Semoga bermanfaat…

Buat yang mau download projectnya disini

Jangan lupa komenya yah. :)