Virtual Lab Informatika Kelas 8: Eksplorasi Sprites dengan Blockly

🎮

Lab Blockly Sprites

Kelas 8 • Eksplorasi Karakter

⭐ 0 poin

🎮

Eksplorasi Sprites dengan Blockly Kelas 8

Ciptakan Karakter Interaktif: Sprite, Animasi & Logika Visual

📊 Progress Belajarmu

0%

0 dari 6 modul selesai

🎨

✓ Selesai

Apa itu Sprite?

Pengertian, komponen & cara kerja sprite

Pelajari →

⚙️

✓ Selesai

Properti Sprite

Posisi, ukuran, warna & atribut

Interaktif →

🧩

✓ Selesai

Blok Sprite Blockly

Gerakan, penampilan, suara & logika

Visualisasi →

✨

✓ Selesai

Animasi Sprite

Gerakan, kostum & efek visual

Simulasi →

🎯

✓ Selesai

Interaksi Sprite

Event, kontrol alur & respons

Praktik →

📝

✓ Selesai

Kuis Sprites

Uji pemahaman materi sprites

Kuis →

💡 Modul Eksplorasi Blockly Sprites Kelas 8

Pelajari 6 modul lengkap tentang Sprites dalam Blockly: Pengertian sprite, properti (posisi/ukuran/warna), blok-blok sprite (gerakan/penampilan/suara/logika), animasi interaktif, interaksi & event serta cara sprite membantu memahami konsep pemrograman visual & kreativitas. Raih hingga 120 poin!

🎨

Apa itu Sprite?

Pengertian, Komponen & Cara Kerja Sprite

Sprite adalah gambar 2D (karakter, objek, ikon) yang bisa dibuat, dimodifikasi, dan diprogram untuk bergerak atau bereaksi dalam program. Sprite adalah elemen utama dalam pemrograman visual yang membantu siswa memahami animasi dan interaktivitas.

🎮 Definisi Sprite

Objek grafis 2D yang bisa diberi perilaku, aturan, dan respons terhadap event (kejadian) melalui pemrograman blok visual. Sprite menjadi "hidup" karena kode yang kita buat.

🎨 Komponen Sprite

Setiap sprite memiliki: kostum (gambar), nama, posisi (x,y), ukuran, arah, dan variabel lokal untuk menyimpan data.

⚙️ Cara Kerja Sprite

Blok kode dijalankan secara berurutan. Sprite menjalankan perintah (gerakan, suara, perubahan kostum) saat kondisi terpenuhi atau event terjadi.

🎯 Contoh Sprite dalam Program

🎮 Karakter Pemain

Bergerak saat tombol ditekan

👾 Musuh

Bergerak secara otomatis

⭐ Item/Bonus

Berputar atau berkilau

💬 Dialog/UI

Menampilkan teks/pesan

🎯 Kuis Mini

Tandai pernyataan yang benar:

Sprite adalah gambar 2D yang bisa diprogram bergerak Setiap sprite bisa memiliki kode dan properti sendiri

⚙️

Properti Sprite

Posisi, Ukuran, Warna & Atribut Lainnya

Setiap sprite memiliki properti (karakteristik) yang menentukan tampilan dan perilakunya. Properti bisa diubah untuk menciptakan efek visual yang berbeda.

📍 Posisi (X, Y)

Koordinat tempat sprite berada di layar. X = horizontal (kiri-kanan), Y = vertikal (atas-bawah).

📏 Ukuran (Size)

Besarnya sprite dalam persen (100% = ukuran normal, 50% = setengah, 200% = dua kali lipat).

🎨 Warna (Color)

Warna sprite bisa diubah dengan efek tint, fisheye, atau effect lainnya.

🔄 Arah (Direction)

Sudut orientasi sprite (0-360 derajat). Menentukan kemana sprite "menghadap".

🎮 Demo Interaktif: Ubah Properti Sprite

😊

Posisi X: 0

Posisi Y: 0

Ukuran: 100%

Rotasi: 0°

🎯 Kuis Mini

Pilih jawaban yang tepat:

Properti apa yang mengatur posisi horizontal sprite?

🧩

Blok Sprite Blockly

Gerakan, Penampilan, Suara & Logika

Blok-blok di Blockly memungkinkan kita memerintah sprite untuk melakukan berbagai aksi. Setiap kategori blok memiliki fungsi khusus.

📍 Blok Gerakan (Motion)

• Pindahkan sprite ke (x,y) • Gerak maju/mundur • Ubah arah • Pantul saat menyentuh tepi

🎨 Blok Penampilan (Looks)

• Ganti kostum • Ubah ukuran • Ubah warna • Tampilkan/sembunyikan sprite

🔊 Blok Suara (Sound)

• Mainkan suara • Ubah volume • Ubah tempo

⚡ Blok Logika (Events/Control)

• Saat ... diklik • Saat tombol ditekan • Ulangi ... kali • Jika ... maka ...

📝 Contoh Kode Blok Sprite

Saat sprite diklik:

- Gerak 50 langkah maju

- Mainkan suara 'pop'

- Ubah ukuran 150%

- Tunggu 1 detik

- Ubah ukuran kembali 100%

🎯 Kuis Mini

Pilih blok yang tepat untuk setiap aksi:

Untuk membuat sprite bergerak, gunakan blok...

Untuk membuat sprite bereaksi saat diklik, gunakan blok...

✨

Animasi Sprite

Gerakan, Kostum & Efek Visual

Animasi adalah serangkaian gerakan atau perubahan yang membuat sprite terlihat "bernyawa". Animasi dibuat dengan menggabungkan blok gerakan dan penampilan.

🚶 Animasi Berjalan

Ganti kostum berulang kali + gerak maju = sprite terlihat berjalan.

🔄 Animasi Memutar

Ubah arah sprite secara bertahap (0° → 90° → 180° → 270°) menciptakan efek rotasi.

📏 Animasi Membesar/Mengecil

Ubah ukuran secara perlahan dari kecil → besar atau besar → kecil.

⚡ Animasi Kilatan

Tampilkan/sembunyikan sprite berulang cepat = efek berkedip-kedip.

🎮 Coba Animasi!

🌟

🎯 Kuis Mini

Pernyataan mana yang benar?

Animasi berjalan dibuat dengan...

🎯

Interaksi Sprite

Event, Kontrol Alur & Respons Sprite

Interaksi membuat sprite merespons aksi pengguna atau kondisi tertentu. Ini adalah inti dari pemrograman interaktif dan game.

🖱️ Event: Saat Diklik

Sprite menjalankan kode ketika pemain mengkliknya.

⌨️ Event: Saat Tombol Ditekan

Sprite merespons input keyboard (anak panah, huruf, dll).

🔄 Kontrol Alur: Ulangi

Blok kode dijalankan berkali-kali (loop) untuk membuat gerakan berkelanjutan.

❓ Kondisional: Jika...Maka

Sprite membuat keputusan berdasarkan kondisi (menyentuh musuh?, posisi?, dst?).

🎮 Sprite Interaktif - Klik Saya!

🎮

Klik sprite untuk melihat respon interaktif!

🎯 Kuis Mini

Pilih jawaban yang tepat:

Untuk membuat sprite merespons klik pemain, gunakan...

Untuk membuat gerakan berulang, gunakan...

📝

Kuis Sprites Blockly

Uji Pemahaman Keseluruhan Materi

Soal 1 dari 6

Skor: 0

🎉

Kuis Selesai!

Skor akhir: 0/6

Berhasil!