Happy Glass Clone Pt 2

. . .

Pada bagian kedua ini akan membahas cara membuat garis dan memprogram aturan permainannya.

Buat yang belum lihat bagian pertama, sok langsung ke sini [Link].

E. Menggambar Garis

1. Buat Canvas baru dengan cara klik kanan > UI > Canvas dan beri nama “Draw Canvas”. Kemudian dalam “Draw Canvas” buat UI Image baru dengan cara klik kanan > UI > Image dan beri nama “Touch Area”.

2. Posisikan “Touch Area” supaya menutupi keseluruhan layar dan atur mode strect-nya sesuai pada gambar ini.

3. Atur layer “Touch Area” menjadi “UI” dan ubah alpha color-nya menjadi 0.

4. buat material hitam di folder “Materials” dengan cara klik kanan > Create > Material karena line yang kita gambar memerlukan sebuah material hitam. Beri nama material tersebut “Line”. Ubah atribut shader pada material menjadi “unlit/color” dan ganti warna menjadi hitam.

5. Buat script baru pada folder “Scripts” dengan cara klik kanan > Create > C#-Script. Ubah nama skripnya menjadi “LineDrawer”. Klik 2x pada script tersebut dan salin program berikut ke dalam skrip yang baru dibuat. Skrip ini memiliki kegunaan untuk menggambar garis.

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using UnityEngine.EventSystems;// Required when using Event data.
using UnityEngine.Events;

public class LineDrawer : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
    public Material LineMat;

    private bool isDrawing = false;

    private GameObject LineGO;

    private LineRenderer LR;

    private int currentIndex = 0;

    private Vector3 pointerPosition;
    
    private Camera cam;


    // Start is called before the first frame update
    private void Start()
    {
        cam = Camera.main;
    }

    /// <note> 
    /// Untuk menambahkan Collider dan Rigidbody2D pada line yang akan dibuat
    /// </note>
    private void GenerateCollider(LineRenderer lr)
    {
        Mesh mesh = new Mesh();

        try
        {
            lr.BakeMesh(mesh, cam, false);
        }
        catch(System.Exception e)
        {
            return;
        }
        
        PolygonCollider2D collider = LineGO.AddComponent<PolygonCollider2D>();

        collider.pathCount = mesh.triangles.Length/3;

        for(int i=0; i<mesh.triangles.Length/3; i++)
        {
            Vector2[] points = new Vector2[3];

            for(int j=0; j<3; j++)
            {
                int index = mesh.triangles[i*3+j];
                points[j] = mesh.vertices[index];
            }

            collider.SetPath(i, points);
        }

        Rigidbody2D rb2d = LineGO.AddComponent<Rigidbody2D>();

        /// <note> Buat agar lebih berat </note>
        rb2d.mass = 10f;
    }

    //Do this when the mouse is clicked over the selectable object this script is attached to.
    public void OnPointerDown(PointerEventData eventData)
    {
        pointerPosition = Input.mousePosition;

        LineGO = new GameObject();

        LR = LineGO.AddComponent<LineRenderer>();

        LR.alignment = LineAlignment.TransformZ;
        
        LR.startWidth = 0.2f;

        LR.sharedMaterial = LineMat;

        LR.useWorldSpace = false;

        isDrawing = true;
    }

    //Do this when the mouse click on this selectable UI object is released.
    public void OnPointerUp(PointerEventData eventData)
    {
        isDrawing = false;

        GenerateCollider(LR);

        currentIndex = 0;
    }

    private void Update() 
    {
        if(isDrawing == false) return;

        Vector3 dist = pointerPosition - Input.mousePosition;

        float Distance_SqrMag = dist.magnitude;

        if(Distance_SqrMag <= 10f ) return;

        Vector3 worldPos = cam.ScreenToWorldPoint(pointerPosition);

        worldPos.z = 0;

        LR.SetPosition(currentIndex,  worldPos);

        pointerPosition = Input.mousePosition;

        currentIndex++;

        LR.positionCount = currentIndex + 1;

        worldPos = cam.ScreenToWorldPoint(pointerPosition);

        worldPos.z = 0;

        LR.SetPosition(currentIndex,  worldPos);
    }
}

6. Pada objek “Touch Area”, tambahkan komponen skrip “Line Drawer”. Masukkan Material “Line” ke attribut Line Mat.

7. Waktunya tes menggambar. Hasilnya akan mirip cuplikan di bawah ini.

F. Game Manager

1. Pertama desain level menjadi tantangan sederhana serupa posisi gelas dan pipa pada gambar di bawah ini.

2. Atur mass pada gelas menjadi 30 agar tidak gampang terseret air.

3. Atur mass pada prefab “water” menjadi 0.1 agar lebih ringan.

4. Pada folder “Scripts” buat skrip baru dan dengan cara klik kanan > Create > C#-Script. Ubah nama skripnya menjadi “GameManager”. 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
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameManager : MonoBehaviour
{
    private Pipe pipe;

    private LineDrawer ldrawer;

    // Update is called once per frame
    void Start()
    {
        pipe = FindObjectOfType<Pipe>();

        ldrawer = FindObjectOfType<LineDrawer>();

        ldrawer.drawCallback.AddListener(OnDrawSuccess);
    }

    // Start is called before the first frame update
    private void OnDrawSuccess()
    {
        ldrawer.gameObject.SetActive(false);

        pipe.StartPipe();
    }
}

5. Jika menemukan error tidak perlu panik, karena akan diperbaiki pada langkah-langkah berikutnya.

6. Pada skrip “Pipe”, ubah penamaan method start menjadi StartPipe.

1
2
3
4
5
6
7
8
9
10
11

...

    // Start is called before the first frame update
    // void Start()
    public void StartPipe()
    {
        StartCoroutine(WaitAndSpray(100, 0.05f));
    }

...

7. Pada skrip “LineDrawer” tambahkan 1 baris kode berikut di atas tepat sebelum fungsi start.

1
2
3
4
5
6
7
8
...
    public UnityEvent drawCallback = new UnityEvent();


    // Start is called before the first frame update
    private void Start()
    {
...

8. Masih pada skrip “LineDrawer”, tambahkan 1 baris kode tepat di atas sebelum tanda “}” / close-bracket fungsi GenerateCollider.

1
2
3
4
5
6
7
8
9
10
...

    private void GenerateCollider(LineRenderer lr)
    {
        ...

        drawCallback?.Invoke();
    }

...

9. Maka akan tampak seperti cuplikan berikut ketika di play.

Nah, sudah terlihat mekanik gimnya hanya perlu memberi aturan minimal air yang dibutuhkan untuk dianggap menang. Perlu dibuat sebuah trigger untuk menghitung air yang masuk.

10. Buat sebuah trigger sebagai child dari objek glass dengan cara klik kanan objek glass > 2D-Object > Sprites > Square dan beri nama “trigger”. Posisikan “trigger” mirip pada gambar di bawah ini dan beri warna merah.

11. Pada folder “Scripts”, buat skrip dengan nama “GlassTrigger”. Salin skrip berikut ke dalam skrip “GlassTrigger”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GlassTrigger : MonoBehaviour
{
    public int count;
    
    // when the water collide
    void OnTriggerEnter2D(Collider2D col)
    {
        count++;
    }
}

12. Tambahkan skrip “GlassTrigger” ke objek “trigger” dan tambahkan komponen box-collider. Centang juga atribut Is-Trigger.

13. Cobalah play dan amati jumlah water yang melewati trigger. Untuk kasus saya jumlah minimum water yang masuk minimal 40. Namun saya turunkan sedikit sejumlah 37 untuk memberikan kesempatan menang lebih tinggi.

14. Kemudian tambahkan teks sebagai tanda gelas terisi penuh. Pada objek “Draw Canvas” lakukan klik kanan > UI > Text-TextMeshPro dan beri nama “Win Text”. Atur juga tulisan menjadi berwarna hijau dan bertuliskan “Yay!!”.

15. Kemudian pada skrip “GameManager” tambahkan kode berikut untuk mengecek kemenangan.

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
...

    private GlassTrigger gtrigger;

    public GameObject win_text;

    // Update is called once per frame
    void Start()
    {

        ...

        gtrigger = FindObjectOfType<GlassTrigger>();

        win_text.SetActive(false);
    }


...


    void Update() 
    {
        /// <note> 37 is minimum number of water in the glass to win the game </note>
        if(gtrigger.count >= 37)
        {
            win_text.SetActive(true);
        }
    }

16. Kemudian pada atribut Win_text di objek “GameManager” direferensikan pada objek “Win Text” yang telah dibuat sebelumnya.

17. Coba play dan hasilnya akan terlihat sebagaimana cuplikan di bawah ini.

Dan itulah akhir dari tutorial membuat gim serupa Happy Glass. Semoga membantu.

Buat yang mau langsung download project bagian final ini bisa di-download di sini [Link]

Terima kasih sudah berkunjung di blog ini. Apabila ada pertanyaan atau masukan bisa tambahkan aku sebagai teman di [discord] dan di [telegram] atau bisa langsung komen di bawah.