Unity - Minimap Tanpa Coding

April 06, 2018 in #Coding #Unity | | | Share on Google+

Hai, pada tutorial kali ini kita akan membuat fitur minimap yang akan dibagi ke dalam beberapa seri tutorial. Hasil akhirnya kira-kira seperti gambar di bawah.

Oke, kita mulai aja dengan cara yang paling mudah, yaitu dengan menampilkan map secara bird-view.


Setup

1.) Buatlah dulu map sederhana dengan menggunakan Cube dan Plane

Map milik saya memiliki scale (5, 1, 5). Selanjutnya, buatlah sebuah karakter dengan First-Person atau Third-Person Controller. Saya sendiri menggunakan model Unity-Chan! yang sudah dilengkapi dengan script untuk gerakan dan animasinya.

2.) Letakkan MainCamera di belakang karakter untuk mengikuti gerakannya.

Saya sendiri menggunakan Cinemachine untuk menggunakannya, hehe. Mungkin kapan-kapan bikin tutorialnya lagi. Kalau import package sih seharusnya sudah disertai script ataupun setup agar kamera mengikuti karakter.

3.) Buat kamera baru bernama MinimapCamera dan letakkan sebagai child dari karakter.

Letakkan posisi Y di atas karakter (misalnya 20 unit), dengan rotasi X = 90. Kamera ini akan berfungsi sebagai kamera untuk minimap. Terakhir, set Projection di dalam Inspector menjadi 'Ortographic'.



Setup Canvas

3.) RawImage

Minimap merupakan bagian dari Canvas. Cara kerjanya, kita mengirimkan apa yang dilihat oleh MinimapCamera ke dalam Image di dalam Canvas. Akan tetapi, bukan Image yang biasa kita pakai, akan tetapi RawImage.

4.) Masking

Selanjutnya, Image lain yang akan berperan sebagai mask dari minimap, sehingga bentuknya tidak lagi kotak, melainkan lingkaran seperti pada umumnya. Buatlah Image dan posisikan sebagai parent dari RawImage. Kemudian, tambahkan komponen Mask di dalamnya.

Gambar di bawah menunjukkan proses hasil before-after dari proses ini.

5.) Render Texture

RenderTexture digunakan untuk mengirimkan data gambar dari MinimapCamera ke dalam RawImage.

Selanjutnya, set RenderTexture yang tadi kita buat ke dalam field Texture milik RawImage.

Set juga RenderTexture tadi ke field Target Texture milik MinimapCamera.

Setelah proses ini, seharusnya RawImage sudah dapat menampilkan apa yang dilihat oleh MinimapCamera.



Hasil Akhir

Nah pada artikel berikutnya, kita akan kembangkan lagi minimap ini dengan yaitu dengan tidak menapilkan bentuk dunia yang sebenarnya. Contoh seperti minimap dalap game GTA.


Download Source Code

Source code dapat didownload di sini.

April 06, 2018 in #Coding #Unity | | | Share on Google+