Crearea fundalurilor și a spritelor la zero

Ce veți crea

În partea anterioară a acestei serii, am dat o introducere la Scratch și principalele componente pe care le utilizează. În această parte vom începe să creăm un proiect prin adăugarea de backdrop-uri și a unor sprites la acesta.

În Scratch, fundalul și spritele sunt active. De asemenea, activele includ costume și sunete, pe care le puteți adăuga spritelor tale.

Pentru a crea un fundal sau o școală, puteți face unul din cele patru lucruri:

  • Importați un fundal sau un sprite din bibliotecă oferit de Scratch.
  • Importați un fișier sprite de pe computer.
  • Importați un fișier grafic pentru a vă folosi ca fundal sau costum și apoi utilizați costumul pentru a crea o sprite.
  • Desenați fundalul sau costumul utilizând instrumentele de desen furnizate de Scratch și folosiți costume pentru a vă crea sprite.

În acest tutorial, vom lucra printr-un nou proiect și vom folosi fiecare dintre aceste tehnici în moduri diferite.

Ce ai nevoie

Pentru a finaliza acest tutorial, veți avea nevoie de:

  • un cont gratuit la Scratch
  • un browser web cu acces la Scratch (Vă recomandăm să folosiți un browser modern cum ar fi Chrome, Firefox, Safari sau Opera pentru cea mai bună experiență)

Crearea Proiectului

Începeți prin crearea proiectului dvs. Conectați-vă la Scratch, apoi pe pagina de pornire, faceți clic pe Crea în bara de administrare din partea de sus a ecranului.

Acest lucru vă va duce la noul ecran al proiectului:

Dă-ți numele unui proiect introducându-l în câmpul imediat deasupra scenei. Scratch-ul va salva automat proiectul cu titlul nou.

Adăugarea fundalurilor

Să începem prin a da proiectului nostru un fundal. Sub scenă veți vedea că există patru opțiuni pentru crearea fundalurilor, fiecare dintre acestea având o pictogramă:

  • Alegeți fundalul din bibliotecă
  • Vopsea fundal nou
  • Încărcați fundalul din fișier
  • Nou fundal de la cameră

Cel de-al patrulea dintre ele este probabil favoritul printre clubul meu de cod: copiii cum ar fi să ia selfies cu camera lor web și să le folosească pentru fundaluri!

Adăugarea unui fundal din bibliotecă

Începeți prin utilizarea bibliotecii. Faceți clic pe pictograma din stânga pentru a vizualiza biblioteca de fundaluri:

Selectați o imagine (folosind "plajă-malibu") și faceți clic pe O.K buton.

Sprite de pisici va fi acum in fata fundalului tau:

Având în vedere că proiectul dvs. are un fundal alb simplu atunci când ați început, acesta va avea acum două fundaluri. Puteți vizualiza toate fundalul dvs. făcând clic pe Etapă (lângă spritele tale) și apoi dând clic pe Decoruri în partea dreaptă a scenei. Acest lucru dezvăluie panoul fundalurilor:

Aici puteți să adăugați sau să ștergeți fundalul și să modificați cele existente. Vom șterge cea nedorită și apoi vom adăuga două noi pe baza celei pe care tocmai am adăugat-o.

Ștergerea unui fundal

În primul rând, faceți clic pe fundalul alb (backdrop1) și faceți clic pe X care va apărea în dreapta sus. Veți avea acum doar un fundal.

Copierea unui fundal

Acum vom copia fundalul existent pentru a crea oa doua, pe care apoi o vom edita.

Asigurați-vă că fundalul dvs. este selectat în panoul de fundaluri și faceți clic dreapta pe el. În meniul de comenzi rapide, faceți clic pe duplicat.

Veți avea acum două fundaluri care sunt la fel:

Editarea unui fundal

Acum trebuie să editați noul fundal. Selectați fundalul apelat plaja-malibu2 și faceți clic pe Selectați pictograma din stânga panoului de editare a fundalului (este secundă din partea de jos și arată ca o mână pe un dreptunghi punctat). Selectați o porțiune a fundalului dvs. trăgând mouse-ul peste el. Selectez o porțiune centrală care reprezintă aproximativ 75% din fundal:

Acum, glisați mânerele porțiunii selectate afară până la marginea fundalului, astfel încât să acopere întregul fundal. Veți ajunge cu un fundal care arată ca o versiune ușor mărită a primei.

Notă: dacă greșiți, faceți clic pe Editați | × și Anula în bara de admin, sau ștergeți fundalul și începeți din nou!

Acum, repetați acest lucru cu fundalul pe care tocmai l-ați creat: duplicați-l și selectați o porțiune centrală a acestuia pentru a umple întregul fundal. Faceți acest lucru de câteva ori, dacă doriți. Veți afla că, dacă comutați între fundaluri, veți vedea un efect de mărire a fundalului. Într-un tutorial mai târziu vom folosi un script cu fundaluri pentru a automatiza acest efect de zoom.

Am creat patru fundaluri cu niveluri diferite de zoom:

Rețineți că aveți alte opțiuni pentru editarea fundalurilor, care sunt:

  • tragere pe ele, folosind instrumentul perie, linii sau forme
  • adăugându-le text, cu o varietate de fonturi disponibile
  • ștergerea unor părți ale acestora (utilizați acest lucru pentru a crea o "fereastră" printr-un fundal din spatele celei din față)
  • selectarea zonelor (pe care tocmai le-ați făcut)
  • duplicarea zonelor

De asemenea, puteți converti fundalul din bitmap în modul vectorial sau invers. Backspacele importate din bibliotecă sunt imagini bitmap (cum ar fi fotografii), în timp ce dacă desenați un fundal nou, va fi un vector (ca un desen). Dacă doriți să adăugați elemente de desen și text și să le manipulați, este mai bine să rămâneți în modul vectorial.

Crearea de Sprite

Fiecare nou proiect începe cu un sprite (pisica) deja încărcat, dar puteți adăuga, de asemenea, cât mai multe dintre dvs. cum doriți, sau puteți edita sau șterge pisica.

Ca în cazul fundalurilor, există patru icoane pentru crearea unui sprite:

  • Alegeți sprite din bibliotecă
  • Vopseste noua sprite
  • Încărcați sprite din fișier
  • Sprite nou de la cameră

Rețineți că, dacă doriți să utilizați un fișier grafic, cum ar fi un png pentru a crea sprite, îl încărcați ca un costum, nu un sprite. Sprites sunt stocate ca un tip de fișier specific, care este utilizabil numai în Scratch. Voi acoperi acest lucru mai târziu în acest tutorial.

Crearea unui Sprite din Bibliotecă

Să începem cu cel mai simplu mod de a crea un sprite: importând unul din bibliotecă.

În Sprites panou sub etapa, faceți clic pe pictograma imediat din dreapta Sprite nou text, pentru a vedea biblioteca:

Alegeți un sprite de la cele oferite: aleg un crab deoarece proiectul meu are o temă la mare.

Clic O.K iar noul sprite va fi adăugat la proiectul dvs.:

Dacă faceți clic pe Costume , veți vedea că acest sprite are două costume, cu cleștii deschiși și închisi:

Putem folosi aceste costume mai târziu cu un script care schimba costumul atunci când crabul se apropie de pisică și îl prinde!

Dacă faceți clic pe sprite de pisică, veți vedea că are și două costume, pe care le putem folosi pentru a crea un efect de rulare cu un script.

Desenarea unui Sprite

O altă modalitate de a crea un sprite este prin trasarea unui. Rețineți că spritele nu trebuie să fie animale sau oameni: ele pot fi tot ce vreți să interacționați în proiectul dvs. Deci, dacă doriți ca un text să apară la un moment dat, creați un sprite de text. Asta vom face.

Dați clic pe pictograma "Vopsire nouă sprite" (pictograma din partea dreaptă sus a paginii) Sprites pane). Aceasta va deschide panoul de desen:

Mai întâi asigurați-vă că lucrați în modul vectorial. Dacă spune Mod bitmap în colțul din dreapta jos al panoului de desen, faceți clic pe Conversia în vector buton.

Faceți clic pe pictograma text din partea dreaptă, faceți clic oriunde în panoul de desen și începeți să introduceți textul. Eu scriu "OUCH !!!".

Acum, faceți unele modificări la textul dvs.:

  • Modificați fontul făcând dublu clic pe textul dvs. pentru ao selecta și utilizând meniul de selectare de sub panoul de desen pentru a alege fontul. Eu folosesc Zgârietură font.
  • Modificați culoarea selectând textul și făcând clic pe o culoare din selectorul de culori.
  • Modificați dimensiunea selectând caseta de text (nu textul în sine) și tragând mânerele pentru redimensionare.

Puteți, de asemenea, să trageți o formă în jurul textului dvs. pentru ao evidenția. Faceți clic pe instrumentul de linie și trasați mai multe linii pentru a crea o formă zig-zag în jurul textului (dacă abilitățile de desen nu sunt la acest nivel, creați doar un cerc sau un pătrat - știu că studenții mei sunt mai buni la asta decât mine!).

Acum ar trebui să aveți trei sprite, unul dintre acestea fiind textul pe care tocmai l-ați creat:

Rețineți că atunci când ați desenat cel de-al treilea sprite, creați de fapt un costum, nu un sprite. Pentru că sprite are doar un costum, care creează efectiv sprite. Dacă doriți să puteți adăuga costume suplimentare făcând clic pe una dintre pictogramele de dedesubt Costum nou, în același mod în care ați creat deja fundaluri noi. De exemplu, puteți duplica costumul existent și puteți crea un al doilea cu text diferit. Apoi, puteți utiliza mai târziu un script pentru a comuta între cele două costume și pentru a afișa un text diferit.

Crearea unui Sprite dintr-o imagine importată

Cealaltă modalitate de a crea o spite este prin importarea unei imagini. Faceți acest lucru prin desenarea sprite și apoi încărcarea unei imagini ca un costum.

În Sprites , faceți clic pe pictograma "Vopsire nouă sprite" (peria).

În Costume pentru panoul nou, faceți clic pe pictograma "Încărcați costumul din fișier" (folderul).

Încărcați starfish.png fișier furnizat în pachet pentru acest curs.

Dacă panoul dvs. de desen este în modul bitmap, faceți clic pe Conversia în vector buton.

Redimensionați și deplasați steaua de mare până când se află în partea dreaptă jos a scenei:

Aveți acum patru sprite, iar scena dvs. arată un pic de mizerie! Nu vă faceți griji despre acest lucru: vom muta sfinții în jurul valorii de folosind scripturi într-o parte ulterioară a acestui tutorial, și ascunde sprite text până când este necesar.

rezumat

În acest tutorial ați învățat cum să creați fundaluri și sprite pentru proiectul dvs. Apoi puteți folosi scripturi pentru a vă schimba și a vă deplasa fundalul și spritele. După cum ați învățat, există o varietate de moduri de a crea fundaluri și sprite: le puteți alege din biblioteca Scratch, puteți să le desenați, să le editați pe cele existente sau să încărcați imagini.

În următoarea parte a acestei serii vom trece la blocuri și veți afla cum funcționează și ce tipuri diferite de blocuri.

Cod