Dalam tutorial kali ini, kita akan belajar mengenai animasi pada App Inventor dengan membuat game sederhana “Bola Pantul” (Ball Bounce), dimana bola akan memantul pada batas layar ponsel setelah disapu dengan jari kita.
Tahap-tahapnya adalah:
Buat projek baru pada MIT App Inventor dan beri nama “BolaPantul”.
Pada Screen1 ini biarkan ShowStatusBar dan TitleVisible dicentang, dan beri Title = Bola Pantul
Dari laci Drawing and Animation, seret component Canvas dan lepaskan ke dalam penampil (viewer)
Ubah tinggi (Height) dan lebar (Width) Canvas menjadi “Fill Parent” (pastikan component Canvas dipilih sehingga properties-nya muncul), kalau suka BackgroundColor bisa diubah, misalnya Green.
Setelah Canvas dibentangkan di Screen1, kini kita dapat menambahkan Sprite Ball masih dari laci Drawing and Animation, seret component Ball tersebut dan lepaskan di atas Canvas. Untuk tampilan yang lebih menarik Ball bisa diubah warnanya di PaintColor, dan juga besarnya bisa diubah di Radius. Misalnya PaintColor: Blue dan Radius : 10.
Klik Ball1 untuk menampilkan block-block perintah Ball1, pilih blok perintah when Ball1.Flung seret dan lepaskan di area kerja. Blok perintah Flung ini mengacu pada gestur jari yang menyapu pada layar untuk melemparkan bola.
Klik lagi Ball1, gulung daftar blok ke atas untuk mencari blok perintah set Ball1.Heading to dan set Ball1.Speed to.
Ujung set Ball1.Heading to bisa diisi dengan angka 0 – 360 derajat. 0 artinya bola bergerak ke kanan dari layar, 90 derajat bola bergerak ke arah atas dari layar, dst.
Ujung set Ball1.Speed to bisa diisi dengan angka kecepatan dalam pixels/millisecond (piksel/milidetik), misalnya 4, 10, atau 100 (piksel/milidetik). Blok angka bisa diambil dari daftar blok Math yang paling atas.
Sekarang, bagaimana kalau arah dan kecepatan bola disesuaikan/sama dengan arah dan kecepatan gerak jari? Caranya ujung blok heading dan speed tidak diisi dengan angka, tapi dengan blok get speed dan get heading. Lalu dari mana kita mendapatkan blok-blok tersebut bila tidak bisa didapatkan dari daftar blok Ball1? Mudah saja kita tinggal mengapungkan mouse (tanpa meng-klik) di atas parameter “speed” dari handle when Ball1.Flung, seketika akan muncul menu pop up yang berisi blok get speed dan set speed to, kita klik dan seret get speed lalu pasangkan ke ujung set Ball1.Speed. Begitu juga untuk Heading.
Selengkapnya seperti di bawah ini:
Saatnya mengujicoba proyek ini pada emulator, namun sebaiknya pada smartphone agar kita bisa mempraktekan dengan jari kita.
Apa yang terjadi ketika bola dilempar (disapu) pada layar ponsel? Bola berhasil bergerak saat disapu jari, namun saat menyentuh sisi layar bola menempel di sana. Itu terjadi karena arah bola tidak berubah ketika menabrak sisi canvas. Agar bola memantul dari tepi layar, kita perlu memprogramnya dengan blok baru yang bernama “When Edge Reached” (bahasa Indonesia-nya kira-kira Ketika Menyentuh Tepi).
Klik laci Ball1, cari blok when Ball1.EdgeReached dari daftar, seret dan lepaskan di area kerja.
Kembali klik laci Ball1, cari blok call Ball1.Bounce dari daftar, seret dan pasangkan pada handle when Ball1.EdgeReached
Blok call Ball1.Bounce memerlukan argumen edge (tepi). Agar bola memantul saat menyentuh setiap tepi layar, maka argumen edge musti dipasangi blok get edge, yang bisa diambil di parameter edge pada handle when Ball1.EdgeReached.
Blok-blok selengkapnya seperti di bawah ini:
Ayo dites lagi.
Nah, sekarang saat bola “dilempar”, seharusnya bola akan memantul saat mencapai setiap tepi canvas.
Dari permainan simpel ini sobat bisa mengembangkan berbagai kemungkinan, seperti:
Tahap-tahapnya adalah:
Buat projek baru pada MIT App Inventor dan beri nama “BolaPantul”.
Pada Screen1 ini biarkan ShowStatusBar dan TitleVisible dicentang, dan beri Title = Bola Pantul
Dari laci Drawing and Animation, seret component Canvas dan lepaskan ke dalam penampil (viewer)
Ubah tinggi (Height) dan lebar (Width) Canvas menjadi “Fill Parent” (pastikan component Canvas dipilih sehingga properties-nya muncul), kalau suka BackgroundColor bisa diubah, misalnya Green.
Setelah Canvas dibentangkan di Screen1, kini kita dapat menambahkan Sprite Ball masih dari laci Drawing and Animation, seret component Ball tersebut dan lepaskan di atas Canvas. Untuk tampilan yang lebih menarik Ball bisa diubah warnanya di PaintColor, dan juga besarnya bisa diubah di Radius. Misalnya PaintColor: Blue dan Radius : 10.
Sprite adalah grafis bitmap dua dimensi yang menyatu dengan adegan yang lebih besar, misalnya dalam video game 2D.Selanjutnya buka Blocks Editor
Klik Ball1 untuk menampilkan block-block perintah Ball1, pilih blok perintah when Ball1.Flung seret dan lepaskan di area kerja. Blok perintah Flung ini mengacu pada gestur jari yang menyapu pada layar untuk melemparkan bola.
Klik lagi Ball1, gulung daftar blok ke atas untuk mencari blok perintah set Ball1.Heading to dan set Ball1.Speed to.
set Ball1.Heading to = blok perintah untuk arah gerak bolaPasangkan kedua blok di atas ke dalam handler when Ball1.Flung
set Ball1.Speed to = blok perintah untuk kecepatan bola
Ujung set Ball1.Heading to bisa diisi dengan angka 0 – 360 derajat. 0 artinya bola bergerak ke kanan dari layar, 90 derajat bola bergerak ke arah atas dari layar, dst.
Ujung set Ball1.Speed to bisa diisi dengan angka kecepatan dalam pixels/millisecond (piksel/milidetik), misalnya 4, 10, atau 100 (piksel/milidetik). Blok angka bisa diambil dari daftar blok Math yang paling atas.
Sekarang, bagaimana kalau arah dan kecepatan bola disesuaikan/sama dengan arah dan kecepatan gerak jari? Caranya ujung blok heading dan speed tidak diisi dengan angka, tapi dengan blok get speed dan get heading. Lalu dari mana kita mendapatkan blok-blok tersebut bila tidak bisa didapatkan dari daftar blok Ball1? Mudah saja kita tinggal mengapungkan mouse (tanpa meng-klik) di atas parameter “speed” dari handle when Ball1.Flung, seketika akan muncul menu pop up yang berisi blok get speed dan set speed to, kita klik dan seret get speed lalu pasangkan ke ujung set Ball1.Speed. Begitu juga untuk Heading.
Selengkapnya seperti di bawah ini:
Saatnya mengujicoba proyek ini pada emulator, namun sebaiknya pada smartphone agar kita bisa mempraktekan dengan jari kita.
Apa yang terjadi ketika bola dilempar (disapu) pada layar ponsel? Bola berhasil bergerak saat disapu jari, namun saat menyentuh sisi layar bola menempel di sana. Itu terjadi karena arah bola tidak berubah ketika menabrak sisi canvas. Agar bola memantul dari tepi layar, kita perlu memprogramnya dengan blok baru yang bernama “When Edge Reached” (bahasa Indonesia-nya kira-kira Ketika Menyentuh Tepi).
Klik laci Ball1, cari blok when Ball1.EdgeReached dari daftar, seret dan lepaskan di area kerja.
Kembali klik laci Ball1, cari blok call Ball1.Bounce dari daftar, seret dan pasangkan pada handle when Ball1.EdgeReached
Blok call Ball1.Bounce memerlukan argumen edge (tepi). Agar bola memantul saat menyentuh setiap tepi layar, maka argumen edge musti dipasangi blok get edge, yang bisa diambil di parameter edge pada handle when Ball1.EdgeReached.
Blok-blok selengkapnya seperti di bawah ini:
Ayo dites lagi.
Nah, sekarang saat bola “dilempar”, seharusnya bola akan memantul saat mencapai setiap tepi canvas.
Dari permainan simpel ini sobat bisa mengembangkan berbagai kemungkinan, seperti:
- mengubah warna bola saat kecepatan berubah atau saat mencapai tepi layar
- mengubah kecepatan bola agar melambat atau berhenti setelah dilempar
- memberi rintangan atau sasaran saat bola bergerak dan menabrak
- membuat papan yang bergerak untuk menahan bola, seperti game Pong
ReplyDeletedicoba keberuntungannya bersama dengan kami di ionqq*com
hanya dengan minimal deposit 20.000
ayooo buruan bergabung kami tunggu ya ^^