Tutorial Construct 2: Cara Membuat Loading dengan Tiled Background
Langkah 1: Membuat Proyek Baru
-
Buka Construct 2.
-
Klik File → New → New Empty Project.
-
Setelah terbuka, ubah ukuran layout menjadi 1280 x 720 (ukuran standar layar HD).
-
Pastikan Window Size juga disamakan, yaitu 1280 x 720.
Langkah 2: Menambahkan Objek Loading
-
Klik kanan pada layout, pilih Insert New Object → Sprite.
-
Beri nama BG_Loading.
-
Masukkan gambar background loading (misalnya file
BG_Loading.png). -
Atur posisi gambar agar berada di tengah layout.
-
Jika ingin lebih presisi, aktifkan View → Snap to Grid agar posisi objek mudah disejajarkan.
Langkah 3: Membuat Folder dan Layer
-
Buat layer baru bernama
Background. -
Masukkan objek BG_Loading ke dalam layer ini.
-
Buat lagi layer baru bernama
LoadingBar. -
Layer
LoadingBarakan digunakan untuk animasi bar loading.
Langkah 4: Membuat Tiled Background (Bar Loading)
-
Klik kanan di layout → Insert New Object → Tiled Background.
-
Beri nama Loading_Bar.
-
Masukkan gambar kecil untuk pola bar (misalnya
bar_tile.png). -
Letakkan di bagian bawah tengah layar.
-
Tarik gambar ke kanan agar terlihat berulang (efek tiled).
-
Atur agar bar berada di tengah layar dengan rapi.
Langkah 5: Menambahkan Event Loading
-
Buka Event Sheet.
-
Tambahkan Event → System → On Start of Layout.
-
Tambahkan Action → Loading_Bar → Set Width to Loading_Bar.Width + 2.
-
Artinya, setiap frame lebar bar akan bertambah (efek progress).
-
-
Tambahkan System → Every tick untuk mengulang animasi.
-
Atur nilai pertambahan (+2) sesuai kecepatan yang diinginkan.
-
Semakin besar nilai, semakin cepat bar terisi.
-
Langkah 6: Menambahkan Kondisi Selesai Loading
-
Tambahkan Condition → Loading_Bar → Compare Width.
-
Set menjadi Equal to 100% (atau nilai maksimal bar).
-
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
-
Klik Run Preview (F5) untuk mencoba.
-
Lihat animasi loading bar apakah berjalan halus.
-
Jika terlalu cepat atau lambat, ubah nilai pertambahan width-nya.
-
Kamu bisa menambahkan efek suara atau teks “Loading…” untuk mempercantik tampilan.