Skrypty z klocków

Wizualny język programowania obiektowego Scratch to zupełnie darmowe środowisko. Zostało opracowane przez naukowców ze słynnego Media Lab, działającego na renomowanej, amerykańskiej uczelni MIT. Pomysłodawcą projektu jest prof. Mitchel Resnick, popularyzator informatyki, który stworzył m.in. programowalną kostkę będącą sercem zestawu klocków Lego Mindstorms, przeznaczonych to budowania robotów.

Program w Scratchu buduje się z wirtualnych klocków. Podobnie jak w przypadku lego informacja o możliwym połączeniu elementów jest zawarta w ich kształtach. Na przykład moduły, które uruchamiają skrypt (zdarzenia związane z kliknięciem myszą bądź naciśnięciem klawisza), dają możliwość podłączenia kolejnego elementu tylko poniżej. Z kolei takie elementy programu, jak pętle czy instrukcje warunkowe, mają kształt klamry, który wskazuje na konieczność umieszczenia instrukcji wewnątrz. W wizualny sposób są także wyróżnione pola, które zwracają wartości. Jeśli mają kształt owalny, należy wpisać do nich liczbę. Jeśli sześciokątny, wartość logiczną (prawda/fałsz). Dzięki takiej formie można łatwo stworzyć działający program i uniknąć wielu błędów, które wkradają się w kod w czasie nauki składni tekstowej.

Nacisk, jaki położyli twórcy Scratcha na łatwość układania programu, nie oznacza, że w tym języku nie ma zaawansowanych funkcji. Można przechwytywać zdarzenia, co pozwala na uzyskanie interakcji, a także definiować zmienne do przechowywania informacji wewnątrz programu. Dane można przechowywać także w postaci list, ale tablice nie są obsługiwane.

Środowisko do tworzenia programów w Scratchu jest bardzo interaktywne. Aby przetestować element kodu, żeby zobaczyć, jak się zachowa obiekt, do którego jest przypisany, wystarczy go kliknąć. W podobny sposób można aktywować fragment albo cały skrypt. Nie trzeba nawet opuszczać okna edytora, co ułatwia i przyspiesza eliminowanie błędów.

Przestrzeń robocza, w której powstaje program, jest zaprojektowana tak, by używać jej jak pulpitu. Można przeciągnąć elementy, bez podłączania ich do programu, tworzyć i testować fragmenty w celu późniejszego połączenia ich w większą całość. Dzięki temu, w przeciwieństwie do tradycyjnych języków programowania, nie jest potrzebna faza planowania i projektowania. Zamiast tego można się bawić i w ten sposób próbować stworzyć coś nowego.

Projektanci Scratcha zadbali o bardzo dużą liczbę funkcji multimedialnych, które łatwo można zintegrować z tworzonymi projektami. Dostępne są elementy związane z odtwarzaniem dźwięków, w tym nagrań muzyki i głosu z plików dźwiękowych, oraz z wyświetlaniem i modyfikacją obrazów. Duszki, jak w nomenklaturze Scratcha są nazywane obiekty w programie, można ubierać w skórki projektowane we wbudowanym edytorze, wyposażonym w dużą bazę clipartów. Oczywiście można także importować obrazki i zdjęcia z własnej kolekcji.

Najprostszym sposobem wykorzystania Scratcha jest rysowanie, które odbywa się przez przesuwanie i zmianę koloru pisaka przypisanego do obiektu. Bez większych problemów można także tworzyć animacje. Dzięki łatwości przemieszczania obiektów na scenie Scratch świetnie się nadaje do tworzenia historyjek obrazkowych, tym bardziej że dostępna jest cała grupa poleceń pozwalających na definiowanie dymków z wypowiedziami i myślami bohaterów. Z kolei za pomocą narzędzi do odtwarzania dźwięku można dać im prawdziwy głos. Wspinając się na wyższy poziom wykorzystania Scratcha, historyjkom można nadać elementy interaktywne.

Dzięki funkcjom importowania obrazków, dźwięku oraz wideo do projektu w Scratchu można tworzyć multimedialne, interaktywne prezentacje. Jako że Scratch ma pokaźny zestaw zaawansowanych narzędzi programistycznych, przeznaczonych do kontrolowania obiektów, można za jego pomocą także tworzyć proste gry. Fani tego środowiska przenieśli do niego wiele nieśmiertelnych hitów z ery komputerów 8-bitowych, np. Space Invaders, River Raid czy PacMan. Nie brakuje także klonów Tetrisa.

Projektowanie gier jest wyższą szkołą programowania, ale Scratch ułatwia opanowanie tych umiejętności. Każdy projekt po publikacji przez autora jest dostępny na stronie Scratcha, skąd użytkownicy mogą go uruchomić w dowolnej przeglądarce internetowej (środowisko uruchomieniowe bazuje na JavaScript). Każdy może go nie tylko przetestować, ale także przestudiować dzięki funkcji wglądu do kodu źródłowego. Kod projektów w Scratchu jest udostępniany na licencji creative commons, co znaczy, że można go nie tylko przeglądać, ale także modyfikować.

W warsztacie pokażemy, jak korzystać z programu Scratch za pomocą aplikacji internetowej. Alternatywnie można zainstalować wersję off-line, która jest przeznaczona do uruchamiania w środowisku Adobe Air (ma mniej funkcji). Zasady tworzenia programu pokażemy na przykładzie skryptu sterującego kotem, domyślnym obiektem Scratcha.

Po utworzeniu konta i zalogowaniu w serwisie Scratch kliknij ikonę swojego profilu użytkownika w prawym górnym rogu, a z menu wybierz Moje rzeczy. W panelu konta użytkownika wyświetlane są wszystkie aktywne projekty. Tutaj możesz przejść do edytora programów. W tym celu kliknij Nowy projekt.

Na palecie Ruch w zakładce Skrypty domyślnie widoczne są polecenia związane z ruchem. Ponieważ są one najłatwiejsze do zastosowania, dobrym pomysłem jest rozpoczęcie przygody ze Scratchem od tego właśnie zestawu poleceń. Zanim zaczniesz dodawać polecenia, upewnij się, że jest zaznaczony duszek Sprite1.

Aby dodać polecenie dla wybranego duszka, przeciągnij element na pulpit z prawej strony. Na początku możesz dodać polecenie przesuń o 10 kroków. Aby przetestować działanie klocka, kliknij go dwa razy. Jeśli kot odejdzie zbyt daleko, w każdej chwili możesz złapać duszka i przesunąć go w dowolne miejsce. Jeśli chcesz, by kot przemieszczał się na zauważalne odległości, zmień wartość widoczną na klocku, np. na 100.

Podczas poruszania się duszek może zmienić kierunek. Podłącz polecenie obróć i wpisz kąt, o jaki kot ma zmienić kierunek. Jeśli ustawisz kierunek na 90 stopni, duszek za każdym razem, gdy uruchomisz skrypt, będzie skręcał po kątem prostym, a po czterech odcinkach pojawi się w tym samym miejscu.

Po jakiej ścieżce porusza się duszek? Można to sprawdzić za pomocą funkcji rysowania dostępnych po kliknięciu palety Pisak. Jeśli na początku skryptu umieścisz polecenie przyłóż pisak, kot poruszając się, będzie kreślił za sobą linię. Aby usunąć rysunek, użyj polecenia wyczyść.

Eksperymentując z rysowaniem, dobrze jest też mieć na pulpicie polecenia z palety Ruch, które resetują ustawienie kierunku oraz położenie duszka. Na końcu dodaj wyczyść. Trzy elementy połącz w miniskrypt, który będzie czyścił tablicę. Wróć teraz do poleceń związanych z rysowaniem oraz przemieszczaniem. Kliknij je 4 razy. Jak zobaczysz, kot narysuje swoją ścieżkę, czyli kwadrat.

Co zrobić, by rysunek powstał automatycznie, bez konieczności wielokrotnego klikania? Trzeba wykorzystać element kontrolujący wykonywanie poleceń, czyli pętlę. Kliknij paletę Kontrola, złap element powtórz 10 razy i przeciągnij go na pulpit. Następnie zmień liczbę powtórzeń na 4, odepnij dwa niebieskie polecenia ruchu – przesuń o, obróć o – i umieść je wewnątrz klamry, a następnie podepnij całość z powrotem do polecenia przyłóż pisak. Na końcu dodaj podnieś pisak.

Uruchomienie skryptu dwukrotnym kliknięciem spowoduje narysowanie figury. Aby wymazać rysunek, patrz krok 6. Teraz jest moment na dodanie zdarzeń, które pozwolą na uruchamianie obydwu czynności (rysowania i czyszczenia) za pomocą naciśnięcia klawisza. W tym celu przejdź do palety Zdarzenia, gdzie znajdują się elementy aktywujące uruchomienie programu.

Jeżeli chcesz, aby rysowanie się zaczęło po naciśnięciu klawisza, złap element kiedy klawisz spacja naciśnięty, przeciągnij na pulpit, a następnie podłącz go na początku serii poleceń rysujących kwadrat (1). Taki sam element przypnij do skryptu kasującego rysunek, tyle że z listy na elemencie wybierz literę C (2). Teraz twój program ma interfejs użytkownika. Naciśnięcie [Spacji] powoduje narysowanie kwadratu. Litera [C] czyści tablicę.

Teraz rozbudujemy nasz programik o kilka dodatkowych akcji, aby zaprezentować możliwości innych grup poleceń Scratcha.

Jeśli chcesz, by kot potwierdzał wykonanie polecenia, kliknij paletę Wygląd, gdzie są zgrupowane elementy służące do sterowania grafiką. Znajdź element powiedz Hello przez 2s i umieść go na końcu obydwu skryptów. Dodaj opisy odpowiednie do czynności (3). Teraz rysowanie i czyszczenie będzie potwierdzone komunikatem.

Skrypt może w czasie czynności rysowania odgrywać plik dźwiękowy. Przejdź do zakładki Dźwięki, pod którą kryje się edytor i biblioteka sampli. Kliknij ikonę głośniczka w celu wywołania biblioteki. Znajdź dźwięk, który ci odpowiada, np. rattle, i zaznacz go myszą. Wybór potwierdź, klikając OK. Następnie kliknij zakładkę Skrypty, by powrócić do edytora programu.

Kliknij Dźwięk, aby się przełączyć do panelu z elementami programu związanymi z odtwarzaniem sampli. Złap klocek zagraj dźwięk rattle, przeciągnij go do skryptu i umieść przed pętlą. Następnie z listy na elemencie wybierz nazwę sampla, który zaimportowałeś do projektu w poprzednim kroku.

Jeśli chcesz, żeby duszek rysował kolejne kwadraty w różnych miejscach, możesz wykorzystać polecenie lokujące duszka w losowo wybranym miejscu tablicy. Kliknij paletę Ruch, wybierz polecenie leć przez 1s do x 0 y 0 i przeciągnij je na koniec skryptu.

Następnie przełącz się do palety Wyrażenia. Znajdź tam element losuj od 1 do 10 i przeciągnij do pola współrzędnej x klocka leć przez 1s. Po przeciągnięciu zmień wartości generatora liczb losowych na zakres -150 – 150. Tę samą czynność wykonaj dla współrzędnej Y. Teraz będziesz uruchamiał program, naciskając [Spację]. Duszek będzie losował pozycję i rysował kwadrat w nowym miejscu.

W tym warsztacie pokażemy, jak zdefiniować zmienną w celu przechowywania informacji o liczbie narysowanych kwadratów.

Kliknij Dane w zakładce Skrypty i na palecie kliknij przycisk Stwórz zmienną, zaznacz Tylko dla tego duszka i nadaj jej nazwę Liczba rysunków. Kliknij OK.

Gdy pojawią się klocki, które są związane z utworzonym elementem, złap element zmień Liczba rysunków i umieść go poniżej pętli rysującej kwadrat. Natomiast do skryptu czyszczącego tablicę dołącz element ustaw Liczba rysunków co w razie czyszczenia tablicy wyzeruje zmienną. Jak użyć zmiennej? Można ją wykorzystać do utworzenia komunikatu zachęcającego do wyczyszczenia tablicy, gdy będzie zbyt zaśmiecona.

W tym celu musisz utworzyć wyrażenie warunkowe. Kliknij paletę Kontrola i przeciągnij klocek. Następnie przejdź do palety Wyrażenia, złap element symbolizujący Większe niż i przeciągnij go do wolnego pola na klocku jeżeli to . Teraz w prawym polu zielonego elementu wpisz liczbę narysowanych kwadratów, po której ma się pojawiać komunikat, np. 5.

W wolnym polu wyrażenia warunkowego musisz umieścić sensor odczytujący wartość zmiennej. Przejdź teraz do palety Czujniki, złap element pozycja x z Sprite1 i umieść go w wolnym polu wyrażenia warunkowego. Następnie rozwiń listę pozycja x niebieskiego elementu i wybierz z niej nazwę zmiennej Liczba rysunków.

Przełącz się do panelu Wygląd. Wybierz dowolny element wyświetlający komunikat, umieść go w wolnym polu pomarańczowego wyrażenia warunkowego i wpisz własny komunikat. Podłącz złożony klocek na samym końcu skryptu sterującego poruszaniem duszka i rysowaniem. Przy 6. kwadracie duszek powie, że trzeba oczyścić tablicę.