Belajar Pemrograman Scratch. Bab 1

Belajar Memprogram dengan Scratch
Pengantar Visual Pemrograman dengan Game, Seni, Sains, dan Matematika

oleh Majed Marji

Tentang Penulis

Majed Marji memegang gelar PhD di bidang teknik elektro dari Wayne State University dan gelar MBA di bidang manajemen strategis dari Davenport University. Ia memiliki pengalaman lebih dari 15 tahun di industri otomotif, di mana ia mengembangkan banyak aplikasi perangkat lunak untuk akuisisi data waktu nyata, kontrol perangkat, manajemen sel uji, analisis data teknik, pengontrol tertanam, telematika, kendaraan hibrida, dan sistem penggerak kritis keselamatan.

Dr. Marji juga merupakan anggota fakultas adjunkt di Departemen Teknik Elektro di Wayne State University. Ia telah mengajar mata kuliah tentang teknik komunikasi, visi mesin, mikroprosesor, sistem kontrol, dan algoritma dan struktur data, di antara topik lainnya.

Tentang Peninjau Teknis

Tyler Watts, EdS, adalah pendidik komputasi kreatif yang mengajar siswa kelas enam hingga delapan di Distrik Sekolah Terpadu Kansas City (Kansas) 500 dan mahasiswa dewasa di Universitas Missouri–Kansas City. Dia telah menggunakan Scratch sejak tahun 2009 sebagai alat untuk memerangi kesenjangan digital dan mengajari siswa cara berpikir seperti ilmuwan komputer. Sejak tahun pertama Tyler mengajar Scratch, dia telah mempelajari pentingnya melepaskan siswa dari "roda pelatihan Scratch" dan menantang mereka serta membentuk mereka menjadi kreator digital. Dia merasa bahwa pemrograman adalah bentuk ekspresi pribadi dan mengajari siswanya untuk mendekatinya seperti halnya bentuk seni lainnya dan bersenang-senang.

1
Memulai

Pernahkah Anda ingin membuat game komputer, cerita animasi, tutorial, atau simulasi sains sendiri?

Scratch adalah bahasa pemrograman grafis yang memudahkan pembuatan aplikasi tersebut dan banyak lagi.

Dalam bab pengantar ini, Anda akan:
• Menjelajahi lingkungan pemrograman Scratch
• Mempelajari berbagai jenis blok perintah
• Membuat game pertama Anda di Scratch

Saat Anda membuat aplikasi Scratch, Anda dapat menyimpannya di komputer Anda atau mengunggahnya ke situs web Scratch, di mana orang lain dapat memberikan komentar dan mengubahnya menjadi proyek baru.

Tertarik? Mari kita mulai!

Bab 1
Apa Itu Scratch?

Program komputer hanyalah sekumpulan instruksi yang memberi tahu komputer apa yang harus dilakukan. Anda menulis instruksi ini menggunakan bahasa pemrograman, dan di situlah Scratch berperan.

Sebagian besar bahasa pemrograman berbasis teks, yang berarti Anda harus memberikan perintah kepada komputer dalam bentuk bahasa Inggris yang tampak samar.

Misalnya, untuk menampilkan "Halo!" di layar, Anda mungkin menulis:

print('Halo!') (dalam bahasa Python)

std::cout << "Halo!" << std::endl; (dalam bahasa C++)

System.out.print("Halo!"); (dalam bahasa Java)

Mempelajari bahasa-bahasa ini dan memahami aturan sintaksnya dapat menjadi tantangan bagi pemula. Scratch, di sisi lain, adalah bahasa pemrograman visual. Bahasa ini dikembangkan di Massachusetts Institute of Technology (MIT) Media Lab untuk membuat pemrograman lebih mudah dan menyenangkan untuk dipelajari.

Di Scratch, Anda tidak akan mengetik perintah yang rumit. Sebaliknya, Anda akan menghubungkan blok grafis bersama-sama untuk membuat program. Bingung? Lihatlah program sederhana pada Gambar 1-1, dan saya akan menjelaskannya.

Gambar 1-1: Saat Anda menjalankan blok Scratch ini, kucing tersebut mengucapkan “Halo!” dalam gelembung ucapan.

Kucing yang Anda lihat pada Gambar 1-1 disebut sprite. Sprite memahami dan mematuhi serangkaian instruksi yang Anda berikan. Blok ungu di sebelah kiri memberi tahu kucing untuk menampilkan “Halo!” dalam gelembung ucapan. Banyak aplikasi yang akan Anda buat dalam buku ini akan berisi beberapa sprite, dan Anda akan menggunakan blok untuk membuat sprite bergerak, berputar, mengucapkan sesuatu, memainkan musik, melakukan perhitungan matematika, dan sebagainya.

Anda dapat memprogram di Scratch dengan menyatukan blok-blok berkode warna tersebut seperti halnya potongan puzzle atau balok LEGO. Tumpukan blok yang Anda buat disebut skrip. Misalnya, Gambar 1-2 menunjukkan skrip yang mengubah warna sprite sebanyak empat kali.

Gambar 1-2: Menggunakan skrip untuk mengubah warna sprite Kucing

Skrip ini menunggu satu detik di antara perubahan warna, dan keempat kucing yang Anda lihat di sini menunjukkan warna baru sprite setelah setiap perubahan.

Cobalah 1-1
Meskipun kita belum membahas blok-blok pada Gambar 1-2, bacalah, perhatikan bentuknya, dan cobalah untuk mencari tahu langkah-langkah yang diambil skrip untuk membuat kucing berwarna biru kehijauan. (Petunjuk: Blok ungu pertama mengembalikan kucing ke warna aslinya.) Menurut Anda apa yang akan terjadi jika kita menghapus blok tunggu dari skrip?

Buku ini membahas Scratch 2, yang dirilis pada Mei 2013. Versi ini memungkinkan Anda membuat proyek langsung di browser web Anda sehingga Anda tidak perlu menginstal perangkat lunak apa pun di komputer Anda, dan kita akan mengandalkan antarmuka web Scratch untuk materi dalam buku ini.

Sekarang, setelah Anda mengetahui sedikit tentang bahasa ini, saatnya untuk memulai perjalanan pemrograman kita dan mempelajari cara menggunakannya.

Lingkungan Pemrograman Scratch

Untuk memulai Scratch, kunjungi situs web Scratch (http://scratch.mit.edu/) dan klik tautan COBA. Ini akan membawa Anda ke antarmuka editor proyek Scratch, seperti yang ditunjukkan pada Gambar 1-3.

Gambar 1-3: Antarmuka pengguna Scratch, tempat Anda akan membangun program Anda

Anda akan melihat satu jendela dengan setidaknya tiga panel berikut: Panggung (kiri atas), Daftar Sprite (kiri bawah), dan tab Skrip (kanan), yang berisi tab Blok dan Area Skrip. Panel kanan juga berisi dua tab tambahan, Kostum dan Suara, yang akan dibahas nanti di bagian ini. Jika Anda masuk ke akun di situs web Scratch, Anda juga akan melihat Ransel (kanan bawah), yang memiliki tombol yang memungkinkan Anda berbagi proyek Anda dan menggunakan sprite dan skrip dari proyek yang sudah ada.

Mari kita lihat sekilas tiga panel utama.

Panggung
Panggung adalah tempat sprite Anda bergerak, menggambar, dan berinteraksi. Panggung memiliki lebar 480 langkah dan tinggi 360 langkah, seperti yang diilustrasikan pada Gambar 1-4. Pusat Panggung memiliki koordinat x 0 dan koordinat y 0.

Gambar 1-4: Panggung seperti bidang koordinat dengan titik (0,0) di tengah.

Anda dapat menemukan koordinat (x,y) dari titik mana pun di Panggung dengan menggerakkan kursor mouse ke titik tersebut dan memperhatikan angka-angka di Area Tampilan Mouse (x,y), yang terletak tepat di bawah Panggung.

Bilah kecil yang terletak di atas Panggung memiliki beberapa kontrol. Ikon mode presentasi  menyembunyikan semua skrip dan alat pemrograman dan membuat area Panggung hampir memenuhi seluruh monitor Anda. Kotak edit v menampilkan nama proyek saat ini. Ikon bendera hijau w dan berhenti x memungkinkan Anda untuk memulai dan mengakhiri program Anda.

Cobalah 1-2
Gerakkan mouse di sekitar Stage dan perhatikan Area Tampilan Mouse. Apa yang terjadi ketika Anda menggerakkan mouse keluar dari area Stage? Sekarang, beralihlah ke mode Presentasi dan perhatikan bagaimana layar berubah. Klik ikon di pojok kiri atas layar atau tekan tombol Esc pada keyboard Anda untuk keluar dari mode Presentasi.

Daftar Sprite
Daftar Sprite menampilkan nama dan thumbnail untuk semua sprite dalam proyek Anda.

Proyek baru dimulai dengan Stage putih dan satu sprite berkostum kucing, seperti yang diilustrasikan pada Gambar 1-5.

Gambar 1-5: Daftar Sprite untuk proyek baru

Tombol di atas Daftar Sprite memungkinkan Anda menambahkan sprite baru ke proyek Anda dari salah satu dari empat tempat: perpustakaan sprite Scratch u, Editor Paint bawaan v (di mana Anda dapat menggambar kostum Anda sendiri), kamera yang terhubung ke komputer Anda w, atau komputer Anda x.

Cobalah 1-3
Tambahkan sprite baru ke proyek Anda menggunakan beberapa tombol yang terletak di atas Daftar Sprite. Susun ulang sprite dalam Daftar Sprite dengan menyeret thumbnail yang sesuai.

Setiap sprite dalam proyek Anda memiliki skrip, kostum, dan suara sendiri. Anda dapat memilih sprite mana pun untuk melihat perlengkapannya. Baik (1) klik thumbnail sprite di Daftar Sprite atau (2) klik dua kali sprite itu sendiri di Stage. Thumbnail sprite yang saat ini dipilih selalu disorot dan diberi garis tepi biru. Saat Anda memilih sprite, Anda dapat mengakses skrip, kostum, dan suaranya dengan mengklik salah satu dari tiga tab yang terletak di atas Area Skrip. Kita akan melihat isi tab ini nanti. Untuk saat ini, klik kanan (atau ctrl-klik jika Anda menggunakan Mac) thumbnail sprite Kucing untuk melihat menu pop-up yang ditunjukkan pada Gambar 1-6.

Opsi duplikat u menyalin sprite dan memberi salinan tersebut nama yang berbeda. Anda dapat menghapus sprite dari proyek Anda dengan delete v, dan Anda dapat mengekspor sprite ke file .sprite2 di komputer Anda menggunakan opsi simpan ke file lokal w. (Untuk mengimpor sprite yang diekspor ke proyek lain, cukup klik tombol Unggah sprite dari file yang ditunjukkan pada Gambar 1-5.) Opsi sembunyikan/tampilkan x memungkinkan Anda untuk mengubah apakah sprite di Stage terlihat atau tidak.

Gambar 1-6: Mengklik kanan thumbnail sprite akan menampilkan menu praktis ini.

Bersama dengan thumbnail untuk sprite Anda, Daftar Sprite juga menampilkan thumbnail Panggung di sebelah kiri (lihat Gambar 1-6). Panggung memiliki serangkaian skrip, gambar, dan suara tersendiri. Gambar latar belakang yang Anda lihat di Panggung disebut backdrop. Saat Anda memulai proyek baru, Panggung secara default menggunakan backdrop putih polos, tetapi Anda dapat menambahkan gambar backdrop baru dengan salah satu dari empat tombol di bawah thumbnail Panggung. Klik ikon Panggung di Daftar Sprite untuk melihat dan mengedit skrip, backdrop, dan suara yang terkait.

Tab Blok
Blok di Scratch dibagi menjadi 10 kategori (palet): Gerak, Tampilan,

Suara, Pena, Data, Peristiwa, Kontrol, Penginderaan, Operator, dan Blok Lainnya. Blok diberi kode warna untuk membantu Anda menemukan blok terkait dengan mudah. Scratch 2 memiliki lebih dari 100 blok, meskipun beberapa blok hanya muncul dalam kondisi tertentu.

Misalnya, blok di palet Data (dibahas dalam Bab 5 dan 9) hanya muncul setelah variabel atau daftar dibuat. Mari kita lihat berbagai komponen tab Blok pada Gambar 1-7.

Gambar 1-7: Tampilan yang diperbesar dari tab Blok

Cobalah mengklik sebuah blok untuk melihat apa yang dilakukannya. Jika Anda mengklik "pindah 10 langkah" pada palet Gerak, misalnya, sprite akan bergerak 10 langkah di Panggung. Klik lagi, dan sprite akan bergerak 10 langkah lagi. Klik "ucapkan Halo!" Gunakan blok "2 detik" (di palet Tampilan) untuk membuat sprite menampilkan "Halo!" dalam gelembung ucapan selama dua detik. Anda juga dapat mengakses layar bantuan blok dengan memilih Bantuan Blok (ikon tanda tanya) dari bilah alat dan mengklik blok yang membingungkan Anda.

Beberapa blok memerlukan satu atau lebih input (juga disebut argumen) yang memberi tahu blok apa yang harus dilakukan. Angka 10 pada blok "pindah 10 langkah" adalah contoh argumen. Lihat Gambar 1-8 untuk melihat berbagai cara blok memungkinkan Anda mengubah inputnya.

Gambar 1-8: Mengubah input berbagai jenis blok

Anda dapat mengubah jumlah langkah pada "pindah 10 langkah" dengan mengklik area putih tempat Anda melihat angka 10 dan memasukkan angka baru u, misalnya 30 seperti yang Anda lihat pada Gambar 1-8. Beberapa blok, seperti arahkan ke 90, juga memiliki menu tarik-turun untuk inputnya v. Anda dapat mengklik panah bawah untuk melihat daftar opsi yang tersedia dan memilih salah satu. Perintah khusus ini memiliki area putih yang dapat diedit, jadi Anda juga dapat mengetikkan nilai di dalam kotak putih tersebut. Blok lain, seperti arahkan ke w, akan memaksa Anda untuk memilih nilai dari menu tarik-turun.

Cobalah 1-4
Buka palet Tampilan, ubah nilai input blok, dan klik blok untuk melihat apa yang mereka lakukan. Misalnya, bereksperimenlah dengan efek atur warna pada blok. Cobalah angka seperti 10, 20, 30, dan seterusnya hingga kucing kembali ke warna aslinya. Cobalah opsi di menu tarik-turun dengan angka yang berbeda. Anda dapat mengklik blok hapus efek grafis (juga di palet Tampilan) untuk menghapus perubahan Anda.

Area Skrip
Untuk membuat sprite melakukan hal-hal menarik, Anda perlu memprogramnya dengan menyeret blok dari tab Blok ke Area Skrip dan menyatukannya. Saat Anda menyeret blok di sekitar Area Skrip, sorotan putih menunjukkan di mana Anda dapat meletakkan blok tersebut untuk membentuk koneksi yang valid dengan blok lain (Gambar 1-9). Blok Scratch hanya dapat disatukan dengan cara tertentu, sehingga menghilangkan kesalahan pengetikan yang cenderung terjadi ketika orang menggunakan bahasa pemrograman berbasis teks.

Gambar 1-9: Seret blok ke Area Skrip dan satukan

untuk membuat skrip. Anda tidak perlu menyelesaikan skrip untuk menjalankannya, yang berarti Anda dapat menguji skrip Anda saat membuatnya. Mengklik di mana saja pada skrip, lengkap atau sebagian, akan menjalankan seluruh skrip, dari atas ke bawah.

Cobalah 1-5
Mulai proyek Scratch baru dan buat skrip di bawah ini untuk sprite Kucing. (Blok "selamanya" ada di palet Kontrol, dan blok lainnya ada di palet Gerakan.)

Anda akan mempelajari sebagian besar blok ini di Bab 2. Untuk saat ini, klik skrip baru Anda untuk menjalankannya. (Scratch akan menyorot skrip yang sedang berjalan dengan batas kuning bercahaya, seperti yang ditunjukkan di sisi kanan gambar.) Anda bahkan dapat mengubah input blok dan menambahkan blok baru ke skrip saat sedang berjalan! Misalnya, ubah angka di blok "gerak" dan perhatikan bagaimana gerakan kucing berubah. Klik skrip sekali lagi untuk menghentikannya.

Anda juga dapat dengan mudah membongkar tumpukan blok dan menguji masing-masing secara individual. Ini akan menjadi strategi yang sangat berharga ketika Anda mencoba memahami skrip yang panjang. Untuk memindahkan seluruh tumpukan blok, pegang blok teratas dari tumpukan tersebut. Untuk melepaskan blok di tengah tumpukan dan semua blok di bawahnya, pegang dan seret. Silakan coba. Fitur ini juga memungkinkan Anda untuk membangun proyek Anda satu bagian demi satu bagian. Anda dapat menghubungkan potongan-potongan kecil blok, mengujinya untuk memastikan blok tersebut berfungsi sebagaimana mestinya, dan kemudian menggabungkannya menjadi skrip yang lebih besar. Anda bahkan dapat menyalin tumpukan blok dari satu sprite ke sprite lain. Cukup seret tumpukan dari Area Skrip sprite sumber ke thumbnail sprite tujuan di Daftar Sprite.

Cobalah 1-6

Tambahkan sprite lain ke proyek Anda. Seret skrip dari sprite Kucing dan jatuhkan ke thumbnail sprite baru. Panah mouse Anda harus berada di atas thumbnail sprite baru agar proses menjatuhkan berhasil. Periksa tab Skrip sprite baru untuk memastikan bahwa sprite tersebut memiliki salinan skrip yang identik.

Tab Kostum

Anda dapat mengubah tampilan sprite dengan mengubah kostumnya, yang hanyalah sebuah gambar. Tab Kostum berisi semua yang Anda butuhkan untuk mengatur kostum sprite Anda; Anda dapat menganggapnya seperti lemari pakaian. Lemari dapat memiliki banyak kostum, tetapi sprite hanya dapat mengenakan satu kostum dalam satu waktu.

Mari kita coba mengubah kostum sprite Kucing sekarang. Klik thumbnail sprite Kucing dan pilih tab Kostum. Seperti yang diilustrasikan pada Gambar 1-10, Kucing memiliki dua kostum: kostum1 dan kostum2. Kostum yang disorot (kostum1 dalam hal ini) mewakili kostum sprite saat ini.

Gambar 1-10: Anda dapat mengatur semua kostum untuk sebuah sprite dari tab Kostum.

Jika Anda mengklik kanan pada thumbnail kostum, Anda akan melihat menu pop-up dengan tiga pilihan: (1) duplikat, (2) hapus, dan (3) simpan ke file lokal. Pilihan pertama menambahkan kostum baru dengan gambar yang identik dengan kostum yang Anda duplikat. Pilihan hapus menghapus kostum yang dipilih. Pilihan terakhir memungkinkan Anda untuk menyimpan kostum ke file. Anda dapat mengimpor kostum tersebut dan menggunakannya dalam proyek lain menggunakan tombol Unggah kostum dari file (tombol ketiga pada Gambar 1-10). Silakan coba pilihan-pilihan ini.

Cobalah 1-7

Klik tombol pertama di atas gambar kucing pada Gambar 1-10 untuk memilih kostum baru dari perpustakaan Scratch. Kemudian pilih gambar apa pun yang Anda suka dari jendela yang muncul. Terapkan beberapa kiat pada Gambar 1-10 untuk lebih memahami pilihan kostum.

Tab Suara

Sprite juga dapat memutar suara, yang menghidupkan program Anda. Misalnya, Anda dapat memberi sprite suara yang berbeda untuk digunakan saat senang atau sedih. Jika game Anda berisi sprite yang menyerupai rudal, Anda dapat membuat rudal tersebut menghasilkan suara yang berbeda saat mengenai atau meleset dari target.

Tombol-tombol di tab Suara akan membantu Anda mengatur berbagai suara yang dapat diputar oleh sprite Anda. Seperti yang ditunjukkan pada Gambar 1-11, Scratch bahkan menyediakan alat yang dapat Anda gunakan untuk mengedit file suara. Saya tidak akan membahas detail alat ini dalam buku ini, tetapi saya mendorong Anda untuk bereksperimen sendiri.

Gambar 1-11: Tab Suara memungkinkan Anda untuk mengatur suara sprite.

Sebagian besar waktu, Anda hanya memerlukan tiga tombol di bagian atas tab Suara. Tombol-tombol ini memungkinkan Anda untuk memilih suara dari pustaka suara Scratch u, merekam suara baru v (jika Anda memiliki mikrofon), atau mengimpor file suara yang sudah ada dari komputer Anda w. Scratch hanya dapat membaca file suara MP3 dan WAV.

coba 1-8

Pilih tab Suara dan klik tombol Pilih suara dari pustaka. Dengarkan

berbagai suara yang tersedia di Scratch untuk mendapatkan beberapa ide untuk proyek Anda di masa mendatang.

Tab Latar Belakang

Saat Anda memilih thumbnail Panggung di Daftar Sprite, nama tab tengah berubah dari Kostum menjadi Latar Belakang. Gunakan tab ini untuk mengatur gambar latar belakang Panggung, yang dapat Anda ubah dengan skrip Anda. Misalnya, jika Anda membuat game, Anda mungkin menampilkan satu latar belakang dengan instruksi untuk memulai dan kemudian beralih ke latar belakang lain saat pengguna memulai game. Tab Latar Belakang identik dengan tab Kostum.

Coba langkah 1-9

Klik tombol Pilih latar belakang dari perpustakaan di bawah thumbnail Panggung di Daftar Sprite. Pilih latar belakang grid xy dari jendela yang muncul dan klik OK. Scratch akan menambahkan grid xy ke proyek Anda dan menjadikannya latar belakang default. (Grid xy menampilkan bidang Kartesius 2-D, yang berguna saat Anda bekerja dengan blok perintah Gerak.) Ulangi langkah-langkah ini dan pilih latar belakang lain yang Anda sukai.

Info Sprite

Anda dapat melihat area info sprite dengan mengklik ikon kecil di tepi kiri atas thumbnail sprite, seperti yang diilustrasikan pada Gambar 1-12. Area ini menampilkan nama sprite, posisi dan arah (x,y) saat ini, gaya rotasi dan status visibilitasnya, serta apakah sprite dapat diseret dalam mode Presentasi. Mari kita bahas secara singkat setiap opsi ini.

Gambar 1-12: Area info sprite

Kotak edit u di bagian atas area ini memungkinkan Anda untuk mengubah nama sprite.

Anda akan menggunakan kotak ini berkali-kali dalam buku ini.

Nilai x dan y v menunjukkan posisi sprite saat ini di Stage.

Seret sprite ke Stage dan perhatikan apa yang terjadi pada angka-angka ini.

Arah sprite w menunjukkan arah pergerakan sprite

sebagai respons terhadap blok pergerakan. Seret garis biru yang berasal dari tengah ikon lingkaran untuk memutar sprite.

Tiga tombol bergaya rotasi x (bernama Putar, Balik kiri-kanan,

dan Tidak berputar) mengontrol bagaimana kostum muncul saat sprite mengubah arahnya. Untuk memahami efek tombol-tombol ini, buat skripnya. Ditunjukkan pada Gambar 1-13, lalu klik setiap tombol ini saat skrip sedang berjalan. Anda dapat menemukan blok tunggu di palet Kontrol. Kotak centang "Dapat diseret di pemain" (y) menunjukkan apakah sprite dapat diseret (menggunakan mouse) dalam mode Presentasi. Beralihlah ke mode Presentasi dengan kotak ini dicentang/tidak dicentang dan coba seret sprite di Stage untuk memahami efek kotak centang ini. Kotak centang "Tampilkan" (z) memungkinkan Anda untuk menampilkan/menyembunyikan sprite pada saat desain program. Cobalah dan lihat apa yang terjadi. Anda akan melihat beberapa contoh sprite tersembunyi yang melakukan pekerjaan berguna di balik layar dalam banyak contoh di seluruh buku ini.

Gambar 1-13: Skrip untuk mendemonstrasikan gaya rotasi

Toolbar

Mari kita lihat sekilas toolbar Scratch pada Gambar 1-14, dimulai dengan beberapa tombol. (Toolbar akan terlihat sedikit berbeda jika Anda masuk, seperti yang dibahas di Lampiran A.) Gunakan tombol Duplikat dan Hapus untuk menyalin dan menghapus sprite, kostum, suara, blok, atau skrip. Tombol Perbesar membuat sprite lebih besar, sedangkan tombol Kecilkan membuat sprite lebih kecil. Cukup klik tombol yang ingin Anda gunakan, lalu klik sprite (atau skrip) untuk menerapkan tindakan tersebut. Untuk kembali ke kursor panah, klik area kosong mana pun di layar. Anda dapat menggunakan menu Bahasa untuk mengubah bahasa antarmuka pengguna.

Gambar 1-14: Toolbar Scratch

Dari menu File, Anda dapat membuat proyek baru, mengunggah (membuka) proyek yang sudah ada dari komputer Anda, mengunduh (menyimpan) proyek saat ini ke komputer Anda, atau membatalkan (mengembalikan) semua perubahan Anda pada proyek saat ini. Proyek Scratch 2 memiliki ekstensi file .sb2 untuk membedakannya dari proyek yang dibuat di versi Scratch sebelumnya (.sb).

Di menu Edit, Undelete akan mengembalikan blok, skrip,

sprite, kostum, atau suara terakhir yang Anda hapus. Opsi tata letak panggung Kecil

mengecilkan Panggung dan memberi Area Skrip lebih banyak ruang. Memilih mode Turbo meningkatkan kecepatan beberapa blok. Misalnya, mengeksekusi blok gerakan 1.000 kali mungkin membutuhkan waktu sekitar 70 detik dalam mode normal dan sekitar 0,2 detik dalam mode Turbo.

Sekarang setelah Anda melihat hal-hal penting dari toolbar Scratch, kita akan membahas secara singkat tentang Editor Cat bawaan Scratch.

Editor Cat

Anda dapat menggunakan Editor Cat (Gambar 1-15) untuk membuat atau mengedit kostum dan latar belakang. (Tentu saja, Anda juga bebas menggunakan program pengeditan gambar favorit Anda.) Jika Anda ingin mempelajari lebih lanjut tentang Editor Cat Scratch, lihat ScratchPaintEditor.pdf (terletak di sumber daya online, yang dapat diunduh dari http://nostarch.com/learnscratch/).

Gambar 1-15: Editor Cat Scratch

Untuk saat ini, ada dua fitur penting yang perlu Anda ketahui:

menetapkan pusat gambar dan menetapkan warna transparan. Saya akan menjelaskan fitur-fitur ini di bagian selanjutnya.

Menetapkan Pusat Gambar

Saat Anda memerintahkan sprite untuk berputar (kiri atau kanan), sprite tersebut akan berputar relatif terhadap titik referensi—pusat kostumnya. Tombol Atur pusat kostum (di pojok kanan atas Editor Cat) memungkinkan Anda untuk memilih pusat tersebut. Saat Anda mengklik tombol ini, Anda akan melihat garis bidik pada area gambar, seperti yang ditunjukkan pada Gambar 1-16. Titik pusat ditentukan oleh perpotongan kedua sumbu ini, jadi untuk menggeser pusat kostum, cukup seret ke posisi baru. Untuk menyembunyikan sumbu, klik tombol yang sama lagi.

Gambar 1-16: Mengubah pusat kostum setelah mengklik tombol

Atur pusat kostum

coba 1-10

Buka RotationCenter.sb2 dan jalankan. Aplikasi ini berisi satu sprite dengan kostum dan skrip yang ditunjukkan di bawah ini. Pusat kostum diatur di tengah persegi. Jalankan skrip dan perhatikan polanya. Kemudian edit kostum untuk mengatur pusatnya di tengah lingkaran dan jalankan skrip lagi untuk melihat bagaimana gambar berubah.

Mengatur Warna Transparan

Ketika dua gambar tumpang tindih, gambar atas akan menutupi sebagian gambar bawah. Demikian pula, sprite menutupi bagian-bagian Panggung. Jika Anda ingin melihat seperti apa Panggung di balik sebuah gambar, Anda perlu menggunakan Editor Cat untuk membuat setidaknya sebagian dari gambar tersebut transparan, seperti penguin di sebelah kanan pada Gambar 1-17. 

Di palet Warna, cukup klik persegi dengan garis merah diagonal dan warnai dengan warna "transparan" tersebut untuk membuat sesuatu tidak terlihat. Anda dapat menganggap ikon ini sebagai tanda "Dilarang Berwarna", mirip dengan tanda "Dilarang Merokok" dengan garis merah melintang di atas rokok.

Gambar 1-17: Anda dapat membuat bagian mana pun dari gambar menjadi transparan dengan mengisinya dengan warna “transparan”.

Sekarang Anda sudah memahami antarmuka Scratch, kita akan menggunakan pengetahuan itu untuk membuat sesuatu yang menyenangkan. Singkirkan keraguan Anda dan bersiaplah: Kita akan membuat game!

Game Scratch Pertama Anda

Di bagian ini, Anda akan membuat game pemain tunggal di mana pemain akan menggerakkan dayung untuk mencegah bola tenis yang memantul mengenai lantai, berdasarkan game arcade klasik Pong. Antarmuka pengguna untuk game kita diilustrasikan pada Gambar 1-18.

Gambar 1-18: Layar game kita

Seperti yang ditunjukkan pada gambar, bola dimulai dari bagian atas Stage dan bergerak ke bawah dengan sudut acak, memantul dari tepi Stage. Pemain menggerakkan dayung secara horizontal (menggunakan mouse) untuk mengirim bola kembali ke atas. Jika bola menyentuh bagian bawah Stage, permainan berakhir.

Kita akan membangun game ini selangkah demi selangkah, tetapi pertama-tama kita perlu membuka proyek baru. Pilih File4New untuk memulai proyek Scratch baru. Kemudian hapus sprite Kucing dengan mengklik kanan dan memilih hapus dari menu pop-up.

Langkah 1: Siapkan Latar Belakang

Untuk mendeteksi kapan bola meleset dari dayung, kita akan menandai bagian bawah Panggung dengan warna tertentu dan menggunakan blok warna sentuh (dari palet Penginderaan) untuk memberi tahu kita kapan bola menyentuh warna tersebut. Latar belakang kita saat ini berwarna putih, jadi kita cukup menggambar persegi panjang tipis berwarna di bagian bawah, seperti yang ditunjukkan pada Gambar 1-19.

Gambar 1-19: Langkah-langkah untuk menggambar persegi panjang di bagian bawah gambar latar belakang

Klik thumbnail Panggung untuk memilihnya, lalu buka tab Latar Belakang. Ikuti langkah-langkah pada Gambar 1-19 untuk menggambar persegi panjang tipis di bagian bawah latar belakang Panggung.

Langkah 2: Tambahkan Dayung dan Bola

Klik tombol Lukis sprite baru di atas Daftar Sprite untuk menambahkan sprite Dayung ke proyek Anda. Karena dayung hanyalah persegi panjang tipis dan pendek, ulangi apa yang Anda lakukan pada Langkah 1 untuk menggambar dayung seperti yang ada pada Gambar 1-18. Warnai dayung sesuka Anda dan atur titik tengahnya kira-kira di tengah persegi panjang.

Selanjutnya, beri nama sprite dengan nama yang menjelaskan apa itu; saya menamakannya Dayung. Klik juga gambar dayung di Stage dan pindahkan sehingga koordinat y-nya sekitar –120.

Permainan kita sekarang memiliki dayung, tetapi kita masih membutuhkan bola untuk memantul,

jadi klik Pilih sprite dari perpustakaan di atas Daftar Sprite untuk mengimpornya.

Di dialog yang muncul, klik kategori Benda dan pilih gambar Bola Tenis untuk menambahkan sprite tersebut ke proyek Anda. Ganti nama sprite menjadi Bola.

Sebelum Anda mulai mengerjakan skrip untuk permainan, pilih File4Download ke komputer Anda untuk menyimpan apa yang telah Anda kerjakan sejauh ini ke komputer Anda. Di dialog yang muncul, pilih folder tempat Anda ingin menyimpan pekerjaan Anda.

Gambar 1-21: Bagian pertama dari skrip sprite Bola

Pertama, kita memindahkan bola ke bagian atas panggung u dan membuatnya mengarah ke bawah dengan sudut acak menggunakan blok pilih acak v (dari palet Operator). Skrip kemudian menggunakan blok selamanya w untuk memindahkan bola x melintasi Panggung dan memantul y dari tepinya. Klik bendera hijau untuk menguji apa yang telah Anda tulis sejauh ini. Bola seharusnya bergerak dalam pola zig-zag, dan dayung seharusnya masih mengikuti mouse Anda.

Cobalah 1-11

Ganti angka 12 di dalam blok pindah dengan nilai yang berbeda, jalankan skrip, dan perhatikan apa yang terjadi. Ini akan memberi Anda gambaran tentang cara membuat permainan lebih mudah atau lebih sulit dimainkan. Klik ikon berhenti saat Anda selesai.

Sekarang, saatnya menambahkan bagian yang menyenangkan—blok yang membuat bola memantul dari dayung. Kita dapat memodifikasi blok selamanya yang baru saja kita buat sehingga bola bergerak ke atas saat mengenai dayung, seperti yang ditunjukkan pada Gambar 1-22.

Gambar 1-22: Menambahkan kode untuk menendang bola ke atas

Saat bola dan dayung bersentuhan, kita memerintahkan bola untuk mengarah ke arah acak antara –30 dan 30. Saat blok "selamanya" berjalan untuk putaran berikutnya, blok "gerakkan" akan dieksekusi, yang sekarang akan menyebabkan bola bergerak ke atas. Klik bendera hijau lagi untuk menguji bagian permainan ini. Klik ikon berhenti saat Anda yakin bola memantul dari dayung seperti seharusnya.

Satu-satunya bagian yang masih kurang adalah kode untuk menghentikan permainan saat bola menyentuh bagian bawah Panggung. Tambahkan skrip yang ditunjukkan pada Gambar 1-23 ke sprite Bola, baik tepat sebelum atau sesudah blok if pada Gambar 1-22. Anda akan menemukan blok warna sentuh ? di palet Sensing dan blok stop di palet Control.

Gambar 1-23: Blok untuk mengakhiri permainan

Saat Anda mengklik mouse di atas kotak berwarna di dalam blok warna yang bersentuhan, kursor akan berubah menjadi kursor tangan. Saat Anda menggerakkan kursor tersebut dan mengklik persegi panjang merah muda di bagian bawah Stage, kotak berwarna di dalam blok akan sesuai dengan warna persegi panjang tersebut. Blok "hentikan semua" melakukan persis seperti namanya: Blok ini menghentikan semua skrip yang berjalan di semua sprite, dan sprite Paddle dan Ball tidak terkecuali.

Permainan pong dasar ini sekarang berfungsi penuh. Klik bendera hijau dan mainkan beberapa kali untuk mengujinya. Setelah melihat bahwa Anda dapat membuat seluruh permainan dengan sedikit kode, saya harap Anda setuju dengan saya bahwa Scratch luar biasa!

Langkah 4: Tambahkan Suara

Tentu saja, permainan lebih menyenangkan jika memiliki suara, jadi mari kita tambahkan sentuhan terakhir untuk memutar suara setiap kali kita memukul bola.

Klik dua kali bola di Stage untuk memilihnya, lalu pilih tab Suara. Klik tombol Pilih suara dari perpustakaan untuk menambahkan suara ke sprite Bola. Pada dialog yang muncul, pilih kategori Efek, pilih suara "pop", dan klik OK untuk menambahkannya ke tab Suara. Setelah itu, kembali ke tab Skrip dan sisipkan blok putar suara (dari palet Suara), seperti yang ditunjukkan pada Gambar 1-24.

Gambar 1-24: Memainkan suara saat bola menyentuh dayung

Uji permainan sekali lagi, dan kali ini, Anda akan mendengar suara "pop" pendek

setiap kali bola menyentuh dayung.

Selamat! Permainan Anda sekarang sudah selesai (kecuali, tentu saja, Anda ingin menambahkan lebih banyak fitur ke dalamnya), dan Anda baru saja menulis program Scratch pertama Anda. Jika Anda ingin bereksperimen lebih lanjut, coba gandakan sprite Bola agar memiliki dua (atau lebih) bola dalam permainan Anda dan lihat bagaimana hal itu mengubah cara Anda bermain!

Di bagian selanjutnya, saya akan memperkenalkan berbagai jenis blok yang tersedia

di Scratch. Seiring Anda melanjutkan membaca buku ini, Anda akan benar-benar mempelajari cara kerja blok-blok tersebut, tetapi untuk saat ini, kita hanya akan membahasnya secara singkat.

Blok Scratch: Gambaran Umum

Di bagian ini, Anda akan mempelajari berbagai blok yang tersedia di Scratch, nama-nama blok tersebut, dan tujuan penggunaannya. Tujuannya adalah untuk mendefinisikan beberapa istilah yang akan Anda baca di bab-bab selanjutnya. Anda dapat kembali ke bagian ini seiring kemajuan Anda jika perlu menyegarkan ingatan Anda.

Seperti yang ditunjukkan pada Gambar 1-25, Scratch memiliki empat jenis blok: blok perintah, blok fungsi, blok pemicu, dan blok kontrol. Blok perintah dan blok kontrol (juga disebut blok tumpukan) memiliki tonjolan di bagian bawah dan/atau lekukan di bagian atas. Anda dapat menyatukan blok-blok ini menjadi tumpukan. Blok pemicu, juga disebut topi, memiliki bagian atas yang bulat karena ditempatkan di bagian atas tumpukan. Blok pemicu menghubungkan peristiwa ke skrip. Mereka menunggu suatu kejadian—seperti penekanan tombol atau klik mouse—dan menjalankan blok di bawahnya ketika kejadian itu terjadi. Misalnya, semua skrip yang dimulai dengan blok "when green flag clicked" akan berjalan ketika pengguna mengklik ikon bendera hijau.

Gambar 1-25: Empat jenis blok yang tersedia di Scratch

Blok fungsi (juga disebut reporter) tidak memiliki lekukan atau tonjolan. Mereka tidak dapat membentuk lapisan skrip sendiri; sebaliknya, mereka digunakan sebagai input untuk blok lain. Bentuk blok ini menunjukkan jenis data yang dikembalikannya. Misalnya, blok dengan ujung bulat melaporkan angka atau string, sedangkan blok dengan ujung runcing melaporkan apakah sesuatu itu benar atau salah. Hal ini diilustrasikan pada Gambar 1-26.

Gambar 1-26: Bentuk blok fungsi menunjukkan jenis data yang dikembalikannya.

Beberapa blok fungsi memiliki kotak centang di sebelahnya. Jika Anda mencentang kotak tersebut, sebuah monitor akan muncul di Stage untuk menampilkan nilai reporter saat ini. Pilih sprite dan centang kotak pada blok posisi x (di palet Motion). Kemudian seret sprite di sekitar Stage dan perhatikan monitor tersebut. Monitor akan berubah saat Anda menggerakkan sprite maju mundur.

Operator dan Fungsi Aritmatika

Sekarang, mari kita lihat sekilas operator dan fungsi aritmatika yang didukung di Scratch. Jika Anda kehilangan kalkulator, maka kekhawatiran Anda berakhir! Anda dapat membuat kalkulator sendiri di Scratch dengan blok dari palet Operator, yang akan Anda jelajahi di bagian ini.

Operator Aritmatika

Scratch mendukung empat operasi aritmatika dasar yaitu penjumlahan (+),

pengurangan (-), perkalian (*), dan pembagian (/). Blok yang digunakan untuk

melakukan operasi ini, yang disebut operator, ditunjukkan pada Gambar 1-27. Karena blok-blok ini menghasilkan angka, Anda dapat menggunakannya sebagai input untuk blok apa pun yang menerima angka, seperti yang ditunjukkan pada gambar ini.

Gambar 1-27: Operator aritmatika di Scratch

Scratch juga mendukung operator modulus (mod), yang mengembalikan sisa pembagian dua angka. Misalnya, 10 mod 3 mengembalikan 1 karena sisa pembagian 10 dengan 3 adalah 1. Penggunaan umum operator modulus adalah untuk menguji keterdivisian satu bilangan bulat (bilangan utuh) oleh bilangan bulat lainnya (yang lebih kecil). Modulus 0 menunjukkan bahwa bilangan yang lebih besar dapat dibagi oleh bilangan yang lebih kecil. Apakah ini memberi Anda gambaran untuk memeriksa apakah suatu angka genap atau ganjil? Operator berguna lainnya yang didukung oleh Scratch adalah operator pembulatan, yang membulatkan angka desimal ke bilangan bulat terdekat. Misalnya, round(3.1) = 3, round(3.5) = 4, dan round(3.6) = 4.

Angka Acak

Seiring Anda semakin sering memprogram, Anda mungkin perlu menghasilkan angka acak di beberapa titik, terutama jika Anda membuat game dan simulasi. Scratch menyediakan blok pilih acak khusus untuk tujuan ini.

Blok ini menghasilkan angka acak setiap kali Anda menggunakannya. Dua kotak putih yang dapat diedit memungkinkan Anda untuk memasukkan rentang angka tersebut, dan Scratch hanya akan memilih nilai di antara kedua batas tersebut (termasuk). Tabel 1-1 menunjukkan beberapa contoh penggunaan blok ini.

Tabel 1-1: Contoh Penggunaan Blok Pilih Acak

Catatan

Hasil dari pilih acak 0 hingga 1 dan pilih acak 0 hingga 1,0 berbeda. Kasus pertama akan memberi Anda angka 1 atau 0, tetapi kasus kedua memberikan nilai desimal antara 0 dan 1. Jika ada input ke blok pilih acak yang berisi titik desimal, hasilnya juga akan berupa nilai desimal.

Fungsi Matematika

Scratch juga mendukung sejumlah besar fungsi matematika. Blok akar kuadrat mengelompokkan 14 fungsi matematika yang dapat dipilih dari menu tarik-turun, termasuk fungsi akar kuadrat, trigonometri, logaritma, dan eksponensial. Lihat MathematicalFunctions.pdf untuk cakupan yang lebih luas tentang fungsi-fungsi ini.

Ringkasan

Bab ini memberikan gambaran umum tingkat tinggi tentang Scratch dan lingkungan pemrogramannya. Anda telah mempelajari berbagai elemen antarmuka pengguna dan bahkan membuat sebuah game! Kita juga telah menjelajahi operator dan fungsi matematika Scratch.

Pada titik ini, Anda telah melihat informasi paling dasar yang Anda butuhkan untuk membuat beberapa skrip yang ampuh di Scratch, tetapi itu hanyalah satu langkah menuju penulisan program yang luar biasa. Pada bab-bab selanjutnya, Anda akan menggali lebih dalam tentang bagaimana Anda dapat menggunakan Scratch untuk mengembangkan keterampilan pemrograman Anda.

Soal latihan:

1. Tuliskan hasil dari setiap blok dalam skrip di bawah ini. Apakah ada pola dalam hasil perkalian ini?

2. Apakah ada pola dalam hasil perkalian 9 × 9, 99 × 99, 999 × 999, ..., dst.?

Gunakan perintah say untuk menemukan hasil perkalian ini dan periksa jawaban Anda.

3. Lengkapi tabel berikut dengan menuliskan nilai dari setiap ekspresi. Sekarang, gunakan perintah say dan blok operator yang sesuai untuk memeriksa jawaban Anda.

4. Evaluasi ekspresi Scratch berikut menggunakan pensil dan kertas. Misalkan x = 2 dan y = 4.

5. Gunakan perintah say dan blok yang sesuai dari palet Operator untuk menghitung hal-hal berikut:

• a. Akar kuadrat dari 32
• b. Sinus dari 30°
• c. Kosinus dari 60°
• d. Hasil pembulatan 99,459

6. Buat blok fungsi yang menghitung rata-rata dari tiga angka berikut: 90, 95, dan 98. Tampilkan hasilnya menggunakan blok say.

7. Buat blok fungsi yang mengubah 60°F menjadi Celsius. (Petunjuk: C = (5/9) × (F – 32).)

8. Buat blok fungsi yang menghitung luas trapesium dengan tinggi 4/6 kaki dan alas dengan panjang 5/9 kaki dan 22/9 kaki. (Petunjuk:

A = 0,5 × (b1 + b2) × h, di mana h adalah tinggi dan b1 dan b2 adalah panjang kedua alas.)

9. Buat blok fungsi yang menghitung gaya yang dibutuhkan untuk mempercepat mobil 2.000 kg sebesar 3 m/s². (Petunjuk: Gaya = massa × percepatan.)

10. Biaya listrik adalah $0,06 per kilowatt-jam. Buat blok fungsi yang menghitung biaya penggunaan AC 1.500 watt selama 2 jam. (Petunjuk: Energi = daya × waktu.)

11. Dengan trik matematika sederhana, Anda dapat menggunakan operator pembulatan untuk membulatkan angka ke tempat desimal tertentu. Misalnya, Anda dapat membulatkan angka 5,3567 ke persepuluhan terdekat (yaitu, posisi pertama di sebelah kanan titik desimal) menggunakan tiga langkah ini:

• a. 5.3567 × 10 = 53.567 (Kalikan angka dengan 10.)
• b. round(53.567) = 54 (Bulatkan jawaban dari langkah a.)
• c. 54/10 = 5.4 (Bagi jawaban dari langkah b dengan 10.)

Perubahan apa yang perlu Anda lakukan pada langkah-langkah di atas untuk membulatkan
ke ratusan terdekat (yaitu, posisi kedua di sebelah kanan titik desimal)? Buat blok fungsi yang membulatkan 5.3567 ke persepuluhan (atau ratusan) terdekat dan tampilkan outputnya menggunakan blok say.