BAHASAN 3:

Motion & Looks

ALGORITMA
&
PEMROGRAM
Program Studi ILMU
AN
KOMUNIKASI
SCRATCH
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
TUJUAN

Mahasiswa dapat memahami,menjelaskan motion dan looks pada blok scratch

Mahasiswa mampu mengimplementasikan dan membuat animasi sederhana

menggunakan motion dan looks pada scratch

2
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
OUTLINE
TUJUAN

Mahasiswa memahami motion dan looks pada blok scratch

Mahasiswa mampu mengimplementasikan dan membuat animasi sederhana

menggunakan motion dan looks pada scratch

3
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN
Pengenalan Motion

Jika anda ingin membuat game atau program animasi lainnya, anda harus menggunakan blok motion ini. Blok motion
berfungsi untuk untuk menggerakan sprite di dalam stage. Selain itu, anda juga dapat memerintahkan sprite untuk
memindahkan ke arah tertentu pada stage. Motion pada Scratch mempunyai beberapa tipe, antara lain:
 
1. Absolute Motion (Gerak Mutlak).
 
2. Relative Motion (Gerak Relatif ).
 
3. Curva Motion (Gerak Berkelok).
 

 
Absolute Motion
Absolute motion merupakan motion yang bekerja pada stage berukuran 480 × 360 persegi panjang. Pada setiap stage
pusatnya dimulai dari titik (x,y) = (0,0). Scratch memiliki empat perintah absolute motion (go to, glide to, set x to, and
set y to) yang memungkinkan anda memberitahu sprite harus berada di mana untuk pergi pada grid tersebut menuju
target.
Pada Gambar 5.1 merupakan salah satu contoh pergerakkan sprite dimulai dari titik 0 menuju x (200), y (150) menuju
target dengan menggunakan absolute motion.
4
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

menjelaskan bahwa Garis (x) koordinat terletak di sisi kanan

memberitahu sprite seberapa jauh bergerak horizontal di stage,
sedangkan garis (y) koordinat mengatakan itu seberapa jauh
bergerak secara vertikal menuju target.
Pada Gambar lain memberikan contoh lain mengenai absolute
motion, di mana pergerakkan sprite menuju titik x (200)
dan y (150) sebagai target

Contoh 1 Pergerakan Absolute Motion

5
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

menjelaskan pada step 1 bahwa garis koordinat (x) terletak di

sisi kanan dan memberitahu sprite seberapa jauh bergerak
horizontal di stage, sedangkan pada Step 2 : garis koordinat
(y) mengatakan seberapa jauh bergerak secara vertikal
menuju target.

Contoh 2 Pergerakan Absoulte Motion

6
 Pada Gambar 5.3 memberikan contoh lain mengenai absolute motion dengan meng- gunakan dua buah sprite yaitu dua mouse pada Stage.
Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

Gambar tsbt menjelasakan bahwa Pada mouse1 sprite berjalan dari

titik mulai menuju finish x (0) dan y (0) ,
sedangkan Pada mouse2 sprite berjalan dari titik mulai menuju
finish x (100) dan y (100).

Contoh 3 Pergerakan Absolute Motion

7
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

Relative Motion
 
Relative motion merupakan motion yang hampir sama dengan absolute motion
yaitu bekerja pada stage berukuran 480 × 360 persegi panjang. Pada setiap
stage pusatnya dimulai dari titik (x,y) = (0,0). Perbedaanya terletak di titik
awal di mulai dengan ketentuan bebas. Pada relative motion ini, perubahan
yang di perlihatkan berupa perubahan motion dengan langkah yang
perubahannya terjadi secara berulang menuju target dengan beberapa langkah.
Pada Gambar disamping diberikan contoh mengenai relative motion yang
menggunakan relative motion yang diatur dengan pergerakkan secara 4 langkah
ke arah target
Contoh 1 Pergerakan Relative Motion

8
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

menjelaskan 4 langkah mengenai cara kerja relative motion yaitu:

1. Sprite memulai dari titik (0,0).
2. Sprite melakukan perpindahan 3 langkah menuju baris target.
3. Sprite melakukan perpindahan berbelok ke kanan.
4. Sprite melakukan perpindahan 2 langkah menuju target.
Pada relative motion juga kadang menggunakan arah konvensi pada Scratch, adapun arah konvensi yang dimaksud dapat dilihat pada Gambar

Gambar 5.5: Arah Konvensi Pada Motion

Penjelasan mengenai arah konvensi pada Gambar tsbt antara lain
sebagai berikut:
1. Tititk 0” berada di atas tengah.
2. Titik 90” berada di sebelah kanan koordinat y.
3. Tititk -90” berada di sebelah kiri koordinat y.
4. Titik 180” berada di bawah tengah.

9
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

Curva Motion
 
Curva motion merupakan motion yang hampir sama dengan absolute motion
yaitu bekerja pada stage berukuran 480 × 360 persegi panjang. Pada setiap
stage pusatnya dimulai dari titik (x,y) = (0,0). Curva motion menggunakan
gerakkan yang berkelok – kelok, perubahan yang di perlihatkan dengan
menggunakan langkah menuju titik x ke y secara berulang menuju target.
Pada Gambar tsbt menunjukan mengenai contoh dari pergerakan curva motion
atau gerakan berkelok Contoh Pergerakan Curva Motion

Pada contoh Gambar diatas menjelaskan tentang pergerakkan

berkelok dengan perulangan titik x menuju titik y secara berulang 3
kali dengan titik x (50) dan y (50) menuju target (x,y) = 150,150)

10
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

Perintah Pada Motion

perintah-perintah blok script yang ada pada Motion.

11
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

Alur program motion yang akan dibuat yaitu membuat sebuah objek sprite berbentuk kucing yang dapat mengejar
sebuah objek berbentuk bola. Adapun objek sprite berbentuk bola mengikuti mouse pointer .
 
1. Langkah pertama buatlah 2 buah sprite baru yaitu sprite berbentuk kucing dan bola, seperti pada Gambar

Langkah 1 Implementasi Motion

2. Klik pada Sprite bola, kemudian buatlah script seperti pada Gambar , pada area script untuk membuat logika agar
bola mengikuti pointer mouse saat program dijalankan 12
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN
Klik pada Sprite kuncing, kemudian buatlah script seperti pada Gambar.
pada area script untuk membuat logika agar kucing mengikuti pergerakan bola.

Langkah 3 Implementasi Motion

13
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN
PENGENALAN LOOKS
Perintah dalam looks akan membatu anda dalam membuat animasi dan menerapkan efek grafis seperti berputar, fisheye, hantu, dan
sebagainya untuk costume dan latar belakang. Looks digunakan untuk mengubah beberapa costume dari suatu sprite secara mudah.
Perintah dalam looks akan memudahkan anda untuk memanipulasi costume dalam membuat animasi, menambahkan dialog ballon, efek
grafis, dan mengubah gerakan suatu sprite. Pada bab ini akan dijelaskan mengenai perintah untuk meng- gunakan looks. Dalam
pengenalan looks, akan diimplementasikan beberapa contoh sebagai berikut:
1. Looks Pallete

Mengubah suatu costumes pada sebuah sprite.

2. Image Effect

Mengubah tampilan sebuah sprite secara otomatis.

3. Changing Costume Animate

Mengubah suatu costume pada sebuah sprite secara acak.

4. Layer

Mengatur layer pada stage yang terdapat beberapa sprite.

Namun sebelum melakukan implementasi looks, kita harus mengetahui terlebih dahulu tentang perintah pada looks. 14
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

Perintah Blok Script Pada Looks

15
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN
IMPLEMENTASI
LOOKS
 
Looks Pallete
Pada implementasi ini dijelaskan mengenai cara mengirim
sprite dari satu titik ke titik lain pada stage, namun sprite
statis tidak terlihat hidup seperti melompat-lompat. Jika
menggunakan costumes secara manual, sprite akan bergerak
cukup cepat, namun dengan menggunakan looks anda dapat
membuat sprite muncul seolah-olah itu benar-benar bergerak.
Pada Gambar disamping menggambarkan tentang contoh
perintah yang ada pada looks yaitu perintah next costume
untuk menciptakan ilusi animasi yang beralih di antara Implementasi Looks Pallete
costume yang berbeda.

Implementasi ini berisi satu sprite dengan tujuh costume bersama dengan satu script. anda dapat melihat tujuh costume di tab
costume dan script di tab script sprite. Ketika anda menjalankan aplikasi dengan mengklik bendera hijau, tongkat akan muncul
untuk berjalan pada stage. Kunci untuk sprite bergerak adalah perintah next costume, yang memberitahu sprite untuk
menempatkan pada costume berikutnya dalam daftar costume. Jika sprite mengenakan costume terakhir dalam daftar, itu akan
dimasukkan ke costume pertamanya. 16
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

Ketika bendera hijau diklik, script forever akan melakukan perulangan dengan blok wait sampai pada akhir dan membuat
delay 0,1 detik setiap perubahan costume. Jika anda menghapus script wait 0.1 sec dari script, program akan muncul untuk
menjalankan tanpa adanya waktu menunggu. Percobaan akan berbeda hasilnya jika nilai pada script move 10 steps dan
script wait berbeda. Meskipun anda bisa membuat program ini dengan mengubah costume secara manual, anda akan perlu
untuk menyusun program lebih panjang. Maka dari itu, digunakanlah perintah next costume pada script looks untuk
memudahkan program tersebu

17
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

Image Effects
Perintah set effect to memungkinkan anda untuk menerapkan
efek grafis yang berbeda untuk costume dan latar belakang.
Scratch memberikan nama-nama efek ini seperti fisheye,
berputar, mosaik, dan sebagainya. Gambar menampilkan
contoh dari image effects yang dapat dibuat oleh Scratch.
Pada image effects pada Scratch ada beberapa yang perlu kita
pelajari. Di dalam script pada looks dan macam – macam
tampilan yang akan mempengaruhi sprite dengan pada perintah set
color effect to 0. Klik panah bawah di script Set Effect to untuk
memilih efek yang anda inginkan dari menu drop-down. anda juga
dapat menggunakan perintah Change effect By untuk
menyesuaikan efek bukan mengatur secara langsung. Sebagai Implementasi Image Effect
contoh, jika efek ghost saat ini diatur ke 40, mengubahnya dengan
60 akan mengatur effect ghost ke 100 dan akan menyebabkan
sprite menghilang (seperti hantu).Ketika anda ingin mengembalikan
sprite ke kondisi semula, gunakan perintah clear graphic effect.
anda dapat menerapkan beberapa efek ke sprite sekaligus dengan 18
menggunakan beberapa perintah efek grafis secara berurutan.
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

 
Changing Costume To Animate
Jika anda ingin dapat berinteraksi dengan sprite, anda bisa
mengubah costume dengan menggunakan klik mouse, seperti pada
klik pada aplikasi face pada Gambar Animasi ini berisi sprite
tunggal, bernama face, yang memiliki lima costume. Animasi
akan berjalan ketika sprite ini diklik dan berubah costume.
Pengimplementasian perintah pada looks untuk animasi smile
terdapat pada contoh yang ada dalam Gambar Perintah next
costume untuk mengubah tampilan smile dan perintah switch
backdrop to backdrop 1 untuk merubah backdrop sesuai Changing Costume To Animate
perubahan smile

Ketika menjalankan program di atas, setiap anda mengklik mouse sprite face, sprite akan berubah costume dari daftar
list yang telah ada. Pada script juga terdapat perintah switch backdrop to untuk memberi perintah mengubah stage
secara acak dari 1 sampai dengan 4 backdrop yang telah ada.

19
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN
Ketika stage berubah pada stage 4, maka sprite face akan menjalankan perintah bergerak ke koordinat x: 240 dan y: 180.
Hal ini dikarenakan terdapat perintah where backdrop switches to Stage 4 yang merupakan perintah setelahnya. Di dalam
kasus ini, sprite akan berjalan ke posisi di pojok kanan atas stage dan kembali ke tengah. Anda dapat menggunakan
perubahan backdrop untuk perintah mengubah scene dari suatu cerita, mengubah level pada game, dan lain sebagainya.
Semua sprite di dalam project dapat digunakan di dalam pilihan perintah When backdrop switches untuk mendeteksi ketika
stage berubah tentunya costume pada sprite juga berubah. Implementasi lainnya menggunakan perintah Say for ... Secs, di
mana sprite 1 dan sprite 2 akan bersama-sama berkata hello dengan jeda waktu 2 detik antar sprite, seperti ilustrasi pada
Gambar.

Say For Second 20

 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN

Pada Gambar menjelaskan bahwa script Say for..secs membuat sebuah sprite dapat berkata sesuatu seperti
membuat suatu cerita komik. Jika anda ingin menghapus pesan yang dikeluarkan pada sprite sebelumnya, anda
dapat menggunakan Say maupun think seperti pada Gambar

Say and Think Pengenalan Variables

Penggunaan perintah Say dan think berbeda dengan Say for..secs, di mana perin- tah ini membuat suatu pesan
secara langsung tanpa adanya waktu tunggu beberapa detik.
21
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
BAHASAN
TUJUAN
LAYER
Layer pada suatu project di dalam Scratch dapat diatur dengan menggunakan perintah go to front maupun go back
1 layers. Sebagai contoh dapat dilihat pada Gambar, di mana terdapat sprite wanita (sebelah kiri dan sebelah kanan),
serta sprite batu. Pada gambar sebelah kiri, sprite wanita ada yang tertutup sprite batu dan juga ada yang di depan
batu.
Untuk membuat suatu sprite dapat berada di depan sprite
lainnya, anda dapat menggunakan perintah go to front,
sehingga sprite tersebut dapat berada pada paling depan sprite
lainnya. Sedangkan perintah go back..layers merupakan
perintah untuk mengubah posisi sprite berada dibelakang
sejumlah layers yang anda input pada script

Layer

22
 Tujuan
Tujuan » Outline » Bahasan » Ringkasan | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
RINGKASAN
TUJUAN

 Motion pada Scratch mempunyai beberapa tipe, antara lain: 1.

Absolute Motion (Gerak Mutlak). 2. Relative Motion (Gerak Relatif ). 3.
Curva Motion (Gerak Berkelok).
 Pengenalan looks, beberapa contoh sebagai berikut:
1. Looks Pallete 2. Image Effect 3. Changing Costume Animate 4. Layer

23
 Tujuan
Tujuan
Tujuan
» Outline
» Outline
» Bahasan
» Bahasan
» Daftar
» Ringkasan
Pustaka | Program Studi
ILMUilmu
KOMUNIKASI
komunikasi
TUJUAN PUSTAKA
DAFTAR

• https://scratch.mit.edu

• Computer Algorithms: introduction to design and analysis. 2nd ed., Sara Baase,
Reading,Mass: Addison-Wesley Company, 1993

24