Belajar Pemrograman Scratch. Bab 2

Bab. 2
Gerakan dan Menggambar

Sekarang Anda sudah memahami antarmuka, Anda siap menggunakan lebih banyak alat pemrograman Scratch. Dalam bab ini, Anda akan melakukan hal berikut:

• Menjelajahi perintah gerakan dan pena Scratch
• Menganimasikan sprite dan memindahkannya di sekitar Panggung
• Menggambar pola geometris artistik dan membuat game
• Mempelajari mengapa kloning sprite adalah alat yang berharga

Saatnya mengenakan topi kreatif Anda dan terjun ke dunia grafis komputer!

Menggunakan Perintah Gerakan

Jika Anda ingin membuat game atau program animasi lainnya, Anda perlu menggunakan blok dari palet Motion untuk memindahkan sprite. Selain itu, Anda perlu memerintahkan sprite untuk bergerak ke tempat tertentu di Panggung atau berbelok ke arah tertentu. Anda akan mengetahuinya di bagian ini.

Gerakan Absolut
Ingat, seperti yang Anda lihat pada Gambar 1-4, Stage seperti grid persegi panjang 480 × 360 yang pusatnya adalah titik (0,0). Scratch memiliki empat perintah gerakan absolut (go to, glide to, set x to, dan set y to) yang memungkinkan Anda memberi tahu sprite Anda persis ke mana harus pergi pada grid tersebut.

Catatan
Jika Anda ingin detail lebih lanjut tentang blok ini dan blok lainnya, gunakan jendela Tips Scratch di sisi kanan panel Skrip. Jika Anda tidak melihat jendela Tips, cukup klik tanda tanya di dekat sudut kanan atas Editor Proyek Scratch.

Untuk mendemonstrasikan perintah ini, katakanlah Anda ingin membuat sprite Roket pada Gambar 2-1 mengenai sprite Target berbentuk bintang di posisi (200,150). Cara paling jelas untuk melakukan ini adalah dengan menggunakan blok go to, seperti yang diilustrasikan di sisi kanan gambar. Koordinat x memberi tahu sprite seberapa jauh ia harus bergerak secara horizontal di Stage, sedangkan koordinat y memberi tahu seberapa jauh ia harus bergerak secara vertikal.

Gambar 2-1: Anda dapat memindahkan sprite ke titik mana pun di Stage menggunakan blok go to.

Roket tidak akan berbalik menghadap target, tetapi akan bergerak sepanjang garis tak terlihat yang menghubungkan posisi saat ini, titik (0,0), ke titik (200,150). Anda dapat memperlambat Roket dengan menggunakan perintah glide to. Perintah ini hampir identik dengan perintah go to, tetapi memungkinkan Anda mengatur berapa lama waktu yang dibutuhkan Roket untuk mencapai target.

Cara lain untuk mengenai target adalah dengan mengubah posisi x dan y dari sprite Roket secara independen dengan blok set x to dan set y to, seperti yang diilustrasikan pada Gambar 2-2. Apakah Anda ingat bagaimana Anda menggunakan blok set x to dalam permainan Pong di Bab 1? (Lihat Gambar 1-20 di halaman 17 untuk ulasan.)

Gambar 2-2: Anda dapat mengatur koordinat x dan y dari sebuah sprite secara independen.

Projek penjelasannya ada di Gerak Astronout

Anda selalu dapat melihat posisi x dan y sprite saat ini di pojok kanan atas Area Skrip. Jika Anda ingin menampilkan informasi ini di Panggung, Anda dapat menggunakan blok pelapor posisi x dan posisi y. Klik kotak centang di samping blok ini untuk melihat nilainya di Panggung.

Catatan
Perintah gerak bekerja dengan mengacu pada pusat sprite, yang dapat Anda atur di Editor Cat. Misalnya, mengirim sprite ke titik (100,100) akan menggerakkan sprite sehingga pusatnya berada di (100,100), seperti yang diilustrasikan pada Gambar 2-3. Oleh karena itu, saat Anda menggambar atau mengimpor kostum untuk sprite yang akan Anda gerakkan, perhatikan pusatnya!

Gambar 2-3: Perintah gerak mengacu pada pusat sprite.

Cobalah 2-1
Sebutkan koordinat sprite Roket setelah menjalankan setiap perintah dalam skrip yang ditunjukkan di bawah ini.

Gerak Relatif
Sekarang perhatikan grid yang digambarkan pada Gambar 2-4, yang menunjukkan sprite Roket dan target lainnya. Kali ini Anda tidak dapat melihat koordinatnya, jadi Anda tidak mengetahui posisi pasti sprite tersebut. Jika Anda harus memberi tahu Roket cara mengenai target, Anda mungkin berkata: “Bergerak tiga langkah, lalu belok kanan, lalu bergerak dua langkah.” Bergerak Tiga Langkah Belok Kanan Bergerak Dua Langkah

Gambar 2-4: Anda dapat menggerakkan sprite di Panggung menggunakan perintah gerak relatif.

Perintah seperti "move" dan "turn" adalah perintah gerak relatif. Perintah "move" pertama di atas, misalnya, menyebabkan Roket bergerak ke atas, sedangkan perintah "move" kedua mengirimkannya ke kanan. Gerakan tersebut bergantung pada (atau relatif terhadap) arah sprite saat ini. Konvensi arah yang digunakan di Scratch diilustrasikan pada Gambar 2-5.

Gambar 2-5: Di Scratch, 0 adalah atas, 90 adalah kanan, 180 adalah bawah, dan –90 adalah kiri.

Anda dapat memutar sprite ke arah tertentu (atau haluan) dengan perintah arah. Untuk memilih atas, kanan, bawah, atau kiri, cukup klik panah bawah dan pilih salah satu opsi ini dari menu tarik-turun. Untuk arah lain, ketik nilai yang Anda inginkan di kotak edit putih. Anda bahkan dapat menggunakan nilai negatif! (Misalnya, mengetik 45 atau –315 akan mengarahkan sprite ke timur laut.)

Catatan

Anda akan menemukan arah sprite saat ini di area informasi sprite. Anda juga dapat mencentang kotak di sebelah blok arah (di palet Gerak) untuk melihat arah di Panggung.

Contoh projek game menuju astronout

Sekarang Anda tahu cara kerja arah di Scratch, mari kita lihat bagaimana perintah gerak relatif (bergerak, mengubah x sebesar, mengubah y sebesar, dan berputar) bekerja. Kita akan mulai dengan perintah bergerak dan berputar, yang bekerja dengan terhadap arah sprite saat ini, seperti yang ditunjukkan pada Gambar 2-6.

Gambar 2-6: Skrip sederhana yang mengilustrasikan penggunaan perintah bergerak dan berputar

Projek penjelasannya di Gerak berputar pilih sprite Rocketship 2 

Pertama, blok "go to" u menggerakkan Roket sehingga pusatnya sejajar dengan pusat Panggung. Blok perintah kedua v mengarahkan

sprite ke atas, dan yang ketiga w memutarnya 45° searah jarum jam. Kemudian, sprite bergerak 100 langkah x ke arah saat ini sebelum berputar 45° berlawanan arah jarum jam y untuk berhenti di posisi atas.

Arah dan Kostum

Perintah arahkan tidak mengetahui apa pun tentang kostum sprite. Misalnya, perhatikan dua sprite yang ditunjukkan di bawah ini.

Menggunakan Paint Editor, kita menggambar kostum burung menghadap ke kanan dan kostum serangga menghadap ke atas. Menurut Anda apa yang akan terjadi jika Anda menggunakan perintah arahkan ke 90 (yaitu, arahkan ke kanan) pada setiap sprite?

Anda mungkin menduga bahwa serangga akan berputar menghadap ke kanan, tetapi sebenarnya, tidak ada sprite yang akan berputar. Meskipun 90° diberi label "kanan," arah tersebut sebenarnya mengacu pada orientasi asli kostum di Paint Editor. Jadi karena serangga tampak menghadap ke atas di Paint Editor, ia akan tetap menghadap ke atas ketika Anda menyuruhnya untuk mengarah ke 90°. Jika Anda ingin sprite Anda merespons perintah arahkan seperti yang ditunjukkan pada Gambar 2-5, Anda perlu menggambar kostum sprite sehingga menghadap ke kanan di Paint Editor (seperti kostum burung pada gambar di atas).

Terkadang Anda mungkin hanya ingin memindahkan sprite Anda secara horizontal atau vertikal dari posisi saat ini, dan di situlah blok "change x by" dan "change y by" berperan. Skrip pada Gambar 2-7 mengilustrasikan penggunaan blok-blok ini.

Gambar 2-7: Menavigasi jalur berkelok-kelok dengan "change x by" dan "change y by".

Projek penjelasannya pilih sprite Rocketship 3

Setelah sprite Roket bergerak ke tengah Panggung, perintah pertama "change x by 50" (u) menambahkan 50 ke koordinat x-nya untuk mengirimnya 50 langkah ke kanan. Perintah berikutnya, "change y by 50", membuat koordinat y menjadi 50, menyebabkan sprite bergerak naik 50 langkah. Perintah lainnya bekerja dengan cara yang serupa. Cobalah untuk menelusuri pergerakan sprite, seperti yang diilustrasikan pada Gambar 2-7, untuk menemukan tujuan akhir sprite.

Cobalah 2-2

Temukan posisi akhir (x,y) roket ketika menjalankan masing-masing dari dua skrip yang ditunjukkan di bawah ini. Teorema matematika apa yang dapat Anda gunakan untuk membuktikan bahwa kedua skrip tersebut setara?

Perintah Gerak Lainnya

Hanya ada empat perintah gerak yang tersisa untuk dieksplorasi: arahkan ke; jenis blok kedua; jika di tepi, pantulkan; dan atur gaya rotasi.

Anda telah mempelajari tentang gaya rotasi, dan Anda telah melihat perintah jika di tepi, pantulkan dalam aksi di Bab 1 (lihat Gambar 1-13 di halaman 12). Untuk melihat dua perintah lainnya dalam aksi, mari kita buat aplikasi sederhana seekor kucing yang mengejar bola tenis, seperti yang diilustrasikan pada Gambar 2-8.

Gambar 2-8: Memprogram kucing untuk kepik mengeja apel

Seperti yang ditunjukkan, aplikasi ini berisi dua sprite, bernama Kucing dan Bola,

dan dua skrip. Saat Anda mengklik ikon bendera hijau, sprite Bola mengikuti penunjuk mouse. Sprite Kucing terus menerus mengarah ke Bola dan bergerak ke arahnya menggunakan perintah meluncur. Silakan buat aplikasi ini untuk melihat cara kerjanya. Anda dapat menemukan blok "forever" di palet Kontrol dan blok "mouse x" dan "mouse y" di palet Penginderaan. Di bagian selanjutnya, kita akan melihat palet Pena dan mempelajari cara membuat sprite meninggalkan jejak visual dari gerakannya.

Perintah Pena dan Menggambar dengan Mudah

Perintah gerakan yang Anda gunakan di bagian sebelumnya memungkinkan Anda untuk memindahkan sprite ke titik mana pun di Panggung. Bukankah akan menyenangkan untuk melihat jalur sebenarnya yang dilalui sprite Anda? Pena Scratch dapat membantu. Setiap sprite memiliki pena tak terlihat, yang dapat berada di atas atau di bawah. Jika pena berada di bawah, sprite akan menggambar saat bergerak. Jika tidak, sprite bergerak tanpa meninggalkan jejak. Perintah di palet Pena memungkinkan Anda untuk mengontrol ukuran, warna, dan bayangan pena.

Cobalah 2-3

Buka jendela Tips di Scratch, klik ikon rumah, dan klik Pena untuk deskripsi singkat dari setiap perintah Pena. Skrip di bawah ini menunjukkan sebagian besar perintah tersebut. Buat ulang skrip ini, jalankan, dan jelaskan output masing-masing. Jangan lupa untuk menurunkan pena sprite sebelum menjalankan skrip ini. (Anda dapat menemukan blok pengulangan di palet Kontrol.)

Mari kita jelajahi beberapa perintah pena secara detail dan buat program sederhana untuk menggambar gambar dengan menggerakkan dan memutar sprite di Stage dengan tombol panah.

Satu kali tekan panah atas (↑) akan menggerakkan sprite maju 10 langkah.

Menekan panah bawah (↓) akan menggerakkan sprite mundur 10 langkah.

Setiap tekan panah kanan (→) akan memutar sprite ke kanan 10°, dan setiap tekan panah kiri (←) akan memutar sprite ke kiri 10°.

Jadi, misalnya, untuk membuat sprite berputar 90°, seperti yang ditunjukkan pada Gambar 2-9, Anda akan menekan tombol panah kiri atau kanan sembilan kali.

Pertama, mulai proyek Scratch baru. Ganti kostum Kucing dengan sesuatu yang jelas menunjukkan apakah sprite mengarah ke kiri, kanan, atas, atau bawah. Kostum kumbang atau kucing2 (dari folder Hewan) adalah pilihan yang bagus, tetapi Anda juga bisa memilih kostum lain yang Anda sukai. Di tab Kostum, klik tombol Pilih kostum dari perpustakaan dan pilih kostum yang sesuai.

Gambar 2-9: Aplikasi Easy Draw beraksi

Sekarang, tambahkan skrip yang ditunjukkan pada Gambar 2-10 ke sprite Anda. Anda dapat membuat empat blok "when key pressed" dari blok "when space key pressed" di palet Events. Cukup klik panah bawah dan pilih tombol panah yang Anda butuhkan.

Gambar 2-10: Skrip untuk aplikasi Easy Draw

Saat Anda mengklik bendera hijau, sprite akan bergerak ke tengah Stage u dan menunjuk ke atas v. Kemudian warna pena w dan ukuran x akan diatur, dan skrip akan menurunkan pena y untuk bersiap menggambar. Setelah itu, program akan menghapus semua gambar sebelumnya dari Stage z.

Yang perlu Anda lakukan untuk menghapus Stage dan memulai gambar baru adalah mengklik bendera hijau. Gunakan panah keyboard untuk menggambar bentuk apa pun yang Anda suka. Bentuk apa yang menurut Anda akan dihasilkan oleh urutan ↑→↑→ ↑→ …?

Penjelasan projeknya Kendali Kepik bergaris

Cobalah 2-4

Tambahkan opsi untuk membuat pena gambar lebih lebar saat huruf W ditekan dan lebih sempit saat huruf N ditekan. Pikirkan cara lain untuk meningkatkan aplikasi dan coba terapkan.

Kekuatan Pengulangan

Program kita sejauh ini relatif sederhana, tetapi saat Anda mulai menulis skrip yang lebih panjang, Anda sering kali perlu mereplikasi tumpukan blok yang sama beberapa kali berturut-turut. Menduplikasi skrip dapat membuat program Anda lebih panjang, lebih sulit dipahami, dan lebih sulit untuk dieksperimenkan. Jika Anda perlu mengubah satu angka, misalnya, Anda harus melakukan perubahan yang sama di setiap salinan blok. Perintah pengulangan dari palet Kontrol dapat membantu Anda menghindari masalah ini.

Misalnya, katakanlah Anda ingin menggambar persegi yang ditunjukkan pada Gambar 2-11 (kiri). Anda dapat memerintahkan sprite untuk mengikuti instruksi berulang ini:

1. Bergerak beberapa jarak dan berputar 90° berlawanan arah jarum jam.

2. Bergerak dengan jarak yang sama dan berputar 90° berlawanan arah jarum jam.

3. Bergerak dengan jarak yang sama dan berputar 90° berlawanan arah jarum jam.

4. Bergerak dengan jarak yang sama dan berputar 90° berlawanan arah jarum jam.

Gambar 2-11: Sebuah persegi (kiri) dan skrip untuk menggambarnya (kanan) menggunakan serangkaian perintah bergerak dan berputar

Gambar 2-11 juga menunjukkan skrip yang mengimplementasikan instruksi ini.

Perhatikan bahwa skrip tersebut mengulangi perintah bergerak 100 langkah dan berputar 90 derajat sebanyak empat kali. Sebaliknya, kita dapat menghindari penggunaan dua blok yang sama berulang kali dengan blok pengulangan, yang menjalankan perintah

di dalamnya sebanyak yang Anda perintahkan, seperti yang ditunjukkan pada Gambar 2-12. Menggunakan

blok pengulangan juga dapat membuat instruksi jauh lebih mudah dipahami.

Gambar 2-12: Menggunakan blok pengulangan untuk menggambar persegi

Persegi yang Anda gambar dengan skrip pada Gambar 2-11 bergantung pada arah yang dihadapi sprite Anda saat Anda mulai. Konsep ini diilustrasikan pada

Gambar 2-13. Perhatikan bahwa setelah menggambar persegi, sprite akan kembali ke titik awalnya dan menghadap ke arah yang sama seperti sebelum mulai bergerak.

Gambar 2-13: Arah awal sprite mengubah lokasi persegi.

Projek penjelasannya Poligon

coba 2-5

Anda dapat dengan mudah memodifikasi skrip menggambar persegi pada Gambar 2-12 untuk menggambar poligon beraturan lainnya. Skrip yang dimodifikasi memiliki bentuk seperti yang ditunjukkan di bawah ini. Anda dapat mengganti angka bulat apa pun untuk "jumlah sisi" untuk menentukan poligon yang diinginkan dan nilai apa pun untuk "panjang sisi" untuk mengontrol ukuran poligon. Gambar tersebut juga menunjukkan enam poligon dengan panjang sisi yang sama yang digambar menggunakan skrip ini. Sprite dimulai pada posisi dan arah yang ditunjukkan oleh panah hijau pada gambar. Buka file Polygon.sb2 dan jalankan menggunakan nilai yang berbeda untuk "jumlah sisi". Apa yang terjadi ketika angka ini menjadi besar? Ini akan memberi Anda gambaran tentang cara menggambar lingkaran.

Persegi yang Diputar

Anda dapat membuat karya seni yang menakjubkan dengan mengulangi pola dalam urutan tertentu. Misalnya, skrip yang ditunjukkan pada Gambar 2-14 menciptakan pola yang menarik dengan memutar dan menggambar persegi sebanyak 12 kali. (Blok untuk menginisialisasi pena dan meletakkannya tidak ditampilkan demi singkatnya penjelasan.)

Gambar 2-14: Menggambar persegi yang diputar

Blok pengulangan terluar u dieksekusi 12 kali. Setiap kali di dalam loop,

ia menggambar satu persegi v dan kemudian berbelok 30° ke kiri w untuk bersiap menggambar yang berikutnya.

Cobalah 2-6

Perhatikan bahwa (12 pengulangan) × (30° untuk setiap pengulangan) = 360°. Menurut Anda apa yang akan terjadi jika Anda mengubah angka dalam program menjadi 4 pengulangan dan 90°? Bagaimana dengan 5 dan 72°? Bereksperimenlah dengan nilai yang berbeda untuk jumlah pengulangan dan sudut putar untuk melihat apa yang terjadi.

Projek penjelasannya Poligon pengembangan

Menjelajahi dengan Stempel

Pada bagian sebelumnya, Anda telah belajar menggunakan blok putar dan ulangi untuk mengubah bentuk sederhana menjadi pola yang kompleks. Tetapi bagaimana jika Anda ingin memutar bentuk yang lebih menantang? Alih-alih menggambar bentuk dasar dengan perintah pindah dan putar, Anda dapat membuat kostum baru di Editor Cat dan menggunakan blok stempel untuk menggambar beberapa salinannya di Panggung. Untuk mengilustrasikan teknik ini, mari kita tulis program untuk menggambar kincir angin yang ditunjukkan pada Gambar 2-15.

Gambar 2-15: Perintah stempel memungkinkan Anda membuat pola geometris kompleks

dengan mudah.

Kami menggambar bentuk bendera menggunakan Paint Editor (lihat Gambar 2-15, kiri)

dan menggunakannya sebagai kostum sprite kami. Kami mengatur pusat kostum di ujung bawah bendera sehingga kami dapat memutar bendera di sekitar titik ini.

Skrip untuk menggambar kincir angin ditunjukkan pada Gambar 2-15 (tengah). Blok pengulangan dieksekusi delapan kali; setiap kali, ia mencetak salinan kostum di Panggung sebelum memutar sprite 45° ke kiri. Perhatikan bahwa agar skrip ini berfungsi, Anda harus menggunakan blok set rotation style dengan gaya rotasi sprite diatur ke all around agar bendera dapat berputar saat diputar.

Catatan

DrawingGeometricShapes.pdf dalam paket sumber daya tambahan (yang dapat Anda unduh dari http://nostarch.com/learnscratch/) memberikan cakupan komprehensif tentang menggambar bentuk geometris seperti persegi panjang, jajaran genjang, belah ketupat, trapesium, layang-layang, dan poligon, dan mengajarkan Anda cara membuat seni poligon yang menarik.

Projek penjelasannya Kembang stamp

Cobalah 2-7

Efek ubah warna per blok (dari palet Tampilan) memungkinkan Anda menerapkan efek grafis seperti warna, pusaran, dan mata ikan. Buka file Windmill.sb2 dan tambahkan perintah ini di dalam blok ulangi. Bereksperimenlah dengan efek grafis lainnya untuk membuat pola yang lebih keren. Perhatikan bahwa agar efek ubah warna per blok berfungsi, warna bendera di Editor Cat tidak boleh hitam.

Proyek Scratch

Di bagian ini, kita akan mengembangkan dua program pendek yang seharusnya memperdalam pemahaman Anda tentang blok Gerak dan Pena yang telah Anda pelajari sejauh ini. Anda dapat menemukan latar belakang dan sprite di file proyek untuk bab ini, jadi kita akan fokus pada penulisan skrip yang kita butuhkan agar aplikasi ini berfungsi. Penjelasan tentang permainan bonus tambahan, yang disebut Survival Jump, tersedia di sumber daya tambahan. Anda akan menemukan detailnya di BonusApplications.pdf (http://nostarch.com/learnscratch/).

Beberapa skrip ini akan menggunakan blok perintah yang belum pernah Anda lihat, tetapi jangan khawatir jika Anda tidak sepenuhnya memahami beberapa hal. Anda akan mempelajari semuanya di bab-bab mendatang.

Dapatkan Uang

Aplikasi pertama kita adalah permainan sederhana di mana pemain perlu menggerakkan sprite dengan menggunakan panah keyboard untuk mengumpulkan sebanyak mungkin kantong emas. Seperti yang diilustrasikan pada Gambar 2-16, kantong emas muncul di lokasi acak pada grid. Jika pemain tidak mengambil tas dalam tiga detik, tas tersebut akan berpindah ke tempat lain.

Gambar 2-16: Bantu kucing mengambil sebanyak mungkin tas emas!

Buka file Money_NoCode.sb2. Skripnya hilang, tetapi Anda akan membuatnya sekarang, dan file tersebut berisi semua yang Anda butuhkan.

Catatan:

Sumbu koordinat yang ditunjukkan pada Gambar 2-16 ditambahkan untuk membantu Anda memahami angka-angka yang digunakan dalam skrip ini. Kembali ke gambar ini jika perlu untuk menyegarkan gambaran mental Anda tentang bagaimana sprite bergerak.

Mari kita mulai dengan menulis skrip untuk sprite Pemain, seperti yang ditunjukkan pada

Gambar 2-17.

Gambar 2-17: Skrip untuk sprite Pemain

Saat pemain mengklik bendera hijau, sprite ini bergerak ke (–30,–30) u

dan menunjuk ke kanan v. Empat skrip lainnya merespons tombol panah. Saat tombol panah ditekan, skrip yang sesuai mengubah arah sprite w, memutar suara pendek (menggunakan blok putar suara x dari palet Suara), dan menggerakkan sprite 60 langkah y. Sprite memantul dari tepi Panggung z jika diperlukan. Karena 60 langkah sesuai dengan 1 kotak pada grid Gambar 2-16, setiap kali Anda menekan tombol panah, sprite Pemain bergerak 1 kotak.

Catatan
Pernahkah Anda memperhatikan bahwa keempat skrip penanganan panah pada Gambar 2-17 hampir identik? Di Bab 4, Anda akan mempelajari cara menghindari duplikasi kode dengan cara ini.

Silakan uji bagian permainan ini. Anda seharusnya dapat menggerakkan sprite Pemain di sekitar Panggung menggunakan tombol panah pada keyboard Anda. Setelah itu berhasil, kita akan beralih ke sprite Emas, yang skripnya ditunjukkan pada Gambar 2-18.

Gambar 2-18: Skrip untuk sprite Emas

Seperti skrip Pemain, skrip ini juga dimulai saat bendera hijau diklik. Skrip ini memindahkan kantong emas. Skrip ini juga melacak berapa banyak kantong yang telah dikumpulkan dengan variabel bernama skor, yang telah saya buat untuk Anda di palet Data.

Catatan:

Label seperti skor disebut variabel. Variabel memungkinkan kita menyimpan informasi untuk digunakan nanti dalam program kita. Anda akan mempelajari semua tentang variabel di Bab 5.

Karena permainan baru saja dimulai dan kita belum memiliki kantong, kita mengatur skor menjadi 0 (u). Selanjutnya, kita memulai perulangan yang akan diulang 20 kali (v) untuk menampilkan total 20 kantong kepada pemain. (Jika Anda tidak menginginkan 20 kantong, silakan gunakan angka favorit Anda.) Setiap kali perulangan berjalan, kantong emas akan muncul di lokasi acak (w), memberi pemain waktu untuk mengambilnya (x), dan menambah skor jika pemain berhasil (y).

Kita perlu agar kantong tersebut muncul secara acak di salah satu dari 48 kotak di Panggung. Seperti yang Anda lihat pada Gambar 2-16, posisi x tas dapat berupa salah satu nilai berikut: –210, –150, –90, ... , 210. Angka-angka ini berjarak 60 langkah, sehingga Anda dapat menemukan setiap posisi x mulai dari –210 dengan menghitung

x = –210 + (0 × 60)

x = –210 + (1 × 60)

x = –210 + (2 × 60)

x = –210 + (3 × 60)

dan seterusnya. Ekspresi serupa berlaku untuk posisi y.

Kita dapat mengatur posisi x tas dengan menghasilkan angka acak antara 0 dan 7, mengalikannya dengan 60, dan menambahkan hasilnya ke −210. Gambar 2-19 menunjukkan langkah-langkah detail untuk membuat blok "atur x ke" dalam skrip kita; blok "atur y ke" dibangun dengan cara yang serupa.

Gambar 2-19: Membangun himpunan x untuk memblokir dari Gambar 2-18

Setelah muncul di lokasi acak, kantong emas akan memberi pemain waktu tiga detik untuk mengambilnya. (Anda dapat mengubah durasi ini untuk membuat permainan lebih sulit atau lebih mudah dimainkan.) Untuk melacak waktu, skrip pertama-tama mengatur ulang pengatur waktu bawaan Scratch ke 0. Kemudian menunggu hingga pemain mengambil kantong dengan menyentuhnya atau pengatur waktu melebihi tiga detik. Ketika salah satu kondisi terjadi, blok tunggu hingga akan memungkinkan skrip untuk melanjutkan eksekusi blok jika/maka. Detail pembuatan blok tunggu hingga diilustrasikan pada Gambar 2-20.

Gambar 2-20: Membangun blok tunggu hingga dalam skrip Gambar 2-18

Catatan: Blok di dalam blok if/then hanya akan berjalan jika kondisi yang Anda tentukan di header blok if/then benar. Bab 6 menjelaskan blok ini secara detail, tetapi untuk saat ini, Anda sudah cukup tahu untuk menggunakannya dan menambahkan sentuhan Anda sendiri ke program. Jika pemain menyentuh tas, perintah di dalam blok if/then akan berjalan. Dalam hal ini, blok putar suara akan membuat suara Tetesan Air, dan blok ubah skor sebesar 1 (di palet Data) akan menambahkan 1 ke skor. Permainan sekarang selesai. Klik bendera hijau untuk menguji kreasi Anda!

Pengatur Waktu Scratch

Scratch memiliki pengatur waktu yang mencatat berapa banyak waktu yang telah berlalu sejak Scratch dimulai. Saat Anda memulai Scratch di browser web, pengatur waktu akan diatur ke 0, dan akan terus bertambah sepersepuluh detik selama Anda tetap membuka Scratch. Blok pengatur waktu (di palet Penginderaan) menyimpan nilai pengatur waktu saat ini. Kotak centang di sebelah blok memungkinkan Anda untuk menampilkan/menyembunyikan monitor blok di Panggung. Blok pengatur waktu reset mengatur ulang pengatur waktu ke 0, dan waktu mulai berjalan lagi segera. Pengatur waktu terus berjalan bahkan ketika proyek berhenti berjalan.

Menangkap Apel

Perhatikan permainan Menangkap Apel yang ditunjukkan pada Gambar 2-21. Dalam permainan ini, apel muncul secara acak di posisi horizontal di bagian atas Panggung pada waktu acak dan jatuh ke tanah. Pemain harus memindahkan gerobak untuk menangkap apel sebelum menyentuh tanah, dan setiap apel bernilai 1 poin.

Gambar 2-21: Permainan Menangkap Apel

Pada awalnya, Anda mungkin berpikir permainan seperti itu membutuhkan banyak sprite dengan skrip yang hampir identik. Lagipula, ada banyak apel. Namun, sejak Scratch 2, hal itu tidak demikian. Dengan fitur kloning, Anda dapat dengan mudah membuat banyak salinan sprite. Dalam permainan Menangkap Apel kita, kita akan menggunakan satu sprite apel dan membuat klon sebanyak yang kita inginkan.

Buka file CatchApples_NoCode.sb2, yang berisi pengaturan untuk permainan kita tanpa skrip. Untuk membuat semuanya sedikit lebih menarik, pengaturan juga menyertakan variabel bernama score (dibuat untuk Anda di palet Data), yang akan kita gunakan untuk melacak apel yang ditangkap. Namun, pertama-tama, Anda akan membuat skrip untuk sprite Cart seperti yang diilustrasikan pada Gambar 2-22.

Gambar 2-22: Skrip untuk sprite Cart

Saat bendera hijau diklik, kita memindahkan gerobak ke bagian tengah bawah Panggung. Skrip kemudian terus menerus memeriksa status panah kanan dan kiri dan menggerakkan gerobak sesuai dengan itu. Saya memilih angka 30 berdasarkan percobaan dan kesalahan, jadi silakan ubah berdasarkan eksperimen Anda sendiri. Sekarang tibalah bagian pengkloningan. Mulailah dengan menambahkan skrip pada Gambar 2-23 ke sprite Apple. Skrip ini juga mulai berjalan ketika bendera hijau diklik.

Gambar 2-23: Skrip pertama dari sprite Apel

Karena kita belum menangkap apel apa pun, skrip mengatur variabel skor menjadi 0 u. Selanjutnya, skrip membuat sprite terlihat dengan blok tampilkan dari palet Tampilan v. Kemudian, skrip memulai blok ulangi yang akan berulang sebanyak 30 kali w untuk menjatuhkan 30 apel.

Selama setiap putaran loop, sprite Apel akan bergerak ke posisi horizontal acak di bagian atas Panggung x. Kemudian, skrip memanggil blok buat klon (dari palet Kontrol) untuk mengklon dirinya sendiri y, menunggu waktu acak singkat z, dan memulai putaran berikutnya dari blok ulangi. Setelah menyelesaikan 30 putaran blok ulangi, skrip menyembunyikan sprite Apel menggunakan blok sembunyikan { dari palet Tampilan.

Jika Anda menjalankan permainan sekarang dengan mengklik bendera hijau, 30 apel akan muncul secara acak di bagian atas Panggung dan tetap di sana—karena kita belum memberi tahu apel yang dikloning apa yang harus dilakukan. Di sinilah skrip selanjutnya untuk sprite Apel (Gambar 2-24) berperan.

Gambar 2-24: Skrip kedua untuk sprite Apel

Berkat blok u (dari palet Kontrol) yang saya mulai sebagai klon, setiap klon akan menjalankan skrip yang ditunjukkan pada gambar ini. Setiap Apel bergerak turun 10 langkah v dan memeriksa apakah ia tertangkap atau terlewatkan oleh klon.

kereta. Jika klon mendeteksi bahwa ia menyentuh kereta w, itu berarti ia tertangkap. Oleh karena itu, ia meningkatkan skor, memainkan suara, dan menghapus dirinya sendiri (karena tidak ada lagi pekerjaan yang harus dilakukan). Jika klon jatuh di bawah kereta x, maka pemain gagal; dalam hal ini, klon memainkan suara yang berbeda sebelum menghapus dirinya sendiri. Jika klon tidak tertangkap maupun gagal, maka ia masih jatuh, dan blok selamanya berputar lagi.

Sekarang apel kita tahu cara jatuh, permainan selesai! Silakan coba dengan mengklik bendera hijau. Jika Anda ingin bereksperimen, coba ubah waktu tunggu antara mengkloning apel yang berbeda dan kecepatan menggerakkan kereta. Apakah itu memberi Anda beberapa ide untuk mengubah kesulitan permainan?

Lebih lanjut tentang Sprite yang Dikloning

Setiap sprite dapat menyalin dirinya sendiri atau sprite lain menggunakan blok buat klon. (Panggung juga dapat mengklonakan sprite menggunakan blok yang sama.) Sprite yang diklonakan mewarisi keadaan aslinya pada saat dikloning—yaitu, posisi dan arah asli saat ini, kostum, status visibilitas, warna pena, ukuran pena, efek grafis, dan sebagainya. Ide ini diilustrasikan pada Gambar 2-25.

Gambar 2-25: Klon mewarisi atribut dari induknya.

Klon juga mewarisi skrip dari sprite induk, seperti yang ditunjukkan pada Gambar 2-26. Di sini, sprite induk membuat dua klon. Saat Anda menekan spasi, ketiga sprite (induk dan kedua klon) berputar 15° ke kanan karena semuanya menjalankan skrip saat tombol spasi ditekan.

Gambar 2-26: Klon mewarisi skrip dari induknya.

Selalu perhatikan baik-baik saat menggunakan blok "buat klon dari"

dalam skrip yang tidak dimulai dengan pemicu bendera hijau, atau Anda bisa berakhir dengan lebih banyak sprite daripada yang Anda inginkan. Perhatikan program yang ditunjukkan pada Gambar 2-27. Pertama kali Anda menekan spasi, sebuah klon akan dibuat, dan aplikasi akan memiliki dua sprite (master dan klon).

Gambar 2-27: Pengklonan sebagai respons terhadap peristiwa penekanan tombol

Sekarang, jika Anda menekan spasi untuk kedua kalinya, Anda akan memiliki empat sprite dalam aplikasi Anda. Mengapa? Sprite master akan merespons penekanan tombol dan membuat klon, tetapi klon pertama juga akan merespons dan membuat klon lain (yaitu, klon dari klon). Tekan spasi untuk ketiga kalinya, dan Anda akan memiliki delapan sprite dalam aplikasi Anda. Jumlah klon akan tumbuh secara eksponensial!

Anda dapat mengatasi ini dengan hanya mengklon sprite dalam skrip yang dimulai dengan blok "ketika bendera hijau diklik". Skrip ini hanya dijalankan oleh sprite master.

Ringkasan

Dalam bab ini, Anda telah mempelajari cara memindahkan sprite ke titik-titik tertentu di Panggung menggunakan perintah gerak absolut. Kemudian, Anda menggunakan perintah gerak relatif untuk memindahkan sprite dengan mengacu pada posisi dan arahnya sendiri. Setelah itu, Anda membuat beberapa gambar menarik dengan perintah pena.

Saat Anda menggambar berbagai bentuk, Anda menemukan kekuatan blok pengulangan, yang memungkinkan Anda membuat skrip yang lebih pendek dan efisien. Anda juga mempelajari tentang perintah stempel dan menggunakannya dengan blok pengulangan untuk mendesain pola kompleks dengan mudah.

Di akhir bab, Anda membuat dua game dan mempelajari tentang fitur klon Scratch. Di bab berikutnya, Anda akan menggunakan palet Tampilan dan Suara untuk membuat program yang lebih menarik.

Soal

1. Jelaskan bagaimana cara kerja skrip berikut. Tuliskan koordinat (x,y) untuk semua sudut gambar.

2. Tuliskan skrip untuk menghubungkan setiap himpunan titik berikut secara berurutan dan ungkapkan bentuk akhirnya:

a. (30,20), (80,20), (80,30), (90,30), (90,80), (80,80), (80,90),

(30,90), (30,80), (20,80), (20,30), (30,30), (30,20)

b. (–10,10), (–30,10), (–30,70), (–70,70), (–70,30), (–60,30), (–60,60),

(–40,60), (–40,10), (–90,10), (–90,90), (–10,90), (–10,10)

3. Tulis skrip untuk menggambar setiap pola yang ditunjukkan di bawah ini.

4. Perhatikan skrip berikut dan outputnya. Buat ulang skrip tersebut, tambahkan perintah pengaturan pena yang diperlukan, jalankan, dan jelaskan cara kerjanya.

5. Perhatikan skrip berikut dan outputnya. Buat ulang skrip tersebut, tambahkan perintah pengaturan pena yang diperlukan, jalankan, dan jelaskan cara kerjanya.

6. Perhatikan skrip berikut dan outputnya. Buat ulang skrip tersebut, tambahkan perintah pena yang diperlukan, jalankan, dan jelaskan cara kerjanya.

7. Buat skrip seperti yang ditunjukkan di bawah ini, tambahkan perintah pena yang diperlukan, dan jalankan. Jelaskan cara kerja skrip tersebut.

8. Tulis program yang menghasilkan output seperti yang ditunjukkan di bawah ini.

9. Pada soal ini, Anda akan menulis skrip yang dibutuhkan untuk menyelesaikan permainan Balloon Blast yang ditunjukkan di bawah ini.

Permainan ini berisi dua sprite, bernama Balloon dan Rocket. Saat Anda mengklik bendera hijau, sprite Balloon akan membuat lima klon di antarmuka yang ditunjukkan di atas. Sprite Rocket bergerak ke kiri dan ke kanan dengan sendirinya, memantul dari tepi Stage. Anda perlu menekan spasi pada saat yang tepat untuk meluncurkan roket dan meletuskan balon. Buka file BalloonBlast_NoCode.sb2. File ini berisi kode untuk membuat lima klon saat permainan dimulai. Tugas Anda adalah menyelesaikan permainan dengan menambahkan dua skrip berikut.

Ringkasan:

Gerakan, Menggambar, dan Kloning 

Bab ini memperdalam penggunaan blok-blok Scratch untuk mengontrol pergerakan sprite, menggambar pola geometris, mengoptimalkan kode dengan perulangan, dan membangun game menggunakan fitur kloning dan variabel.

Gerakan Absolut (Koordinat)

Gerakan absolut memindahkan sprite ke lokasi yang pasti berdasarkan sistem koordinat. Panggung (Stage) Scratch beroperasi pada grid berukuran 480 × 360 dengan titik pusat di koordinat (0,0).

• go to (x, y): Memindahkan sprite secara instan ke titik koordinat tertentu.

• glide to: Memindahkan sprite secara perlahan (meluncur) ke titik tertentu dalam durasi waktu yang ditentukan.

• set x to / set y to: Mengubah nilai sumbu horizontal (x) atau vertikal (y) secara mandiri.

• Pergerakan ini dihitung berdasarkan "pusat kostum" yang dapat diatur di Editor Cat.

Gerakan Relatif dan Arah

Gerakan relatif menginstruksikan sprite untuk bergerak berdasarkan posisi dan arah hadapnya saat ini.

• Sistem Arah: Scratch menggunakan sistem angka untuk arah, yaitu 0 (atas), 90 (kanan), 180 (bawah), dan -90 (kiri).

• move & turn: Menggerakkan sprite maju beberapa langkah ke arah hadapnya, atau memutarnya searah/berlawanan jarum jam.

• Catatan Desain: Agar perintah arah berfungsi visual dengan benar, gambar dasar kostum di Editor Cat harus dibuat menghadap ke arah kanan (90°).

Perintah Pena (Menggambar Visual)

Setiap sprite dibekali "pena" tersembunyi untuk menggambar jejak perjalanannya di Panggung.

• Blok pen down (turunkan pena) membuat sprite meninggalkan garis saat bergerak, sementara pen up (angkat pena) menghentikan goresan.

• Blok clear berfungsi menghapus semua gambar pena di Panggung.

• Pengguna dapat mengatur warna, ketebalan, dan ukuran pena untuk membuat aplikasi menggambar (drawing app) sederhana yang dikontrol lewat panah keyboard.

Kekuatan Pengulangan (Looping) & Stempel

Pengulangan adalah konsep krusial untuk membuat kode lebih pendek, efisien, dan mudah dimodifikasi.

• Blok repeat sangat berguna untuk menggambar bangun datar (seperti persegi atau poligon) dengan mengulang instruksi "maju dan belok" tanpa harus menulis blok yang sama berkali-kali.

• Stempel (Stamp): Alih-alih menggambar garis, blok stempel mencetak salinan persis dari kostum sprite ke Panggung. Menggabungkan blok stempel dengan pengulangan putaran dapat menghasilkan karya seni simetris seperti bentuk kincir angin.

Praktik Proyek: Logika Game & Kloning

Bab ini mendemonstrasikan penerapan perintah di atas melalui dua pembuatan game:

• Mekanik Angka Acak & Variabel: Pada game mengumpulkan koin, koordinat (x,y) acak dikombinasikan dengan operasi matematika digunakan untuk memunculkan objek di titik grid tertentu. Proyek ini juga menggunakan variabel untuk mencatat skor dan pengatur waktu (timer) untuk batasan detik.

• Kloning (Penggandaan Sprite): Untuk game menangkap puluhan apel yang jatuh, pengguna tidak perlu membuat banyak sprite secara manual. Fitur create clone of memungkinkan satu sprite induk untuk menggandakan dirinya sendiri.

• Klon mewarisi kostum, posisi, dan skrip dari induknya. Sangat penting menggunakan blok pemicu "ketika saya mulai sebagai klon" untuk mengontrol perilaku salinan tanpa membuat penggandaan berantai yang membuat program macet.