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 o harta a orasului! X = strada (Est-Vest), Y = aleea (Nord-Sud). "Du-te la X=100, Y=50" inseamna "mergi 100 pasi spre dreapta si 50 pasi in sus din 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 un screensaver DVD!

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

🖊️
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 Geometric
Deseneaza forme geometrice

Folosind blocurile Motion si Pen, creeaza urmatoarele forme:

  1. Patrat: 4 laturi egale, colturile de 90° (repeat 4: move 100, turn 90)
  2. Triunghi echilateral: 3 laturi egale, colturile de 120° (repeat 3: move 100, turn 120)
  3. Hexagon: 6 laturi egale, colturile de 60° (repeat 6: move 80, turn 60)
  4. Stea cu 5 colturi: 5 puncte, rotatie de 144° (repeat 5: move 100, turn 144)

Cerinte: Foloseste culori diferite pentru fiecare forma. Sterge scena inainte de fiecare forma noua cu "erase all".

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!

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)

Exercitiul 4 (Nivel performanta) -

Exercitiu Creativ
Spirala colorata cu Pen

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!

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
  • Extensia Pen:pen down/up, set pen color/size, erase all, stamp
  • Desenare geometrica:Forme create cu repeat + move + turn

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →