WASM AppInventor Lab 3. Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI

Transkrypt

1 Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI Kanwa, to komponent służący do rysowania. Można ją dodać w Designerze przeciągając komponent Canvas z sekcji Basic. W celu ustawienia obrazka jako tła można użyć właściwości BackgroundImage. Pozostałe opcje dotyczą m.in. rozmiaru kanwy, koloru rysowania oraz grubości linii. Do operacji na kanwie, które można wykonać przemieszczając palec po ekranie dotykowym można zaliczyć m.in.: rysowanie kropek w miejscach dotkniętych palcem, rysowanie linii zgodnie z przeciągnięciem palca po ekranie, zmiana kolorów rysowania, czyszczenie kanwy, ustawienie obrazka jako tła. Komponenty pomocne w aranżowaniu wyglądu ekranu znajdują się w sekcji Screen Arrangement palety komponentów Designera. Dostępne komponenty, to: 1. HorizontalArrangement rozmieszcza komponenty od lewej do prawej. 2. TableArrangement rozmieszcza komponenty w postaci tabelarycznej 3. VerticalArrangement rozmieszcza komponenty jeden pod drugim. Rys. 1. Przyciski do zmiany koloru wewnątrz komponentu HorizontalArrangement Zmiana koloru rysowania powinna się odbywać jako skutek zdarzenia polegającego na kliknięciu np. przycisku o określonym kolorze. Fragment modelu z App Inventor Blocks Editor zmieniający kolor K. Żyła, J. Kęsik - Instytut Informatyki, WEiI, Politechnika Lubelska 1 / 5

2 rysowania na czerwony został przedstawiony na rysunku 2. Elementy symbolizujące kolory znajdują się w zakładce Built-in w sekcji Colors. Rys. 2. Model zmieniający kolor rysowania na czerwony Z kolei rysunek 3 przedstawia model służący do wyczyszczenia zawartości kanwy. Rys. 3. Model czyszczący kanwę PROCEDURY OBSŁUGI ZDARZEŃ ZWIĄZANYCH Z RYSOWANIEM PO KANWIE Zdarzenia mające związek z rysowaniem palcem po kanwie dzielą się na dwie grupy: 1. Dotknięcie (ang. Touch) palec dotyka ekranu i odrywa się od niego, brak przesunięcia po kanwie. 2. Przeciągnięcie (ang. Drag) palec dotyka ekranu i jest przesuwany po nim bez utraty kontaktu z jego powierzchnią. Ich obsługi dokonuje się w App Inventor Blocks Editor. Do obsługi pierwszego typu zdarzeń służy metoda when Kanwa.Touched do. Argumentami (parametrami) tego zdarzenia są współrzędne dotknięcia oraz tzw. touchedsprite (rys. 4). W odpowiedzi na zdarzenie można wywołać np. funkcję rysującą figurę geometryczną. Obsługa drugiego typu zdarzenia jest o wiele bardziej skomplikowana. Do jej obsługi służy metoda when Kanwa.Dragged do. Argumentami (parametrami) tego zdarzenia są: współrzędne początku rysowanej linii, współrzędne poprzedniej pozycji palca, bieżące współrzędne palca oraz tzw. draggedsprite (rys. 5). Odpowiedzią na zdarzenie (jeśli intencją jest rysowanie linii) jest wywołanie funkcji rysującej linię pomiędzy poprzednią a bieżącą pozycją palca. K. Żyła, J. Kęsik - Instytut Informatyki, WEiI, Politechnika Lubelska 2 / 5

3 Rys. 4. Metoda do obsługi zdarzenia typu Dotknięcie Rys. 5. Metoda do obsługi zdarzenia typu Przeciągnięcie W celu zdefiniowania zmiennej globalnej, należy użyć komponentu def variable as dostępnego zakładce Built-In w sekcji Definition. Następnie można przypisać wartość do zmiennej (rys. 6). Po utworzeniu zmiennej globalnej w My Blocks -> My Definitions pojawiają się dwa komponenty jeden służy do pozyskiwania wartości zmiennej, a drugi do jej ustawiania. Rys. 6. Przykład definicji zmiennej globalnej Kanwa umożliwia również animowanie (przemieszczanie) elementów w jej obszarze. Standardowym elementem animowanym jest kulka (Ball), którą można dodać do kanwy w designerze. Obiekt typu Ball posiada szereg metod i zdarzeń. Poniższy rysunek przedstawia procedurę aktywacji animowania przesunięcia kulki wzdłuż losowo wybranego kierunku. Animacja kulki rozpocznie się po wciśnięciu przycisku StartButton. K. Żyła, J. Kęsik - Instytut Informatyki, WEiI, Politechnika Lubelska 3 / 5

4 Parametr Enabled określa czy animacja kulki jest wykonywana Interval definiuje czas między kolejnymi zmianami położenia kulki (w milisekundach) Speed określa przesunięcie kulki (w pikselach) Heading określa kierunek poruszania się kulki w stopniach (kąt 0 oznacza poruszanie się kulki w poziomie w prawo) MoveTo określa początkowe położenie kulki (środek szerokości ekranu, na dole) Przydatną informacją jest również możliwość wykrycia dotarcia do brzegu kanwy. Służy do tego zdarzenie EdgeReached elementu Ball. Doastarcza ono parametr określający, do którego brzegu dotarła kulka: Góra 1 Dół -1 Prawo 3 Lewo -3 ĆWICZENIE 1. Zaprojektuj i uruchom prostą grę typu PONG. Piłeczka odbija się od ścian i od paletki sterowanej przeciąganiem palcem. Wypadnięcie piłeczki poza paletkę (dotarcie do dolnego brzegu) kończy grę. Modyfikacje: Dodaj obliczanie i wyświetlanie wyniku (1 pkt za każde odbicie piłeczki) Dodaj funkcjonalność podkręcania piłki rogiem paletki Zmień sposób sterowania paletką na przechylanie telefonu (testowanie na fizycznym smartphone) K. Żyła, J. Kęsik - Instytut Informatyki, WEiI, Politechnika Lubelska 4 / 5

5 ĆWICZENIE 2. Zaprojektuj i uruchom aplikację, oferującą funkcjonalność prostego edytora graficznego podobnego do np. MS Paint. Udostępnij do rysowania wszystkie podstawowe kolory oferowane przez App Inventor. Pozwól na rysowanie podstawowych figur geometrycznych oraz kropek o średnicy wybieranej przez użytkownika. Dodaj możliwość zmiany tła kanwy. K. Żyła, J. Kęsik - Instytut Informatyki, WEiI, Politechnika Lubelska 5 / 5