În lucru: lecțiile se refac de la capăt. Lecțiile noi ale clasei: lecțiile noi ale clasei a VI-a →
Invatare Atomica

Miscare si Animatie in Scratch

Progres lectie:
0%
🎯

Obiectivul lectiei

Sprite-urile tale stau pe loc... Nu stii cum sa le faci sa se miste fluid... Coordonatele X si Y te confuzeaza... Nu intelegi de ce sprite-ul iese din scena...

Dupa aceasta lectie vei putea:

  • Sa programezi un sprite sa se deplaseze pe scena folosind blocuri de miscare
  • Sa folosesti coordonatele X si Y pentru a pozitiona un sprite pe scena
  • Sa controlezi directia de deplasare (grade: 0=sus, 90=dreapta, 180=jos, 270=stanga)
  • Sa combini blocurile 'mergi', 'gliseaza' si 'orienteaza-te' pentru trasee complexe
  • Sa faci un sprite sa se reflecte de marginea scenei

Incearca singur!

🎯 Experimenteaza cu miscarea!

Provocare: Fa pisica sa se plimbe!

Hai sa facem primul tau program de miscare! Urmeaza pasii:

  1. Deschide Scratch si lasa pisica (Scratch Cat) pe scena
  2. Gaseste categoria "Motion" (albastru inchis) in stanga
  3. Trage blocul "move 10 steps" in zona de cod
  4. Click pe el! Ce se intampla cu pisica?
  5. Acum trage blocul "turn 15 degrees" (roteste 15 grade)
  6. Alipeste-l sub "move 10 steps" ca sa formeze un script
  7. Click repetat pe script - ce miscare face pisica?
  8. Experimenteaza: schimba numarul de pasi (de la 10 la 20, 50, 100...)
  9. Experimenteaza: schimba gradele (de la 15 la 90, 180, -90...)
Script simplu de miscare:

move (10) steps
turn (15) degrees

Explicatie:
- "move 10 steps" misca pisica cu 10 pasi inainte
- "turn 15 degrees" o roteste cu 15 grade (spre dreapta)
- Impreuna formeaza o miscare in spirala circulara!
Observi cum pisica se misca? Fiecare click executa tot scriptul odata. Pentru miscare continua, vei invata sa folosesti bucle (loops) mai tarziu!
💡 Indiciu #1: Pisica a iesit din scena? ▶
Nu-ti face griji! Trage pisica inapoi cu mouse-ul sau foloseste blocul "go to x: (0) y: (0)" din Motion pentru a o readuce in centru.
💡 Indiciu #2: Vrei sa vezi coordonatele? ▶
Uita-te sub scena la informatiile despre sprite! Vei vedea "x:" si "y:" care se actualizeaza in timp real cand misti pisica. Incearca sa o misti manual cu mouse-ul si urmareste numerele!
💡 Indiciu #3: Vrei miscare automata? ▶
Adauga blocul "when green flag clicked" (Events - galben) deasupra scriptului tau si inlantuieste totul intr-un bloc "forever" (Control - portocaliu) pentru miscare continua!

🌟 Provocare Bonus

Poti face pisica sa se miste intr-un patrat? Gandeste-te: un patrat are 4 laturi egale si 4 colturi drepte (90 grade). Combinand "move" si "turn 90 degrees" de 4 ori, vei crea un patrat!

1

1. Continut

🔵
Blocurile de baza pentru miscare
Definitie: Blocurile de Motion (Miscare) sunt blocuri albastre care controleaza pozitia si directia sprite-urilor pe scena. Sunt cele mai importante blocuri pentru animatie!
Analogie din viata ta: Blocurile de miscare sunt ca indicatiile pe care le dai unui prieten: "mergi 10 pasi inainte", "intoarce-te la dreapta", "du-te la biblioteca". Sprite-ul le executa exact!

Blocurile Motion principale:

Bloc Functie Exemplu folosire
move (10) steps Misca sprite-ul inainte cu numarul specificat de pasi Miscare liniara simpla
turn ↻ (15) degrees Roteste sprite-ul in sens orar (dreapta) Schimbarea directiei
turn ↺ (15) degrees Roteste sprite-ul in sens antiorar (stanga) Rotatie inversa
go to x: () y: () Teleporteaza sprite-ul la coordonate exacte (instant) Resetare pozitie
glide (1) secs to x: () y: () Misca sprite-ul FLUID la coordonate (in N secunde) Animatie smooth
point in direction (90) Seteaza directia sprite-ului (0-360 grade) Control directional
point towards (mouse) Roteste sprite-ul spre mouse sau alt sprite Urmarire tinta
if on edge, bounce Sprite-ul se intoarce daca atinge marginea scenei Prevenire iesire din scena
set x to () / set y to () Seteaza doar o coordonata (X sau Y) Miscare pe o singura axa
change x by () / change y by () Modifica coordonata cu o valoare (relativ) Deplasare incrementala
Diferenta intre "go to" si "glide": "go to" este instant (teleportare), "glide" este fluid (aluneca lin intr-un timp stabilit). Foloseste "glide" pentru animatii mai naturale!

🎮 Exemplu complet - Pisica merge la mouse:

when [green flag ▼] clicked
forever
    point towards [mouse-pointer ▼]
    move (3) steps

Pisica se roteste mereu spre mouse, apoi merge cu 3 pasi in directia aia. Rezultat: te urmareste pe tot ecranul!

2

2. Continut

📍
Sistemul de coordonate X si Y
Definitie: Fiecare punct de pe scena Scratch are o adresa formata din 2 numere: X (pozitie pe orizontala) si Y (pozitie pe verticala). Centrul scenei este la X=0, Y=0.
Analogie din viata ta: Coordonatele sunt ca pe tabla de la ora de matematica! X este axa orizontala (dreapta-stanga), Y este axa verticala (sus-jos). Centrul (0, 0) este originea - exact ca in planul cartezian de la matematica. "Du-te la X=100, Y=50" inseamna: 100 unitati spre dreapta si 50 unitati in sus fata de centru.

Valorile coordonatelor:

  • X pozitiv (+): Dreapta (de la 0 la +240)
  • X negativ (-): Stanga (de la 0 la -240)
  • Y pozitiv (+): Sus (de la 0 la +180)
  • Y negativ (-): Jos (de la 0 la -180)

📐 Pozitii speciale pe scena:

Pozitie Coordonate Descriere
Centru X=0, Y=0 Mijlocul scenei (start default)
Colt stanga sus X=-240, Y=180 Extremitatea NV
Colt dreapta sus X=240, Y=180 Extremitatea NE
Colt stanga jos X=-240, Y=-180 Extremitatea SV
Colt dreapta jos X=240, Y=-180 Extremitatea SE
Confunzi X cu Y? Aminteste-ti: X merge orizontal (ca o linie pe asfalt, dreapta-stanga), Y merge vertical (ca un lift, sus-jos)!
3

3. Continut

🧭
Directia (0-360 grade)
Definitie: Directia in Scratch este unghiul spre care "se uita" sprite-ul, masurat in grade de la 0 la 360. E ca o busola!
Analogie din viata ta: Directia e ca un ceas! 0° (sus) = ora 12, 90° (dreapta) = ora 3, 180° (jos) = ora 6, 270° (stanga) = ora 9. Sprite-ul se poate intoarce in orice directie!

Directii importante:

                 0° (SUS)
                    ↑
                    │
270° (STANGA) ←─┼─→ 90° (DREAPTA)
                    │
                    ↓
                180° (JOS)
                    
  • 0°: Sus (directia implicita, nord)
  • 90°: Dreapta (est)
  • 180° sau -180°: Jos (sud)
  • 270° sau -90°: Stanga (vest)
  • 45°: Dreapta sus (nord-est)
  • 135°: Dreapta jos (sud-est)

🔄 Exemplu - Sprite merge in patrat:

when [green flag ▼] clicked
point in direction (90)
repeat (4)
    move (100) steps
    turn ↻ (90) degrees

Sprite-ul merge 100 pasi, se roteste 90°, repeta de 4 ori = patrat perfect!

Poti folosi valori negative pentru directie! -90° = 270° (stanga). Amandoua sunt echivalente!
4

4. Continut

✨
Miscarea fluida cu Glide
Definitie: Blocul "glide (1) secs to x: y:" misca sprite-ul lin si fluid de la pozitia curenta la pozitia tinta intr-un timp stabilit (in secunde).
Analogie din viata ta: "go to" e ca teleportarea in filme (apari instant acolo). "glide" e ca mersul normal (te misti treptat pana ajungi). Glide face animatia sa para realista!

Cand folosesti glide?

  • Cand vrei miscare naturala si vizibila (nu instant)
  • Pentru animatii de deplasare intre puncte
  • In jocuri unde sprite-ul trebuie sa urmareasca smooth un alt obiect
  • Pentru efecte vizuale profesionale

🌟 Exemplu - Pisica merge la mouse smooth:

when this sprite clicked
glide (1) secs to (mouse x) (mouse y)

Cand dai click pe sprite, ea aluneca lin pana la pozitia mouse-ului in 1 secunda. Incearca sa schimbi 1 cu 0.5 (mai rapid) sau 2 (mai lent)!

Timpul in glide BLOCHEAZA scriptul! Daca pui "glide 10 secs", urmatorul bloc asteapta 10 secunde. Foloseste timpuri scurte (0.5 - 2 secunde) pentru animatii responsive!
5

5. Continut

🎾
Bouncing - Reflectare la margini
Definitie: Blocul "if on edge, bounce" detecteaza daca sprite-ul atinge marginea scenei si il intoarce automat in directia opusa, ca o minge care se loveste de perete.
Analogie din viata ta: E ca mingea de tenis care loveste peretele - se intoarce automat! Sau ca o bila de biliard care se reflecta de margine. Sprite-ul nu iese niciodata din scena!

⚽ Exemplu - Minge care sare in scena:

when [green flag ▼] clicked
point in direction (45)
forever
    move (10) steps
    if on edge, bounce

Sprite-ul merge continuu in directia 45° si se reflecta de margini la nesfarsit - ca o minge de biliard pe masa!

Problema sprite-ului "upside-down"? Dupa bounce, sprite-ul poate fi cu capul in jos. Solutie: click-dreapta pe sprite → "set rotation style" → alege "left-right" (se roteste doar stanga-dreapta, nu si vertical).
6

6. Continut APROFUNDARE

Continut de aprofundare — Extensia Pen nu face parte din programa OMEN 3393/2017 pentru clasa a VI-a. Acest atom este optional si se adreseaza elevilor care vor sa exploreze mai departe. Competentele de baza (VI-1.2, VI-3.2, VI-3.3) sunt acoperite in atomii 1-5.
🖊️
Extensia Pen - Desenare cu sprite-ul
Definitie: Extensia Pen adauga blocuri care permit sprite-ului sa deseneze linii si forme pe scena pe masura ce se misca. E ca un pix atasat de sprite!
Analogie din viata ta: Sprite-ul devine un pix sau un marker! Oriunde merge, lasa o urma colorata in urma. E perfect pentru desene geometrice, trasee sau arta generativa!

Cum activezi Pen?

  1. Click pe butonul "Add Extension" (colt stanga-jos, iconita cu +)
  2. Selecteaza "Pen" din lista de extensii
  3. O noua categorie verde-inchis "Pen" apare in paleta de blocuri!

Blocuri Pen importante:

Bloc Pen Functie
pen down Activeaza pixul - sprite-ul incepe sa deseneze
pen up Dezactiveaza pixul - sprite-ul nu mai deseneaza
erase all Sterge tot ce s-a desenat pe scena
set pen color to () Schimba culoarea pixului
set pen size to () Schimba grosimea liniei (1 = subtire, 10+ = groasa)
stamp Stampileaza imaginea sprite-ului pe scena (nu linie, ci forma)

🎨 Exemplu - Deseneaza un patrat cu Pen:

when [green flag ▼] clicked
erase all
set pen color to [blue]
set pen size to (3)
pen down
repeat (4)
    move (100) steps
    turn ↻ (90) degrees
pen up

Sprite-ul deseneaza un patrat albastru pe scena! Incearca sa schimbi repeat (4) cu repeat (6) si 90 degrees cu 60 degrees - vei obtine un hexagon!

Desenele facute cu Pen nu sunt sprite-uri! Sunt doar imagini pe fundal. Nu pot fi mutate sau sterse individual - doar cu "erase all".

Exercitii practice

Exercitiul 1 (Nivel minim)

Exercitiu Miscare
Sprite care se misca si se intoarce la margine

Creeaza o animatie simpla folosind doar blocuri Motion si structura repetitiva (programa cls. VI, competenta VI-3.3):

  1. La evenimentul when green flag clicked, seteaza directia sprite-ului: point in direction 90 (spre dreapta)
  2. Adauga un bloc forever
  3. In interiorul forever, adauga: move 5 steps
  4. Adauga apoi: if on edge, bounce (sprite-ul se intoarce automat la margine)

Rezultat: Sprite-ul se misca continuu de la stanga la dreapta si inapoi, fara sa iasa din scena.

Bonus: Schimba valoarea din "move 5 steps" in "move 10 steps" — ce se intampla cu viteza? Incearca si "move 2 steps".

Vezi rezolvarea

Rezolvare pas cu pas:

  1. Adauga when green flag clicked.
  2. Sub el pune point in direction 90 (sprite-ul se uita spre dreapta).
  3. Adauga blocul forever din categoria Control.
  4. In interiorul lui forever, primul bloc: move 5 steps.
  5. Sub el, tot in bucla: if on edge, bounce.

Rezultat: sprite-ul merge spre dreapta, atinge marginea, se intoarce singur si merge inapoi, la nesfarsit.

Bonus: move 10 steps face sprite-ul mai rapid (parcurge mai multi pasi la fiecare reluare a buclei); move 2 steps il face mai incet. Viteza vizuala depinde direct de numarul din move.

Exercitiul 2 (Nivel standard) -

Exercitiu Animatie
Sprite care patruleaza scena

Creeaza un sprite care patruleaza automat intre 4 puncte ale scenei:

  1. Porneste din centru (0, 0)
  2. Merge cu glide la coltul stanga sus (-200, 150)
  3. Merge cu glide la coltul dreapta sus (200, 150)
  4. Merge cu glide la coltul dreapta jos (200, -150)
  5. Merge cu glide la coltul stanga jos (-200, -150)
  6. Se intoarce in centru (0, 0)
  7. Repeta la nesfarsit (foloseste forever)

Bonus: Adauga "point towards" inainte de fiecare glide ca sprite-ul sa se roteasca spre urmatoarea destinatie!

Vezi rezolvarea

Rezolvare pas cu pas:

  1. when green flag clicked
  2. go to x: 0 y: 0 (start in centru)
  3. forever, iar in interior, in aceasta ordine:
  4. glide 1 secs to x: -200 y: 150 (stanga sus)
  5. glide 1 secs to x: 200 y: 150 (dreapta sus)
  6. glide 1 secs to x: 200 y: -150 (dreapta jos)
  7. glide 1 secs to x: -200 y: -150 (stanga jos)
  8. glide 1 secs to x: 0 y: 0 (inapoi in centru)

Bucla forever reia tot traseul la nesfarsit.

Bonus: point towards se roteste doar spre mouse-pointer sau spre alt sprite, nu spre o coordonata fixa - deci nu poate fi pus direct inainte de fiecare glide catre un colt. Pentru rotatie exacta ai avea nevoie de point in direction cu unghiul calculat manual, ceva ce lectia nu preda.

Exercitiul 3 (Nivel performanta) -

Exercitiu Interactiv
Joc simplu de urmarire

Creeaza un mini-joc cu 2 sprite-uri:

  • Sprite 1 (jucatorul): Controlat cu tastele sageti (when key pressed → move 10 steps / turn)
  • Sprite 2 (vanator): Urmareste automat Sprite 1 (forever → point towards Sprite1 → move 2 steps)
  • Detectie coliziune: Cand Sprite 2 atinge Sprite 1, jocul se opreste (if touching Sprite1 → stop all)
  • Mesaj de final: Inainte de stop all, Sprite 2 spune "Te-am prins!" (say)
Vezi rezolvarea

Schita de rezolvare (nu solutia completa - e exercitiu de performanta):

  1. Sprite 1 (jucator): 4 scripturi separate, cate unul pentru fiecare sageata, fiecare cu miscare pe directia respectiva.
  2. Sprite 2 (vanator): when green flag clicked - forever - point towards Sprite1 (predat in lectie la mouse-pointer; aici il indrepti spre celalalt sprite) - move 2 steps.
  3. Verificare coliziune intre cele doua sprite-uri si oprirea jocului, plus mesajul afisat inainte de oprire.

Atentie: evenimentul la apasarea tastei, blocul de detectie a atingerii, oprirea completa a scripturilor si mesajul vorbit NU apar in aceasta lectie (vin la Evenimente si la Decizii) - cauta-le in paleta Scratch si experimenteaza.

Criterii: jucatorul se misca pe toate 4 directii; vanatorul urmareste constant; jocul se opreste corect la coliziune; mesajul apare inainte de oprire.

Exercitiul 4 (Nivel performanta) - APROFUNDARE

Exercitiu Creativ
Spirala colorata cu Pen
Aprofundare: Acest exercitiu foloseste extensia Pen, care nu este prevazuta in programa cls. VI. Este optional, pentru cei curiosi!

Creeaza o spirala colorata care se mareste treptat:

  1. Activeaza Pen extension
  2. Porneste cu pen down si pen size 2
  3. Foloseste o variabila "pasi" care incepe de la 1
  4. Repeat 100 ori:
    • move (pasi) steps
    • turn 15 degrees
    • change pasi by 1 (spirala se mareste!)
    • change pen color by 2 (culoarea se schimba treptat)

Rezultat: O spirala frumoasa, curcubeu, care creste de la centru spre margini!

Vezi rezolvarea

Schita de rezolvare (Aprofundare, extensia Pen nu e in programa cls. VI):

  1. Adauga extensia Pen (butonul + din colt stanga-jos).
  2. Creeaza o variabila pasi si seteaz-o la 1 la when green flag clicked.
  3. Tot la start: pen down si set pen size to 2.
  4. repeat 100: move (pasi) steps, turn 15 degrees, change pasi by 1, change pen color by 2.

Capcane: daca uiti pen down, sprite-ul se misca dar nu deseneaza nimic; daca nu resetezi pasi la 1 de fiecare data, spirala porneste dintr-un loc gresit la a doua rulare.

Criterii de evaluare: spirala creste vizibil de la centru spre margini; culoarea se schimba treptat; codul foloseste variabila si bucla repeat corect, nu valori fixe copiate manual.

Ce ai invatat astazi

  • Blocuri de miscare de baza:move steps, turn degrees, go to, glide
  • Sistemul de coordonate:X (-240 la +240), Y (-180 la +180), centru (0, 0)
  • Directii:0° = sus, 90° = dreapta, 180° = jos, 270° = stanga
  • Miscare fluida:Diferenta dintre go to (instant) si glide (smooth)
  • Bouncing:if on edge bounce pentru reflectare la margini
  • Urmarire:point towards + move pentru sprite-uri care urmaresc
  • [Aprofundare] Extensia Pen:pen down/up, set pen color/size, erase all, stamp
  • [Aprofundare] Desenare geometrica:Forme create cu repeat + move + turn + Pen

Vrei mai mult?

Provocare: Blocul glide 1 secs to x: y: "blocheaza" scriptul — urmatorul bloc asteapta pana se termina alunecarea. In schimb, construieste o miscare de tip pendul: sprite-ul aluneca (glide) de la stanga scenei la dreapta, apoi inapoi la stanga, folosind DOAR 2 blocuri glide lipite unul dupa altul (fara nicio bucla — nu ai invatat inca repeat). Numara cate blocuri glide ar trebui sa inlantui manual ca miscarea sa se repete de 5 ori dus-intors.

De ce: De ce blocul glide opreste scriptul pana termina alunecarea (in mai multe secunde), dar blocul move 10 steps nu pare sa "blocheze" nimic vizibil, desi si el dureaza o fractiune de secunda? Ce e diferit intre cele doua blocuri, dincolo de viteza?

Deschidere: Miscarea cu glide e folosita in jocuri reale pentru animatii de cutscene sau obiecte care aluneca lin (usi, lifturi, meniuri). Observa cate blocuri identice ai scris manual la provocarea de mai sus — lectia 6 (Bucle) iti arata cum faci exact aceeasi miscare repetata cu un singur bloc repeat.

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →