Tutorial Scratch

Yudi Wibisono (yudi@upi.edu)

Pendidikan Ilmu Komputer Universitas Pendidikan Indonesia (cs.upi.edu)
versi: Des 2011

http://creativecommons.org/licenses/by-nc-sa/3.0/
Modul ini bebas dicopy, didistribusikan , ditransmit dan diadaptasi/modifikasi/diremix dengan syarat tidak untuk komersial, pembuat
asal tetap dicantumkan dan hasil modifikasi dishare dengan lisensi yang sama.

Pendahuluan
Scratch adalah program untuk membuat animasi, cerita interaktif, game, musik dan
seni. Tujuan lain Scratch adalah memperkenalkan konsep pemrograman dan matematika
kepada anak secara mudah dan menyenangkan.

Modul ini diarahkan untuk guru yang ingin mengetahui sekilas tentang pemrograman
atau ingin menjadikan Scratch sebagai alat untuk mengajarkan tentang pemrograman
kepada muridnya.

Scratch dirancang agar anak dapat berkolaborasi menggunakan internet. Project dapat
diupload dan secara otomatis source program dapat dilihat.

Instalasi
Download Scratch di http://info.scratch.mit.edu/Scratch_1.4_Download Lakukan
instalasi seperti biasa.

Program Pertama: Hello World

Menggunakan Scratch sangat mudah, jalankan Start Program Scratch

Ganti agar instruksi menjadi berbahasa Indonesia dengan menekan icon bola dunia

1
Bagian kiri berisi instruksi yang disediakan oleh scratch. Terdapat gerakan, tampilan,
kontrol dan seterusnya (perhatikan warna untuk setiap kelompok berbeda).

Bagian tengah adalah tempat instruksi diletakan dan bagian kanan adalah panggung-
nya.

Sekarang kita akan membuat kucing di panggung bergerak ke kanan lalu kembali lagi ke
posisi semula.

Pindahkan kelompok instruksi ke Kontrol yang berwarna oranye.

2
Drag Ketika <bendera hijau> diklik ke tengah. Kalau anda salah pilih, klik kanan lalu
pilih hapus.

Kemudian pindah ke kelompok instruksi Gerakan dan

Drag bergerak sebanyak 10 step ke bagian tengah, pastikan berada tepat menempel di
instruksi pertama.

Kemudian klik gambar bendera di sebelah kanan atas

Klik dan perhatikan kucing bergerak 10 langkah ke kanan, coba klik bendera hijau ini
berulang-ulang.

3
Anda juga dapat menggeser kucing dengan mendrag-nya. Atau memperbesar,
memperkecil dengan klik kanan pada kucing.

Sekarang bagaimana caranya agar kucing dapat bergerak sendiri ke ujung? Kita buat
agar kucing bergerak 10 step, tapi berulang-ulang. Perulangan ini yang akan kita
terapkan.

Pindah ke bagian kontrol (yang berwarna oranye)

Drag ulangi 10 ke bawah ketika <bendera hijau> diklik

Sekarang bagaimana caranya agar kucing dapat bergerak sendiri ke ujung? Kita buat
agar kucing bergerak 10 step, tapi berulang-ulang. Perulangan ini yang akan kita
terapkan.

4
Coba klik lagi bendera hijau di kanan atas

Kucing akan bergerak 10 langkah, dan diulang sebanyak 10 kali. Ternyata 10 kali
pengulangan terlalu pendek, sekarang kita ubah menjadi 30 kali.

Klik kotak putih berangka 10, ganti menjadi 30. Lalu jalankan lagi script dengan
menekan bendera hijau.

Kucing bergerak ke kanan, tapi kita harus mendrag-nya kembali ke kiri setiap selesai
animasi. Kita akan membuat agar pada awal script, kucing ini mulai dari posisi tertentu di
kiri.

Untuk mengetahui koordinat posisi, lihat di bagian kanan bawah panggung. Posisi 0,0
ada ditengah layar.

Kembali ke bagian gerakan (berwarna biru). Tambahkan pindah ke x dan y, ke bagian

bawah ketika bendera hijau diklik. Atur posisi x dan y ditempat yang anda inginkan.
Jalankan script dan lihat bahwa kucing akan berpindah posisi sebelum script dijalankan.

5
Masih ada yang aneh pada animasi ini, kaki kucing saat bergerak tidak berpindah.

Untuk menangi itu, kita perlu mengetahui konsep sprite di Scractch. Sprite adalah objek
yang dapat dimanipulasi. Kucing dalam animasi ini contohnya, merupakan sprite. Setiap
sprite memiliki kostum dan suara.

Klik Semua Kostum, anda bisa melihat kucing ini memilik dua kostum. Anda dapat
menambahkan atau mengedit kostum baru. Tapi untuk sekarang, kita akan menggunakan
kostum yang ada.

Kembali ke Semua Script lalu pilih instruksi tampilan.

Pilih instruksi kostum berikutnya, masukan ke instruksi setelah instruksi bergerak 10

step.

6
Program diatas dapat dibaca: ulangi 30 kali hal berikut: (bergerak 10 step, ganti kostum).
Jalankan dengan tombol bendera hijau, masih ada yang janggal, yaitu langkah kaki terlalu
cepat.

Untuk memperlambat, pilih lagi instruksi kontrol (oranye). Lalu tambahkan instruksi
tunggu selama xxx detik dibawah kostum berikutnya. Isi dengan 0.1 detik.

Sekarang kita akan menambahkan dialog untuk kucing.

7
Klik tampilan, lalu pilih berkata xxxx selama xxx detik. Letakkan dibawah
pengulangan. Jangan didalam pengulangan karena nanti akan diulang 30 kali.

Sekarang kita akan menambah tokoh baru. Dibagian sprite baru, klik open file.

Pilih animal, lalu pilih binatang lain yang anda sukai, Misalnya bat1-a (anda dapat
memilih sprite lain). Klik OK.

8
Script yang tadi dibuat menghilang! Jangan khawatir, untuk menampilkannya kembali
klik gambar kucing dibagian kanan bawah.

Dapat dilihat bahwa dapat dibuat script untuk setiap sprite.

Coba pilih sprite2 (kelelawar). Buatlah script seperti kucing tadi, tapi kelelawar ini masuk
dari kanan.

Untuk script kelelawar ini, pertama posisinya diatur, dihadapkan ke sprite 1 (kucing).
Lalu selama 10 kali digerakan mendekati kucing. Terakhir, akan ditampilkan kelelawar
berpikir hmm.

9
 LATIHAN

Buatlah animasi sederhana yang melibatkan dialog dan pergerakan tokoh-

tokoh. Buat terlebih dulu storyboard kasarnya, curahkan kreativitas dan
imaginasi anda sebebas-bebasnya. Silahkan eksplorasi dan gunakan
berbagai instruksi, walaupun belum dibahas di tutorial ini.

Membuat Program Interaktif

TBD: pada bagian 2 (menggunakan keyboard), harus eksplisit dinyatakan buat file
terpisah.

Dalam tutorial ini, kita akan membahas aspek interaksi dari Scratch, bagaimana
menerima input dari user dan interaksi antar sprite.

Interaksi dengan Keyboard

Berikutnya kita akan membuat game sederhana berupa kucing yang dapat bergerak ke
kanan-kiri sesuai perintah keyboard (panah kiri-kanan). Kucing ini harus menghindari
pisang yang dijatuhkan. Jika terkena pisang, kucing akan mengeluh dan game over.

Buat file baru, ganti nama sprite menjadi kucing (anda boleh menggunakan sprite lain)

Geser kucing ke bagian kiri bawah.

10
Geser kucing ke bagian kiri bawah.

Kebagian kontrol, drag Ketika tombol ... ditekan, lalu isi dengan panah kanan.

Tambahkan bergerak 10 langkah. Test dengan menekan panan kanan.

Sekarang tambahkan langkah yang sama untuk panah kiri, dengan bergerak negatif 10.
Perhatikan kedua aksi ini (panah kanan dan panah kiri ditekan) tidak terhubung. Kedua
aksi ini independen satu sama lain. Coba menekan panah kiri dan kanan, maka kucing
agak bergerak ke kiri dan ke kanan.

Selanjutnya tambahkan sprite pisang di layar (di direktori Things). Perkecil ukurannya
dengan klik kanan mengubah ukuran sprite

11
Sehingga hasilnya seperti ini:

Selanjutnya kita akan menambah script agar posisi pisang ditentukan secara random
kemudian pisang tersebut jatuh ke bawah. Doubleclick sprite pisang dilayar agar masuk
ke dalam scriptnya. Beri nama sprite ini pisang. Tambahkan instruksi untuk mengeset
posisi pisang.

12
Geserlah mouse di layar sambil memperhatikan posisi koordinat x,y di bagian kanan
bawah. Ternyata posisi y adalah 181. Sedangkan posisi x paling kiri adalah sekitar -200
dan paling kanan sekitar 220.

Kita perlu membangkitkan bilangan random antara -200 sd 220 agar pisang tidak muncul
di posisi yang selalu sama. Cari group operator (berwarna hijau), ambil instruksi ambil
nilai acak antara .. , isi dengan -200 dan 220, lalu tempelkan ke instruksi pindah ke x
.... Jangan lupa set posisi y ke 181. Klik instruksi ini untuk melihat pengaruhnya di
layar (terlihat pisang berpindah-pindah).

Selanjutnya kita perlu menjatuhkan pisang ini. Tambahkan instruksi loop yang
menggeser posisi y (jangan lupa nilainya negatif). Klik blok instruksi ini untuk melihat
hasilnya.

Proses ini perlu dilakukan secara berulang-ulang sampai dengan si kucing kena. Oleh
karena itu tambahkan loop selamanya, dan instruksi agar pisang mulai jatuh saat bendera
hijau diklik. Jalankan maka pisang akan jatuh terus menerus.

13
Selanjutnya kita perlu buat program agar saat pisang bertemu dengan kucing, terjadi
reaksi. Pindah ke group sensor (berwarna cyan). Tambahkan instruksi Jika yang
memiliki kondisi Apakah menyentuh kucing.

Saat menyentuh kucing, kita harus memberitahu sprite kucing agar bereaksi (ingat, script
diatas yang kita buat adalah script yang berada di sprite pisang). Ini bisa dilakukan
dengan instruksi Beritakan pada sprite yang lain di bagian kontrol. Tambahkan dan isi
dengan kena.

Selanjutnya kita buat script di sprite kucing yang bereaksi terhadap pesan kena
tersebut. Double click sprite kucing di layar.

Tambahkan Ketika saya menerima ...

14
Lalu tambahkan ucapan Aduh selama 0.5 detik. Perhatikan di script kucing, terhadap
tiga blok script yang independen dan dieksekusi secara bersamaan.

Lalu tambahkan ucapan Aduh selama 0.5 detik. Perhatikan di script kucing di atas,
terhadap tiga blok script yang independen dan dieksekusi secara bersamaan.

Interaksi dengan Mouse

Sprite juga dapat menerima instruksi dari mouse. Berikut kita akan membuat game
sederhana. Kucing akan berlari berputar-putar, dan jika kucing tersebut kena diklik
skornya bertambah.

Pertama, kecilkan dulu ukuran kucing. Lalu saat bendera hijau diklik, kucing digerakan
secara random. Instruksti Tunggu selama.. digunakan untuk memperlambat gerakan
kucing.

15
Kemudian tambahkan variabel yang menyimpan berapa kali kucing berhasil kena klik.
Klik group variabel.

Klik buat variabel, lalu isi dengan skor

Isi varibel skor dengan nilai 0, saat permainan dimulai

16
Lalu tambahkan aksi saat kucing diklik: skor ditambah 1 dan kucing dilempar ke posisi
lain.

Silahkan coba, tangkap kucing dengan mengkliknya, dan skor bertambah.

Latihan: Buat game sederhana, yang memanfaatkan interaksi dari pengguna, baik dengan
keyboard dan/atau mouse.

17