Wednesday 16 September 2015

Unity Tutorial Indonesia : UI Unity - Floating UI Text

Advertisement


Floating Text secara sederhana text yang mengapung tepat di atas objek, biasanya digunakan untuk nama-nama objek dalam sebuah game atau biasa digunakan untuk memperlihatkan nilai darah yang berkurang pada musuh dalam game aksi.



MULAI



Buat proyek baru, kemudian tambahkan beberapa komponen :
1. Ground, bisa pake kubus atau terrain.
2. Directional Light
3. First Person Controller (FPC)






Pada objek FPC tambahkan komponen UI canvas.





Ubah nama canvas menjadi "Canvas Player". Tambahkan UI image pada "Canvas Player".





Ubah nama image menjadi "BG". Atur anchor point BG agar bisa mengikuti bentuk layar.





Kemudian atur posisi "Canvas Player" menjadi (0,0,0). Cara mudahnya klik settings pada Rect Transform - Reset Position.

Dengan mereset posisi canvas menjadi 0 , ini berguna agar canvas berada tepat di tengah-tengah objek FPC.




Masih pada "Canvas Player" kemudian :
1. Ubah Render Mode menjadi "World Space"
2. Atur Width dan Height dari canvas 
3. Atur Posisi Y canvas, agar posisi tepat di atas kepala objek FPC.




Tambahkan juga UI text pada "Canvas Player".




Atur ukuran pembatas pada text :
1. Atur Width menjadi 2000 dan Height menjadi 500 , atau boleh sesuai selera
2. Jika pembatas sudah diatur, pembatas text akan terlihat besar, atur dan kecilkan ukuran / Scale pada pembatas

Ada yang bertanya "Kenapa gak Width dan hEightnya aja yang dikecilin, atau kenapa gak langsung dari scalenya yang dibesarin ?"

jadi gini, kalo misal nggedein text menggunakan scale dan tanpa merubah nilai Width dan Height memang bisa dan berhasil tapi text bakal terlihat pecah-pecah dan buram. Nah jika hanya Width dan Height yang digedein, maka posisi dari text tidak bisa ditentukan dengan mudah jika nanti ada perbaikan UI Text.

Oke, jika sudah paham sekarang lanjut Ubah text sesuai selera dan ubah juga Font Size. 




Jalankan game dan lihat yang terjadi, tulisan beserta Background akan mengikuti kemanapun objek bergerak, dan jika objek disembunyikan , Text dan BG juga akan menghilang.

NB: jika hanya ingin text saja, bisa dihapus komponen Image "BG".







SELESAI




EmoticonEmoticon