Podstawy programowania

w Scratch.

Nota Materiał powstał w ramach realizacji projektu „e-kompetencje bez barier” dofinansowanego z Programu Operacyjnego Polska Cyfrowa działanie 3.1 Działania szkoleniowe na rzecz rozwoju kompetencji cyfrowych oś priorytetowa III. Cyfrowe kompetencje społeczeństwa

[1/23] Podstawy programowania w Scratch.

Programowanie jest obowiązkowe w nauczaniu informatyki w dzisiejszej szkole. Jako nauczyciele mamy możność wybrania dowolnego języka programowania. Wiele pomysłów podsuwają nam wydawnictwa, które w swoich podręcznikach sugerują jakie programowanie możemy wprowadzić na lekcjach informatyki. Ostatecznie jednak każdy z nas sam decyduje czego będzie uczył. Niniejszy materiał prezentuje podstawy programowania w Scratch.

Ogólnie o programie Scratch [czyt. Skrecz]

Programowanie w Scratchu polega na budowaniu programów (skryptów) ze specjalnych bloków, które swoim kształtem przypominają puzzle. Należy połączyć odpowiednie puzzle, aby całość (układanka) stworzyła zaplanowany prze nas program.

W tym programie możemy stworzyć za pomocą programowania interaktywne historyjki, animacje, gry.

Program Scratch jest darmowy. Może z niego korzystać każda chętna osoba. Aby zacząć w nim pracę wystarczy w pasku adresów wpisać adres strony http://scratch.mit.edu. Tu wybieramy odpowiednią opcję: Wypróbuj, Zobacz przykłady (animacje i gry innych osób), Dołącz do Scratch (możemy wykonywać swoje projekty i publikować na stronie). Jeśli chcemy na stronie zapisywać własne prace i udostępnić je innym musimy się zarejestrować.

Program Scratch możemy również pobrać z Internetu i zainstalować darmową wersję Scratcha, ale jest ona starsza niż ta ze strony scratch.mit.edu.

W tym materiale będziemy korzystali z podanej wyżej strony internetowej.

Zdj. 1. Program Scratch na stronie http://scratch.mit.edu.

[2/23] Podstawy programowania w Scratch.

Budowa okna programu Scratch na stronie http://scratch.mit.edu.

Zdj. 2. Budowa okna Scratch na stronie http://scratch.mit.edu.

Rejestracja na stronie http://scratch.mit.edu.

Wybieramy zakładkę Dołącz do Scratch. Rejestrację dokonujemy w czterech krokach, wszystko jest podane w języku polskim. Krok 1.

Zdj. 3. Rejestracja w programie Scratch – krok 1.

Strona startowa Scratch. Tworzenie własnego programu. Przeglądanie gotowych projektów.

Samouczek (w języku angielskim).

Informacje o programie (w języku angielskim).

Rejestracja.

Logowanie.

Wyróżnione projekty.

[3/23] Podstawy programowania w Scratch.

Wypełniamy wszystkie pola: Nazwę użytkownika (tu program podpowiada, aby nie używać prawdziwego imienia), hasło, potwierdzenie hasła. Wybieramy „Następne”. Krok 2.

Zdj. 4. Rejestracja w programie Scratch – krok 2.

Musimy obowiązkowo wypełnić wszystkie pola. Potem wybieramy „Następne”. Krok 3.

Zdj. 5. Rejestracja w programie Scratch – krok 3.

Musimy obowiązkowo wypełnić wszystkie pola. Wybieramy „Następne”.

Zaznacz, aby otrzymywać aktualizację.

[4/23] Podstawy programowania w Scratch.

Krok 4.

Zdj.6. Rejestracja w programie Scratch – krok 4.

Powitanie nas w Scratchu. Mamy tu możliwość zmiany własnego adresu e-mail. Jak wszystko jest poprawnie wybieramy „OK, chodźmy!”. Zaczynamy pracę w Scratchu po rejestracji. Po rejestracji przełączymy się automatycznie na stronę, w której zaczynamy programowanie. Mamy tu trzy możliwości do wyboru: Szkolenia, jak tworzyć projekt w Scratchu, Wypróbuj gotowe już projekty, Połącz się z innymi (możemy tu obejrzeć gotowe programy, umieścić komentarz, zobaczyć swoją aktywność).

Zdj.7. Program Scratch.

[5/23] Podstawy programowania w Scratch.

Programujemy.

Wybieramy zakładkę „Stwórz” na górnym niebieskim pasku. Włącza się interfejs programu Scratch.

Zdj. 8. Budowa interfejsu programu Scratch.

Podgląd projektu (scena).

Duszek, może przybierać różne postacie.

Maksymalizacja sceny.

Wybór języka, w którym wyświetlą się nazwy

aplikacji.

Przycisk do uruchamiania programu.

Przycisk do zatrzymywania programu.

Kategorie bloków do budowania skryptów

z kategorii Ruch.

Pole, w którym buduje się skrypty.

Miniatura tła.

Miniatura duszka.

Menu duszków. Biblioteka duszków.

[6/23] Podstawy programowania w Scratch.

Dodawanie, zmiana wyglądu i nazwy duszka.

Na początek do postaci duszka kota dodamy nowego duszka. Naciskamy bibliotekę duszków i wybieramy postać, która nam jest potrzebna. Wybór postaci duszków jest bardzo duży.

Zdj. 9. Biblioteka duszków.

Wybieramy duszka nietoperza. Dodajemy go przez naciśnięcie „OK”.

Zdj. 10. Dodanie duszka.

Podgląd wszystkich naszych dyszków.

[7/23] Podstawy programowania w Scratch.

Duszka możemy również sami narysować. Włączmy edytor do rysowania, jest on uproszczoną wersją programu Paint. Rysowany przez nas duszek pojawi się automatycznie na scenie, w podglądzie duszków

Zdj. 11. Dodawanie duszka.

Duszki możemy powiększyć lub pomniejszyć. Wystarczy wybrać odpowiednie

narzędzie i klikać lewym przyciskiem myszy w naszego duszka. Duszka możemy również usunąć. W tym celu klikamy w podglądzie duszków na okno z duszkiem, którego nie chcemy prawym przyciskiem myszy i wybieramy usuń lub wybieramy nożyczki. Duszka możemy powielać. W tym celu naciskamy na odpowiedniego duszka prawym przyciskiem myszy i wybieramy duplikuj lub naciskamy na „pieczątkę”, która znajduje się obok nożyczek. Opcja duplikuj kopiuje postać i skrypt, jeśli został stworzony przy kopiowanej postaci.

Zdj. 12. Zmiana rozmiaru duszka.

Dodawanie duszka z kamerki(np. własna twarz).

Dodawanie duszka z pliku (wcześniej narysowanego w dowolnym programie graficznym).

Tu rysujemy.

[8/23] Podstawy programowania w Scratch.

Możemy zmienić kolor duszka. W tym celu wybieramy duszka nietoperza, bo jego kolor chcemy zmienić i wybieramy zakładkę Kostiumy. Teraz wybieramy odpowiedni kolor z palety kolorów i kubełek z farbą. Wylewamy farbę na te części, których barwę chcemy zmienić.

Zdj. 13. Zmiana koloru duszka.

Możemy zmienić nazwę naszego duszka. W tym celu naciskamy literkę ”i”, która

znajduje się w lewym górnym rogu naszego duszka, zaznaczamy obecną nazwę i zmieniamy na własną.

Zdj. 14. Zmiana nazwy duszka.

[9/23] Podstawy programowania w Scratch.

Dodawanie tła.

Do naszego projektu możemy dodać tło. Teraz tło jest białe, ale podobnie jak z duszkiem, możemy wybrać gotowe z biblioteki, narysować, dodać z pliku lub zapisać z kamerki. Po wybraniu odpowiedniego tła naciskany „OK”.

Zdj. 15. Zmiana tła. Bogata biblioteka teł.

Zdj. 16. Biblioteka teł.

[10/23] Podstawy programowania w Scratch.

Wybrane tło możemy jeszcze edytować (podobnie jak postać Duszka), czyli coś dorysować, usunąć, pomalować.

Zdj. 17. Dodawanie tła. Ruch postaci duszka.

Teraz chcemy, żeby nasz Kot poruszał się po scenie. W tym celu przechodzimy do zakładki Skrypty. Skrypty to puzzle, które musimy w taki sposób połączyć, aby nasza postać się ruszała. Możemy Kota wprawić w ruch na dwa sposoby. Pierwszy, to przez naciśnięcie zielonej flagi (naciśnięcie zielonej flagi w Scratchu oznacza rozpoczęcie animacji, gry), drugi, to przypisanie strzałkom z klawiatury odpowiednich poleceń. Pierwszy sposób. Wybieramy ze Skryptu kategorię Zdarzenia i puzzel „Kiedy kliknięto” - z zieloną flagą. Dzięki temu puzzlowi w momencie naciśnięcia zielonej flagi nastąpi uruchomienie naszego programu. Następnie przechodzimy do zakładki Ruch i tu wybieramy „Przesuń o 10 kroków” (1 krok, to jeden piksel). Jest to bardzo mała odległość, dlatego warto zmienić liczbę 10 na np. 50. Sprawdzamy, czy Kot się porusza naciskając zieloną flagę.

Zdj. 18. Tworzenie animacji – sposób pierwszy.

Narzędzia do edycji tła.

[11/23] Podstawy programowania w Scratch.

Drugi sposób. Wchodzimy w zakładkę Skrypty w Zdarzenia i wybieramy „Kiedy klawisz spacja naciśnięty” słowo „spacja” możemy zmienić na dowolny klawisz, my zmienimy na „strzałka w prawo” i otrzymujemy: „Kiedy klawisz strzałka w prawo naciśnięty”, przechodzimy do zakładki Ruch i wybieramy „Przesuń o 10 kroków”. Niżej ustalamy ruch w lewą stronę, czyli w zakładce Skrypty wybieramy Zdarzenia i „Kiedy klawisz strzałka w lewo naciśniety”, zakładka „Ruch Przesuń o -10 kroków”.

Zdj. 19. Tworzenie animacji – sposób drugi.

Aby sprawdzić, czy animacja działa uruchamiamy program (zielona flaga), a następnie naciskamy strzałkę w prawo lub w lewo.

Aby ruch kota bardziej przypominał chodzenie odwołujemy się do zakładki Kostiumy. Tu mamy dwie pozycje Kota przedstawiające ruch pozycja –a i –b.

Zdj. 20. Tworzenie animacji – sposób drugi.

[12/23] Podstawy programowania w Scratch.

Teraz kolejno układamy puzzle: Skrypty, zakładka Zdarzenia puzzle – „Kiedy klawisz strzałka w prawo naciśnięty”, Wygląd – „Zmień kostium na –b”, Ruch – „Przesuń o 10 kroków”, Kontrola – „czekaj 1 s” (1 s zmieniamy na 0.2 s)(Ważne między liczbami musi być kropka!), Wygląd –„ Zmień kostium na –a”, Ruch – „Przesuń o 10 kroków”, Kontrola - „czekaj 1 s” (1 s zmieniamy na 0.2 s). W taki sam sposób układamy puzzle do strzałki w lewo w celu przesuwania Kota do tyłu.

Aby sprawdzić jak animacja działa należy nacisnąć strzałkę w prawo, a potem w lewo.

Zdj. 21. Tworzenie animacji – sposób drugi. Aby w animacja, ruch był bardziej zbliżony do naturalnego należy wybrać duszka

z większą ilością Kostiumów.

[13/23] Podstawy programowania w Scratch.

Wykonujemy ruchy bardziej płynne. Do animacji wybierzemy duszka dziewczynkę, którą nazwiemy Ala. Teraz przechodzimy do zakładki Kostiumy. Tu widzimy różne ustawienia dziewczynki, które pozwolą nam stworzyć taką animację, jakby Ala występowała na scenie.

Zdj. 22. Tworzenie animacji. Zakładka Kostiumy.

Tworzenie animacji umożliwi nam zakładka Skrypty. Po przejściu do niej dodajmy Skrypt taki, że po naciśnięciu strzałki do góry dziewczynka będzie podnosiła ręce do góry. W tym celu wybieramy Zdarzenia i do edytora przesuwamy polecenie.

Zdj. 23. Tworzenie animacji. Zakładka Skrypty.

[14/23] Podstawy programowania w Scratch.

Teraz zmieniamy w przesuniętej zakładce słowo „spacja” na „strzałka w górę” i otrzymujemy: „Kiedy klawisz strzałka w górę naciśnięty”.

Zdj. 24. Tworzenie animacji. Zakładka Skrypty – Zdarzenia.

Wybieramy Wygląd, ponieważ kolejne polecenia będą wykorzystywały pozycje z zakładki Kostiumy. Wybieramy zatem: Zmień kostium na ….

Zdj. 25. Tworzenie animacji. Zakładka Skrypty – Wygląd.

[15/23] Podstawy programowania w Scratch.

Ustawiamy cztery razy tą samą zakładkę, ponieważ w kostiumach mieliśmy cztery różne położenia Ali (kostium-a, -b, -c, -d).Teraz ustawiamy zmianę kostiumów tak, żeby z obecnej pozycji najpierw otrzymać pozycję z kostiumu –b, potem –c, -d i powrócić do –a. Żeby jednak wszystkie te kostiumy nie pokazywały się w tym samym czasie musimy wybrać Kontrola i wstawić między kostiumy polecenie Czekaj 1 s.

Zdj. 26. Tworzenie animacji. Zakładka Skrypty – Kontrola.

Sprawdzamy jak działa nasza animacja wciskając strzałkę do góry. Zdecydowanie widzimy, że czas 1 sekunda jest jednak za długi, więc zmieniamy go np. na 0.2 s. (Ważne po między cyframi musi być kropka). Tak ustawione puzzle z poleceniami utworzą dość płynną animację występu duszka Ali na scenie.

Zdj. 27. Tworzenie animacji.

[16/23] Podstawy programowania w Scratch.

Tworzenie gry.

Stworzymy grę, która będzie sprawdzała znajomość tabliczki mnożenia. Zaczniemy od stworzenia tła. W tym celu wybieramy zakładkę w górnej części okna Tła.

Zdj. 28. Tworzenie tła do gry.

Teraz wybieram narzędzie tekst „T”. Tu ustalamy krój i kolor czcionki. Ustalamy również tryb (mamy do wyboru tryb wektorowy lub bitmapowy). Wybieramy tryb wektorowy, ponieważ wtedy będziemy mogli edytować stworzony tekst. Zaczynamy od ustawienia trybu wektorowego, potem kroju czcionki i koloru. Teraz piszemy nasz tekst, któremu nadamy nazwę tło 1.

Zdj. 29. Tworzenie tła do gry.

[17/23] Podstawy programowania w Scratch.

Teraz zmieniamy wygląd duszka i jego nazwę. Wybieramy duszka kaczkę i nadajemy jej nazwę Iloczyn. (Opis tych czynności był wcześniej). Przesuwamy kaczuszkę w lewy dolny róg sceny (wystarczy na kaczkę nacisnąć lewym przyciskiem myszy i przesunąć jej postać w wybrane miejsce).

Zdj. 30. Zmiana duszka i jego nazwy.

Budowanie skryptu gry. Do stworzenia gry musimy użyć trzech zmiennych. Wartości dwóch z nich gracz będzie musiał pomnożyć, trzecia zmienna to będzie liczba uzyskanych punktów. Przechodzimy do Skrypty i wybieramy kategorie „Dane” i zakładkę „Utwórz zmienną”.

Zdj. 31. Tworzenie zmiennych w grze.

Nadajemy nazwę zmiennej. Teraz tworzymy zmienną Czynnik I. W ten sam sposób tworzymy zmienną Czynnik II i Liczba punktów. Po wprowadzeniu nazwy zmiennej za każdym razem akceptujemy ja poprzez wciśnięcie „OK.”.

[18/23] Podstawy programowania w Scratch.

Po utworzeniu zmiennych w kategorii Dane pojawiły się nowe bloki. Możemy zmienić nazwy zmiennych lub je usunąć.

Zdj. 32. Tworzenie zmiennych w grze.

Na scenie widoczne są pola z naszymi zmiennymi oraz ich danymi o wartości 0.Pola te ustawiamy w odpowiednim dla nas miejscu. Możemy zmienić ich położenie przez naciśnięcie lewego przycisku myszy i przesunięcie w odpowiednie miejsce. W kategorii Dane określamy pola, które mają być widoczne poprzez zaznaczenie znaczkiem.

Zdj. 33. Ustawianie zmiennych na scenie.

[19/23] Podstawy programowania w Scratch.

Przechodzimy do budowania z puzzli skryptu. Ma on polegać na tym, że program 5 razy losuje dwie zmienne (czynniki). W dymku obok duszka wyświetli się mnożenie. Na dole sceny ma pojawić się chmurka, w którą gracz wpisze wynik. Program sprawdzi poprawność odpowiedzi. Duszek poinformuje gracza, czy odpowiedź jest poprawna, czy nie. Jeśli będzie poprawna, to zmieni się liczba punktów. Zaczynamy od skryptu, który pozwoli graczowi wykonać jeden przykład. W tym celu klikamy w miniaturę duszka i przechodzimy do zakładki Skrypty i wybieramy Zdarzenia. Przenosimy na pole do budowania programu puzzel „kiedy kliknięto” z symbolem zielonej flagi. Następnie musimy określić wartości zmiennych „Czynnik I” i „Czynnik II”. Przechodzimy zatem do zakładki Dane i wybieramy „Ustaw liczba punktów na 0”. Zmieniamy „liczba punktów” na „Czynnik I” poprzez naciśnięcie strzałeczki oraz na drugim takim samym bloku „Czynnik II”. Z grupy Wyrażenia wybieramy blok „losuj od 1 do 10” i przesuwamy na puzzel w miejsce cyfry 0.

Zdj. 34. Budowanie skryptu.

Teraz dołączmy blok z zakładki Czujniki „zapytaj … i czekaj”. Określamy w nim co ma się pojawić w dymku duszka. W tym celu wchodzimy do zakładki Wyrażenia i wybieramy blok „połącz hello i world”. Napis przy duszku ma składać się z trzech części (czynnik I, znak mnożenia, czynnik II), dlatego połączymy dwa takie same bloki, które umieścimy na bloku „zapytaj … i czekaj”. Zdj. 35. Budowanie skryptu. Zdj. 36. Budowanie skryptu.

[20/23] Podstawy programowania w Scratch.

Zmieniamy nazwy pól na zielonych blokach. Zamiast „hello” przeciągamy blok „Czynnik I”, na drugim wpisujemy „*” (gwiazdka oznacza mnożenie), trzecia zmienna zamiast „world” przeciagamy „Czynnik II”. Blok „zapytaj” spowoduje wyświetlenie w dolnej części sceny pole, w którym gracz musi wpisać wynik. Teraz program wylosuje graczowi dwie liczby i na dole sceny wyświetli się okno, w którym gracz podaje wynik i akceptuje go przyciskiem „Enter” lub naciska znaczek na końcu wyświetlonego pola do wpisywania wyników.

Zdj. 37. Budowanie skryptu.

Chcemy , żeby program sprawdzał poprawność wpisywanych wyników i liczył punkty. Wchodzimy w zakładkę Kontrola i wybieramy blok „jeżeli … to” razem z „w przeciwnym razie” i dołączamy do naszego skryptu. Teraz uzupełniamy we wstawionym puzzlu treści. Po słowie „jeżeli” umieszczamy warunek Czynnik I * Czynnik II, po słowie „to” wstawiamy blok mówiący, że wynik jest poprawny, po sformułowaniu „w przeciwnym razie” wstawiamy blok o błędnej odpowiedzi. W tym celu z zakładki Wyrażenia wybieramy blok = i = oraz z zakładki Czujniki blok odpowiedź i z zakładki Dane blok „zmień …”.

Zdj. 38. Budowanie skryptu.

[21/23] Podstawy programowania w Scratch.

Teraz program jest już prawie gotowy. Aby go sprawdzić naciskamy zieloną flagę w górnej części ekranu nad sceną. Po wpisaniu przez gracza wyniku pojawia się przy duszku komentarz o poprawności lub nie odpowiedzi i w przypadku poprawnej odpowiedzi zmienia się liczba punktów.

Zdj. 39. Budowanie skryptu.

Teraz dodajemy blok „powtórz” z zakładki Kontrola. Jeżeli chcemy aby gracz wykonał polecenie 5 razy wpisujemy liczbę na bloku 5.Ustawiamy jeszcze blok mówiący o tym, że na początku gracz ma 0 punktów (zakładka Dane, blok ustaw…). Ustawiam go zaraz pod pierwszym puzzlem. Na koniec dodajemy blok, który wyświetli komunikat o liczbie punktów (zakładka Wygląd blok potwierdź, zakładka Wyrażenia blok połącz …,wpisujemy „Liczba zdobytych punktów:”, a po „i” przesuwamy z zakładki Dane - Liczba zdobytych punktów) i kończymy skrypt puzzlem „zatrzymaj …” (zakładka Kontrola, blok zatrzymaj i wybieramy ten skrypt).

Zdj. 40. Budowanie skryptu.

[22/23] Podstawy programowania w Scratch.

Zdj. 41. Gotowy skrypt.

Gra jest już gotowa. Teraz wystarczy zapisać nasz program. W tym celu naciskamy przycisk Plik i wybieramy Zapisz teraz.

Zdj. 42. Zapisywanie w programie Scratch.

[23/23] Podstawy programowania w Scratch.

Nasza gra zapisuje się na stronie, na której pracowaliśmy. Aby ją zobaczyć naciskamy na strzałeczkę przy naszym loginie (prawy górny róg) i wybieramy „Moje rzeczy”. Tu zapisują się wszystkie zapisane przez nas prace. W tym miejscu również wylogowujemy się z programu.

v

Zdj. 43. Miejsce zapisanych prac w programie Scratch. Wylogowanie się.

W zakładce „Moje rzeczy” wyświetlają się wszystkie zapisane projekty. Aby nadać im nazwę naciskamy na „Untitled”.

Zdj. 44. Zawartość „Moje rzeczy”.

Teraz możemy nadać naszemu projektowi odpowiednią nazwę i jeśli chcemy udostępnić go wszystkim osobom wystarczy wybrać Udostępnij. Mamy również możliwość wejść do środka programu i dokonać w nim zmian.

Zdj. 43. Zmiana nazwy projektu, udostępnianie.