>

Scratch programozás


Forrás (medium.com)

Scratch programozási nyelv

A Scratch egy kifejezetten gyerekek (8-18 éves korosztály) számára fejlesztett programozási környezet. Ingyenesen letölthető Windows és Mac OS X és Linux rendszerekre. Legújabb változatát pedig már webes felületen is használhatjuk. Több mint 40 nyelven, köztük magyarul is használható!

Interpretált, vizuális programozási nyelv. A dinamikus nyelvek csoportjába tartozik – a kód a program futása közben is változtatható. A fejlesztését 2004-ben kezdte a Lifelong Kindergarten csoport az MIT (Massachusetts Institute of Technology) egyetemen, és az első hivatalos verziója 2007-ben jelent meg. Azzal a céllal készült, hogy a programozással még csak ismerkedő gyerekek is könnyedén alkothassanak animációkat, játékokat. A Scratch készítői egy olyan környezet megírására vállalkoztak, amelyben a programozás módja és tárgya a programozással ismerkedők számára érdekes és látványos.

A Scratch-ben való programozás kirakójátékozásra hasonlít: parancsokat és változókat felhasználva úgy lehet algoritmusokat összeépíteni, mint egy kirakót a darabjaiból. Ezek az elemek csak helyes módon illeszkednek egymáshoz. Az objektumorientált (szereplőközpontú) programozás támogatja az interaktív programok (például játékok) készítését, és segítségével kevésbé kell elvonatkoztatni a köznapi valóságtól. A környezet lehetőséget nyújt álló- és mozgóképi, hangi és zenei elemek vegyes használatára, így különböző tartalmakat és gondolatokat változatos médiaelemekkel lehet közvetíteni. Az elkészült programok feltölthetők a nemzetközi oldalra, ahol lehetőség van másoktól tanulni, mások munkáit értékelni, javaslatot tenni és fogadni. A programkódot mindenki a saját nyelvén tekintheti meg (ha a megfelelő fordítás létezik), így a programkódot készítő, és az azt megtekintő személyeknek nem kell érteniük egymás nyelvén.

Rövid története

 

Alapozó feladatok

A. Háttér/játéktér tulajdonságai, lehetőségei

A Scratch programnyelv eseményei a háttéren történnek, ugyanúgy mint egy színházban. Itt a színpad a háttér, más néven játéktér, ezen mozognak az emberek, állatok, dolgok, közös néven (itt is) szereplők.

A jobb oldalon lévő képre pirossal ráírtam a legfontosabbakat. (Kattints rá, nagyobb lesz!)

Kattints a rajz által mutatott területre (Játéktér)! Ennek kiválasztása után lehet az alaphátteret módosítani illetve újakat létrehozni. A négy ikon közül az elő három:

  • Háttér kiválasztása könyvtárból – a "gyárilag adott" könyvtárból választhatsz (kettős kattintás a gyors!)
  • Új háttér festése – egy (pontosabban kettő) rajzolóprogrammal saját hátteret festhetsz
  • Háttér betöltése állományból – betölthetsz egy hátteret/képet a számítógépedről is

A háttér méretei 480xx360 pixel (képpont)


Az itteni ábra mutatja a különböző módon létrehozott háttereket:

  • háttér 1 – ez az eredeti üres háttér
  • blue sky – ezt a "gyári" könyvtárból töltöttem be
  • háttér 2 – ezt én pingáltam a rajzolóprogrammal
  • G – ez egy "G.png" nevű képfájl volt a számítógépemen

A háttér törölhető (jobb egérgombbal kattintsunk rá) és átnevezhető (lásd az ábrán)!


Az itt lévő ábra két képből lett összerakva. Azt mutatja be, hogyan lehet egy paranccsal (programocskával) hátteret váltani.

  • hátterek fül: készítsünk több hátteret (ezt mutatja a rajz bal fele)
  • feladatok fül: tegyük ki húzással a "következő háttér" parancsot (ezt mutatja a rajz jobb fele)
  • kattintgassunk az előbbi parancsra, és látjuk hogy változik a háttér

Baloldalt lenn a "Játékháttér" legyen kiválasztva, hiszen a parancs erre vonatkozik!

progi

Fejlesszük az előbbi "hatalmas" programunkat még egy paranccsal! Ez a parancs arra szolgál, hogy a zöld zászlóval is indítható legyen egy program.

  • futtassuk a progit először a valamelyik parancsra kattintva
  • futtassuk a progit a zöld zászlóra kattintva
  • váltsunk "nagyszínpadra" és futtassuk a progit (visszatérés bal felső ikon!)

Olyan az elkészült remekművünk, mintha diákat nézegetnénk egy diavetítővel!

Házi (csak tedd ide az egérkurzort)


Automatizáljuk diavetítőnket az ábra alapján!

Hogyan lehet gyorsítani illetve lassítani a képváltást?

Mire szolgálhat a "mindig" parancs?


B. Szereplő tulajdonságai, lehetőségei

A macsekra (fenn illetve lenn) jobb egérgombbal kattintva megjelenik egy-egy menü. Röviden leírom a lényegüket:

  • info – információk a szereplőről (B2-nél részletesebben)
  • duplikálás – a szereplőről készül egy ugyanilyen másolat (neve más lesz)
  • törlés – vélegesen kitörli a szereplőt
  • mentés állományba – elmenthetjük és egy másik progiba betölthetjük szereplőnket
    (új nevet mi is adhatunk, de a "sprite2" kiterjesztést ne írjuk át)
  • tűnj el / jelenj meg – ez nem törli, csak láthatatlanná teszi a szereplőt (a párja megjeleníti)

Próbáljuk ki ezeket a lehetőségeket!


A szereplő itt felsorolt tulajdonságai mind állíthatók, kivéve az x, y helykoordináták (de a szereplő vonszolása után ezek is változnak).

  • szereplő neve
  • helye/koordinátái (x,y)
  • "nézési" iránya – állítsuk be a forgási stílust a legelső ikonra, és így "tekerjük" az irányt mutató kis kék vonalkát, próbáljuk ki ugyanezt a forgási stílus másik két ikonjával is
  • szereplő forgási stílusa (a fentiek alapján tehát: nézhet bármerre, csak jobbra vagy balra, illetve semerre nem foroghat)
  • szereplő vonszolható az egérrel illetve látható-e

Próbáljuk is ki mindezeket!


Először az alsó programot "hozzuk össze" a következőképpen:

  • kattintsunk a szereplőre, azaz a macskára (hiszen az Ő tevékenységeit programozzuk)
  • a "Feladatok" fül "Mozgás" parancs-csoportjából a "menj 10 lépést" parancsot húzzuk át a jobb oldalra (sötétebb szürke rész)
  • kattintsunk rá - a parancs végrehajtódik, azaz megy a macsek (arra, amerre néz - módosítsuk a nézési irányát)
  • a "Hang" csoportból "ragasszunk" alá egy "dobolj 1↓ 0.25 ütemig" parancsot - "futtassuk" hatalmas programunkat (katt, katt)
  • most lemásoljuk az előbbi két parancsot (lustaság fél egészség) - jobb egérgombbal katt és "duplikálás"
  • ragasszuk az előbbi kettő alá és javítsuk át az ábrához hasonlóan - futtassuk
  • jó lenne "automatizálni", hogy ne kelljen mindig kattintgatni
  • "Vezérlés" csoport, majd innen az "ismételd 10" modult kapjuk el, és óvatosan mozgassuk a négy összeragasztott parancs felé úgy, hogy "tátsa el a száját", s fogadja be az előbbi proginkat

Az utolsó műveletet gyakoroljuk: szedjük ki a belsejét, állítsuk újra össze, majd futtassuk le most már valóban kövérebb programunkat!

Most a felsőt (zöld zászlós):

  • Az "Események" csokorból a "Zöld zászló-ra kattintáskor" parancsot húzzuk át
    (ez egy programindító utasítás, mindig csak első lehet /látszik az alakján is/ !)
  • duplázzuk meg az alsó (5 elemből álló) programunkat, s tegyük az új indító elem alá, pár dolgot módosítsunk benne, hogy eltérjen az alsótól (esetleg tegyünk ebbe macskanyávogást)
  • futtassuk többféleképpen:
         a parancsokra kattintuk
         fenn a zöld zászlóra kattintunk
         váltsunk nagy játéktérre, és itt a zöld zászlóra kattintunk

Csináljuk meg pontosan, majd bátran módosítgassunk a progikon! Látszik, hogy a felső variáció, az "indítógombos" megoldás sokkal rugalmasabb, ezért érdemes ezt használni!


Töröld a cicát, majd rajzold meg az ábrán látható szereplőt! Készíts hozzá egy kicsike programot!

Ötletek:

  • a rajzolást az "Új szereplő:" mögötti ecsetre való kattintással kezdeményezheted (a "Jelmezek" fülre áll, tehát valójában egy jelmezt készítünk a szereplőnknek, több jelmeze/ruhája is lehet)
  • válassz színt és ecsetméretet, a leendő forgó közepét jelöld meg először
  • válassz színt, készíts mellé egy "szárnyat" a tömör körrajzolóval,
    a párját másolással kaphatod (amíg a szárny kijelölt a Ctrl+C majd Ctrl+V ugyanúgy működik, mint a szövegszerkesztőknél),
    a harmadikat a másolat elforgatásával (van egy kicsike kör a még kijelölt alakzaton, ezzel lehet forgatni!)
  • adj neki egy értelmesebb nevet (nálam automatikusan kapta a Szereplő1 nevet), a jelmezek is átnevezhetők (pl. lila, kék, ...)

Készítsd el a programot is, hogy valóban forogjon a forgó! Hogyan lehet szabályozni a forgás gyorsaságát?


C. Rajzolás lehetőségei

Válasszuk a hátteret, majd a "Hátterek" fülnél a hátteret nevezzük át "pixeles"-re!
Nagyítsunk "egyet" a "+" gombra kattintva (kétszeres nagyítás)! Kezdjünk:

  • válasszunk színt, téglalaprajzoló eszközt, itt pedig a körvonalast
  • állítsuk a vonalvastagságot a csúszkával középnél picit nagyobbra
  • húzzunk az ábra alapján 4 téglalapot a háttérre
    (ha nem igazán sikerült, segít a "Mégse" nyíl vagy a Ctrl+Z billentyűkettős)
  • öntsük tele egy világos festékkel a fehér részeket (jobban látszik majd, hogy hol vágtuk át a falakat)
  • "vágjuk át" a külső téglalap falát lenn és fenn, az átvágás egy tömör téglalap ráhelyezésével történhet
  • válasszunk egy szép színt és betűtípust (nem mindegyikben van É betű!), majd írjuk a "RAJT" és "CÉL" szövegeket
  • "vágjuk át" máshol is a falakat, hogy labirintus lehessen majd belőle
  • végül nehezítsük meg a közlekedést - a falak sötét színével (pipetta) hozzunk létre zsákutcákat a szakaszrajzoló eszközzel
  • a teszteléshez egy ötlet: löttyintsük tele egy másik halovány színnel a labirintus belsejét, ahol kell, javítsunk


Készítsünk egy másik hátteret az "Új háttér festése" ikonnal, nevezzük ezt "vektoros"-nak!
Váltsunk is át "pixeles" módról "vektoros"-ra: kattintsunk jobbra lenn a "Vektoros képpé alakítás"-ra!
Nagyítsunk "egyet" a "+" gombra kattintva! Uccu neki:

  • először a legkülső téglalapot rajzoljuk meg a fentihez hasonlóan (kipróbálhatod fordítva is, a téglalapok egymáson vannak!!!)
  • amíg kijelölt, addig mozgathatjuk, alakítgatjuk, a kijelölést megszüntethetjük pl. egy másik eszköz választásával
  • rajzoljuk meg ugyanígy a többit is, ha egy korábbi nem tetszik, válasszuk ki a "Kijelölés" eszközzel, ezután módosítható
  • löttyintsünk ezekbe festéket (a legnagyobbon kívülre nem szükséges, de megpróbálhatod)
  • vágjunk a külső falba egy-egy rést a "RAJT" és a "CÉL" szövegeknek, és írjuk is ezeket a szövegeket az átjárókra
  • vágjunk a falakba máshol is átjárókat, és húzzunk új válaszfalakat

Látható a vektorgrafika előnye, hiszen utólag bármi könnyedén módosítható és törölhető.


Töltsük le a "pingvin" szereplőt a számítógépünkre: katt ide (C3.sprite2)!

Kezdjünk egy új projektet, töröljük a "macskát", majd töltsük be az előbb lementett szereplőt ("Szereplő betöltése állományból")!

Az új szereplő neve "pingvin", és két jelmeze van: "pixeles", "vektoros". Váltogatva a jelmezeket (katt a felsőre - katt az alsóra) szemmel is látható a kétfajta grafika különbsége.

Még érthetőbb lesz, ha a vektorgrafikát elemeire bontjuk - felboncoljuk szegény pingvint (én ravaszul csináltam egy másolatot a "vektoros"-ról, s ezt boncoltam, így bármikor egyszerűen újra kezdhettem):

  • kattintsunk rá a kijelölőeszközzel (most még csak egy objektum van, de ez több elemből van "összefogva")
  • kattintsunk a "csoportbontás" ikonra (legalul) - ezzel több objektumra esett szét a pinvin: szárnyak, csőr-szemek-lábak, has
  • a fenti elemek mindegyike újabb csoport, ezek tovább "darabolhatók" (pl. szárnyak -> jobb szárny, bal szárny)

Próbáljuk egyedül megcsinálni az egyik szárnyat!

(Ötlet: először csináljunk egy tömör fekete téglalapot, válasszuk az "Átformálás" eszközt, majd húzzuk az egyik sarkot a másikra!)


Töltsük le a "pingvin" szereplőt a számítógépünkre ugyanúgy, mint a fenti feladatnál!

Töröljük a "vektoros" jelmezét, a "pixeles"-ről pedig készítsünk egy másolatot, s ezt nevezzük át "vektoros"-ra!

Ezt fogjuk felhasználni egy szép pingvin elkészítéséhez. A pingvin rajzolatát felhasználva hozzuk létre a vektoros ábrát. Egy-egy csoport elkészítése végén azt elhúzzuk oldalra, s nekilátunk a következő ábrarészletnek.
Konkrétan:

  • kattintsunk jobbra lenn a "Vektoros képpé alakítás" ikonra, ekkor a pixeles kép ugyan vektoros lesz, de egyetlen szétszedhetetlen objektum
  • kezdjük a szárnyakkal, lépései:
       rajzoljunk egy tömör fekete téglalapot, húzzuk az egyik szárnyra, próbáljuk meg nagyjából lefedni (célszerű ezt nagyított ábrákkal végezni)
       válasszuk az "Átformálás" eszközt, majd húzzuk az egyik sarkot a másikra, válasszuk a "Kijelölés" ikon, és katt a szárnyra
       készítsünk egy másolatot - Ctrl+C, Ctrl+V, tegyük le, majd tükrözzük és húzzuk a helyére
       a Shift billentyűt lenyomva tartva jelöljük ki a két szárny mindegyikét, és foglaljuk csoportba ("Csoportosítás" jobbra lenn)
  • jöhet a has (én más szín használtam a köröknél, mert így jobban láttam, a végén belelöttyintettem pl. a feketét):
       igazítsunk egy tömör kört a pocak fekete részére, ha jó, húzzuk félre, hogy lássuk a szürkét
       ugyanígy méretezzük a szürkét, majd a fehéret is
       ezután illesszük össze a három kört (pontosabban ellipszist), és foglaljuk ezeket is egy csopotba
       foglaljuk egy csoportba a szárnyakkal is (így kész a test)
  • célszerű a szemekkel folytatni, mert a csőr fedi az egyik szemet, tehát az legyen a felső (utolsó) réteg, lépései:
       jobb szem, csoportba foglalva; bal szem, csoportba foglalva
       a két szem, csoportba foglalva
  • jöhetnek a sárgák, csőr és lábak, ezeket is foglaljuk egy csoportba, a csőrt részletezem:
       nagyítsuk ki jól a sárga csőrt, egy másik színű tömör téglalappal finoman fedjük be
       válasszuk az "Átformálás" eszközt, és húzzuk a téglalap két alsó csúcsát középre, egybe (így lesz egy háromszög),
       a felső csúcsuk közti vonalra kattintva tehetünk be újabb "fogópontokat", ezekkel kigömbölyíthetjük a felső ívet

Végül a csoportokat is foglaljuk egy csoportba, és kész a pingvin (a pixelszerű pingvint töröljük ki!)!


Töltsük le a "katica" szereplőt a számítógépünkre: katt ide (C5.sprite2)!
A kép forrása: tanitobacsi.hu

Kezdjünk egy új projektet, töröljük a "macskát", majd töltsük be az előbb lementett szereplőt ("Szereplő betöltése állományból")!

Az új szereplő neve "katica", és csak egy jelmeze van. Nevezzük át "pixeles"-re, a duplikáltját pedig "vektoros"-ra! Alakítsuk is át valóban vektorosra!

Ez lesz a szerkesztendő "katica" alapja. A lépéseket már csak röviden írom le:

  • fej és rajta a szemek megrajzolása (tömör körök), majd csoportba foglalásuk
  • egyik csáp megrajzolása (megfelelő vastagságú, egymásutáni vonalszakaszokból), másolása, tükrözése, csápok helyreigazítása, csoportosításuk, végül foglaljuk egybe a fejjel is
  • célszerű a lábakkal folytatni (a feladat hasonló is a csápokhoz), s egy picivel hosszabbra rajzolni (a szárnyak majd letakarják), csak az egyoldali lábakat foglaljuk csoportba
  • szárnyak rajzolása: fekete vonallal ellipszis, kitöltés pirossal, fekete vonal középre, csoportosításuk, húzzuk félre
  • pöttyök rajzolása: egy pötty (ami lefedi a pixeles pöttyöt), egy másolom és elhúzom a helyére, csoportosításuk, elhelyezem a szárnyakon, és csoportba foglalom, majd a lábakat is
  • végül összeillesztem a fejjel, és csoportba foglalom ezeket is

A pöttyöket nem könnyű csoportba foglalni, én (a Shift-et nyomva tartva) balról jobbra haladva kattintgattam!


Töröld a macskát, majd hozd létre az ábrán látható szereplőket vektorgrafikusan!
(Célszerű a megadott sorrendet betartani, mert elöl állnak az egyszerűbbek!)

  1.   A.png – göncöl
  2.   B.png – hold
  3.   C.png – fenyő
  4.   D.png – kerítés
  5.   E.png – ház
  6.   F.png – hóember

Az egyes képeken kis segítség kapható. A számozás sorrendjében hozzuk létre a rajz egyes elemeit, ezeket célszerű egy csoportba foglalni, végül az elemeket is!

A szereplők felhasználásával készítsük el azt a sokszereplős programot, amelyik kirajzolja az ábrán látható tanyát!
(A kerítést a szereplő lenyomataiból építsük fel!)


 

Mintafeladatok

Egyszerűbb mintaprogramok

A *-gal jelzett program kicsit nehezebb! A képaláírásra kattintva a program látható.

Nehezebb mintaprogramok

A *-gal jelzett program kicsit nehezebb! A képaláírásra kattintva a program látható.

Linkek, dokumentumok