W tym materiale zapoznasz się z procesem tworzenia swojej pierwszej animacji przy użyciu języka Scratch. Realizując ćwiczenia dowiesz się w jaki sposób spowodować, aby duszek się poruszał.
Ważne!
Poniższe ćwiczenie wymaga znajomości środowiska Scratch. Chcąc zapoznać się z podstawami tworzenia skryptów zajrzyj do materiału Wprowadzenie do środowiska ScratchP9AYGQXHJWprowadzenie do środowiska Scratch.
Pierwsza animacja: Duszek na spacerze
Ten materiał pomoże ci przygotować twoją pierwszą animowaną historyjkę w środowisku Scratch. 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.
Skorzystaj z dołączonego notatnika do zapisania wszelkich uwag.
R15FiCHqrI6nm
Zmiana tła sceny
Realizację zadania rozpoczniemy od zmiany domyślnego tła.
1
Ćwiczenie 1
Wybierz z galerii tło, które jest podpisane Boardwalkma7b4c8881bf1197c_d532e200Boardwalk i przedstawia pomost nad jeziorem. Pomoże Ci w tym poniższy film.
R8UfIUGRl4GgU
Tło możesz wybrać, naciskając przycisk znajdujący w prawym dolnym rogu programu Scratch.
Kotek oczywiście może spacerować nad jeziorem. Spróbujmy jednak dobrać inną postać, np. dziewczynkę.
1
Ćwiczenie 2
Dodaj z galerii nowego duszka przedstawiającego spacerującą dziewczynkę. Jest podpisana jako Avery Walkingma7b4c8881bf1197c_d532e299Avery Walking.
Duszka możesz dodać, najeżdżając kursorem myszy na przycisk Wybierz duszka znajdujący w prawym dolnym rogu programu Scratch. Po najechaniu kursorem rozwinie się lista dostępnych opcji. Jedną z nich jest wybranie duszka z galerii duszków.
R2thJAtqdFGBE
Poniższy zrzut ekranu prezentuje scenę z nowo dodanym duszkiem.
RQwFsQXzRrEki
Przesuń duszka dziewczynki na lewą stronę sceny – pomostu.
1
Ćwiczenie 3
Usuń niepotrzebnego duszka - kotka.
Duszka możesz usunąć w panelu zarządzania duszkami. Znajduje się on po prawej stronie okna programu Scratch.
Duszka można usunąć, klikając ikonę kosza, która znajduje się w prawym górnym rogu aktualnie wybranego duszka. Najpierw wybierz duszka przedstawiającego kota jako aktywnego. Aby to zrobić, naciśnij na jego miniaturkę. Następnie będziesz mógł go usunąć.
RmFHfv3rdOShX
Budujemy skrypty dla duszka - dziewczynki
Możesz teraz przesuwać duszka o określoną liczbę kroków, na przykład po naciśnięciu klawisza spacji. Jeśli nie zastosujesz polecenia jeżeli na brzegu, odbij się, duszek wyjdzie poza scenę. Dodatkowo, możesz wyświetlać informacje w dymku komiksowym.
Spróbuj teraz zautomatyzować zachowanie dziewczynki. Niech po kliknięciu w zieloną flagę wyświetli informację, że zaraz rozpocznie spacer i zacznie samodzielnie chodzić aż do momentu, w którym naciśniesz przycisk stop na pasku narzędziowym. Po dojściu do krawędzi sceny dziewczynka powinna się obrócić i pójść w przeciwną stronę.
2
Ćwiczenie 4
Przygotuj skrypt dla dziewczynki realizujący samodzielny spacer nad jeziorem.
Poniżej znajdziesz przykładową listę kroków, która pozwoli na wykonanie zadania.
Kiedy kliknięto zieloną flagę:
Wyświetla się przez sekundy w dymku komiksowym informacja, że rozpocznie spacer.
Duszek cyklicznie (zawsze) wykonuje następujące czynności: 2.1. przesuwa się o 3 kroki, 2.2. jeśli dojdzie do brzegu sceny, obraca się w przeciwną stronę.
Wybierz kategorię Zdarzenia i przeciągnij blok kiedy kliknięto zieloną flagęma7b4c8881bf1197c_d532e201kiedy kliknięto zieloną flagę do obszaru skryptów.
Wybierz kategorię Wygląd i przeciągnij blok powiedz … przez … sma7b4c8881bf1197c_d532e211powiedz … przez … s do obszaru skryptów. Połącz go z blokiem zielonej flagi. Zmień napis „Cześć!” na informujący o rozpoczęciu spaceru.
Wybierz kategorię Kontrola i przeciągnij blok zawszema7b4c8881bf1197c_d532e220zawsze do obszaru skryptów. Połącz go z poprzednim blokiem. Zwróć uwagę na wygląd tego bloku. Ponieważ będzie on powtarzał bez końca (zawsze) bloki, które znajdą się w jego wnętrzu, nie da się do niego podłączyć od dołu żadnego bloku.
Wybierz kategorię Ruch i przeciągnij blok przesuń o … krokówma7b4c8881bf1197c_d532e229przesuń o … kroków do obszaru skryptów. Osadź go wewnątrz bloku zawsze. Zmień liczbę kroków na .
Z kategorii Ruch przeciągnij blok jeżeli na brzegu, odbij sięma7b4c8881bf1197c_d532e238jeżeli na brzegu, odbij się do obszaru skryptów i osadź go wewnątrz bloku zawsze.
Przykładowy skrypt:
RySZrK2VOwG1a
2
Ćwiczenie 5
Zapewne podczas testowania skryptu, wykonanego w poprzednim zadaniu, zwrócił twoją uwagę fakt, że dziewczynka 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 blok, który spowoduje, że duszek będzie obracał się tylko w prawą lub w lewą stronę. Zastanów się, gdzie i dlaczego ten blok powinien zostać wstawiony do skryptu, który już istnieje.
Znajdź w kategorii Ruch blok ustaw styl obrotuma7b4c8881bf1197c_d532e253ustaw styl obrotu i dodaj go do skryptu przed blokiem zawszema7b4c8881bf1197c_d532e220zawsze. Z listy rozwijalnej wybierz lewo - prawo. Dziewczynka powinna patrzeć tylko w dwie strony, w lewo i w prawo.
Poniżej znajduje się przykładowy skrypt:
R1LW6Bche0SIB
Duszek - dziewczynka porusza się już samodzielnie na scenie; możesz dodać jeszcze do projektu animację. Spacerując, dziewczynka powinna 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ąca dziewczynka w tym projekcie ma cztery kostiumy, które możesz cyklicznie zmieniać (następnym kostiumem po ostatnim jest ponownie pierwszy).
R15bSM37m1M4e
Animację ruszania nogami dodamy poprzez rozbudowę skryptu, który wprawił naszego duszka w ruch.
2
Ćwiczenie 6
Przygotuj skrypt animujący duszka w taki sposób, że zmieniając swoje położenie (tak jak w poprzednim skrypcie), będzie sprawiał wrażenie poruszania nogami. Uwzględnij blok czekaj przy zmianie kostiumu oraz zmień liczbę kroków na , aby animacja przebiegała płynniej. W tym celu utwórz nowy projekt w Scratch i nazwij go „Spacer nad jeziorem”.
Poniżej znajduje się rozpisana w punktach przykładowa lista kroków.
Kiedy kliknięto zieloną flagę:
Wyświetla się przez sekundy w dymku komiksowym informacja, że rozpocznie spacer.
Ustaw styl obrotu na lewo‑prawo.
Cyklicznie (zawsze) wykonuje następujące czynności: 3.1. czeka sekund, 3.2. zmienia kostium na następny, 3.3. przesuwa się o kroków, 3.4. jeżeli na brzegu, odbij się.
Wybierz kategorię Zdarzenia i przeciągnij blok kiedy kliknięto zieloną flagęma7b4c8881bf1197c_d532e201kiedy kliknięto zieloną flagę do obszaru skryptów.
Wybierz kategorię Wygląd i przeciągnij blok powiedz … przez … sma7b4c8881bf1197c_d532e211powiedz … przez … s do obszaru skryptów. Połącz go z blokiem zielonej flagi. Zmień napis „Cześć!” na informujący o rozpoczęciu spaceru.
Znajdź w kategorii Ruch blok ustaw styl obrotuma7b4c8881bf1197c_d532e253ustaw styl obrotu i dodaj go do skryptu. Z listy rozwijalnej wybierz lewo - prawo. Dziewczynka powinna patrzeć tylko w dwie strony, w lewo i w prawo.
Z kategorii Kontrola przeciągnij blok zawszema7b4c8881bf1197c_d532e220zawsze do obszaru skryptów. Połącz go z poprzednim blokiem.
Wybierz kategorię Kontrola i przeciągnij blok czekaj ... sekundma7b4c8881bf1197c_d532e418czekaj ... sekund do obszaru skryptów. Osadź go wewnątrz bloku zawsze.
Wybierz kategorię Wygląd i przeciągnij blok następny kostiumma7b4c8881bf1197c_d532e307następny kostium do obszaru skryptów. Osadź go wewnątrz bloku zawsze.
Wybierz kategorię Ruch i przeciągnij blok przesuń o … krokówma7b4c8881bf1197c_d532e229przesuń o … kroków do obszaru skryptów. Osadź go wewnątrz bloku zawsze. Zmień liczbę kroków na .
Z kategorii Ruch przeciągnij blok jeżeli na brzegu, odbij sięma7b4c8881bf1197c_d532e238jeżeli na brzegu, odbij się do obszaru skryptów i osadź go wewnątrz bloku zawsze.
Przykładowy skrypt:
RQVfbTRWhR8Vl
Ważne!
Pamiętaj o zapisaniu programu.
ma7b4c8881bf1197c_d532e201
R11WOVSJkM6hm
Skrypty rozpoczynające się od tego bloczka są uruchamiane po kliknięciu na ekranie ikony zielonej flagi – uruchomienie programu.
Przykład:
R17NGhAwVlla7
ma7b4c8881bf1197c_d532e211
RKaIdvaf7ZKV8
Wyświetla w dymku tekst podany w polu edycyjnym przez określony czas. Oznacza to wstrzymanie działania skryptu przez ten czas.
Przykład:
R15s8vanN263P
ma7b4c8881bf1197c_d532e220
R1QBEnHG4NvYM
Bloczek powoduje powtarzanie zestawu instrukcji w nieskończoność. Zatrzymanie nastąpi po naciśnięciu przycisku stop, wykonaniu bloku 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 bloku zatrzymaj ten skrypt.
Przykład:
Rsalg2PUUS2hI
ma7b4c8881bf1197c_d532e229
RnVJnH996W74r
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:
R1vWTFZKo1COK
ma7b4c8881bf1197c_d532e238
RcWzg7mkLyXCW
Zmienia kierunek na przeciwny, jeśli duszek dotyka krawędzi sceny.
Przykład:
R1NLqoGit9HRd
ma7b4c8881bf1197c_d532e253
RSNJcEgPKOFcG
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.
Przykład:
RKyAZZ4RtzWb8
ma7b4c8881bf1197c_d532e418
R16ZWajRW5qkF
Zatrzymuje działanie skryptu przez określony czas. Można go wykorzystać do spowolnienia ruchów duszka.
Przykład:
RdIMeZZmmJOk9
ma7b4c8881bf1197c_d532e307
RdMVPif3oZQtd
Powoduje zmianę kostiumu duszka na następny. Kolejnym kostiumem po ostatnim jest ponownie pierwszy. Blok ten jest często wykorzystywany do animacji postaci duszka.
Przykład:
Rpqq4pgdu2qOh
Zadania uzupełniające
Ciekawostka
Ponieważ komputer może wykonywać jednocześnie wiele poleceń, możliwe jest przygotowanie dla niego kilku zadań w postaci oddzielnych skryptów. Dla przykładu, mając 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.
1
Ćwiczenie 7
Dopisz drugi skrypt do projektu ScratchSpacer nad jeziorem. Po kliknięciu w duszka wyświetli się w dymku informacja, że za chwilę (np. po dwóch sekundach) duszek zakończy spacer i zatrzyma się.
Wykorzystaj blok zatrzymaj …ma7b4c8881bf1197c_d532e338zatrzymaj … z kategorii Kontrola i wybierz z listy rozwijalnej wszystko lub inne skrypty duszka.
Przykładowy skrypt:
RMvsARqqAvzPf
2
Ćwiczenie 8
Stwórz nowy projekt w Scratch o nazwie „Spacer kotka nad jeziorem”. Twoim zadaniem będzie zaprogramowanie duszka, aby poruszał się po scenie w animowany sposób. Aby rozpocząć spacer, wystarczy kliknąć na duszka. Po kliknięciu, duszek będzie zmieniać swoje kostiumy w sposób animowany, a na ekranie wyświetli się komunikat „Zaraz rozpocznę spacer nad jeziorem.”. Ten komunikat pozostanie widoczny przez 2 sekundy. Jeśli ponownie klikniesz na duszka, skrypt zostanie zatrzymany po 2 sekundach, a na ekranie pojawi się komunikat „Zaraz zakończę spacer”.
Twoje cele
Wybierz tło Boardwalkma7b4c8881bf1197c_d532e200Boardwalk z galerii obrazów jako tło dla swojej sceny. W ten sposób stworzysz atmosferę spaceru nad jeziorem.
Ważne!
Należy zaprogramować duszka tak, aby odbijał się od krawędzi sceny, gdy do niej dotrze. Dzięki temu duszek będzie unikał wychodzenia poza obszar sceny.
RpqGDXWjIMoyp
Domyślny duszek posiada dwa kostiumy, możesz to sprawdzić, wchodząc w zakładkę Kostiumy.
RLnmPd1B2s7wn
Skrypt do tego ćwiczenia ma odpowiadać za poruszanie duszkiem. Może być oparty na wcześniejszych skryptach, w których duszek poruszał się lewo i prawo oraz odbijał od krawędzi. Możesz jednak rozbudować go o dodatkowe funkcje, na przykład poruszanie się w górę i w dół po naciśnięciu określonego klawisza na klawiaturze lub zmianę kierunku przed dotarciem do krawędzi.
R7Vfa3dqA4obk
2
Ćwiczenie 9
Stwórz nowy projekt pt. „Pływająca rybka w akwarium”, w którym rybka będzie poruszać się we wszystkich kierunkach na tle podwodnej scenerii. Ustaw tło sceny na jedno z dostępnych opcji Underwaterma7b4c8881bf1197c_d532e311Underwater oraz użyj duszka Fishma7b4c8881bf1197c_d532e312Fish z wybranym przez ciebie kostiumem. W przykładzie został użyty domyślny kostium dla rybki. Po uruchomieniu skryptu, rybka będzie poruszać się o kroki i odbijać od brzegu. Kliknięcie na rybkę spowoduje zmianę jej kierunku na przeciwny. Wciśnięcie klawisza o na klawiaturze spowoduje obrót rybki w prawo w zakresie od do stopni. Skrypt zakończy się po naciśnięciu klawisza s.
RNYIiJiQ5smpe
Wykorzystaj Blok kiedy klawisz … naciśniętyma7b4c8881bf1197c_d532e298kiedy klawisz … naciśnięty z kategorii Zdarzenia i wybierz z listy rozwijalnej odpowiedni przycisk, który rozpocznie nowy skrypt duszka.
Poniżej znajdziesz przykładowe skrypty dla rybki.
RuwVxWrkzu6EV
2
Ćwiczenie 10
Przygotuj nowy projekt w Scratch w celu stworzenia własnej animacji. Samodzielnie przygotuj duszka oraz tło. Aby stworzyć duszka, wybierz opcję Maluj podczas wyboru nowego duszka, a następnie użyj edytora, aby zaprojektować swoją postać. Postępuj podobnie, wybierając opcję Maluj przy tworzeniu nowej sceny, aby zaprojektować swoje własne tło. Zasada działania programu może być podobna do poprzedniego ćwiczenia, gdzie duszek zmienia kierunek po dotknięciu krawędzi okna.
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 kopiować dany kostium i go poprawiać. W tym celu kliknij w kostium prawym przyciskiem myszy i z menu kontekstowego wybierz opcję duplikuj.
RCMLUhsLSl6Tx
Wygląd duszka możesz zaprojektować w edytorze graficznym Scratcha. Wystarczy kliknąć w ikonę Maluj w obszarze zarządzania duszkami.
R1z10XoZrR3ny
Tło sceny możesz przygotować także w edytorze graficznym programu Scratch za pomocą ikony Maluj dostępnej w obszarze zarządzania sceną. Tłem może być np. twoje własne zdjęcie z wakacji, które wgrasz do programu.
RPoA85lbNClMs
Ważne!
Scena ma stałe wymiary: szerokość punktów i wysokość 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 na pikseli.
ma7b4c8881bf1197c_d532e298
R17qhaF48byz2
Bloczek powoduje rozpoczęcie skryptu po wciśnięciu określonego przycisku.
Przykład:
R3aXRhqFdVCMF
ma7b4c8881bf1197c_d532e338
R1XG8Ux0kFXEG
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 bloki. 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.