Pierwszy projekt w środowisku Scratch – uczymy duszka chodzić i rysować
Duszek przechodzi przez jezdnię
Spacer duszka nad jeziorem
Scenariusz projektu
Najwyższy czas na przygotowanie twojej pierwszej animowanej historyjki. Duszek będzie spacerował po pomoście na tle jeziora. Gdy dojdzie do końca sceny, zawróci i zacznie iść z powrotem. Spacer rozpocznie po uruchomieniu programu zieloną flagą, a gdy go zatrzymasz, wybierając przycisk stop, duszek zakończy spacer.
ma7b4c8881bf1197c_d5e147
Zmiana tła sceny
Realizację projektu zaczniemy od zmiany tła.
Ćwiczenie 1
Wybierz z galerii tło, które jest podpisane boardwalk i przedstawia pomost nad jeziorem.
Możesz skorzystać z poniższych podpowiedzi, które krok po kroku opisują, jak zmienić obraz tła na jeden z obrazków dostępnych w galerii.
Instrukcja: Możesz skorzystać z poniższych podpowiedzi, które krok po kroku opisują, jak zmienić obraz tła na jeden z obrazków dostępnych w galerii.
Krok
Kliknij w lewym dolnym rogu ekranu w obszarze zarządzania sceną w ikonę wyboru nowego tła z galerii.
R1GJiHEJsUU7K1
Krok 1 instrukcji: Jak zmienić obraz tła na jeden z obrazków dostępnych w galerii
Źródło: nn, licencja: CC BY 3.0.
Krok
Wybierz tło (widok z pomostem na jezioro – boardwalk) i zatwierdź wybór przyciskiem OK.
R827cUfAnTPkw1
Krok 2 instrukcji: Jak zmienić obraz tła na jeden z obrazków dostępnych w galerii
Źródło: nn, licencja: CC BY 3.0.
Krok
Wybierz puste tło nr 1 i usuń je, klikając w krzyżyk zamknięcia.
R117LnOCMz4UI1
Krok 3 instrukcji: Jak zmienić obraz tła na jeden z obrazków dostępnych w galerii
Źródło: nn, licencja: CC BY 3.0.
Krok
Kliknij w duszka w obszarze zarządzania duszkami, a następnie w zakładkę skrypty, aby powrócić do znanego ci już wyglądu ekranu.
RZEVOj6OcwXCE1
Krok 4 instrukcji: Jak zmienić obraz tła na jeden z obrazków dostępnych w galerii
Spacerować nad jeziorem może kotek, ale warto dobrać inną postać, bardziej odpowiadającą takiemu spacerowi.
Ćwiczenie 2
Dodaj z galerii nowego duszka przedstawiającego spacerującego chłopca. Jest podpisany Boy3 walking.
Możesz skorzystać z poniższych podpowiedzi, które krok po kroku opisują, jak dodać z galerii nowego duszka.
Instrukcja: Możesz skorzystać z poniższych podpowiedzi, które krok po kroku opisują, jak dodać z galerii nowego duszka.
Krok
Kliknij w obszarze zarządzania duszkami w ikonę wyboru nowego duszka z galerii.
RG8uHuabOePQL1
Krok 1 instrukcji: Jak dodać z galerii nowego duszka
Źródło: nn, licencja: CC BY 3.0.
Krok
Wybierz duszka (spacerujący chłopiec – Boy3 walking) i zatwierdź wybór przyciskiem OK.
RIrqcTzJYc3u91
Krok 2 instrukcji: Jak dodać z galerii nowego duszka
Źródło: nn, licencja: CC BY 3.0.
Przesuń duszka chłopca, żeby znalazł się na pomoście po lewej stronie sceny. Domyślny duszek - kotek nie będzie potrzebny, więc możesz go usunąć.
Ćwiczenie 3
Usuń niepotrzebnego duszka - kotka.
Wskazówka
Duszka można usunąć, klikając go (obojętne, czy na scenie, czy w obszarze zarządzania duszkami) prawym przyciskiem myszy. Następnie należy wybrać opcję usuń.
Umiesz już przesuwać duszka o określoną liczbę kroków, np. po naciśnięciu klawisza spacji. Wiesz też, że jak duszek dojdzie do krawędzi, to dalsze naciskanie klawisza spacji już nic nie da, musisz przeciągnąć duszka z powrotem na scenę. Potrafisz także wyświetlać informację w dymku komiksowym.
Spróbuj teraz zautomatyzować zachowanie chłopca. Niech po kliknięciu w zieloną flagę wyświetli informację, że zaraz rozpocznie spacer, a potem chodzi już samodzielnie, aż nie naciśniesz przycisku stop na pasku narzędziowym. Po dojściu do krawędzi sceny chłopiec powinien się obrócić i iść w przeciwną stronę.
Ćwiczenie 4
Przygotuj skrypt dla chłopca realizujący samodzielny spacer nad jeziorem według poniższego przepisu.
Po wciśnięciu zielonej flagi duszek:
wyświetla przez 2 sekundy w dymku komiksowym informację, że rozpocznie spacer,
cyklicznie (zawsze) wykonuje następujące czynności:
przesuwa się o 3 kroki,
jeśli dojdzie do brzegu sceny, obraca się w przeciwną stronę (odbija).
Wybierz kategorię Zdarzenia i przeciągnij klocek kiedy kliknięto zieloną flagęma7b4c8881bf1197c_d532e201kiedy kliknięto zieloną flagę do obszaru skryptów.
Wybierz kategorię Wygląd i przeciągnij klocek powiedz … przez … sma7b4c8881bf1197c_d532e211powiedz … przez … s do obszaru skryptów. Połącz go z klockiem zielonej flagi. Zmień napis Hello! na informujący o rozpoczęciu spaceru.
Wybierz kategorię Kontrola i przeciągnij klocek zawszema7b4c8881bf1197c_d532e220zawsze do obszaru skryptów. Połącz go z poprzednim klockiem. Zwróć uwagę na wygląd tego klocka. Ponieważ będzie on powtarzał bez końca (zawsze) klocki, które znajdą się w jego wnętrzu, nie da się do niego podłączyć od dołu żadnego klocka.
Wybierz kategorię Ruch i przeciągnij klocek przesuń o … krokówma7b4c8881bf1197c_d532e229przesuń o … kroków do obszaru skryptów. Osadź go wewnątrz klocka zawsze. Zmień liczbę kroków na 3.
Z kategorii Ruch przeciągnij klocek jeżeli na brzegu, odbij sięma7b4c8881bf1197c_d532e238jeżeli na brzegu, odbij się od obszaru skryptów i osadź go wewnątrz klocka zawszema7b4c8881bf1197c_d532e220zawsze.
Przetestuj (wypróbuj) działanie skryptu.
RbUYSB4hgJxl11
Skrypt realizujący spacer chłopca nad jeziorem
Skrypt realizujący spacer chłopca nad jeziorem
Ćwiczenie 5
Zapewne podczas testowania skryptu, wykonanego w poprzednim zadaniu, zwrócił twoją uwagę fakt, że chłopiec po zmianie kierunku idzie „do góry nogami”. Dzieje się tak, ponieważ duszek, obracając się, kręci się dookoła swojego domyślnego środka. Spróbuj odnaleźć i dodać do skryptu odpowiedni klocek, który spowoduje, że duszek będzie obracał się tylko w prawą lub w lewą stronę. Zastanów się, gdzie i dlaczego ten klocek powinien zostać wstawiony do skryptu, który już istnieje.
Wskazówka
Znajdź w kategorii Ruch klocek ustaw styl obrotuma7b4c8881bf1197c_d532e253ustaw styl obrotu i dodaj go do skryptu przed klockiem zawszema7b4c8881bf1197c_d532e220zawsze. Z listy rozwijalnej wybierz lewo - prawo. Chłopiec powinien patrzeć tylko w dwie strony, w lewo i w prawo.
Duszek - chłopiec porusza się już samodzielnie na scenie, możesz dodać jeszcze do projektu animację. Spacerując, chłopiec powinien poruszać nogami.
Ważne!
Animować można duszki, które mają więcej niż jeden kostium. Wybierając zakładkę Kostiumy, sprawdzisz, ile kostiumów ma dany duszek. Spacerujący chłopiec w tym projekcie ma pięć kostiumów, które możesz cyklicznie zmieniać (następnym kostiumem po ostatnim jest ponownie pierwszy).
R1bqv25xfGHAn1
Ilustracja przedstawiająca wygląd pięciu kostiumów duszka
Wygląd pięciu kostiumów duszka Boy3 walking
Ponieważ komputer może wykonywać jednocześnie wiele poleceń, przygotuj dla niego kilka zadań w postaci oddzielnych skryptów. Masz już skrypt, który powoduje, że duszek porusza się na scenie. Można dodać drugi skrypt, który spowoduje, że dzięki zmianie kostiumów duszek będzie animowany. Oba skrypty będą działały jednocześnie.
Ćwiczenie 6
Przygotuj skrypt animujący duszka według poniższego przepisu. Po wciśnięciu zielonej flagi duszek:
czeka 2 sekundy, aż zniknie dymek informujący o rozpoczęciu spaceru,
cyklicznie (zawsze) wykonuje następujące czynności:
zmienia kostium na następny,
chwilę czeka, np. 0.3 sekundy.
Wybierz kategorię Zdarzenia i przeciągnij klocek kiedy kliknięto zieloną flagęma7b4c8881bf1197c_d532e201kiedy kliknięto zieloną flagę do obszaru skryptów.
Wybierz kategorię Kontrola i przeciągnij klocek czekaj … sma7b4c8881bf1197c_d532e298czekaj … s do obszaru skryptów. Połącz go z klockiem zielonej flagi. Zmień czas na 2 sekundy.
Z kategorii Kontrola przeciągnij klocek zawszema7b4c8881bf1197c_d532e220zawsze do obszaru skryptów. Połącz go z poprzednim klockiem.
Wybierz kategorię Wygląd i przeciągnij klocek następny kostiumma7b4c8881bf1197c_d532e307następny kostium do obszaru skryptów. Osadź go wewnątrz klocka zawszema7b4c8881bf1197c_d532e220zawsze.
Z kategorii Kontrola przeciągnij klocek czekaj … sma7b4c8881bf1197c_d532e298czekaj … s do obszaru skryptów i osadź go wewnątrz klocka zawszema7b4c8881bf1197c_d532e220zawsze. Popraw czas na 0.3 sekundy.
Przetestuj (wypróbuj) działanie programu. Składa się już z dwóch skryptów.
RbvVchhGLsOzP1
Skrypt realizujący animację duszka
Skrypt animujący duszka
Ważne!
Pamiętaj o zapisaniu projektu.
ma7b4c8881bf1197c_d532e201
R14EX9DEB4ht21
Klocek: kiedy kliknięto
Źródło: nn, licencja: CC BY 3.0.
Skrypty rozpoczynające się od tego bloczka są uruchamiane po kliknięciu na ekranie ikony zielonej flagi – uruchomienie programu. Przykład:
R1a5neCgrcQMu1
Skrypt realizyjący wyświetlenie napisu po kliknięciu zielonej flagi
Źródło: nn, licencja: CC BY 3.0.
ma7b4c8881bf1197c_d532e211
R1596uN6PE3wm1
Klocek: powiedz Hello! przez 2 s
Źródło: nn, licencja: CC BY 3.0.
Wyświetla w dymku tekst podany w polu edycyjnym przez określony czas. Oznacza to wstrzymanie działania skryptu przez ten czas. Przykład:
RrzoXWIev657z1
Skrypt realizujący wyświetlenie w dymku tekstu podanego w polu edycyjnym przez określony czas po kliknięciu zielonej flagi
Źródło: nn, licencja: CC BY 3.0.
ma7b4c8881bf1197c_d532e220
R1Z5xKV8cey121
Klocek: zawsze
Źródło: nn, licencja: CC BY 3.0.
Bloczek powoduje powtarzanie zestawu instrukcji w nieskończoność. Zatrzymanie nastąpi po naciśnięciu przycisku stop, wykonaniu klocka zatrzymaj wszystko lub zatrzymaj inne skrypty duszka w innych skryptach. Jeśli skrypt z bloczkiem zawsze ma się zatrzymać sam, należy w jego wnętrzu użyć instrukcji warunkowej jeżeli i klocka zatrzymaj ten skrypt. Przykład:
RkWOGaDPabUKI1
Skrypt realizujący powtarzanie instrukcji
Źródło: nn, licencja: CC BY 3.0.
ma7b4c8881bf1197c_d532e229
Ros13pnSvdOJk1
Klocek: przesuń o 10 kroków
Źródło: nn, licencja: CC BY 3.0.
Przesuwa duszka o podaną odległość zgodnie z aktualnym kierunkiem oraz aktualnymi ustawieniami pisaka (przyłożony/podniesiony, kolor, grubość). Jeśli chcemy przesunąć duszka do tyłu, należy podać wartość ujemną. Przykład:
RVxpSBGU7XAh61
Skrypt realizujący przesunięcie duszka i narysowanie poziomej linii po kliknięciu zielonej flagi
Źródło: nn, licencja: CC BY 3.0.
ma7b4c8881bf1197c_d532e238
R1e7RxXPcwfSh1
Klocek: jeżeli na brzegu, odbij się
Źródło: nn, licencja: CC BY 3.0.
Zmienia kierunek na przeciwny, jeśli duszek dotyka krawędzi sceny. Przykład:
RkWOGaDPabUKI1
Skrypt realizujący powtarzanie instrukcji
Źródło: nn, licencja: CC BY 3.0.
ma7b4c8881bf1197c_d532e253
R17uU7DsqU00W1
Klocek: ustal styl obrotu
Źródło: Janusz Wierzbicki, licencja: CC BY 3.0.
Określa sposób zachowania duszka w zależności od kierunku. Z listy rozwijalnej można wybrać jedną z trzech opcji:
dookoła – duszek patrzy zgodnie ze swoim kierunkiem,
lewo‑prawo – duszek patrzy tylko w lewą lub w prawą stronę,
nie obracaj – duszek nie reaguje na zmianę kierunku.
Niezależnie od sposobu wskazywania kierunku duszek porusza się zgodnie ze swoim kierunkiem. Sposób wskazywania kierunku można także określić edycyjnie.
R2qPuowAMFxEj1
Ilustracji przedstawiająca kierunki poruszania się duszka
Źródło: Janusz Wierzbicki, licencja: CC BY 3.0.
Przykład:
R1QBKOy0SLD4g1
Skrypt realizujący ustawienie duszka w określonym kierunki i przesunięcie o określoną liczbę kroków
Źródło: Janusz Wierzbicki, licencja: CC BY 3.0.
ma7b4c8881bf1197c_d532e298
RoSqeqxNkz6gl1
Klocek: czekaj
Źródło: nn, licencja: CC BY 3.0.
Bloczek powoduje wstrzymanie działania skryptu na określony czas. Przykład:
R9uGpAnB1t9WR1
Skrypt realizujący instrukcję w pętli ZAWSZE
Źródło: nn, licencja: CC BY 3.0.
ma7b4c8881bf1197c_d532e307
R1AO24DRWDu9v1
Klocek: następny kostium
Źródło: nn, licencja: CC BY 3.0.
Powoduje zmianę kostiumu duszka na następny. Kolejnym kostiumem po ostatnim jest ponownie pierwszy. Klocek ten jest często wykorzystywany do animacji postaci duszka. Przykład:
R15BWVzhZFTs21
Skrypt realizujący powtórzenie instrukcji o podaną ilość razy
Źródło: nn, licencja: CC BY 3.0.
ma7b4c8881bf1197c_d5e678
Zadania uzupełniające
Ćwiczenie 7
Dopisz jeszcze jeden skrypt do projektu Spacer nad jeziorem. Po kliknięciu w duszka wyświetli w dymku informację, że za chwilę (np. po dwóch sekundach) zakończy spacer i zatrzyma się.
Wskazówka
Wykorzystaj klocek zatrzymaj …ma7b4c8881bf1197c_d532e338zatrzymaj … z kategorii Kontrola i wybierz z listy rozwijalnej wszystko lub inne skrypty duszka.
Ćwiczenie 8
Sprawdź, ile kostiumów ma domyślny duszek – kotek. Przygotuj projekt pt. Spacer kotka po polu.
Ćwiczenie 9
Przygotuj projekt, w którym rybka będzie pływać w akwarium. Kliknięcie w rybkę niech spowoduje jej obrót, czyli zmianę kierunku płynięcia. Może masz pomysły na dodatkowe zadania dla rybki, np. reagującej na wciśnięcie jakiegoś klawisza? Spróbuj je także dodać.
Ćwiczenie 10
Przygotuj animowany projekt wykorzystujący przez ciebie zaprojektowanego duszka oraz tło sceny.
Wskazówka
Wygląd duszka możesz zaprojektować w edytorze graficznym Scratcha. Wystarczy kliknąć w ikonę Namaluj nowego duszka w obszarze zarządzania duszkami.
R1W4lrL1m4Lv71
Zrzut obszaru zarządzania duszkami z zaznaczoną ikoną: Namaluj nowego duszka
Przejście do trybu rysowania nowego duszka
Jeśli twój duszek ma być animowany, powinien mieć co najmniej dwa kostiumy. Kolejny kostium tworzymy najczęściej poprzez drobne zmiany poprzedniego. Wygodnie jest więc skopiować dany kostium i go poprawiać. W tym celu kliknij w kostium prawym przyciskiem myszy i z menu kontekstowego wybierz opcję duplikuj.
R1EJTBcu2KM4s1
Ilustracja przedstawiająca sposób powielenia kostiumu duszka
Powielenie kostiumu duszka – umożliwia wprowadzenie do niego zmian i stworzenie animacji
Tło sceny możesz przygotować także w edytorze graficznym Scratcha (ikona Namaluj nowe tło w obszarze zarządzania sceną). Możesz także wykorzystać zdjęcie z wakacji i wgrać jako tło.
R19gMmFIt8FIi1
Zrzut obszaru zarządzania sceną z zaznaczoną ikoną: Namaluj nowe tło oraz ikoną: Wczytaj z gotowego pliku
Dodanie nowego tła: można je narysować samodzielnie (1) lub wczytać z gotowego pliku (2) - np. zdjęcia z wakacji
Ważne!
Scena ma stałe wymiary: szerokość 480 punktów i wysokość 360 punktów. Jeśli wykorzystujesz zdjęcie jako tło, pamiętaj aby je wcześniej przyciąć (przekształcić) w dowolnym edytorze graficznym do wymiarów 480 na 360 punktów.
ma7b4c8881bf1197c_d532e338
R11JnJYnWVYue1
Klocek: zatrzymaj wszystko
Źródło: nn, licencja: CC BY 3.0.
Zatrzymaj wszystko powoduje zatrzymanie wykonywania skryptu lub skryptów. Z listy rozwijalnej można wybrać: wszystko, ten skrypt, inne skrypty duszka. Zatrzymaj wszystko zatrzymuje wszystkie uruchomione skrypty. Zatrzymaj ten skrypt zatrzymuje działanie skryptu, w którym został użyty, zaś zatrzymaj inne skrypty duszka, zatrzymuje pozostałe skrypty danego duszka z wyjątkiem tego, w którym został użyty - dlatego można z nim połączyć od dołu kolejne klocki. Zatrzymaj wszystko jest równoważne z kliknięciem w ikonę stop na ekranie. Powoduje też zgaszenie wyświetlonych dymków komiksowych poleceniami powiedz i pomyśl. Zatrzymaj ten skrypt i zatrzymaj inne skrypty duszka pozostawia dymki bez zmian.
