Î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

Personaje si Sprite-uri

Progres lectie:
0%
🎯

Obiectivul lectiei

Sprite-urile tale arata urât... Nu stii cum sa desenezi personaje... Animatiile tale nu se misca natural... Costumele nu au dimensiuni diferite si personajul sare pe ecran.

Dupa aceasta lectie vei putea:

  • Sa creezi si sa personalizezi sprite-uri pentru jocul tau
  • Sa desenezi sau sa editezi costume pentru personaje in editorul Scratch
  • Sa programezi comportamentul de baza al fiecarui personaj (miscare, interactiune)
  • Sa organizezi sprite-urile pe scena conform storyboard-ului
  • Sa testezi fiecare personaj individual inainte de a le combina

🎮 Incearca tu!

Provocare: Deseneaza Primul Tau Sprite!

Inainte sa invatam tehnicile avansate, incearca sa desenezi un sprite simplu in Scratch. Urmeaza acesti pasi:

  1. Deschide Scratch (scratch.mit.edu sau aplicatia desktop)
  2. Sterge sprite-ul pisica default (click dreapta → Delete)
  3. Click pe "Paint" sub "Choose a Sprite" (iconita pensula)
  4. Deseneaza un cerc mare pentru cap (tool: Circle)
  5. Adauga doi ochi (Circle tool, negru)
  6. Deseneaza un zambet (Brush tool sau Line tool)
  7. Adauga culoare cu Paint Bucket (galeata cu vopsea)
  8. Click pe butonul "Set Costume Center" (iconita cu 4 sageti)
SFATURI PENTRU PRIMUL SPRITE:

✓ Fa-l MARE - ocupa cel putin 50% din canvas
✓ Foloseste CULORI SIMPLE - nu mai mult de 3 culori
✓ CENTREAZA-L - foloseste "Set Costume Center"
✓ TESTEAZA-L - apasa green flag si vezi cum arata
Nu te astepta la perfectiune! Primul sprite este pentru experimentare. Poti redesena oricand!
💡 Indiciu #1: Nu iti iese sa desenezi un cerc perfect? ▶
Foloseste instrumentul Circle din bara de unelte. Tine apasat SHIFT in timp ce tragi cercul - asta il face perfect circular! Fara SHIFT, desenezi o elipsa (oval).
💡 Indiciu #2: Cum umplu o forma cu culoare? ▶
Alege culoarea din paleta de culori. Apoi selecteaza instrumentul "Fill" (galeata cu vopsea). Click in interiorul formei inchise. Daca culoarea se raspandeste peste tot, inseamna ca forma nu este inchisa complet - verifica marginile!
💡 Indiciu #3: De ce sprite-ul meu se roteste ciudat? ▶
Sprite-ul nu este centrat! Click pe "Set Costume Center" (iconita cu 4 sageti din mijlocul editdrului). Asta muta centrul de rotatie in mijlocul sprite-ului tau.

🌟 Provocare Bonus (optional)

Dupa ce termini primul sprite, incearca sa creezi un al doilea costum! Click pe "Duplicate" (click dreapta pe costumul tau), apoi modifica ceva mic (ex: schimba forma ochilor). Foloseste blocul "next costume" pentru a crea o animatie simpla!

1

1. Editorul de Sprite-uri (Costume Editor)

🖌️
Editorul de Sprite-uri (Costume Editor)
Definitie: Editorul de sprite-uri (Costume Editor) este instrumentul din Scratch unde poti desena, edita si personaliza personajele tale. Este ca Paint, dar integrat direct in Scratch!
Analogie din viata ta: Editorul de costume este ca un atelier de arta digital! Ai pensule, culori, forme - tot ce iti trebuie pentru a crea personaje unice. Este atelierul tau personal de design!

Cum accesezi Costume Editor:

  1. Click pe tab-ul "Costumes" (langa Code si Sounds)
  2. Sau click pe sprite, apoi alege "Edit" din meniul contextual
  3. Pentru sprite nou: Click "Paint" sub "Choose a Sprite"

🎨 Interfata Costume Editor:

┌─────────────────────────────────────────┐
│ BARA DE UNELTE (Stanga)                │
│                                         │
│ ✏️  Select (Selectare)                 │
│ 🖌️  Brush (Pensula)                    │
│ ✏️  Line (Linie)                       │
│ ⭕  Circle (Cerc)                      │
│ ▭  Rectangle (Dreptunghi)              │
│ 🎨  Fill (Galeata cu vopsea)           │
│ 📝  Text (Text)                        │
│ 🔍  Eraser (Guma de sters)             │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ CANVAS (Centru) - Zona de desenare     │
│                                         │
│     [Aici desenezi sprite-ul]          │
│                                         │
│     Zona de desenare (scalabila)       │
└─────────────────────────────────────────┘
┌─────────────────────────────────────────┐
│ OPTIUNI (Dreapta)                      │
│                                         │
│ 🎨 Color Picker (Selectare culoare)    │
│ 📏 Stroke Width (Grosime linie)        │
│ ✓  Filled/Outline (Umplut/Contur)     │
│ 🎯 Set Costume Center (Centrare)      │
│ ↩️  Undo/Redo (Anuleaza/Refă)          │
└─────────────────────────────────────────┘
Canvasul Costume Editor nu are o dimensiune fixa in pixeli — sprite-urile pot fi orice marime si sunt scalate pe scena (480x360). Scena este cea cu 480x360 pixeli, nu editorul de costume. Fa sprite-urile suficient de mari cat sa fie vizibile pe scena, si scalează-le din cod daca e nevoie.
2

2. Instrumentele de Desenare

🎨
Instrumentele de Desenare
Definitie: Scratch ofera 8 instrumente principale de desenare, fiecare cu un scop specific. Cunoasterea lor te face un artist digital eficient!

Instrumentele principale si utilizarea lor:

✏️
SELECT (Selectare)
Selecteaza, muta si redimensioneaza parti din desen. Click si drag pentru a selecta o zona.
🖌️
BRUSH (Pensula)
Deseneaza linii libere. Regleaza grosimea cu Stroke Width. Perfect pentru contururi organice.
📏
LINE (Linie)
Deseneaza linii drepte. Tine SHIFT pentru linii perfect orizontale/verticale/diagonale.
⭕
CIRCLE (Cerc)
Deseneaza cercuri si elipse. Tine SHIFT pentru cercuri perfecte. Toggle Filled/Outline pentru interior.
▭
RECTANGLE (Dreptunghi)
Deseneaza dreptunghiuri si patrate. Tine SHIFT pentru patrate perfecte. Alege umplut sau doar contur.
🎨
FILL (Galeata)
Umple zone inchise cu culoare. Daca culoarea se rasp peste tot, forma nu este complet inchisa!
📝
TEXT (Text)
Adauga text la sprite. Alege font, marime si culoare. Util pentru baloane de dialog sau etichete.
🔍
ERASER (Guma)
Sterge zone din desen. Regleaza marimea gumei cu Stroke Width. Sterge pana la transparenta.
Scurtaturi utile: CTRL+Z = Undo, CTRL+Y = Redo, SHIFT + tool = constrangeri (cercuri perfecte, linii drepte), CTRL+C/V = Copy/Paste zone selectate.

🎯 Exercitiu Practic: Deseneaza o Casa

Pasi:

  1. Rectangle tool → Deseneaza un dreptunghi mare (peretii casei) → Filled
  2. Rectangle tool → Deseneaza 2 patrate mici (ferestre) → Filled, alta culoare
  3. Rectangle tool → Deseneaza un dreptunghi vertical (usa) → Filled
  4. Line tool + SHIFT → Deseneaza 2 linii diagonale pentru acoperis (formand triunghi)
  5. Line tool → Inchide triunghiul cu o linie orizontala
  6. Fill tool → Umple acoperisul cu alta culoare
  7. Circle tool → Adauga un cerc mic langa usa (manerul usii)
3

3. Importarea si Editarea Imaginilor

📥
Importarea si Editarea Imaginilor
Definitie: Pe langa desenarea de la zero, poti importa imagini existente (PNG, JPG, SVG) si le poti edita in Scratch. Asta iti economiseste timp si iti ofera acces la mii de resurse gratuite!

Trei moduri de a obtine sprite-uri:

METODA 1: BIBLIOTECA SCRATCH

Click pe iconita pisica sub "Choose a Sprite" → Alege din sute de sprite-uri profesionale → Gratis si optimizate pentru Scratch!

Categorii: Animals, People, Fantasy, Music, Sports, Food, etc.

METODA 2: IMPORT DE PE CALCULATOR

Click pe iconita "Upload sprite" (sageata in sus) → Alege un fisier PNG/JPG de pe computer → Scratch il importa automat!

Tip: Imagini PNG cu fundal transparent sunt ideale - nu trebuie sa stergi fundalul manual!

METODA 3: DESENAT CUSTOM

Click pe "Paint" → Deseneaza de la zero → Ai control 100% asupra design-ului → Cel mai creativ mod!

Avantaj: Sprite-uri unice care nu apar in alte proiecte!

Cum editezi o imagine importata:

  1. Sterge fundalul: Eraser tool → Sterge zonele nedorite → Lasa doar personajul
  2. Redimensioneaza: Select tool → Drag colturile imaginii → Tine SHIFT pentru proportii corecte
  3. Schimba culori: Select tool → Selecteaza zona → Fill tool → Aplica noua culoare
  4. Adauga detalii: Foloseste Brush/Circle/etc pentru a adauga elemente noi
  5. Centreaza: Click "Set Costume Center" pentru rotatii corecte
Surse gratuite de sprite-uri recomandate pentru elevi: Biblioteca Scratch (integrata direct in aplicatie — cea mai sigura optiune), OpenGameArt.org, Kenney.nl (sute de pachete gratuite, licenta CC0). Evita site-uri cu continut mixt sau model freemium (abonament platit).
Nu folosi imagini cu drepturi de autor (Google Images random)! Foloseste doar resurse gratuite cu licenta libera sau creează-le tu. Respecta munca artistilor!
4

4. Costume Multiple pentru Animatii

🎬
Costume Multiple pentru Animatii
Definitie: Un "costume" in Scratch este o varianta vizuala a sprite-ului. Creand multiple costume si schimbandu-le rapid, creezi iluzia de miscare - exact ca in desene animate (frame by frame animation)!
Analogie din viata ta: Costumelele sunt ca paginile unui flipbook! Cand rasfoiesti rapid paginile, desenele statice par sa se miste. La fel, cand schimbi rapid costume-urile in Scratch, sprite-ul pare sa se anime!

Cum creezi animatie cu costume:

PASUL 1: CREAREA COSTUMELOR

Metoda Rapida: Click dreapta pe costumul existent → "Duplicate" → Modifica ceva mic (ex: pozitia piciorului)

Metoda De la Zero: Click "Paint new costume" → Deseneaza urmatorul frame al animatiei

PASUL 2: ASIGURA CONSISTENTA

✓ Toate costumelele trebuie sa aiba ACEEASI MARIME (altfel sprite-ul "sare")

✓ Toate costumelele trebuie sa fie CENTRATE IN ACELASI PUNCT

✓ Schimba DOAR ce vrei sa se miste (ex: doar picioarele, nu tot corpul)

PASUL 3: PROGRAMAREA ANIMATIEI

Foloseste blocurile:

  • "next costume" - Trece la costumul urmator (ciclic)
  • "switch costume to [name]" - Sare la un anumit costum
  • "wait [0.1] seconds" - Controleaza viteza animatiei

🎮 Exemplu Complet: Animatie de Mers

COSTUME 1 - "walk1": Personaj cu piciorul stang inainte

COSTUME 2 - "walk2": Personaj cu ambele picioare jos (pozitie neutra)

COSTUME 3 - "walk3": Personaj cu piciorul drept inainte

COSTUME 4 - "walk4": Personaj cu ambele picioare jos (pozitie neutra)


COD SCRATCH:

when [green flag] clicked
forever
next costume
wait (0.1) seconds

Rezultat: Personajul "merge" la nesfarsit, schimbând costume la fiecare 0.1 secunde!

Numarul ideal de costume pentru animatie: 2-4 pentru miscari simple (mers, zbor), 6-8 pentru animatii complexe (atac, dans). Mai multe costume = animatie mai fluida, dar mai mult timp de creare!
Evita "costume jumping" (sprite-ul sare pe ecran)! Cauza: Costume cu dimensiuni diferite sau centre diferite. Solutie: Asigura-te ca toate costumelele au exact aceeasi marime si sunt centrate in acelasi punct!
5

5. Centrarea Corecta a Sprite-urilor

🎯
Centrarea Corecta a Sprite-urilor
Definitie: "Costume Center" (centrul costumului) este punctul de referinta al sprite-ului pentru rotatii si pozitionare. Daca nu este setat corect, sprite-ul se va roti ciudat sau va "sari" pe ecran!
Analogie din viata ta: Centrul sprite-ului este ca pivotul unei usi! Daca pivotul este la margine, usa se deschide ciudat. Daca pivotul este la mijloc, usa se roteste perfect. La fel si cu sprite-urile!

De ce este centrarea importanta:

Problema Cauza Solutie
Sprite-ul se roteste ciudat Centrul nu este in mijlocul sprite-ului Set Costume Center → Click in mijlocul sprite-ului
Sprite-ul "sare" la schimbarea costumelor Costume cu centre diferite Centreaza TOATE costumelele in acelasi punct
Coordonatele X/Y nu sunt unde crezi Centrul este offset-at Verifica pozitia centrului cu crosshair-ul (+)

Cum centrezi corect un sprite:

  1. Click pe tab-ul "Costumes"
  2. Click pe butonul "Set Costume Center" (iconita cu 4 sageti + crosshair)
  3. Vei vedea un crosshair (+) care arata unde este centrul curent
  4. Click EXACT in mijlocul sprite-ului (unde vrei sa fie centrul de rotatie)
  5. Pentru personaje: De obicei in centrul corpului (solduri/abdomen)
  6. Pentru obiecte simetrice: In centrul geometric exact
Trucul profesional: Pentru animatii cu multiple costume, centreaza PRIMUL costum perfect, apoi foloseste "Duplicate" pentru a creea celelalte. Asta pastreaza automat centrul in acelasi loc!

🎯 Unde sa centrezi diferite tipuri de sprite-uri:

  • Personaj uman/animal: In centrul soldurilor/abdomenului (pivot natural)
  • Masina/vehicul: In centrul geometric (pentru viraje naturale)
  • Minge/obiect circular: In centrul cercului (pentru rotiri perfecte)
  • Proiectil (glont/racheta): In varful frontal (direcția de miscare)
  • Platform/podea: In centrul de jos (pentru alinierecu solul)

Exercitii practice

Exercitiul 1 (Nivel minim) - Primul tau sprite simplu

Exercitiu Practic
Deseneaza un sprite simplu si adauga un al doilea costum

Scopul: un sprite cu 2 costume si o animatie de clipit. Urmeaza pasii in ordine:

  1. Sterge sprite-ul pisica → click "Paint" pentru a crea un sprite nou
  2. Deseneaza un cerc mare (Circle tool + tine SHIFT) si coloreaza-l cu Fill tool
  3. Adauga doi ochi: doua cercuri mici negre → click "Set Costume Center"
  4. Click dreapta pe costumul din lista → "Duplicate" (nu redesena de la zero!)
  5. Pe costumul duplicat, sterge ochii si redeseneaza-i mai mici sau ca linii scurte (pozitia "ochi inchisi")
  6. In zona de cod adauga: When green flag clicked → Forever → Next costume → Wait 0.3 seconds
  7. Apasa steagul verde si verifica ca sprite-ul "clipeste" alternand intre cele 2 costume

Rezultat asteptat: Sprite-ul clipeste la fiecare 0.3 secunde. Daca e prea rapid, mareste valoarea din "wait".

Vezi rezolvarea

Rezolvare pas cu pas: obtii un sprite propriu cu 2 costume care clipeste.

  1. Sterge sprite-ul pisica (click dreapta pe el → Delete), apoi click Paint pentru un sprite nou.
  2. Cu Circle tool si tasta SHIFT apasata deseneaza un cerc mare (capul), cel putin jumatate din canvas. Coloreaza-l cu Fill tool (click in interior; daca forma nu e inchisa complet, culoarea se raspandeste peste tot).
  3. Deseneaza doi ochi negri mici (Circle tool). Click Set Costume Center si seteaza centrul exact in mijlocul capului.
  4. Click dreapta pe costum → Duplicate (pastreaza automat aceeasi marime si acelasi centru - nu redesena de la zero).
  5. Pe copie, sterge ochii cu Eraser si redeseneaza-i mai mici sau ca linii scurte (pozitia "ochi inchisi").
  6. In zona de Cod: when green flag clicked → forever → next costume → wait 0.3 seconds.

Rezultat: la steagul verde, sprite-ul alterneaza intre cele 2 costume la fiecare 0.3 secunde, adica clipeste. Daca e prea rapid, mareste valoarea din wait (ex: 0.5).

Exercitiul 2 (Nivel standard) - Importa si editeaza un sprite

Exercitiu Creativ
Importa si Editeaza un Sprite

Alege un sprite din biblioteca Scratch si personalizeaza-l:

  1. Alege un sprite din biblioteca (ex: Avery, Devin, un animal)
  2. Schimba culorile principale ale sprite-ului (haine, par, etc.)
  3. Adauga un accesoriu nou (palarie, ochelari, arma, etc.)
  4. Verifica ca sprite-ul este centrat corect
  5. Creeaza un al doilea costum cu o modificare (ex: ochi inchisi pentru clipit)
Vezi rezolvarea

Rezolvare: personalizezi un sprite gata facut din biblioteca Scratch, fara sa desenezi de la zero.

  1. Click pe iconita pisica de sub "Choose a Sprite" si alege un sprite din biblioteca (ex: Devin sau Avery, categoria People).
  2. Deschide tab-ul Costumes. Cu Select tool selecteaza zona de haine sau par, apoi cu Fill tool aplica o culoare noua peste zona selectata.
  3. Adauga un accesoriu nou cu Circle, Rectangle sau Brush (ex: o palarie = un dreptunghi plus un semicerc desenate deasupra capului).
  4. Verifica centrul cu Set Costume Center; daca nu e in mijlocul corpului (solduri/abdomen la personaje), re-seteaza-l facand click exact acolo.
  5. Click dreapta pe costum → Duplicate, apoi pe copie modifica un detaliu mic (ex: sterge ochii si redeseneaza-i mai mici, pentru clipit).

Rezultat: sprite cu 2 costume consistente (aceeasi marime, acelasi centru), gata pentru animatie cu next costume.

Exercitiul 3 (Nivel performanta) - Animatie multi-faza controlata prin taste

Provocare Avansata
Creeaza o Animatie Multi-Faza

Punct de plecare recomandat: Incepe cu sprite-ul personalizat creat la Exercitiul 2 (din biblioteca Scratch). Adauga costume noi prin "Duplicate" si modifica-le progresiv — nu desena totul de la zero.

Creeaza 3 animatii diferite controlate prin taste:

  • Apasa SPACE: Animatie de salt (2-3 costume — ex: pozitie normala, in aer, aterizare)
  • Apasa A: Animatie de atac (2-3 costume — ex: brat in sus, brat extins)
  • Apasa S: Animatie de stare (idle — 2 costume cu clipit, ca la Exercitiul 1)

Cerinta minima: Total 6-8 costume, organizate logic (costume 1-3 pentru salt, 4-6 pentru atac, 7-8 pentru idle).

Cod pentru fiecare animatie: Foloseste blocul when [tasta] key pressed separat pentru fiecare actiune, cu switch costume to [prima pozitie a animatiei] la inceput, apoi next costume in bucla.

Vezi rezolvarea

Schita de rezolvare (nu solutia gata facuta):

  1. Porneste de la sprite-ul din Exercitiul 2. Organizeaza costumele in 3 grupe consecutive: 1-3 salt, 4-6 atac, 7-8 idle. Fiecare costum nou = Duplicate pe cel anterior + modifica doar ce se schimba (brat sau picioare), nu redesena tot personajul.
  2. Cate un script separat pentru fiecare tasta: when [space] key pressed → switch costume to [primul costum din grupa salt] → apoi next costume + wait repetate pentru restul costumelor din grupa. La fel pentru A (atac) si S (idle, poate ramane in forever ca la Exercitiul 1).
  3. Capcana principala: toate cele 6-8 costume trebuie sa aiba EXACT aceeasi marime si acelasi centru (Set Costume Center identic), altfel personajul "sare" pe ecran cand trece de la o grupa la alta.

Ce nu e predat direct in lectie: lectia arata bucla forever doar pentru animatie continua (mers). Un salt sau un atac are un NUMAR FIX de costume care se opresc singure, nu se repeta la nesfarsit - asta inseamna cateva blocuri next costume + wait puse unul dupa altul (fara forever), lucru pe care elevul trebuie sa-l deduca, nu l-a vazut exact asa in exemplul din lectie.

Criterii de evaluare: 6-8 costume organizate logic pe cele 3 grupe; 3 scripturi separate care pornesc corect de la tasta lor; costume consistente ca marime si centru; animatiile nu se blocheaza una pe alta cand se apasa taste diferite rapid.

Ce ai invatat astazi

  • Costume Editor:Interfata si toate instrumentele de desenare (Brush, Circle, Fill, etc.)
  • Instrumente de desenare:Cum sa folosesti fiecare tool eficient (Select, Line, Rectangle, Text, Eraser)
  • Importarea imaginilor:Trei moduri - biblioteca Scratch, import de pe computer, desenat custom
  • Costume pentru animatie:Crearea de frame-uri multiple pentru iluzia de miscare
  • Centrarea sprite-urilor:Importanta "Set Costume Center" pentru rotatii corecte
  • Animatie fluida:Tehnici pentru consistenta (aceeasi marime, acelasi centru)

Vrei mai mult?

Provocare: Ia un sprite desenat de tine (din Exercitiul 1 sau 2) si adauga-i un al treilea costum: o "stare de lovit" (ochi in X sau culoare rosie). Scrie un script: cand primesti mesajul "lovit", schimba la acest costum, asteapta 0.3 secunde, apoi revino la costumul normal.

De ce: De ce crezi ca next costume trece la costumul urmator din LISTA, in ordinea din tab-ul Costumes, si nu la unul ales aleatoriu? Ce s-ar intampla cu o animatie de mers daca ordinea costumelor s-ar amesteca la fiecare pas?

Unde se foloseste: ideea de baza - o lista ordonata de imagini aratate una dupa alta - e aceeasi in desenele animate si in jocurile mari. Ce difera este modul in care sunt pastrate cadrele. In Scratch, fiecare costum este o imagine separata in lista. Motoarele de joc folosesc de obicei un sprite sheet (foaie de sprite-uri, numita si atlas): o singura imagine mare in care cadrele stau unul langa altul, iar programul decupeaza din ea dreptunghiul cadrului de care are nevoie, dupa coordonate. Motivul e practic: se incarca un singur fisier in loc de zeci. Cate cadre are o animatie nu e fix - depinde de joc si de cat de fluida se vrea miscarea.

Urmatoarea lectie

Continua cu lectia urmatoare pentru a aprofunda cunostintele.

Continua →