Zmiany
/* Modyfikujemy kostium i animujemy duszka */
* Poznanie środowiska Scratch.
====Cele szczegółowe:====
* uczeń potrafi przesuwać oraz obracać duszka na scenie,
* uczeń potrafi konstruować proste skrypty reagujące na naciśnięcie klawisza,
* uczeń rozumie i umie stosować instrukcję pętli do powtarzających się czynności,
* uczeń potrafi przełożyć prosty algorytm (przepis) na program w języku Scratch.
==Etapy realizacji==
=== Wprowadzenie teoretyczne, czyli co będziemy robili na zajęciach ===
'''Czas na realizację tej części: ok. 10 minut'''
'''Zadajemy pytanie: '''O co chodzi w przykładowej grze? Na czym polega sukces, czyli co trzeba zrobić, aby wygrać.
''Wybieramy grę, którą sami znamy, gdzie postać zdobywa punkty lub ma osiągnąć jakiś cel (wykonała zadanie), albo odnosi porażkę (coś poszło nie tak, jak powinno). Niech uczniowie o tym opowiedzą swoimi słowami. '' '''Np.:''' ''jeśli w grze Angry Birds ptaszek uderzy w klatkę, powoduje jej otwarcie i uwolnienie zamkniętych ptaków. Jeśli uderzy w ziemię ― traci życie nie uwolniwszy swoich kolegów.''
'''Zadajemy pytanie: '''Skąd komputer wie, co ma się stać, jeśli nasz bohater zrobi taki czy inny ruch?
''Słuchamy odpowiedzi uczniów, następnie podsumowujemy, że komputer zna przepis. Taki przepis musi być bardzo dokładny, bo komputer nie domyśli się, co ma zrobić.''
'''Na zachętę mówimy uczniom, że będziemy na zajęciach tworzyć gry i inne programy. Zrobimy to krok po kroku. Ale najpierw musimy się przygotować.''' =Część 2= ==Poznajemy środowisko pracy i podstawowe polecenia (klocki) Scratch’a===
'''Czas na realizację tej części: ok. 35 minut'''
'''Zadanie:''' Uczniowie uruchamiają środowisko Scratch. Omawiamy elementy widoczne na ekranie.
[[Plik:Modul_1_p_1.jpg|800px|center]]
'''Wyjaśniamy''', że po lewej stronie ekranu mają scenę, na której znajduje się bohater – kotek (w Scratch’u nazywany duszkiem) wykonujący polecenia. W środkowej części ekranu do dyspozycji są klocki, z których możemy budować program, czyli sterować duszkiem. Na górze możemy przełączać się między różnymi rodzajami klocków. Po prawej stronie znajduje się obszar skryptów, gdzie umieszcza się budowane polecenia.
'''Zadanie:''' Prosimy, by uczniowie kliknęli na każdy z rodzajów klocków i zobaczyli dostępne klocki.
''Dajemy im na to trzy – cztery minuty.''
''Uczniowie powinni zauważyć klocek'' '''przesuń o 10 kroków'''.
[[Plik:Ruch1 1.JPG]]
'''Prosimy uczniów''', by przesunęli ten klocek do prawej części.
''Uczniowie powinni odnaleźć klocek zatytułowany'' '''kiedy kliknięto zieloną flagę'''.
[[Plik:Kolcek4M_1p31.pngjpg]]
Prosimy, by połączyli go z klockiem przesuwającym duszka.
[[Plik:M_1p32.jpg]]
Następnie prosimy, by odnaleźli klocek kończący program, którego nie da się połączyć od dołu z żadnym innym klockiem. Podpowiadamy, że czasem nie widać wszystkich klocków i trzeba skorzystać z możliwości przewijania listy, na której się znajdują.
[[Plik:Modul_5_14M_1p3.JPGjpg]] {| class="wikitable" style="font-style: italic; margin: auto;"|- style="vertical-align:top;"|[[Plik:Tip_ikonka.png]]|'''Wskazówka'''''<br/>Klocek '''zatrzymaj wszystko''' zatrzymuje wszystkie skrypty stworzone przez programistę. Klocek '''zatrzymaj ten skrypt''' zatrzymuje działanie skryptu, w którym został użyty, zaś zatrzymaj inne skrypty duszka zatrzymuje pozostałe skrypty z wyjątkiem tego, w którym został użyty. Przyda się to w dalszej części zajęć.''|}
'''Zadanie''': Prosimy, by uczniowie dodali klocek '''zatrzymaj ten skrypt''', a następnie by uruchomili program (wybrali symbol zielonej flagi w prawym górnym rogu). Niech klikną go parokrotnie.
''Duszek porusza się na ekranie.''
Teraz prosimy, by uczniowie odnaleźli klocek pozwalający sterować duszkiem za pomocą klawiatury ('''kiedy klawisz <spacja> naciśnięty''').
[[Plik:M_1p5.jpg]]
'''Zadajemy pytanie:''' Czy możemy go użyć i co trzeba w tym celu zrobić?
'''Zadanie:''' Prosimy, by uczniowie zamienili klocki.
''Osadzamy klocek '''kiedy klawisz <spacja> naciśnięty''' i chwytamy myszką za klocek '''przesuń o 20 kroków''' odczepiając go od klocka '''kiedy kliknięto zieloną flagę''' i podczepiając pod nowo osadzony klocek. Klocek '''kiedy kliknięto zieloną flagę''' usuwamy (przesuwamy go z powrotem do obszaru klocków lub „wycinamy” narzędziem nożyczki).
[[Plik:M_1p6.jpg]]
'''Następnie pytamy:''' Czy można zmienić w klocku '''kiedy klawisz <spacja> naciśnięty''' klawisz spacji na inny – np. strzałkę w prawo?
'''Zadanie:''' Prosimy, by uczniowie wybrali klawisz '''strzałka w prawo''', a następnie uruchomili program i przetestowali jego działanie.
[[Plik:M_1p7.jpg]]
'''Zadajemy pytanie:''' Jak działa program. Czy po uruchomieniu (kliknięciu w zieloną flagę) duszek się porusza? A jak wciśniemy klawisz strzałki w prawo?
''Uczniowie powinni odnaleźć'':
[[Plik:M_1p8.jpg]] [[Plik:M_1p9.jpg]]
'''Zadanie:''' Prosimy by uczniowie dodali nowy skrypt, powodujący '''przyłożenie pisaka''', gdy naciśnięty zostanie ''klawisz spacji''' oraz kolejny, powodujący jego '''podniesienie''', gdy wciśnięty zostanie '''klawisz P'''.
'''Czas wykonania''': ''Dajemy na to dwie – trzy minuty''.
[[Plik:M_1p10.jpg]]
'''Następnie pytamy''', kto już rozwiązał zadanie. Jednego z uczniów prosimy do tablicy multimedialnej, by pokazał kolegom, jak to zrobić. Wspólnie omawiamy, czy zadanie zostało dobrze rozwiązane.
'''Następnie prosimy''' uczniów by sprawdzili, jaki klocek może powodować obrócenie się duszka.
''Uczniowie powinni znaleźć klocki '''obróć o 15 stopni'''. Zwracamy uwagę, że jeden obraca duszka zgodnie z ruchem wskazówek zegara, drugi w przeciwną stronę. Mogą zauważyć także inne klocki związane z kierunkiem ruchu np. '''ustaw kierunek na 90 stopni''' lub '''ustaw w stronę'''. Tłumaczymy jednak w razie potrzeby, że te klocki także można wykorzystać, lecz na razie zależy nam na obróceniu bohatera. Różnica polega na tym, że w przypadku klocka '''obróć o 15 stopni''', obrót nastąpi w zależności od aktualnego kierunku. W przypadku pozostałych klocków postać ustawi się niezależnie od niego''. [[Plik:M_1p11.jpg]] [[Plik:M_1p12.jpg]] [[Plik:M_1p13.jpg]] [[Plik:M_1p14.jpg]]
'''Zadanie:''' Prosimy, aby uczniowie dodali skrypt wykorzystujący klocek '''obróć o 15 stopni''' w taki sposób, by duszek obracał się po naciśnięciu '''klawisza strzałki w dół'''. Po wykonaniu zadania uczniowie powinni je przetestować, czyli poruszać postacią, przyłożyć pisak, coś narysować, podnieść pisak.
Po znalezieniu klocka wyczyść, prosimy uczniów, by w niego kliknęli. Wyjaśniamy, że możemy przetestować działanie wybranego klocka w ten sposób – zobaczyć, co jego użycie powoduje, bez konieczności wstawiania go do skryptu.
Wykorzystując znaleziony klocek mają stworzyć kolejny skrypt czyszczący scenę po naciśnięciu '''klawisza C'''. Prosimy o przetestowanie i wyczyszczenie sceny. [[Plik:M_1p17.jpg]]
Następnie prosimy, by wszyscy uczniowie ustawili swojego bohatera zwróconego w prawą stronę i ustawionego w lewym górnym rogu sceny.
''Uczniowie mogą to zrobić na wiele sposobów – wybierać strzałkę w dół, aż duszek ustawi się w pożądany sposób, a następnie przeciągnąć go myszką w określone miejsce. Mogą również zauważyć i wykorzystać klocek '''ustaw kierunek na 90'''. Przypominamy, że nie trzeba go wstawiać do skryptu. Wystarczy w niego kliknąć. Demonstrujemy w razie potrzeby, jak to zrobić. Pokazujemy również, jak zmniejszyć duszka (żeby lepiej był widoczny rysunek przez niego tworzony'').
{| class="wikitable" style="font-style: italic; margin: auto;"|- style="vertical-align:top;"|[[Plik:Modul_5_14Tip_ikonka.JPGpng]] |'''Wskazówka'''''<br/>Do powiększania i zmniejszania duszka służą ikonki [[Plik:M_1p18.jpg]] które należy wybrać, a następnie klikać w duszka, aż uzyskamy żądaną wielkość''. |}
Prosimy uczniów, żeby ustawili liczbę kroków, o jaką postać się poruszy po wciśnięciu '''klawisza strzałki w prawo''', na 100. Następnie prosimy, żeby spróbowali tak posterować duszkiem, żeby narysował kwadrat. Zadajemy pomocnicze pytanie, ile razy (o jaki kąt) trzeba obrócić duszka po narysowaniu jednego boku.
''Dochodzimy do wniosku, że teraz duszek do pełnego obrotu potrzebuje czterech zmian. Dzięki temu możemy ustalić, że nasza postać będzie poruszała się tylko w prawo, w dół, w lewo i do góry, pod warunkiem, że ruch początkowy był w którymś z tych kierunków (dlatego prosiliśmy o takie właśnie ustawienie początkowe duszka'').
'''Zadanie''': Prosimy, aby uczniowie zapisali swój program nadając mu nazwę '''''Pierwszy Program'''''. Następnie prosimy by z menu '''Plik''' wybrali opcję '''Nowy''', by stworzyć nowy program. =Część 3===Modyfikujemy kostium i animujemy duszka===
'''Czas na realizację tej części: ok. 20 minut'''
'''Zadanie''': Prosimy, aby uczniowie wypróbowali rysowanie nowego kostiumu oraz importowanie gotowego kostiumu z galerii kostiumów Scratch’a, a niepotrzebne kostiumy usunęli.
'''Zadanie''': Następnie prosimy, aby uczniowie zaimportowali kostium samochodu i dorysowali do niego policyjnego koguta świetlnego w kolorze niebieskim. Następnie skopiowali tak zmodyfikowaną postać duszka i na drugim kostiumie, zmienili kolor koguta na czerwony.
{| class="wikitable" style="font-style: italic; margin: auto;"
|- style="vertical-align:top;"
|[[Plik:Tip_ikonka.png]]
|'''Wskazówka'''<br/>Ponieważ część kostiumów została opracowana jako grafika wektorowa, a część jako grafika rastrowa, warto w tym miejscu wyjaśnić uczniom podstawowe różnice między nimi, jak również w modyfikowaniu ich. Edytor kostiumów umożliwia również przełączenie trybu pracy z kostiumem między grafiką wektorową i rastrową automatycznie dokonując konwersji.
|}
[[Plik:M_1p21.jpg]] [[Plik:M_1p22.jpg]]
'''Zadanie''': Chcemy, żeby kogut na samochodzie migał po uruchomieniu programu. Prosimy, aby uczniowie odnaleźli klocek, który umożliwiłby przełączanie się między kostiumami.
''Uczniowie powinni odnaleźć kilka klocków. Podpowiadamy, żeby na każdym z nich kliknęli kilka razy i sprawdzili co się dzieje z duszkiem na scenie.''
''Uczniowie powinni zauważyć, że klikanie na klocku '''następny kostium''' powoduje przełączanie się między kolorem czerwonym i niebieskim koguta. Możemy wyjaśnić, że właśnie w ten sposób możemy wprowadzić animację – zmieniając kostiumy naszego duszka.''
{| class="wikitable" style="font-style: italic; margin: auto;"|- style="vertical-align:top;"|[[Plik:Modul_5_14Tip_ikonka.JPGpng]] |'''Wskazówka'''''<br/>Uczniowie mogą zapytać o klocek:'' ''[[Plik:M_1p30.jpg]]. Powinniśmy wyjaśnić, że umożliwia on sprawdzenie, który kostium aktualnie ma duszek. Będzie to przydatne przy niektórych projektach''. |}
Prosimy uczniów, by przeciągnęli klocek '''następny kostium''' do obszaru skryptu i uruchomili program zieloną chorągiewką.
''Uczniowie mogą mieć różne propozycje. Powinniśmy przedyskutować zgłaszane pomysły, by w końcu wybrać klocek '''zawsze'''.''
[[Plik:Klocek10M_1p24.pngjpg]]
''Pytamy, jak należy go zamieścić w skrypcie. Podpowiadamy w razie potrzeby, że to co ma się dziać zawsze, musi znaleźć się w środku klocka.''
'''Zadanie''': Prosimy, by uczniowie zmodyfikowali program i go uruchomili.
''W razie potrzeby możemy naprowadzić uczniów, że pomiędzy kolejnymi zmianami kostiumu duszek powinien zaczekać, a więc powinniśmy dodać w odpowiednim miejscu klocek '''czekaj'''.''
[[Plik:Klocek3M_1p26.pngjpg]]
''Uczniowie dojdą do wniosku, że zmiany widać, ale są zbyt wolne. Możemy podpowiedzieć, jak zmodyfikować czas czekania poprzez ustawienie np. pół sekundy zamiast całej. Część uczniów może nie zauważyć zmiany z powodu wstawienia klocka czekaj poza pętlą '''zawsze'''. Wówczas należy przedyskutować ze wszystkimi dlaczego właśnie tam powinniśmy wstawić klocek czekania – żeby zawsze po zmianie kostiumu duszek zaczekał określony czas.''
[[Plik:Skrypt animacjiM_1p27.pngjpg]]
'''Zadanie''': Prosimy, aby uczniowie zapisali swój program nadając mu nazwę '''Drugi Program'''.
=Część 4===Rysujemy kwadrat===
'''Czas na realizację tej części: ok. 25 minut'''
'''Porada ''' ''Przy wykonaniu ćwiczenia pomocne może okazać się wykonanie zabawy polegającej na tym, że uczniowie będą sterowali trenerem udającym robota za pomocą poleceń z klocków Scratcha. Ich zadaniem jest poprowadzić robota po kwadracie. Gdy uczniowie podają polecenia inne, niż dopuszczone w Scratch, trener-robot mówi: Nie rozumiem. Jeśli polecenia są zrozumiałe, to je wykonuje, a uczniowie obserwują, czy udało się wykonać zadanie. ''
''Uczniowie powinni odnaleźć '''klocek powtórz <10> razy'''''
[[Plik:Klocek8M_1p28.pngjpg]]
'''Zadanie:''' Prosimy, aby spróbowali stworzyć skrypt, który po wciśnięciu '''klawisza K''' narysuje kwadrat, czyli (możemy z nimi rozpisać kolejne kroki na tablicy):
* ''*― przyłoży pisak ''*― ''cztery razy powtórzy dwie operacje ''*― ''przesunąć się o 100 kroków ''*― ''obrócić postać o 90 stopni ''*― ''podniesie pisak (ewentualnie ― dyskutujemy z uczniami w razie potrzeby i ustalamy, jaki stan chcemy osiągnąć) ''*― ''zakończy działanie''
Dajemy kilka minut na zbudowanie skryptu. W trakcie chodzimy i w razie potrzeby podpowiadamy, jak rozwiązać problem. Prosimy, by po skończeniu zapisali program pod nazwą '''Kwadrat''' korzystając z menu '''Plik -> Zapisz jako…'''.
[[Plik:M_1p29.jpg]] ===Zadania dodatkowe===
'''Zadanie dodatkowe do samodzielnego wykonania''': Proponujemy, żeby uczniowie zmienili kolor pisaka oraz jego grubość i ponownie przetestowali program. Nie podpowiadamy, jakich klocków i gdzie użyć. Na koniec sprawdzamy rozwiązania i pokazujemy wybrane na tablicy. Prosimy po zakończeniu ćwiczenia, by uczniowie zapisali program pod nazwą '''''Kwadrat2''' wybierając z menu '''Plik -> Zapisz jako'''''…
<span style="color: red">'' Do pokazywania przydałaby się możliwość przechwytywania ekranów uczniów i pokazywania ich na tablicy/ekranie/monitorze wielkoformatowym.''</span>
'''Zadanie dodatkowe do samodzielnego wykonania:''' Proponujemy, by uczniowie wrócili do programu zapisanego pod nazwa '''''Pierwszy program''''', a następnie zmodyfikowali go. Zamiast obracać kotka za pomocą klawisza '''''strzałka w dół''''', definiujemy skrypty działające po wciśnięciu klawiszy:
*― '''strzałka w lewo''', duszek ustawi się w lewo i przejdzie 20 kroków
Zmodyfikowany program powinni zapisać pod nazwą '''''Trzeci program'''''. WYKASOWAC [[Plik:M_5_14.JPG|center]] [[Plik:M_5_3.JPG]] [[Plik:M_5_4.JPG|center]] [[Plik:M_5_15.JPG|center]] [[Plik:M_5_5.JPG]] [[Plik:M_5_6.JPG]] [Plik:M_5_8.JPG]] [[Plik:M_5_16.JPG|center]]
