Tutorial Construct 2: Membuat Game Edukasi "Susun"

 1. Persiapan Aset dan Konsep

1. Tentukan konsep game — misalnya: “Menyusun Nama Hewan”.

2. Siapkan aset grafis seperti:

   • Gambar hewan (anjing, ayam, sapi, dll)

   • Huruf-huruf pembentuk nama hewan

   • Latar belakang (background)

   • Elemen UI (tombol, teks, ikon, timer)

3. Aset dapat dibuat sendiri atau diunduh dari situs seperti freepik.

4. Pastikan semua aset sudah diedit dan disimpan dalam format PNG transparan.

2. Membuat Proyek Baru di Construct 2

1. Buka Construct 2 (versi yang digunakan di video: 2.79).

2. Klik File → New Project.

3. Pilih resolusi Landscape (720p).

4. Atur pengaturan dasar proyek:

   • Name: Susun Nama Hewan

   • Description: Game menyusun nama hewan berdasarkan huruf acak

   • Author: (isi dengan nama pembuat)

   • Email: (opsional)

5. Untuk preview cepat, aktifkan NW.js agar game bisa dijalankan tanpa browser.

3. Menyusun Layout Awal

1. Buat layout baru, ubah namanya menjadi Game_1.

2. Tambahkan layer-layer berikut:

   • Background

   • Game

3. Masukkan gambar latar belakang ke layer Background.

4. Sesuaikan ukuran dan posisi sesuai resolusi layar.

 4. Menambahkan Aset Hewan dan Huruf

1. Import semua gambar hewan ke layout (anjing, ayam, sapi, dll).
   Gunakan ukuran seragam, misalnya 580×750 px.

2. Buat sprite huruf-huruf pembentuk nama hewan.

   • Contoh: huruf S, A, P, I untuk kata “SAPI”.

   • Setiap huruf dibuat sebagai sprite terpisah.

3. Tambahkan instance variable pada setiap huruf:

   • setX dan setY: untuk menyimpan posisi awal huruf.

   • idHuruf: untuk memberi identitas pada tiap huruf.

 5. Membuat Sistem Drag and Drop

1. Tambahkan behavior "Drag & Drop" pada huruf (sprite huruf).

2. Buat event system:

   • On Drag Start: huruf berpindah ke lapisan paling atas (agar tidak tertutup objek lain).

   • On Drop:

     • Jika posisi benar → huruf menetap di tempat yang tepat.

     • Jika posisi salah → huruf kembali ke posisi awal (setX, setY).

3. Untuk mengatur posisi kembali, gunakan event:

   Set position to (self.setX, self.setY)
   

 6. Menambahkan Logika Kecocokan Huruf

1. Buat objek target drop (area tempat huruf dijatuhkan).

2. Beri variable:

   • idHuruf

   • terisi (boolean, default = false)

3. Buat kondisi Overlapping:

   • Jika huruf drag bersinggungan dengan target drop

   • Dan idHuruf keduanya sama

   • Maka huruf menempel di target, terisi = true

4. Jika tidak sesuai → huruf kembali ke posisi awal.

 7. Menambahkan Elemen Pendukung Game

1. Tambahkan teks “Susunlah huruf menjadi kata yang benar”.

2. Tambahkan tampilan Level dan Timer di bagian atas layar.

3. Buat tampilan skor atau pesan “Benar/Salah” sesuai kebutuhan.

4. Buat event tambahan:

   • Jika semua terisi = true → tampilkan pesan “Kata benar!” dan lanjut ke level berikutnya.

8. Pengujian dan Finishing

1. Jalankan game dengan tombol Run Layout (F5).

2. Pastikan:

   • Huruf bisa digeser dan kembali ke posisi awal bila salah.

   • Jika huruf disusun benar, posisi terkunci di tempatnya.

3. Tambahkan efek visual atau animasi kecil saat huruf berhasil disusun.

4. Simpan proyek dan export dalam format HTML5 atau NW.js.