Temat 5. UIKit - animacje Gra w kulki

Temat 5.
UIKit - animacje
Gra w kulki - part 2
Wymagana wiedza wstępna:
1) Student musi
1) Umieć stworzyć projekt aplikacji konsolowej w XCode z wykorzystaniem
Objective-C
2) Umieć skompilować i uruchomić program w XCode
3) Skorzystać z podstawowych klas i funkcji Objective-C
4) Nauczyć się zasad wywoływania metod w Objective-C
5) Znać język C
6) Znać zasady zarządzania pamięcią w komputerze
7) Znać pojecie wskaźnika
8) Znać podstawowe narzędzia tworzenia aplikacji konsolowych w C
9) Umieć tworzyć klasy Objective-C
10) Umieć tworzyć hierarchę klas w Objective-C
11) Umieć wykorzystywać późne wywołanie metod w Objective-C
12) Umieć korzystać z kolekcji
13) Umieć tworzyć własne inicjalizatory
14) Umieć tworzyć i konfigurować projekty IOS
15) Korzystać z StoryBoard i rozmieszczać elementy na Widokach
16) Umieć stworzyć własny kontroler widoku
17) Tworzyć referencje do obiektów znajdujących się na widoku
18) Obsługiwać domyślne interakcje z obiektami za pomocą własnych
metod
19) Znać zasady korzystania z @property i @synthesize
2) Student powinien
1) Znać jezyk Java lub C# lub C++
2) Rozumieć ideę MVC - model - view - controller
3) Rozumieć ideę delegata dla widoku (kontrolera)
Cel dydaktyczny
1) Student musi
1) Znać zasady korzystania z obiektu NSTimer
2) Znać zasady tworzenia animacji za pomocą UIKit
3) Umieć korzystać z obiektów GestureRecognizers
2) Student powinien
1) Znać podstawy geometrii w aplikacjach IOS (CG*)
2) Znać prefefiniowane metody pracy z CG*
3) Student może
1) Umieć samodzielnie rozpoznawać dotyk
2) Umieć obsługiwać animacje warstw i korzystać CoreAnimation
Zakres tematyczny wykładu laboratorium
Niniejsze zajęcia wprowadzają w tematykę animacji w aplikacjach IOS. Animacje są
jednym z kluczowych narzędzi, wykorzystywanych do tworzenia przyjaznych interfejsów
użytkownika.
 UIView jako składowa sceny w aplikacji
 UIKit i Animacje
Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 1/5
 Modyfikowalne właściwości UIView
 Animowalne właściwości UIView
o Frame – rozmiar i pozycja
o Bounds – rozmiar
o Center – pozycja w stosunku do nadwidoku
o Transform – skalowanie, obrazcanie, 2d
o Alpha – widoczność
o backgroundColor – kolor tła
o contentStretch – zmiana trybu, w jakim treść dopasowana jest do kontenera
 Metody animacji
o animateWithDuration:animations:
o animateWithDuration:animations:completion:
o animateWithDuration:delay:options:animations:completion:
 Parametry animacji
 Blok completion
 Widoki, animacje widoków, przejścia między widokami
 View Transition
 Łączenie wielu animacji razem
 Wykorzystanie animacji zagnieżdżonych
 CoreAnimation - animacje bardziej zaawansowane
 CoreAnimation jako podstawa Animacji UIKit
 Obiekt warstwy (layer Object) - Obiekt dwuwymiarowy w przestrzeni trójwymiarowej
 Macierze transformacji
 Warstwa i widok - uzupełnianie funkcjonalności.
 Modyfikacje zawartości warstwy
 Animowanie warstw
Załączniki
1. Prezentacja_5.pdf - slajdy prezentacji wykładu
Zadania na laboratorium
Stwórz projekt gry „Uciekająca kulka”
Zasady gry.
Gra polega na śledzeniu i blokowaniu ruchów kulki. Kulka porusza się w losowo wybranym
kierunku. Jeśli wypadnie poza krawędź ekranu, gra kończy się.
Aby zapobiec wypadnięciu, należy na krawędzi ekranu ustawić blokadę, tak aby przeciąć
tor ruchu kulki. Kulka odbije się od blokady i będzie kontynuowała ruch w nowym kierunku.
Program ma rozpoczynać się od menu, w którym można rozpocząć grę. Po przegranej,
gra ma powrócić do menu.
Zadanie 1
W klasie Kulka dodaj właściwości
1) speed (float) - przechowującą prędkość kulki
2) direction (CGPoint) - przechowującą informacje o aktualnym kierunku kulki
3) result (int) - przechowującą informacje o aktualnym wyniku zdobytym prze kulkę.
Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 2/5
Popraw metodę inicjalizatora inicializując te pola (speed na 0.01, direction - losowo
(wektor o długości 1), result na 0;
Podpowiedzi
1) Pola definiujemy jako właściwości i wykorzystujemy mechanizm synthesize.
@property(atomic) float speed;
@property(atomic) CGPoint direction;
@property(atomic) int result;
@synthesize speed;
@synthesize direction;
@synthesize result;
2) CGPoint tworzymy za pomocą funkcji CGPointMake
3) Losowanie można wykonać za pomocą funkcji arc4random
float f = ((arc4random() % 100)*1.0)/100;
NSLog(@"%f",f);
self.kierunek = CGPointMake(-f,-1/f);
Zadanie 2.
Do klasy Kulka dodaj metodę -(BOOL) moveTo:andConstraints:, która będzie
modyfikowała pozycję kulki. W przypadku gdy modyfikacja będzie poprawna, to znaczy
kulka nie znajdzie się poza podanym jako parametr prostokątem, ma zostać wykonane
przesunięcie, i zwrócona wartośc TRUE. W przeciwnym przypadku ma zostać zwrócone
FALSE. Dodaj również metodę -(BOOL) moveWIthConstraints:, przesuwającą kulkę
zgodnie z jej parametrami (direction, speed), na podstawie których zostaje obliczony punkt
do przesunięcia
Podpowiedzi
1) Nagłówen funkcji umieszcamy w pliku nagłówkowym, aby mogła być dostępna z
zewnątrz obiektu.
-(BOOL)moveTo:(CGPoint) p andConstraints:(CGRect) r;
2) Zmiana położenia obiektu jest równoważna ze zmianą jego właściwości frame.
CGRect n = CGRectMake(
p.x,
p.y,
self.frame.size.width,
self.frame.size.height);
[self setFrame:n];
3) MoveWithConstraints: powinna obliczyć punkt przesunięcia kulki a następnie wywołać
metodę MoveTo:andConstraints:
4) Obliczenie przesunięcia to direction * speed;
Zadanie 3.
Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 3/5
Zmodyfikuj klasę GameViewController, dodając do niej pole typu NSTimer. Zainicjalizuj tą
właściwość tworząc zegar, powtarzający wybraną metodę co 1/60 sekundy. W metodzie
tej wywołaj przesunięcie kulki. W przypadku przesunięcia nieudanego, wywołaj metodę
zmieniającą kierunek kulki, zgodnie z zasadami odbicia.
Podpowiedzi
1) Timer to obiekt klasy NSTimer, zainicjalizowany odpowiednią jej metodą
self.t = [NSTimer scheduledTimerWithTimeInterval:1/60 target:self selector:@selector(targetMethod:)
userInfo:nil repeats: YES];
2) Obsługa timera odbywa się w metodzie wskazanej jako parametr Selector. Metoda ta
musi być zaimplementowana w klasie wskazanej jako target (czyli delegacie Timera)
3) Prędkość timera ustalana jest w sekundach.
4) W każdym kroku timera sprawdź czy udało się wykonać przesunięcie kulki i zareaguj
odpowiednio na tą informację:
BOOL udaloSie = [k moveWithConstraints:self.view.frame];
if(!p){
//odbij kulkę
}
Zadanie 4.
Zmodyfikuj GameViewController, poprzez dodanie reakcji na dotyk.
Dla każdego dotyku ekranu znajdź najbliższy mu punkt na krawędzi ekranu i do tego
miejsca przesuń obiekt Ograniczenie
Podpowiedzi
1) Informację o rozmiarze ekranu można pobrać z głównego widoku
Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 4/5
self.view.frame
2) Obsługę dotyku można wykonać poprzez dodanie odpowiedniego obiektu
GestureRecognizer, reagującego na dotyk.
GestureRecognizer powinien zostać zainicjalizownay razem z całym widokiem, a więc
w metodzie viewDidLoad klasy kontrolera gry.
UITapGestureRecognizer *gr =
[[UITapGestureRecognizer alloc]
initWithTarget:self action:@selector(oneFingerTap:)];
[gr setNumberOfTapsRequired:1];
[gr setNumberOfTouchesRequired:1];
3) Obsługa dotyku jest realizowana w metodzie podawanej jako argument inicjalizatora
Gesture Recognizer, a informacje o punkcie dotyku, można pobrać za pomocą metody
locationInView:
- (void)oneFingerTap: (UITapGestureRecognizer *)recognizer{
point = [recognizer locationInView:[self view]];
}
4) Przesunięcie obiektu w konkretne miejsce dokonuje się przez modyfikację właściwości
Frame
5) Aby przesunięcie było animowane, należy wykonujące je instrukcje umieścić w bloku
przekazanym jako parametr do metody klasy UIView animateWithDuration:animations:.
Pamiętaj aby dobrze obliczyć pozycję obiektu - chodzi o to, aby środek znajdował się w
miejscu dotyku.
[UIView animateWithDuration:0.3 animations:^{
self.margin.frame =
CGRectMake(
nx-self.margin.frame.size.width/2,
ny-self.margin.frame.size.width/2,
self.margin.frame.size.width,
self.margin.frame.size.height);
}
];
Zadania samodzielne
Zadanie 1
Zapamiętaj położenie obiektu Ograniczenie
Zadanie 2
Zmodyfikuj program tak, aby odbicie kulki nastąpiło tylko jeśli kulka dotknęła krawędzi w
odległości mniejszej niż promień obiektu Ograniczenie. W przeciwnym wypadku zatrzymaj
Timer i schowaj okno.
Zadanie 3.
Zmodyfikuj program tak, aby przy każdym odbiciu zwiększał prędkość kulki o 0.01.
Programowanie Urządzeń Mobilnych Apple - materiały do laboratorium - 5/5