UNESA
ktp@unesa.ac.id

Tutorial Construct 2: Membuat Efek Zoom dan Hover pada Tombol

Tutorial Construct 2: Membuat Efek Zoom dan Hover pada Tombol

- kategori Opini 79 Views

Langkah 1: Membuat Proyek dan Desain Tombol

  1. Buka Construct 2, lalu buat project baru.

  2. Buat layout baru, beri nama misalnya MenuUtama.

  3. Tambahkan sprite objek tombol:

    • Klik Insert New Object → Sprite.

    • Buat desain tombol (misalnya tombol “Start” atau “Play”).

    • Gambar bisa dibuat langsung di editor bawaan Construct atau menggunakan software seperti Photoshop/Canva.

  4. Atur posisi dan ukuran tombol agar proporsional di tengah layar.

Langkah 2: Membuat Dua Frame untuk Efek Hover

  1. Buka sprite tombol yang sudah dibuat.

  2. Di animation editor, buat dua frame:

    • Frame 1: Tampilan tombol normal.

    • Frame 2: Tampilan tombol saat disentuh (hover).

  3. Untuk membedakan efeknya:

    • Buat Frame 2 sedikit lebih terang atau lebih pucat agar terlihat perubahan saat disentuh.

  4. Beri nama animasi misalnya “ButtonHover”, dan simpan.

Langkah 3: Menambahkan Objek Input (Touch)

  1. Kembali ke layout utama.

  2. Klik kanan → Insert New Object → Input → Touch.
    Ini berguna agar tombol bisa merespons sentuhan (baik di PC maupun perangkat mobile).

Langkah 4: Membuat Event Hover

  1. Buka Event Sheet (misalnya Event_Menu).

  2. Tambahkan event baru:

    • Condition: Touch → On Touched Object → pilih tombol

    • Action: Tombol → Set Frame → 1 (berarti ganti ke frame ke-2 karena perhitungan dimulai dari 0)

  3. Tambahkan event Else:

    • Action: Tombol → Set Frame → 0 (kembali ke tampilan awal setelah dilepas)

  4. Hasilnya: ketika tombol disentuh, tampilannya berubah seperti efek hover/tekan.


 Langkah 5: Menambahkan Efek Zoom Saat Diklik

  1. Masih di Event Sheet, tambahkan event baru:

    • Condition: Touch → On Touched Object → pilih tombol

    • Action: Tombol → Set Scale → 1.5
      (nilai 1.5 berarti membesarkan ukuran tombol 150%)

  2. Tambahkan tunda (Wait) agar efek zoom terlihat alami:

    • Action: System → Wait → 0.2 detik

  3. Tambahkan action berikutnya untuk mengembalikan ukuran tombol:

    • Tombol → Set Scale → 1.0

  4. Sekarang tombol akan membesar sebentar lalu kembali ke ukuran semula ketika diklik.

Langkah 6: Mengatur Urutan Efek

  1. Pastikan urutan event seperti berikut:

    • Event 1: Mengatur hover (frame 0 → frame 1 → frame 0)

    • Event 2: Mengatur zoom (scale 1 → 1.5 → 1)

  2. Jika ingin efek hover dan zoom terjadi bersamaan, bisa gabungkan dalam satu event:

    Touch → On Touched Object (Tombol)
    → Tombol: Set Frame to 1
    → Tombol: Set Scale to 1.5
    → System: Wait 0.2
    → Tombol: Set Scale to 1
    → Tombol: Set Frame to 0

Langkah 7: Pengujian

  1. Jalankan proyek dengan menekan F5 atau klik Run Layout.

  2. Uji efeknya:

    • Saat tombol disentuh, tampilannya berubah (hover).

    • Saat diklik, tombol sedikit membesar lalu kembali ke semula (zoom).

  3. Jika terlalu cepat atau lambat, ubah durasi pada action Wait (misalnya 0.1–0.3 detik).

Hasil Akhir

Efek Hover: Tombol berubah warna atau tampilan saat disentuh.
Efek Zoom: Tombol membesar sedikit lalu kembali normal saat diklik.
Efek ini bisa diterapkan pada berbagai tombol — misalnya Start, Exit, atau Next Level — untuk mempercantik tampilan game.



Source: Youtube jfakbar_

Scroll to Top