Tutorial Construct 2: Cara Membuat Loading dengan Tiled Background

Langkah 1: Membuat Proyek Baru

1. Buka Construct 2.

2. Klik File → New → New Empty Project.

3. Setelah terbuka, ubah ukuran layout menjadi 1280 x 720 (ukuran standar layar HD).

4. Pastikan Window Size juga disamakan, yaitu 1280 x 720.

Langkah 2: Menambahkan Objek Loading

1. Klik kanan pada layout, pilih Insert New Object → Sprite.

2. Beri nama BG_Loading.

3. Masukkan gambar background loading (misalnya file BG_Loading.png).

4. Atur posisi gambar agar berada di tengah layout.

5. Jika ingin lebih presisi, aktifkan View → Snap to Grid agar posisi objek mudah disejajarkan.

Langkah 3: Membuat Folder dan Layer

1. Buat layer baru bernama Background.

2. Masukkan objek BG_Loading ke dalam layer ini.

3. Buat lagi layer baru bernama LoadingBar.

4. Layer LoadingBar akan digunakan untuk animasi bar loading.

Langkah 4: Membuat Tiled Background (Bar Loading)

1. Klik kanan di layout → Insert New Object → Tiled Background.

2. Beri nama Loading_Bar.

3. Masukkan gambar kecil untuk pola bar (misalnya bar_tile.png).

4. Letakkan di bagian bawah tengah layar.

5. Tarik gambar ke kanan agar terlihat berulang (efek tiled).

6. Atur agar bar berada di tengah layar dengan rapi.

Langkah 5: Menambahkan Event Loading

1. Buka Event Sheet.

2. Tambahkan Event → System → On Start of Layout.

3. Tambahkan Action → Loading_Bar → Set Width to Loading_Bar.Width + 2.

   • Artinya, setiap frame lebar bar akan bertambah (efek progress).

4. Tambahkan System → Every tick untuk mengulang animasi.

5. Atur nilai pertambahan (+2) sesuai kecepatan yang diinginkan.

   • Semakin besar nilai, semakin cepat bar terisi.

Langkah 6: Menambahkan Kondisi Selesai Loading

1. Tambahkan Condition → Loading_Bar → Compare Width.

2. Set menjadi Equal to 100% (atau nilai maksimal bar).

3. Jika kondisi terpenuhi, tambahkan Action → System → Go to Layout “MainMenu”.

   • Artinya, ketika loading selesai, otomatis pindah ke tampilan menu utama.

Langkah 7: Uji dan Sesuaikan

1. Klik Run Preview (F5) untuk mencoba.

2. Lihat animasi loading bar apakah berjalan halus.

3. Jika terlalu cepat atau lambat, ubah nilai pertambahan width-nya.

4. Kamu bisa menambahkan efek suara atau teks “Loading…” untuk mempercantik tampilan.