Construct 2 - 2 Cars Clone

March 13, 2017 in #Coding #Construct 2 | | | Share on Google+

Dalam tutorial kali ini, kita akan membuat clone game 2 Cars milik Ketchapp.

Bagi yang belum tau, di sini kita akan mengendalikan dua buah mobil yang berjalan bersamaan. Tugas kita adalah menjaga agar kedua mobil ini tidak menabrak rintangan yang ada.



Persiapan

1.) Layout

Buat tampilan layout kira kira seperti gambar di bawah. Kotak bagian atas adalah rintangannya, sedangkan yang di bawah adalah mobil yang kita control.

2.) Behavior

  • Untuk rintangan (obstacle), berikan behavior bullet.
  • untuk mobil, berikan dua behavior LiteTween. LiteTween yang pertama set Tweened Property = Position, Target = 96,448 (disesuaikan sendiri). LiteTween kedua set Tweened Property = Angle dan Target = 100,100

LiteTween ini digunakan untuk animasi perpindahan lajur mobil.

Berikan juga instance variable currentRoad (Text) pada mobil untuk mengetahui saat ini berada pada lajur kiri atau kanan. Set nilai awalnya right untuk mobil biru, dan left untuk mobil merah.



Membuat Obstacle

Ada empat pilihan lajur yang dapat dibuat, karena setiap mobil punya dua lajur (kalau gak dong mainkan dulu gamenya). Kita gunakan Function CreateObstacle().

3.) Spawn

Untuk setiap obstacle pada masing-masing lajur, pilih mau lajur kiri atau kanan. Jika sudah ditentukan (kiri atau kanan), spawn pada posisi (X,Y) yang sudah ditentukan sebelumnya.

Mungkin ada yang belum familiar dengan maksud tanda '?' di dalam action nya. Sebenarnya ini bentuk if-else yang dipersingkat (sehingga gak perlu buat sub event).

Misalkan action create at position (position = 'left' ? 96 : 224, -32), maksudnya begini :

  • jika position = 'left', create object pada koordinat (96, -32)
  • jika position = 'right', create object pada koordinat (224, -32)


Menggerakkan Mobil

4.) Pindah jalur

Ketika berpindah lajur, mobil akan bergerak sebanyak 128 piksel ke kiri atau kanan (tergantung nilai currentRoad). Pada saat itu, mainkan animasi LiteTween. Karena ada dua, perhatikan baik baik animasi LiteTween mana yang diubah.

Untuk mendeteksi mobil mana yang akan berubah jalur, digunakan kondisi Touch.X < WindowWidth / 2 dan Touch.X > WindowWidth / 2. Jika nilai touch lebih kecil, maka yang digerakkan mobil biru, dan sebaliknya.

5.) Animasi berhenti belok

Animasi LiteTween tadi digunakan untuk berbelok, lalu supaya kembali berjalan lurus gunakan event di bawah.

Hasilnya seperti GIF di bawah.



Scoring

Tidak ada hal yang baru, cuma scoring standar.

--

Download Source Code

File .capx tutorial ini dapat di download di link
di sini.



Pengen Belajar Lebih Dalam

Dapatkan tutorial dasar Construct 2 dengan membeli buku 'Bikin Game Tanpa Coding dengan Construct 2' di toko buku terdekat.

March 13, 2017 in #Coding #Construct 2 | | | Share on Google+