1. 1
Fajar Baskoro | www.indie-school.net
MUDAH
MEMPROGRAM GAME LANGSUNG DI
SMARTPHONE DENGAN POCKETCODE
2. 2
Daftar Isi
1 Instalasi Aplikasi PocketCode................................................................................................................4
1.1 Instalasi PocketCode.....................................................................................................................5
1.2 Instalasi PocketPaint.....................................................................................................................8
2 Mengenal Pocket Code.......................................................................................................................12
2.1 Interface, antar muka interaksi Pocket Code.............................................................................12
2.2 Struktur Aplikasi..........................................................................................................................16
2.3 Daftar Instruksi Blok....................................................................................................................17
3 Memulai PocketCode..........................................................................................................................23
4 Memahami Kode Pocket Code............................................................... Error! Bookmark not defined.
4.1 Mengubah Ukuran ......................................................................... Error! Bookmark not defined.
4.2 Mengubah Ukuran ......................................................................... Error! Bookmark not defined.
4.3 Memainkan Suara.......................................................................... Error! Bookmark not defined.
4.4 Mengenal Sensor ........................................................................... Error! Bookmark not defined.
4.5 Parameter Broadcast ..................................................................... Error! Bookmark not defined.
4.6 Deteksi Collison.............................................................................. Error! Bookmark not defined.
4.7 Mengganti tampilan....................................................................... Error! Bookmark not defined.
4.8 Pergeseran ..................................................................................... Error! Bookmark not defined.
4.9 Mengatur Dialog ............................................................................ Error! Bookmark not defined.
4.10 Mengatur Arah............................................................................... Error! Bookmark not defined.
4.11 Mengatur Nilai Variabel................................................................. Error! Bookmark not defined.
4.12 Deteksi wajah................................................................................. Error! Bookmark not defined.
5 Gerak berdasarkan kemiringan - Inclination.......................................... Error! Bookmark not defined.
6 Mengantrul Kontrol Tombol .................................................................. Error! Bookmark not defined.
7 Mengenal Sensor Grafity ....................................................................... Error! Bookmark not defined.
8 Membuat Game Pong............................................................................ Error! Bookmark not defined.
9 Game Star War....................................................................................... Error! Bookmark not defined.
3. 3
10 Membuat Game Whack A Mole......................................................... Error! Bookmark not defined.
11 Membuat Game Flappy Bird.............................................................. Error! Bookmark not defined.
12 Membuat Game Galaxy War.............................................................. Error! Bookmark not defined.
13 Mengelola Aset Game Alice Wonderland.......................................... Error! Bookmark not defined.
14 Mendeteksi Tabrakan Obyek............................................................. Error! Bookmark not defined.
15 Mengatur Gerakan Horisontal Background....................................... Error! Bookmark not defined.
16 Flying Aliens ....................................................................................... Error! Bookmark not defined.
17 Teknik Publikasi dan Download Game............................................... Error! Bookmark not defined.
4. 4
1 Aplikasi PocketCode
Pocket Code adalah aplikasi visual programming yang digunakan untuk membuat game yang
berjalan di Handphone ataupun Tablet yang mempunyai sistem operasi Android. Dengan memakai
Pocket Code kita bisa membuat game dan mengendalikan perangkat sensor yang ada pada
Handphone atau Tablet Android kita.
Gambar 1-1 Antarmuka aplikasi Pocket Code
Pocket Code dikembangkan oleh Catrobat digunakan untuk membuat program langsung dengan
smartphone tanpa menggunakan komputer. Pocket code menggunakan papan block seperti Lego
untuk menyusun instruksi program. Papan block ini disebut dengan Brick. Dengan menggabungkan
papan brick-brick ini kita bisa membuat Game ataupun animasi.
Mungkin ada pertanyaan kenapa kita butuh program. Kita bisa melihat kehidupan di sekitar
sekarang, baik mesin, komputer maupun smartphone semua butuh programming. Semenjak
handphone dan internet digunakan kemampuan untuk memprogram sangat dibutuhkan dan
penting.Banyak pekerjaan membutuhkan kemampuan memprogram atau minimal memahami logika
pemrograman.
5. 5
Belajar memprogram seperti belajar bahasa asing. Dalam belajar membutuhkan praktek secara
kontinu. Sekali bisa atau memahami konsepnya maka tidak ada yang sukar ketika harus
menggunakan bahasa program yang lain.
Untuk memulai menggunakan aplikasi PocketCode :
1.1 Instalasi PocketCode
1. Buka Smartphone, kemudian pilih Playstore
2. Klik Search ketikkan PocketCode
6. 6
3. Pilih dan tekan tombol Install
4. Tekan tombol Accept
8. 8
1.2 Instalasi PocketPaint
Setelah sukses instalasi PocketCode kemudian coba digunakan dengan memilih menu New.
Kemudian tambahkan background untuk memberikan gambar latar belakang.
1. Pilih tombol + untuk menambahkan gambar, kemudian tekan Draw Image
9. 9
2. Pilih Yes untuk instalasi PocketPaint
3. Tekan tombol Install
12. 12
2 Mengenal Pocket Code
Pocket Code dirancang untuk anak-anak dan remaja sehingga tidak menggunakan script bahasa
pemrograman seperti Java atau C, melainkan menggunakan program khusus bernama “Cantrobat”
yang divisualisasikan menyerupai permainan Lego. Untuk membuat program, pengguna cukup
menumpuk blok-blok program yang telah disediakan. Misalnya pada blok pertama berisi script
“When program started”, kemudian pada blok selanjutnya berisi script “Change size by 10”. Blok
pertama merupakan perintah yang dijalankan ketika program mulai, kemudian blok kedua
merupakan perintah selanjutnya setelah program mulai yaitu mengubah ukuran menjadi 10.
Aplikasi ini menyediakan contoh-contoh program berupa game yang bisa didownload terlebih
dahulu, seperti game Galaxy War, Tic-Tac-Toe, dan Air Flight. Program-program tersebut bisa
dimodifikasi dan bisa dimainkan langsung melalui smartphone.
2.1 Interface, antar muka interaksi Pocket Code
Halaman awal dari Pocket Code berisi Program, Help, Explore dan fasilitas Upload program.
Gambaran awal Pocket Code bisa dilihat di bawah ini:
Gambar 2-1 Halaman muka aplikasi Pocket Code
Pada bagian pertama di Halaman Muka ada menu Continue, yang memfasilitasi User untuk
melanjutkan pekerjaan program yang terakhir dibuat. Setelah di klik User bisa melanjutkan
13. 13
aktivitasnya menambah ataupun menghapus blok program, memodifikasi parameter, ataupun
mengubah gambar sprite.
Bagian kedua adalah menu New. Menu New digunakan oleh User untuk memulai membuat program
baru.Setelah diklik kita menuliskan nama aplikasi baru dan memilih bentuk orientasi pada peralatan
mobile, baik vertikal atau horisontal.
Gambar 2-2 Membuat program baru dengan Pocket Code
Bagian ketiga adalah Program. Setelah diklik tombol Program maka akan terbuka list atau daftara
aplikasi yang telah dibuat dengan menggunakan aplikasi Pocket Code.
14. 14
Gambar 2-3 Menu Help untuk melihat manual penggunaan aplikasi
Bagian keempat Help, digunakan untuk melihat petunjuk ataupun penggunaan manual aplikasi.
Setelah klik akan menuju Browser untuk membuka alamat https://share.catrob.at/pocketcode/help.
Pada bagian ini user dapat mencari Video overview apa itu Pocket Code, trik untuk membuat game,
dan beberapa tutorial petunjuk penggunaan aplikasi Pocket Code.
Gambar 2-4 Contoh manual dari Help
15. 15
Bagian kelima adalah menu Explore. Menu Explore digunakan untuk membuka aplikasi-aplikasi yang
telah dibuat oleh komunitas pemakai Pocket Code. Aplikasi yang ada bisa dibuka di
https://share.catrob.at/pocketcode/. Aplikasi yang tersedia bisa diremix bisa dibuat ataupun dipakai
ulang sehingga memudahkan User untuk mempelajari.
Gambar 2-5 Contoh Program yang dibuat dengan Pocket Code
Pada bagian akhir terdapat menu Upload. Ketika User selesai membuat program dan ingin berbagi
kepada anggota komunitas Pocket Code yang lain bisa menggunakan menu Upload ini. Sebelum bisa
melakukan Upload User harus mempunya akun dan memasukkan password.
16. 16
Gambar 2-6 Upload program Pocket Code
2.2 Struktur Aplikasi
Struktur aplikasi pada Pocket Code terbagi dalam dua bagian utama. Bagian-bagian itu adalah :
1. Background, background berisi gambar latar aplikasi. Biasanya berupa gambar statis.
Gambar 2-7 Background, gambar latar belakang aplikasi
2. Objek, bagian dari program yang akan diatur gerakan ataupun reaksinya. Objek ini terdiri dari
17. 17
Gambar 2-8 Script kode Pocket Code
2.3 Daftar Instruksi Blok
Instruksi atau perintah pocket code dibuat dengan penggambaran model Lego. Masing-masing
perintah dalam papan kotak blok-blok yang berbeda warna dan bentuknya. Keseluruhan blok ada
delapan kategori, Event, Control, Motion, Sound, Looks, Variabel, Pen, Data, dan My Bricks.
Perintah-perintah kode instruksi Pocket Code
Gambar 2-9 Urutan blok instruksi dalam bentuk batang berwarna.
18. 18
Event
Blok event yang ada di dalam kategori ini mewakili instruksi yang ditimbulkan oleh event. Event
adalah kejadian seperti ketika pengguna mengetuk layar, Saat program dimulai, kapan pesan
diterima atau ketika sebuah variabel berubah nilai, dll.
Control
Dalam setiap blok kategori ini melambangkan instruksi atau perintah untuk melakukan kontrol atau
kendali program selama eksekusi aplikasi berlangsung. Instruksi ini meliputi menunggu beberapa sat,
melakukan perulangan, mengecek variabel dengan nilai tertentu, dll
19. 19
Motion
Blok motion digunakan untuk instruksi yang mengatur gerakan dan mengatur posisi X,Y gambar atau
obyek lain di layar. Selain itu dalam blok motion bisa juga digunakan untuk memutar obyek gambar
dalam sudut putaran tertentu.
20. 20
Sound
Jika aplikasi game ataupun animasi yang menggunakan pocket code ingin ditambahkan musik
ataupun suara maka bisa menggunakan blok Sound. Dalam blok Sound bisa dipakai merekam,
memainkan, atau pun mengubah besar kecilnya volume suara.
21. 21
Looks
Blok Look digunakan untuk instruksi yang mengubah tampilan gambar. Pengguna pocket code dapat
mengubah ukuran obyek gambar, posisi obyek layar, ataupun mengubah warna tampilan. Selain itu
Looks juga digunakan untuk mengatur kapan gambar ditampilkan ataupun disembunyikan.
22. 22
Data
Blok Data digunakan untuk mengelola nilai variabel dan sumber daya yang terlibat dalam aplikasi
mulai set variabel, ubah variabel, show variabel, ataupun hide variabel.
23. 23
3 Memulai PocketCode
Pada contoh pertama ini kita akan membuat aplikasi game sederhana dengan menggunakan aplikasi
PocketCode.
Langkah-langkahnya adalah:
No Tahapan Gambar
1 Buka Aplikasi Pocket Code pada Smartphone
2 Tap bagian menu New
24. 24
No Tahapan Gambar
3 Tuliskan nama program misalnya Game1
kemudian Tap tombol OK
4 Pilih orientation nya, dalam bentuk Portrait
Vertikal ataupun Landscape kemudian Tap OK
5 Tap tombol Background untuk menambahkan
latar belakang .
25. 25
No Tahapan Gambar
6 Kemudian Tap gambar mata yang ada
tulisannya Backgrounds
7 Tap tanda + untuk menambahkan background
8 Pilih Media Library
26. 26
No Tahapan Gambar
9 Pilih salah satu gambar
10 Hingga di bagian background muncul seperti
tampak di samping.
11 Kembali ke komponen background dan object
awal
27. 27
No Tahapan Gambar
12 Tap tanda + untuk menambahkan Object baru
13 Tap Media Library
14 Pilih salah satu Gambar yang diinginkan misal
Burung
28. 28
No Tahapan Gambar
15 Lengkapi Burung dengan sayap terbuka dan
sayap tertutup
16 Rename dengan memilih menu di kanan atas
jika ingin mengganti nama
17 Kembali ke Komponen awal
