Podstawy programowania w Scratch.

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 Sctatch. 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 Sctatch. Budowa okna programu Scratch na stronie http://scratch.mit.edu. Strona startowa Scratch. Tworzenie własnego programu. Przeglądanie gotowych projektów. Rejestracja. Samouczek (w języku angielskim). Logowanie. Informacje o programie (w języku angielskim). Wyróżnione projekty. 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.

[3/23] Podstawy programowania w Sctatch. 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. Krok 3. Zdj. 4. Rejestracja w programie Scratch krok 2. Musimy obowiązkowo wypełnić wszystkie pola. Potem wybieramy Następne. Zaznacz, aby otrzymywać aktualizację. Zdj. 5. Rejestracja w programie Scratch krok 3. Musimy obowiązkowo wypełnić wszystkie pola. Wybieramy Następne.

Krok 4. [4/23] Podstawy programowania w Sctatch. 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.

Programujemy. [5/23] Podstawy programowania w Sctatch. Wybieramy zakładkę Stwórz na górnym niebieskim pasku. Włącza się interfejs programu Scratch. Wybór języka, w którym wyświetlą się nazwy aplikacji. Podgląd projektu (scena). Przycisk do uruchamiania programu. Duszek, może przybierać różne postacie. Przycisk do zatrzymywania programu. Maksymalizacja sceny. Kategorie bloków do budowania skryptów z kategorii Ruch. Miniatura tła. Miniatura duszka. Menu duszków. Biblioteka duszków. Pole, w którym buduje się skrypty. Zdj. 8. Budowa interfejsu programu Scratch.

[6/23] Podstawy programowania w Sctatch. 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. Podgląd wszystkich naszych dyszków. Zdj. 10. Dodanie duszka.

[7/23] Podstawy programowania w Sctatch. 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 Tu rysujemy. Dodawanie duszka z pliku (wcześniej narysowanego w dowolnym programie graficznym). Dodawanie duszka z kamerki(np. własna twarz). 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.

[8/23] Podstawy programowania w Sctatch. 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 Sctatch. 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. Bogata biblioteka teł. Zdj. 15. Zmiana tła. Zdj. 16. Biblioteka teł.

[10/23] Podstawy programowania w Sctatch. Wybrane tło możemy jeszcze edytować (podobnie jak postać Duszka), czyli coś dorysować, usunąć, pomalować. Zdj. 17. Dodawanie tła. Narzędzia do edycji 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.

[11/23] Podstawy programowania w Sctatch. 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 Sctatch. 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.

Wykonujemy ruchy bardziej płynne. [13/23] Podstawy programowania w Sctatch. 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 Sctatch. 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 Sctatch. 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.

Tworzenie gry. [16/23] Podstawy programowania w Sctatch. 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 Sctatch. 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). Budowanie skryptu gry. Zdj. 30. Zmiana duszka i jego nazwy. 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 Sctatch. 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 Sctatch. 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 Sctatch. 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 Sctatch. 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 Sctatch. 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 Sctatch. 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.