Tutorial Membuat Game Seperti Flappy Bird dengan Construct 2

Tutorial Membuat Game Seperti Flappy Bird dengan Construct 2 – Pada kesempatan kali ini saya akan membuatkan tutorial membuat game sederhana.

Game ini mirip dengan game flappy bird. nah di tutorial ini saya menggunakan construct versi 2, kenapa harus versi 2 ? kok nggak 3?

karena di versi 3 hanya tersedia online dan itupun harus bayar kalau mau export projectnya, kalau di versi 2 kan kita bisa pakai trialnya. selain itu juga lebih ringan untuk digunakan.

oke, sedikit ilustrasi tentang game yang saya buat ini

Game yang saya beri nama “Flying Milos” ini merupakan game yang bergenre survival – adventure, ya seperti flappy bird. alur game ini sangat sederhana.

ada seseorang yang menggunakan pesawat untuk mendapatkan bintang sebanyak-banyaknya disaat mengendarai pesawat. disitu juga ada beberapa rintangan seperti batu es , yang jika mengenainya akan mati.

untuk memainkan game ini cukup simple. hanya klik pada layar untuk menjaga pesawatnya tetap jalan.

karakter “milos” sendiri merupakan seseorang yang berasal dari Rio De Janeiro, Brazil. Ia sangat terkenal di dunia meme karena video jogetannya yang sangat fenomenal, makanya dia sangat terkenal dalam dunia per-memean dan sering digumakan untuk bahan candaan.

kira-kira seperti ini alur pada game saya jika digambarkan dengan flowchart :

Persiapkan Alat dan Bahan untuk Membuat Game seperti Flappy Bird :

• Construct 2 | Download
• Gambar-gambar yang diperlukan | Download

Langkah Membuat Game Seperti Flappy Bird dengan Construct 2

• Buka Construct 2, kemudian CTRL+ N untuk membuat project baru dan pilih New empty project.
• Ubah layout size (layout properties),  margin (layout properties) dan windows size menjadi ukuran 1280, 720
• Masukkan backgroundnnya  dan atur position menjadi 640, 360 dan sizenya 1280, 720. ubah juga namanya
• Buat layer baru bernama milos, lalu drag and drop bahan pesawatnya ke layer tersebut
• Setelah itu klik kanan pada pesawatnya dan edit animation agar ada animasinya
• Atur loopnya menjadi yes dan juga ping-pongnya, coba preview dan pasti hasilnya gambar tersebut bergerak-gerak
• Tambah behaviors platform pada pesawat, edit gravity jadi 1000, default control no
• Lalu klik kanan dan insert new project, cari touch
• Pada event sheet 1 kita tambahkan event baru touch dengan cara add event > touch > On any touch
• Add action, pilih pesawatnya dan cari Set vector Y, atur menjadi -500

• Menambahkan Batu di bawah dan diatas

• Setelah itu buat layer baru bernama watu dan letakkan dibawah layer milos, lalu drag and drop gambar groundRock ke project kita dan edit position jadi 0, 685dan size jadi 1281, 721
• Duplikat gambar batunya dengan cara menahan CTRL + drag pada sampingnya. Lalu atur position jadi 1281, 685dan size jadi 1281, 721
• Kemudian ke Event Sheet dan tambahkan global variable baru dengan cara klik kanan> Add global variable. Namai menjadi speed dan atur initial value jadi 300
• Add eventpada System, pilik Every tick. Kemudian Add action > pilih groundRock> Set X , lalu atur menjadi X – speed*dt
• Lalu Add event> Pilih groundRock>  Compare X. atur Comparation menjadi Less or equal, X co-ordinate –1270
• Kemudian Add action> Pilih groundRock>  Set X atur menjadi 1270
• Kembali ke layout dan duplikat kedua groundRocknya taruh di atas dan atur position jadi 0, 34 serta sizenya 1280, -71

• Menambah rintangan Batu Es

• Kemudian tambahkan rintangan berupa batu es di bawah dan diatas, agar makin menantang. Drag & drop bahan rockIce dan rockIceDown atur posisi rockIceDown 1513, 597 dengan size 160, 354 dan rockIce 1107, 111 dengan size 160, 354
• Atur action es tersebut dengan men-duplicate action milik groundRock lalu replace object dengan es tadi. Lakukan 2 kali karena ada 2 batu es, agar jika milos terkena batu es tersebut akan mati.
• Beri event Compare X dengan comparation< less or equal X co-ordinate -100 dan add action juga pada kedua batu es tersebut, dan pilih destroy
• Setelah itu tambah event lagi berupa system pilih Every x second dan set ke 5
• Kita tambahkan action Create Object pada System pada event tersebut. Atur seperti gambar dibawah ini dan ulangi untuk kedua batu tersebut.
• Kemudian langkah selanjutnya Add another condition pada event tersebut dengan cara klik kanan > add > Add another condition. Lalu pilih system kemudian compare variable, atur seperti gambar dibawah

• Menambah Asap Pesawat

• Tambahkan asap pada pesawat tersebut dengan drag & drop 2 file bahan puffLarge(1) dan puffLarge(2) agar terlihat seperti pesawat yang sedang dioperasikan
• Tambahkan Behaviors Bullet, Fade, Rotate dan atur Bulletnya seperti pada gambar.
• Edit animation pada asap tersebut ubah speednya menjadi 0
• Kembali ke Event Sheet tambahkan event baru. Add event > System > Every X seconds. Atur Intervalnya menjadi 2
• Setelah itu tambahkan dulu sub-event pada event sebelumnya. Pilih System > Compare Variable, lalu pilih variablenya menjadi speed,Comparison Not equal to, Value 0
• Tambahkan action pada sub-event tadi, pilih planeGreen4 (peswatnya) > Spawn anothe object, kemudian pilih object puffLarge, layer “watu”, Image point 1
• Tambah action lagi pada sub-event nya, tapi kali ini pilih puffLarge, kemudian Set frame, atur Frame numbernya menjadi choose(0,1)

• Menambah Bintang sebagai Point

• Tambahkan bintang emas atau starGold nya dan atur posisi dan sizenya seperti dibawah
• Add action pada event yang sama seperti langkah no. 21-22, Add action > Create object taruh dibawahnya. Atur Object to create, Layer, X, Y nya seperti gambar
• Pada event rockIceDownkita duplicate saja dengan cara klik lalu seret event kebawahnya, kemudian Replace object menjadi starGold agar tidak perlu mengset starGold nya ke destroy karena sama dengan atasnya
• Setelah selesai mengubah dan menambah event diatas, artinya sekarang kita sudah berada pada event ke-10,

nah.. sampai disini game tersebut sudah bisa dimainkan, tetapi belum ada text score yang menampung angka dari variable score serta pesawatnya belum bisa mati ketika menabrak batu es atau jatuh, dan yang paling penting adalah menambah screen gameover dan menampilkan score tertinggi serta button untuk memulai kembali.

Lalu, Bagaimana Selanjutnya?

ikuti Tutorial Membuat Game Seperti Flappy Bird dengan Construct 2 Part II nya, karena jika saya lanjut dan dijadikan satu post akan sangat panjang sekali. silahkan klik link diatas untuk melanjutkan Part II nya.