Membuat game sederhana seperti Flappy Bird di MIT App Inventor adalah langkah awal yang menarik untuk memahami dasar-dasar pengembangan aplikasi. Bagi siswa, ini bukan hanya aktivitas kreatif, tetapi juga kesempatan untuk mengasah keterampilan berpikir logis dan mempelajari konsep-konsep pemrograman. Dengan antarmuka drag-and-drop yang intuitif, MIT App Inventor memungkinkan siapa saja, bahkan pemula, untuk menciptakan aplikasi tanpa perlu memiliki pengetahuan mendalam tentang coding.
Flappy Bird, sebuah game ikonik yang sederhana namun menantang, adalah pilihan sempurna untuk proyek pembelajaran. Melalui proyek ini, siswa dapat mempelajari elemen-elemen penting dalam pengembangan game, seperti desain antarmuka, pengendalian objek, dan logika permainan. Selain itu, proses pembuatannya juga melibatkan kreativitas, yang dapat memicu minat untuk mengeksplorasi lebih jauh dunia teknologi.
Artikel ini dirancang untuk membimbing Anda, baik sebagai pelajar yang ingin belajar maupun sebagai pembimbing yang mendampingi, dalam langkah-langkah membuat game Flappy Bird sederhana. Dengan panduan yang mudah dipahami dan disertai penjelasan di setiap tahapannya, Anda dapat dengan cepat menciptakan game yang menarik sambil memahami konsep-konsep penting dalam pengembangan aplikasi.
Siapkan laptop atau komputer Anda, pastikan koneksi internet yang stabil, dan bawalah semangat untuk belajar! Mari kita mulai petualangan ini dan wujudkan ide kreatif Anda menjadi sebuah game yang dapat dimainkan!
Apa Itu MIT App Inventor?
Sebelum itu mari kita ngulik sedikit apa itu MIT App Inventor, MIT App Inventor adalah suatu tools atau alat yang memungkinkan kita untuk mendesain, mengcoding, hingga mengeksport aplikasi yang kita buat, sebetulnya MIT App Inventor mirip mirip seperti tools lainnya seperti scratch, kodular, unity, dan sebagainya, MIT App Inventor memungkinkan Anda untuk mengimplementasikan hasil desain dan coding baik secara emulator, maupun companion.
Langkah Langkah Membuat Game Flappy Bird
Mari kita akan membahas buat game Flappy Bird pada MIT App Inventornya, tapi sebelum itu silahkan Anda download bahan untuk gambarnya dan juga, atau Anda juga bisa nyari gambar-gambar burung Flappy Bird dan juga pipanya digoogle dengan keyword misal "flappy bird sprite blue - opengameart" (ganti blue sesuai dengan warna burung yang diinginkan) atau saya sertakan saja linknya untuk mendownloadnya:
Dan ohya jika Anda tidak mempunyai cukup waktu solusinya download file aia, dengan file ini Anda tak perlu repot-repot membuatnya dari 0
Alat Yang Dibutuhkan Untuk Membuat Flappy Bird
- Perangkat Komputer/Laptop (Opsional, sebab pake hanphone juga bisa)
- Koneksi Internet
- Handphone Untuk Testing Aplikasinya
- Tools MIT App Inventor (Opsional)
Desain Layout Game Flappy Bird
Pertama-tama silahkan membuat projek baru dengan mengklik "New Project" yang terletak pada pojok kiri atas, kemudian beri nama aplikasi "Flappy Bird" maka halaman layout akan terbuka otomatis. Kemudian kita klik dahulu "Screen1" lalu scroll kebawah sampai menemukan "TitleVisible" silahkan Anda Uncentang, gunanya supaya nambah ruang layar.
Lalu silahkan Anda atur tampilan layarnya menjadi Landscape, dengan mengaturnya dibagian "ScreenOrientation", selanjutnya klik "Drawing & Animation" pada pallete lalu klik dan seret "Canvas" ke layar, lalu atur backgroundnya menjadi biru dan juga atur ukuran Canvasnya menjadi lebar "80 percent" dan panjang "Fill Parent".
 |
| Tampilan antarmuka pengguna (UI) dari aplikasi game buatan MIT App Inventor. Layar menunjukkan area bermain dengan latar biru muda dan sebuah sprite kecil di tengah. Ini bisa menjadi tahap awal game seperti Flappy Bird sebelum permainan dimulai. |
Kedua silahkan tambahkan player dan juga objeknya dengan cara klik "Drawing and Animation" kemudian cari "ImageSprite" klik dan seret itu kedalam canvas, kita membutuhkan 3 sprite, maka tambahkan 3 sprite kedalam canvas, kita akan menambahkan gambar burung dan pipa yang sudah Anda download sebelumnya, import semua gambar kedalam MIT App Inventor dengan mengklik "Upload File" pada tabel "Media" atau Drag & Drop saja gambarnya.
Kemudian klik sprite pertama, pada bagian height dan width atur menjadi 49 dan 50, lalu pada bagian "picture" silahkan pilih gambar yang pertama alias "frame-1.png" dan klik ok, klik sprite 2 atur height & width jadi 80, kemudian dibagian picture dan pilih "1.png" (ini sesuai gambar pipanya), begitupun sama dengan sprite 3, lakukan hal yang sama seperti sprite 2, atau Anda bisa menduplikatnya dan tinggal ganti gambarnya jadi "2.png".
Berikutnya kita akan menambahkan tombol reset game & Label, pertama klik "layout" dan pilih "HorizontalArrangement" klik dan seret kebawah canvas, atur height jadi 15 pencent dan widthnya "Fill Parent", lalu atur AlignHorizontal dan AlignVertical menjadi 3 & 2, kemudian silahkan klik "User Interface" dan klik dan seret button didalam "HorizontalArrangement" dan juga klik dan seret label kemudian beri nama "Score: 0".
Lalu silahkan Anda klik sensors, kemudian klik dan seret "clock" dua kali kedalam screen, setelah itu silahkan klik clocknya, Anda dapat mengubah namanya menjadi "waktuanim" dan "waktugame" agar tak ketuker, lalu dibagian "TimeInterval" atur menjadi 50 (untuk komponen clock waktuanim) dan atur jadi 20 (untuk komponen clock waktugame), selesailah untuk desain game Flappy Bird ini.
Coding Flappy Bird
Klik "Blocks" pada pojok kanan atas untuk memulai pengodean blok, pertama silahkan Anda buat dulu 3 variabel untuk menjadi dasar kita untuk menggerakan bird, score, dan tampilan gameover, dengan cara klik "Variables" kemudian klik dan seret "Initialize global" kemudian beri nama variabel 1 jadi "birdframe" ini akan menjadi dasar animasi bird dan kasih nilai 1, variabel kedua berinama gameover, dan kasih "nilai false", terakhir kasih score, dan kasih nilai 0.
 |
| Kodingan ini mengatur nilai awal untuk variabel global permainan. 'birdframe' diatur ke 1 untuk frame awal sprite, 'gameover' diatur ke false untuk memulai permainan dalam kondisi aktif, dan 'score' diatur ke 0 sebagai skor awal pemain. |
Kemudian kita akan menambahkan waktu animasi gambar dengan menggunakan komponen Clock. Anda bisa mengikuti saja kodingan dibawah dan pastikan setiap kodingannya diperhatikan, sebab ini kodingan dasar yang sangat penting agar bird bisa menganimasikan sebagaimana mestinya.
 |
| Pastikan bagian text "frame-" sesuai dengan gambar bird Anda, yang diurutkan misal, frame-1.png, Anda tak perlu memanggil banyak frame-1, cukup tambahkan variabel birdframe, maka setiap gambar bird frame 2,3,4,5,6 dst, akan terinisialisasi otomatis sesuai kecepatan dari komponen clock. |
Selanjutnya kita akan memprogram sprite pipa supaya pipanya bergerak dari kanan ke kiri, untuk itu kita memerlukan procedure (block ungu) untuk mengintegrasikan 2 pipa tersebut, pastikan Anda memerhatikan gambar codingan blok dibawah ini.
 |
| Kodingan ini mengatur posisi dan ukuran pipa dalam permainan, dengan tinggi yang bervariasi secara acak untuk memberikan tantangan. Lebar pipa tetap, dan posisi awalnya di sisi kanan layar (dan itu X dan Y yang mengaturnya). |
lalu selanjutnya kita akan menambahkan kodingan untuk skor ketika bird berhasil melewati pipa, perhatikan gambar kodingan dibawah ini.
 |
Kodingan ini mengatur logika permainan saat timer aktif. Elemen seperti ImageSprite1 bergerak ke bawah, dan pipa (atas dan bawah) bergerak ke kiri. Ketika posisi pipa mencapai ujung layar kiri, prosedur posisipipa dipanggil untuk menampilkan pipa baru, dan skor pemain bertambah 1, yang ditampilkan dalam label skor. |
Selanjutnya kita akan membuat tombol reset game menjadi berfungsi ketika tombol tersebut diklik maka game akan kembali seperti semula, pastikan perhatikan kodingan dibawah ini.
 |
| Kodingan ini mereset permainan dengan mengatur skor ke 0, membersihkan canvas, mengaktifkan timer animasi dan game, mengatur ulang posisi sprite, serta menonaktifkan status gameover. Prosedur ini memastikan permainan dimulai kembali dari kondisi awal. |
Selanjutnya, kita akan membuat tampilan gameover ketika player menabrak suatu objek, dan ketika muncul pesan gameover maka player berganti gambar menjadi gambar dead yang sudah kita upload sebelumnya, dibawah ini ialah kodenya.
 |
| Kodingan ini memproses kondisi akhir permainan dengan menonaktifkan timer, menampilkan teks 'Game Over' di tengah layar, dan memperbarui gambar sprite berdasarkan nilai frame saat ini. Prosedur ini menutup permainan secara visual dan logis. |
Kemudian kita akan membuat kodingan untuk gambar-gambar pipanya menjadi sebuah objek sungguhan, dengan kodingan dibawah ini maka player tak akan lagi nembus pipa, justru sebaliknya, ketika player nabrak maka akan memanggil prosedur game over dan game akan berhenti.
 |
| Blok pemrograman ini digunakan untuk mendeteksi tabrakan antara ImageSprite1 dan dua objek (pipabawah atau pipaatas). Jika terjadi tabrakan, maka prosedur gameover akan dipanggil. Blok ini umum digunakan dalam game mirip Flappy Bird yang dibuat dengan MIT App Inventor. |
Setelah itu kita akan menambahkan kodingan untuk kontrol playernya, kita akan buat seperti flappy bird asli, ketika birdnya diketuk maka akan terbang dan jika tidak diketuk maka akan jatuh kebawah, berikut ini ialah kodingannya.
 |
| Kodingan ini memungkinkan sprite bergerak ke atas sebesar 50 satuan saat Canvas disentuh, dengan syarat permainan belum berakhir. Interaksi ini memberikan kontrol langsung kepada pemain untuk menggerakkan elemen permainan. |
Terakhir kita akan mengatur tiga tindakan utama dalam permainan: memulai ulang saat tombol diklik atau layar diinisialisasi, dan memicu akhir permainan saat sprite mencapai tepi layar. Prosedur 'restart' dan 'gameover' mempermudah pengelolaan alur permainan.
 |
| Kodingan ini mengatur tiga tindakan utama dalam permainan: memulai ulang saat tombol diklik atau layar diinisialisasi, dan memicu akhir permainan saat sprite mencapai tepi layar. Prosedur 'restart' dan 'gameover' mempermudah pengelolaan alur permainan. |
Selesailah artikel cara membuat game flappy bird pada mit app inventor ini, jika Anda kurang faham, Anda bisa menonton tutorial versi videonya dibawah ini.
Video ini menjelaskan cara membuat game flappy bird dengan mit app inventor. Ikuti panduan lengkapnya untuk memahami langkah-langkahnya.
Terimakasih sudah berkunjung diwebsite ini, semoga Anda berhasil melakukan pembuatan game flappy birdnya, salam dan sampai jumpa diartikelku selanjutnya.
Posting Komentar