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
Ź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
Ź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
Ź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
Źródło: nn, licencja: CC BY 3.0.
RcZIuXBLwWkJP1
Film: Zmiana tła sceny
ma7b4c8881bf1197c_d5e231

Dodawanie i usuwanie duszków

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
Ź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
Ź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ń.

R1YdTCZNfdRrv1
Usuwanie niepotrzebnego duszka

Poniżej możesz obejrzeć film ilustrujący wszystkie wykonane powyżej czynności.

R1FVL5MiE5RNY1
Film: Dodawanie i usuwanie duszków
ma7b4c8881bf1197c_d5e328

Budujemy skrypty dla duszka - chłopca

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:

  1. wyświetla przez 2 sekundy w dymku komiksowym informację, że rozpocznie spacer,

  2. cyklicznie (zawsze) wykonuje następujące czynności:

  3. przesuwa się o 3 kroki,

  4. jeśli dojdzie do brzegu sceny, obraca się w przeciwną stronę (odbija).

Ć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
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:

  1. czeka 2 sekundy, aż zniknie dymek informujący o rozpoczęciu spaceru,

  2. cyklicznie (zawsze) wykonuje następujące czynności:

    1. zmienia kostium na następny,

    2. chwilę czeka, np. 0.3 sekundy.

Ważne!

Pamiętaj o zapisaniu projektu.

ma7b4c8881bf1197c_d532e201
ma7b4c8881bf1197c_d532e211
ma7b4c8881bf1197c_d532e220
ma7b4c8881bf1197c_d532e229
ma7b4c8881bf1197c_d532e238
ma7b4c8881bf1197c_d532e253
ma7b4c8881bf1197c_d532e298
ma7b4c8881bf1197c_d532e307
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
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
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
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