Sudah minum belum? mungkin ini pesan tersirat dari gim berjudul “Happy Glass” yang mengajak kita membantu mengisi segelas air penuh hanya dengan bantuan garis yang kita gambar. Sekilas info, gim ini adalah gim karya studio Game5mobile yang udah diunduh sebanyak 100 juta pengguna lebih, gokil gak sih… yang mau main, cus download di sini [Link].
Nah kalau kita coba cari di google pasti udah banyak tutorial yang membahas gim yang satu ini. Tapi aku akan coba tuangkan dalam bentuk tulisan.
Pada bagian pertama, tutorial ini akan mencoba membuat pipa air saja, kemudian akan dilanjut pada bagian kedua yang akan membahas cara membuat garis dan memprogram aturan permainannya.
A. Persiapan
Alat dan bahan:
- Unity versi 2021.*, karena aku pakainya versi ini.
- Aset bisa didownload di sini [Link]
1. Buka Unity Hub dan buat project 2D
2. Kemudian buat folder dengan nama “Prefabs“, “Scripts“, “Shaders“, “Textures“, dan “Materials“. Alasannya biar rapih.
3. Kemudian kita impor semua gambar yang sudah di download ke folder “Textures” dan jangan lupa diatur menjadi gambar “Sprites (2D and UI)“.
4. Atur layar menjadi mode portrait dengan rasio aspek 9:16.
5. Atur warna background menjadi warna putih pada kamera.
B. Membuat Wadah
1. Mari kita buat tatakan dan gelasnya terlebih dahulu. Klik kanan pada jendela “Hierarchy“, 2D-Object > Sprites > Square. Beri nama “Ground“.
2. Atur sedemikian rupa dan tambahkan komponen Box Collider 2D. Collider adalah sebuah komponen yang memberi bentuk fisik padat pada objek. Jangan lupa ganti warnanya di properti Sprite Renderer menjadi warna selain putih.
3. Drag / seret gambar gelas ke dalam Scene dan atur ukuran secukupnya.
4. Tambahkan komponen Polygon Collider 2D dan Rigidbody 2D. Atur Angular-Drag menjadi 0. Rigidbody adalah komponen yang menyebabkan objek memiliki massa dan dapat dikenai gravitasi ataupun gaya dari luar.
C. Membuat Pipa Air
1. Berikutnya mari buat bulir air dengan klik kanan pada jendela “Hierarchy“, 2D-Object > Sprites > Circle. Beri nama “water” dan ganti layernya menjadi layer “Water“
2. Ganti warna menjadi biru muda mirip warna air. Kecilkan ukuran bulir air, aku merasa cukup ukurannya pada nilai properti scale sebesar 0.25. Tambahkan komponen Circle Collider 2D dan Rigidbody 2D. Atur atribut Angular-Drag menjadi 0.
3. Berikutnya kita buat Physics-Material dengan Klik kanan pada jendela “Assets“, Create > 2D > Physics Material 2D. Beri nama “Water Physics Material”.
4. Atur properti friction dan bounciness menjadi 0 pada Water Physics Material yang telah dibuat. Masukkan Water Physics Material pada atribut Material pada komponen Circle-Collider-2D dan komponen Rigidbody 2D.
5. Setelah itu simpan “water” sebagai prefab, dengan cara men-drag / menggeser water dari jendela “Hierarchy“, ke folder Prefabs. Prefab adalah objek yang disimpan untuk nantinya digunakan kembali dengan karakteristik komponen yang sama. Nantinya berguna untuk memunculkan banyak “water” dari pipa.
6. Delete “water” pada jendela “Hierarchy“. Drag / seret gambar pipa ke dalam Scene kita dan atur ukuran secukupnya. Beri nama “pipe“.
7. Pada “pipe” yang telah dibuat, lakukan klik kanan > Create-Empty dan beri nama “spawner” sebagai tempat posisi air keluar. Pastikan “spawner” memiliki posisi X dan Z bernilai 0 dan posisikan nilai Y supaya berada di ujung pipa seperti pada gambar.
8. Buat script baru pada folder “Scripts” dengan cara klik kanan > Create > C#-Script. Ubah nama skripnya menjadi “Pipe”. Klik 2x pada script tersebut dan salin program berikut ke dalam skrip yang baru dibuat.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47using System.Collections; using System.Collections.Generic; using UnityEngine; public class Pipe : MonoBehaviour { /// <note> Objek "water" dari folder Prefabs </note> public GameObject waterPrefab; /// <note> Posisi untuk memunculkan air </note> public Transform spawner; // Start is called before the first frame update void Start() { StartCoroutine(WaitAndSpray(100, 0.1f)); } // Update is called once per frame void Update() { } /// <note> /// Fungsi untuk memunculkan 1 bulir air /// </note> private void SpawnWater() { Vector3 pos = new Vector3(spawner.position.x + Random.Range(-0.3f, 0.3f) , spawner.position.y, 0f); GameObject clone = GameObject.Instantiate(waterPrefab, pos, Quaternion.identity, this.transform); } /// <note> /// Fungsi untuk memunculkan bulir air secara berulang, dengan jeda waktu tertentu /// </note> private IEnumerator WaitAndSpray(int total, float waitTime) { while (total > 0) { yield return new WaitForSeconds(waitTime); SpawnWater(); total--; } } }
9. Kemudian tambahkan komponen script “Pipe.cs” ke objek “pipe”. masukkan objek “water” prefab dan objek “spawner” ke dalam properti skrip yang sesuai. Memasukkannya dapat dengan cara drag / menggeser objek terkait. Maka akan terlihat seperti gambar di bawah ini.
10. Coba Play dan akan terlihat seperti ini. Jika merasa bulir air terlalu kecil, bisa dibesarkan nilai scale-nya dengan cara klik dua kali pada prefab “water” di folder “Prefabs“.
D. Memberi Efek Cairan (Opsional)
Perlu diketahui pada bagian ini mungkin agak membingungkan untuk pemula. Pada bagian ini akan menyinggung tentang shader dan render-texture. Perlu dipahami bersama, skrip efek ini aku dapatkan dari youtube vuecode, give a big shout-out to him/her, terima kasih sudah berbagi.
Jadi di sini kita akan buat dua kamera, 1 kamera utama dan 1 kamera efek. Fungsi kamera efek adalah menyorot objek “water” saja yang hasil potretnya akan di tempelkan pada render-texture dan di berikan efek layaknya cairan. Sehingga kamera utama akan mendapatkan gambar “water” yang sudah diberikan efek oleh render-texture. Berikut langkah-langkahnya,
1. Impor semua skrip “BlurController.cs” yang sudah di download ke folder “Scripts“. Impor juga semua shader ke folder “Shaders“.
2. Buatlah 1 kamera baru dengan cara klik kanan > Camera dan beri nama “FX Camera”. Atur posisi kamera x, y, dan z berturut-turut 0, 0, dan -10. Atur atribut Clear-Flags menjadi Solid-Color dengan warna putih, atribut Culling-Mask menjadi “Water” saja, dan atribut Projection menjadi Orthographic.
3. Kemudian pada “Main Camera”, hapus centang pada “Water” pada atribut Culling-Mask. Supaya air tidak tampak pada “Main Camera”.
4. Buatlah render-texture pada jendela “Asset” dengan cara klik kanan > Create > Render-Texture. Berilah nama “Water Render Texture” dan atur size menjadi 1080 x 1920.
5. Drag “Water Render Texture” ke atribut Target-Texture pada “FX Camera”.
6. Buatlah 1 Canvas pada jendela “Hierarchy” dengan cara klik kanan > UI > Canvas. Atur atribut Render-Mode menjadi Screen-Space-Camera dan atribut Render-Camera menjadi “Main Camera”.
7. Di dalam Canvas tambahkan UI Image dengan cara klik kanan > UI > Image dan beri nama “Water Image”. Atur panjang dan lebarnya supaya menutupi keseluruhan layar dan atur mode stretch-nya sesuai dengan gambar.
8. Tambahkan skrip “Blur Controller” pada “FX Camera” dan atur atribut Blur-Shader menjadi “VueCode/BlurEffect”.
9. Pada folder “Materials”, Buatlah material dengan cara klik kanan > Create > Material dan berilah nama “Water Fluid Material”. Pada atribut shader ubah menjadi UnlitMod.
10. Pada material “Water Fluid Material”, ubah atribut Texture menjadi “Water Render Texture”. Kemudian atur atribut Main-Color, Alpha-Cutoff, Stroke-Alpha, dan Stroke-Color berturut-turut menjadi biru muda, 0.1, 0.3, dan biru tua.
11. Pada objek “Water Image”, ubah atribut Material menjadi “Water Fluid Material”.
12. Hasilnya akan terlihat seperti ini. Jika merasa kurang apik, coba perbesar iteration di “FX Camera”. Aku sendiri menggunakan iteration dengan nilai 4.
Selamat 🎉🎉, pada tutorial bagian pertama ini kita berhasil membuat pipa airnya…
Buat yang mau langsung download project bagian pertama ini bisa di-download di sini [Link]
Terima kasih sudah berkunjung di blog ini. Mohon maaf apabila ada penjelasan yang kurang dimengerti. Apabila ada pertanyaan atau masukan bisa tambahkan aku sebagai teman di [discord] dan di [telegram] atau bisa langsung komen di bawah.