Tekst źródłowy strony Squash w dwóch wariantach

[[Category:Scenariusze MIT App Inventor]] [[Category:Mistrzowie Kodowania]]
== Cele ==
Stworzymy prostą grę Squash, polegającą na odbijaniu piłeczki paletką, w dwóch wariantach. W ten sposób poznamy m.in. podstawy definiowania interfejsu użytkownika oraz nauczymy się wykonywać proste animacje. Po wykonaniu ćwiczenia będziemy też potrafili sterować obiektami za pomocą przeciągania palcem (pierwszy wariant) po ekranie oraz poprzez przechylanie telefonu (drugi wariant).
W tej wersji Squasha nie będzie systemu naliczania punktów jak w tradycyjnej wersji tej gry. W naszej aplikacji na dole będzie umieszczona czerwona linia i jeśli piłka się z nią zderzy, to nastąpi przegrana. Co więcej, gdy nie odbijemy piłeczki i ta spadnie na czerwoną linię, boisko zmieni kolor na szary, co będzie oznaczało koniec gry.

==Squash w dwóch wariantach==

=== Rozpoczęcie pracy ===
Wejdźmy na stronę http://appinventor.mit.edu i wybierzmy '''Create,''' by uruchomić App Inventor. Następnie przejdźmy do zakładki '''My Projects (1),''' gdzie znajdziemy wszystkie nasze projekty - wystarczy tylko zalogować się na odpowiednie konto Google. W celu rozpoczęcia pracy nad nowym projektem kliknijmy na Start new project (2), i wpiszmy w oknie jego nazwę, np. '''Squash.'''
[[Plik:Squash_1_opt.jpeg|center]]
Nastąpi teraz automatyczne przejście do okna budowy aplikacji.
Jak już wspomnieliśmy powyżej - w pierwszym wariancie naszej gry sterowanie paletką będzie odbywało się poprzez przeciąganie palcem po ekranie smartfona, natomiast w drugiej wersji będziemy sterować obracając nim. Obracanie ekranu zgodnie z pozycją telefonu czy tabletu jest domyślnym zachowaniem. Dlatego też w pierwszym wariancie musimy zablokować ekran po to, by ten nie zmieniał swojej orientacji. I od tego właśnie zaczniemy budowę naszej gry.
Przejdźmy zatem do okna '''Properties''' i dla komponentu '''Screen1,''' w polu '''Screen Orientation (1)''' wybierzmy '''Portrait.''' Dzięki temu nasz ekran zawsze będzie wyświetlany w pionowo, niezależnie od tego, w jakiej pozycji znajduje się urządzenie. Dodatkowo, w polu '''Title''' wpiszmy tytuł naszego bieżącego komponentu '''(2).''' Nazwijmy go '''Squash.'''
[[Plik:Squash_2_opt.jpeg|center]]

=== Squash - projektowanie interfejsu ===
Po zablokowaniu obracania obrazu przejdźmy do dodania komponentów. W naszej aplikacji wykorzystamy trzy elementy -  wszystkie znajdziemy w grupie Drawing and Animation. Są to:
'''1. Canvas''' (zamknięty obszar) - jest to komponent ograniczający obszar animacji oraz rysowania. W obszarze tego komponentu poruszają się Ball oraz ImageSprite.
'''2. Ball''' (piłka) - w naszej aplikacji to po prostu piłka, którą będziemy odbijać za pomocą paletki. 
'''3. ImageSprite''' (“duszek”) - znany ze Scratcha duszek. W naszej aplikacji będzie to paletka. Image Sprite jest podobny do komponentu Ball, jednak duszek ma kształt prostokąta, a jego tłem może być dowolny plik graficzny, np. w formacie jpg. Jako pierwszy komponent dodajmy '''Canvas (1).''' Przeciągnijmy go na nasz obszar roboczy, czyli '''Viewer.'''
[[Plik:Squash_3_opt.jpeg|center]]
Po tym, jak wstawiliśmy komponent Canvas, musimy zmienić jego cechy w oknie Properties. Zmodyfikujmy dwa atrybuty: Width (szerokość) oraz Height (wysokość). Dla większości komponentów zarówno szerokość, jak i wysokość, można ustawić jako:
# '''Automatic''' (automatyczna) - system samodzielnie dobierze odpowiednią wartość szerokości i wysokości lub pozostawi je w standardowym ustawieniu.
# '''Fill parent''' (wypełnienie obiektu nadrzędnego) - sprawia, że komponent przejmuje wielkość komponentu nadrzędnego. W przypadku naszej aplikacji zaznaczenie tej opcji sprawiłoby, że '''Canvas1''' przejąłby szerokość i wysokość od komponentu '''Screen1,''' co możemy zauważyć na ilustracji obok w oknie '''Components''' - Cavas1 jest obiektem podrzędnym dla Screen1. 
# '''... pixels''' - szerokość/wysokość o podanej przez nas liczbie pikseli.
Ustawmy zatem dla komponentu Canvas1 wartości '''Width''' jako '''Fill Parent (1)''' oraz '''Height''' jako '''300 pikseli (2).''' 
[[Plik:Squash_4_opt.jpeg|center]]
Teraz czas na kolejne komponenty. '''Dodajmy Ball (1)''' oraz '''ImageSprite (2)''' w dowolne miejsca w obrębie komponentu Canvas1.
Tak jak wspomnieliśmy wcześniej, komponenty Ball oraz ImageSprite mogą być umieszczone jedynie na komponencie Canvas. Nie można umieścić ich poza tym obszarem, bezpośrednio na ekranie telefonu.
[[Plik:Squash_5_opt.jpeg|center]]
Po dodaniu dwóch następnych komponentów dostosujmy ich właściwości tak, by odpowiadały naszym założeniom. Zacznijmy od komponentu '''Ball''' - na początek zmieńmy nazwę tego obiektu, klikając '''Rename (1)''' i wpisując Piłka w pole '''New Name.''' Następnie zmieńmy kilka cech tego komponentu w oknie właściwości, czyli Properties:
* '''Heading''' (kierunek)- wpiszmy wartość '''50 (2),''' czyli tak, jak w Scratchu
* '''Paint Color''' (kolor)- wybierzmy '''Blue (3)'''
* '''Radius''' (promień)- promień, czyli po prostu wielkość piłki ustalmy na '''5 (4)'''
* '''Speed''' (prędkość) - tutaj wpiszmy wartość '''100 (5)'''
* '''współrzędne XY''' - obu współrzędnym nadajmy wartość '''100 (6)'''
[[Plik:Squash_6_opt.jpeg|center]]
Inaczej, niż w Scratchu, w programie App Inventor komponentyBall oraz ImageSprite mogą mieć nadaną własną prędkość. W Scratchu efekt ten osiągaliśmy poprzez wielokrotne przesuwanie obiektu. Tutaj wystarczy, że nadamy komponentowi kierunek '''(Heading)''' oraz prędkość '''(Speed),''' zaś resztę pracy wykona za nas komputer.
Warto zwrócić uwagę na hierarchię komponentów w oknie '''Components.''' Jak pamiętamy, w poprzedniej aplikacji wszystkie komponenty były bezpośrednio podrzędne dla Screen1. Tutaj podrzędny dla '''Screen1''' jest tylko '''Canvas1,''' natomiast pozostałe dwa komponenty ('''Piłka''' oraz '''ImageSprite''') są podrzędne dla komponentu Canvas1.
[[Plik:Squash_7_opt.jpeg|center]]
Zmieńmy jeszcze nazwy pozostałych komponentów.
'''Canvas1''' przestawmy na '''Boisko (1),''' zaś '''ImageSprite1''' na '''Paletka (2).''' Teraz przejdziemy do następnego kroku, czyli do skonfigurowania paletki.
[[Plik:Squash_8_opt.jpeg|center]]
Przejdźmy zatem do zmiany właściwości komponentu o nazwie '''Paletka.''' Na początek kliknijmy na paletkę w oknie '''Components,''' by ją zaznaczyć - dzięki temu w oknie '''Properties''' pojawią się opcje, które pozwolą nam skonfigurować naszą paletkę. Konfigurację jej cech podzielimy na dwa kroki. W pierwszym kroku zadbamy o jej wygląd, zaś w drugim zajmiemy się jej rozmiarem i pozycją.
# '''Ustawienie pliku graficznego''' - wygląd paletki będzie wczytany z pliku graficznego, który załadujemy do programu. Paletka bez załadowanej grafiki byłaby przezroczysta, a to zdecydowanie utrudniłoby nam grę. Musimy zatem przygotować dowolny plik graficzny, np. w formacie png i wczytać go do mediów aplikacji, by następnie przypisać do paletki. Kliknijmy więc na '''Upload File (1)''' w oknie '''Media''' i odszukajmy plik, który chcemy wczytać do programu. Następnie przechodzimy do okna '''Properties''' i tam w polu '''Picture''' z rozwijanej listy wybierzmy nasz plik. Plików multimedialnych nie możemy przypisać bezpośrednio do komponentów, stąd w pierwszej kolejności musieliśmy wczytać plik do biblioteki mediów.
# '''Wielkość i pozycja''' - po tym, jak wczytaliśmy już plik graficzny, przejdźmy do ustawienia pozostałych parametrów. Współrzędną '''X''' ustawmy na '''100 pikseli,''' zaś '''Y''' na '''270 (3).''' Następnie parametry '''Width''' (szerokość) na '''70 pikseli''' i '''Height''' (wysokość) na '''20 pikseli.'''

=== Squash - programowanie aplikacji ===
Po tym, jak zakończyliśmy projektowanie interfejsu aplikacji, możemy zająć się stworzeniem odpowiedniego
programu. Tym razem zbudowanie poprawnego kodu będzie wymagało od nas większej pracy, niż w przypadku
poprzedniej aplikacji. Tam wystarczyła nam tylko jedna instrukcja zbudowana z bloków, natomiast w przypadku
Squasha potrzebujemy ich kilka. Przejdźmy więc teraz do zakładki '''Blocks,''' a poniżej, krok po kroku, omówimy

==== Zderzenie piłki z paletką i odbicie piłki ====
Podstawową interakcją w naszej grze jest zderzenie piłeczki z paletką. Gdy do tego dojdzie, piłka musi odbić się od paletki. Musimy zatem ustalić w jaki sposób ma zachować się piłka i określić, w stosunku do jakiego obiektu to zachowanie ma wystąpić.
[[Plik:Squash_9_opt.jpeg|center]]
Naszą instrukcję można opisać w następujący sposób:<br />

<span style="color: Orange">Kiedy piłka zderzy się z innym obiektem, to </span><span style="color: Purple">odbij piłkę </span><span style="color: Blue">tak, jakby dotknęła dolnej krawędzi.</span><br />

Jak to działa? Przede wszystkim pamiętajmy, że piłka ma swoją prędkość. Gdy poruszająca się Piłka uderza w krawędź '''Canvas''' (nasze Boisko), to wywołuje wydarzenie '''EdgeReached''' (zetknięcie z krawędzią), a gdy uderza w inny obiekt, to wywołuje wydarzenie '''CollidedWith''' (zderzenie z...). My na ekranie mamy tylko jeden obiekt inny niż piłka, czyli paletkę. Zatem gdy piłka uderzy w paletkę, to zostanie uruchomiona akcja '''call[Piłka].Bounce''' (“odbij piłkę”). Akcja odbicia musi jeszcze wiedzieć, w którą stronę ma piłkę odbić gdy ta uderzy w krawędź boczną lub górną i właśnie do tego służy parametr '''edge''' (krawędź). Jego wartość ustawiona na -1 powoduje odbicie Piłki tak, jakby dotknęła dolnej krawędzi (oznaczenia wszystkich krawędzi znajdują się na następnej stronie). '''Other''' (inny obiekt), można wykorzystać do ustalenia, w który obiekt uderzyła Piłka. My na ekranie mamy tylko paletkę, więc nie musimy sprawdzać wartości other.
[[Plik:Squash_10_opt.jpeg|center]]
Polecenia '''When[Piłka].CollidedWith''' oraz '''Call[Piłka].Bounce''' znajdziemy w grupie '''Piłka (1),''' zaś obiet z wartością liczbową w grupie '''Math (2).'''
Wszystkie instrukcje, tak jak w Scratchu, podzielone są na kategorie oznaczone odpowiednimi kolorami, co ułatwia nawigację.

==== Numeracja krawędzi ekranu w App Inventorze ====
Przed momentem skonfigurowaliśmy uderzenie piłki w dolną krawędź ekranu, która jest oznaczona numerem -1. Skąd wziął się właśnie taki numer? Krawędzie w programie App Inventor mają takie oznaczenia, jakie zaprezentowano na poniższej ilustracji. Krawędź północna oznaczona jest numerem 1, północno-wschodnia numerem 2 i w ten sposób docieramy do krawędzi dolnej, która jest oznaczona numerem -1.
[[Plik:Squash_kierunki.jpeg|center]]

==== Zderzenie piłki z krawędzią i odbicie piłki od krawędzi ==== 
Teraz zaprogramujemy wydarzenie zderzenia piłki z krawędzią. Tutaj musimy rozróżnić dwa rodzaje
krawędzi - krawędź boczną i krawędź dolną. Jeśli piłka zderzy się z krawędzią boczną, to zostanie odbita, a wartość jej prędkości zwiększy się o 1. Natomiast jeśli zderzy się krawędzią dolną, to nastąpi rozpoczęcie gry od początku poprzez wywołanie odrębnej procedury, którą przygotujemy.
'''(1)''' Najpierw sprawdzamy, czy piłka uderzyła w krawędź dolną (wartość edge wynoszącą -1). Krawędź -1 oznacza, że gracz przepuścił piłkę (nie odbił jej) i powoduje to ponowne rozpoczęcie gry poprzez wywołanie procedury reset '''Call[reset],''' którą przygotujemy za chwilę.
'''(2)''' Jeśli piłka uderzy w krawędź boczną, to zostaną wykonane dwie akcje:
# Odbij Piłkę tak jakby się zderzyła z odpowiednią krawędzią (identyfikator krawędzi uzyskujemy przy pomocy '''get[edge]''')
# Zwiększ prędkość piłki o jeden '''Set[Piłka].Speed to [Piłka].[Speed] + 1''')
[[Plik:Squash_11_opt.jpeg|center|600px]]
'''(3)''' Na zakończenie dołóżmy jeszcze akcję '''set[Screen1].[Title] na „Squash - ”&[Piłka]. [Speed],''' czyli ustaw pasek tytułu na napis Squash oraz prędkość poruszania się Piłki.

==== Wariant pierwszy - poruszanie paletką za pomocą ruchu palca ====
Kolejnym krokiem będzie zaprogramowanie mechanizmu poruszania paletki poprzez przeciągnięcie palcem. Tutaj wykorzystamy funkcję '''when[Paletka].Dragged.'''
[[Plik:Squash_12_opt.jpeg|center]]
'''When[Paletka].Dragged''' (kiedy Paletka przeciągnięta), to ustaw współrzędną '''X''' Paletki na wartość '''currentX''' (czyli aktualna współrzędna X - miejsce, gdzie dotkniemy/przeciągniemy palcem ekranu) zmniejszona o połowę szerokości Paletki '''[Paletka].[Width] / 2.''' Musimy więc wewnątrz działania matematycznego odejmowanie zawrzeć kolejne działanie dzielenie.
Dlaczego zmniejszyliśmy szerokość o połowę? Polecenie '''set[Paletka].[X]''' ustawia lewy górny róg Paletki w miejscu '''X.''' Z tego powodu musimy odjąć połowę jej szerokości, żeby palec wskazywał środek paletki, a nie jej lewą krawędź.

==== Przygotowanie procedury reset ====
Teraz przygotujmy procedurę własną reset. Będzie ona uruchamiana zawsze, gdy piłka dotknie dolnej krawędzi oraz zawsze na początku gry. Będą w niej zawarte wszystkie domyślne dla naszej gry parametry, takie jak kolor tła, czy wymiary boiska. Dzięki temu nasza gra po porażce i przy każdym wznowieniu oraz na początku zawsze będzie wyglądała i działała tak samo.
W obszarze Blocks w grupie '''Procedures''' znajdujemy '''to[procedure] do''' i przeciągnijmy ten element do obszaru '''Viewer'''. Następnie zmieńmy jego nazwę na reset i wstawmy poszczególne klocki, jak na poniższej ilustracji.
[[Plik:Squash_13_opt.jpeg|center]]
# Na początek ustawmy kolor tła naszego Boiska – jeżeli kolor jest szary (czyli jeśli przegraliśmy), to ustawiamy na biały. Dodajmy jeszcze warunek, że jeżeli boisko ma jakikolwiek inny kolor niż szary, to ustawiamy na biały - o tym za chwilę.
# Następnie ustawmy parametry początkowe Piłki – współrzędne '''X''' i '''Y,''' kierunek '''(Heading)''' oraz prędkość piłki '''(Speed).''' Dzięki temu na początku gry piłka zawsze będzie w tej samej pozycji.
# Na samym dole wzdłuż dolnej krawędzi Boiska (linia x1) rysujemy linię (w kolorze i szerokości ustawionej w procedurze '''when[Screen1].Initialize,''' którą stworzymy za chwilę. Linia ta musi być za każdym razem rysowana ponownie, ponieważ ustawienie tła Boiska (na szare lub białe) powyżej powoduje jej usunięcie (wyczyszczenie całości Boiska).
Przypomnijmy jeszcze raz, że procedura '''reset''' będzie uruchamiana za każdym razem gdy Piłka dotknie dolnej krawędzi Boiska (czerwonej linii) oraz podczas uruchomienia aplikacji.

==== Instrukcja when[Screen1].Initialize ====
Została nam już ostatnia instrukcja, która będzie uruchamiana w momencie inicjowania komponentu Screen1, czyli w naszym przypadku po prostu przy każdym starcie aplikacji. W tej instrukcji zdefiniujemy parametry początkowe naszej aplikacji.
[[Plik:Squash_14_opt.jpeg|center]]
# Szerokość Paletki ustawmy na ¼ szerokości Boiska.
# Ustalony parametry rysowania Boiska (kolor '''czerwony''', szerokość/grubość rysowania '''9''') – to wykorzystamy do rysowania czerwonej linii na dole Boiska.
# Na sam koniec uruchamiamy jeszcze procedurę '''reset.''' I tutaj mamy znajdziemy, dlaczego w procedurze reset sprawdzane są również inne kolory boiska, niż tylko szary. Program rozpoczyna od procedury '''when[Screen1]. Initialize''' i ustawia obrys koloru boiska na czerwony o grubości linii 9. Procedura reset z kolei sprawdza, jaki jest kolor boiska i jeżeli jest szary lub inny niż szary, zmienia kolor na biały, rysując dodatkowo trzy linie - górną oraz boczne. W ten sposób dolna linia w czerwonym kolorze pozostaje na boisku, również po wykonaniu procedury reset. Musieliśmy rozwiązać to w taki sposób, ponieważ porażkę sygnalizujemy zmianą koloru tła, natomiast zamiana koloru tła spowodowałaby usunięcie tej linii.

=== Udostępnianie aplikacji ===
Nasza aplikacja działa teraz prawidłowo, zaś paletka przemieszcza się, kiedy przesuwamy palcem po ekranie. Korzystając z faktu, że mamy ciekawą, działającą aplikację, poświęcimy teraz chwilę na udostępnienie tej aplikacji dalej po to, by można było zainstalować ją na dowolnym smartfonie. W tym celu kliknijmy w menu '''Build (1),''' gdzie znajdziemy dwie funkcje '''(2)''':
[[Plik:Squash_15_opt.jpeg|center]]
# '''App (Provide QP code for .apk)''' - wybranie tej opcji spowoduje wyświetlenie kodu QR i da możliwość załadowania przy pomocy tego kodu samodzielnej aplikacji na telefonie, bez użycia MIT AI2 Companion.
# '''App (save .apk to my computer)''' - wybranie tego polecenia spowoduje zapisanie aplikacji na komputerze jako plik .apk. Dzięki temu możemy chociażby aplikację przesłań komuś jako załącznik w e-mailu.

=== Suqah, wariant drugi - sterowanie paletką poprzez wychylenia telefonu ===
Teraz przejdźmy do zaprogramowania drugiego wariantu, czyli sterowania paletką poprzez obracanie smartfonem czy tabletem. Chcemy oczywiście zachować pierwszy wariant gry, dlatego stworzymy teraz nowy zapis projektu i to na nim wprowadzimy odpowiednie zmiany. Wybierzmy zatem '''Projects (1)''' w menu głównym, a następnie '''Save projects as... (2)''' i w polu '''New name:''' wpiszmy nową nazwę: '''Squash_przechylanie.'''
[[Plik:Squash_16_opt.jpeg|center]]
Z grupy '''Sensors''' (czujniki) wybierzmy komponent o nazwie '''AccelerometerSensor (1)''' i przeciągnijmy go na obszar projektowania interfejsu. Jako że AccelerometerSensor jest obiektem niewidocznym, to nie zajmuje on miejsca na ekranie, ale możemy zobaczyć go poniżej ekranu, w sekcji '''Non-visible components (2).''' Komponent AccelerometerSensor będzie przez nas wykorzystany do odczytywania przechylenia telefonu.
[[Plik:Squash_17_opt.jpeg|center]]
Zanim zaczniemy sterować paletką przy pomocy wychyleń telefonu musimy dezaktywować (lub usunąć całkowicie) sterowanie za pomocą przeciągania palcem, czyli instrukcję '''when[Paletka].Dragged.'''
W celu zdezaktywowania tej instrukcji przejdźmy do '''Blocks,''' najedźmy kursorem myszy na procedurę
sterowania paletką, czyli '''when[Paletka].Dragged (1)''' i kliknijmy prawym przyciskiem myszy. W ten sposób wywołamy
menu podręczne, z którego musimy wybrać polecenie '''Disable Block''', czyli dezaktywuj '''(2)'''. Cała nasza instrukcja
zmieni kolor na szary, co oznacza, że jest nieaktywna i nie będzie wykonywana podczas działania aplikacji.
[[Plik:Squash_18_opt.jpeg|center]]
Korzystając z okazji, omówmy teraz pozostałe polecenia z menu podręcznego bloków:
# '''Duplicate''' (powiel) - tworzy kopię danego bloku bądź całej instrukcji złożonej z bloczków.
# '''Add Comment''' (dodaj komentarz) - umożliwia dodanie komentarza do bloku bądź całej instrukcji. Komentarz wyświetla się w postaci ikony ze znakiem zapytania w lewym górnym rogu bloku. Kliknięcie na tę ikonę powoduje rozwinięcie pola tekstowego.
# '''Collapse Block''' (złóż klocek) - minimalizuje klocek bądź całą instrukcję poprzez “zwinięcie” do elementu zawierającego tylko tytuł.
# '''Delete x Blocks''' (Skasuj x bloków) - usuwa wszystkie bloczki w instrukcji, gdzie x oznacza liczbę bloków. W naszym przypadku jest to 7.
# '''Help''' (pomoc) - kliknięcie na ten element powoduje przeniesienie nas na stronę, gdzie opisane jest działanie danego bloku.
Przejdźmy teraz do ułożenia kompletnej instrukcji, pozwalającej sterować paletką poprzez obracanie telefonem.
Na początek potrzebujemy blok '''when[AccelerometerSensor1].AccelerationChanged''' (czyli wydarzenie: gdy zmieniło się położenie telefonu). Procedura ta posiada trzy parametry, które reprezentują położenie telefonu w trzech wymiarach. Nas interesować będzie tylko '''xAccel''' – czyli pochylenie telefonu w prawo lub w lewo.
Następnym krokiem będzie wprowadzenie zmiennej lokalnej (czyli aktywnej w ramach niniejszego zbioru klocków) '''nachylenieX''' - nadajmy je wartość równą '''xAccel (1).'''
Dodajmy teraz dwa warunki '''(2):'''
* '''jeżeli nachylenieX > 5, to ustaw nachylenieX = 5'''
* '''jeżeli nachylenieX < -5, to ustaw nachylenieX = -5'''
Te dwa warunki służą ograniczeniu zakresu przechylenia telefonu. Chodzi o to, żeby paletka przemieszczała się w kierunku krawędzi telefonu przy nieznacznych przechyleniach urządzenia. Po wykonaniu obu warunków zmienna reprezentująca nachylenie będzie przyjmować wartości od -5 do 5. 
Przeliczmy tę zmienną tak, żeby zmieniała wartość od 0 do 1 (a nie od -5 do 5) – to nam ułatwi kolejne obliczenia. W tym celu ustawmy wartość zmiennej poprzez odjęcie od 5nachylenia X (otrzymujemy liczbę 0 lub 10), następnie podzielenie tego wyniku  przez 10, co ostatecznie daje nam wartość z przedziału 0-1 '''(3).'''
Leżący płasko telefon ma wartość xAccel równą '''0.''' Gdy przechylamy telefon w prawo, to wartość rośnie, a gdy przechylamy w lewo to wartość xAccel maleje przyjmując wartości ujemne.
[[Plik:Squash_19_opt.jpeg|center]]
<p align="right">
Teraz nachylenieX mnożymy razy ¾ szerokości boiska – '''[Boisko].[Width].'''<br />
Dlaczego ¾? Jak pamiętamy, paletka ma szerokość ¼ boiska, zatem jej lewy górny róg porusza się i przyjmuje wartość X od 0 do ¾ szerokości Boiska. 
</p>

=== Podsumowanie ===
Nauczyliśmy się wykonywać proste animacje oraz wiemy już, jak sterować obiektami poprzez przeciąganie palcem
po ekranie, a także z wykorzystaniem akcelerometru - obracając telefonem. Poznaliśmy też podstawy definiowania
interfejsu użytkownika. To wszystko daje nam dobrą podstawę do tworzenia kolejnych, bardziej rozbudowanych aplikacji w systemie Android.