WASM AppInventor – Lab 3 Rysowanie i animacja po kanwie

WASM AppInventor – Lab 3 Rysowanie i animacja po kanwie

WASM
AppInventor – Lab 3
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
WASM
AppInventor – Lab 3
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
WASM
AppInventor – Lab 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
WASM





AppInventor – Lab 3
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 0-360 (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
WASM
AppInventor – Lab 3
Ć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