Share
Una dintre acțiunile cele mai comune utilizate pentru o aplicație iPhone sau iPad este evenimentul tactil. Un eveniment nu este util dacă nu declanșează o acțiune semnificativă. Acest tutorial acoperă modul de atașare a unui eveniment tactil la un buton personalizat și modul de declanșare a animației unui obiect. În cele din urmă, rezultatul este un simplu controler de joc pe ecran, care poate fi extins la limitele imaginației tale.
Deschideți Xcode și începeți un nou proiect. Selectați aplicația bazată pe vizualizare. Denumiți aplicația "sărituri", pentru a putea urmări cu ușurință.
După descărcarea fișierului de proiect atașat, deschideți dosarul "Imagini". Aici veți găsi toate resursele de imagine de care avem nevoie pentru acest proiect, inclusiv trei imagini sprite ale lui Ryu de la Streetfighter create de PanelMonkey. Va trebui să copiați imaginile în folderul resurselor proiectului prin glisarea lor din folderul din Finder și în panoul "Groups & Groups" din Xcode.
În mesajul Xcode care va apărea, asigurați-vă că ați bifat caseta cu eticheta "Copiați articolele în dosarul grupului de destinație (dacă este necesar)".
Toate imaginile necesare pentru proiect ar trebui copiate acum în același director în care se află fișierul de proiect. Acum, pentru a păstra dosarul de resurse curat, să grupăm toate imaginile pe care le-am importat împreună. Selectați toate imaginile prin ținerea comenzii și făcând clic pe fiecare fișier. Faceți clic pe stânga sau pe ctrl + clic și selectați "Grupare" din meniul rezultat. Denumiți grupul orice doriți. Mi-am numit "imaginile".
Construiți și executați aplicația în starea actuală. Nu ar trebui să existe erori de compilare și simulatorul ar trebui să prezinte un ecran simplu, gri.
În interiorul saltuluiAppDelegate.m, modificați metoda didFinishLaunchingWithOptions adăugând următoarea linie:
// Alocați o nouă vizualizare, adăugați această linie: self.viewController = [jumpingViewController alloc]; [fereastra addSubview: viewController.view];
Aceasta va aloca un nou controler de vizualizare. Acest pas este necesar pentru că nu vom folosi Interface Builder pentru a crea punctul de vedere pentru noi.
În fișierul antetului controlerului de vedere (jumpingViewController.h), în interiorul interfeței, declarați o nouă proprietate adăugând:
Player UIImageView *;
Apoi, înainte de @end, adăugați:
@property (nonatomic, reține) UIImageView * player;
Acest lucru ne va permite să folosim "player" ca proprietate de clasă pentru o imagine.
Fișierul cu antet ar trebui să arate astfel:
#import@interface jumpingViewController: UIViewController UIImageView * player; Playerul @property (nonatomic, reține) UIImageView *; @Sfârșit
Următorul pas este să adăugăm elemente grafice și interfață la această vizualizare.
Deschideți fișierul jumpingViewController.m și ștergeți metodele existente comentate. Lăsați pe cei care nu sunt comentați.
În partea de sus, după @implementation jumpingViewController, adăugați:
@synthesize player;
Actualizați metoda dealloc la următoarele:
- (void) dealloc [release release]; [super dealloc];
Apoi, introduceți următoarea metodă:
- (void) addButton UIButton * buton = [[Buton UIButtonWithType: UIButtonTypeCustom] initWithFrame: CGRectMake (240, 150, 50, 50)]; // Setați imaginea butonului [buton setBackgroundImage: [UIImage imageNamed: @ "button.png"] pentruState: UIControlStateNormal]; // Atașați un eveniment [butonul addTarget: acțiunea de sine: @selector (butonPressed) forControlEvents: UIControlEventTouchUpInside]; // Adăugați butonul în vizualizarea [auto.view addSubview: buton];
Metoda addButton va fi apelată mai târziu, pentru a vă ghici, adăugați butonul în vizualizare. Primul lucru pe care trebuie să-l observați este că acesta este un buton personalizat. În al doilea rând, buttonPressed este numele unei metode care va fi apelată atunci când evenimentul tactil este declanșat.
Mergeți mai departe și definiți o metodă cu buton temporarPrimită prin introducerea următoarelor:
Accentsconagua
- (void) Apăsat butonul NSLog ("Butonul apăsat"); NSLog () va trimite un mesaj la consola, care poate fi accesată din meniu, sub Run (cmd + shift + R).
Noul nostru buton ar trebui să apară pe ecran după încărcarea vederii. Pentru aceasta, adăugați următoarea metodă:
- (void) loadView // Alocați vizualizarea self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Setați culoarea de fundal a vizualizării self.view.backgroundColor = [UICcolor blackColor]; // Creați imaginea de fundal UIImageView * bg = [[UIImageView aliniere] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // Creați butonul [self addButton];
Această metodă este furnizată în mod implicit pentru controlorii de vizualizare. Adăugăm o imagine de fundal și trimitem mesajul addButton.
Salvați-vă munca și apoi construiți și executați proiectul. Ar trebui să vedeți imaginea de fundal și butonul roșu. Dacă fereastra consolei este deschisă, atingând butonul ar trebui să afișeze un mesaj în consola prin NSLog ().
Pentru a inițializa obiectul UIImageView, adăugați următoarele în jumpingViewController.m, deasupra metodei addButton:
- (void) initPlayer auto.player = [[UIImageView alocare] initWithFrame: CGRectMake (10, 100, 77.0, 94.0)]; [self normalStance]; // opac pentru o performanță mai bună self.player.opaque = DA; [auto.view addSubview: auto.player]; - (void) normalStance [auto.player setImage: [UIImage imageNamed: @ "ryu.png"]];
Acest cod va inițializa un obiect UIImageView și îl va adăuga în vizualizarea principală. Metoda normalStance va fi utilă mai târziu.
Acum vom trimite mesajul initPlayer în vizualizarea principală. Facem acest lucru modificând metoda loadView după cum urmează:
- (void) loadView // Alocați vizualizarea self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Setați culoarea de fundal a vizualizării self.view.backgroundColor = [UICcolor blackColor]; // crea imaginea de fundal UIImageView * bg = [[UIImageView alocare] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // creați butonul [self addButton]; // inițializați acum playerul [self initPlayer];
Construiți și alergați. Un personaj apare pe ecran, corect?
Acum, pentru partea distractivă. Deasupra addButton, adăugați:
- (void) cleanStance [auto.player setImage: zero]; auto.player.animationImages = zero; - (void) jumpStance [auto-curățare]; NSArray * imageArray = [[NSArray alocare] initWithObjects: [UIImage imageNamed: @ "jump1.png"], [UIImage imageNamed: @ "jump2.png"], nil]; auto.player.animationImages = imageArray; auto.player.animationDuration = 0.3; self.player.contentMode = UIViewContentModeBottomLeft; [auto.view addSubview: auto.player]; [auto.player startAnimating];
Prima metodă adăugată elimină orice imagini asociate obiectului jucătorului. Utilizăm acest lucru pentru a curăța cadrele de animație utilizate anterior. A doua metodă adaugă o animație simplă obiectului jucătorului nostru. Aceasta va apărea în timp ce obiectul se mișcă.
După metoda jumpStance, adăugați:
- (void) salt: (UIImageView *) imagine [auto jumpStance]; [UIView beginAnimations: context zero: NULL]; [Durata de desfășurare a activării: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; image.transform = CGAffineTransformMakeTraducere (0, -40); [Afișează comenziAnimații];
Această metodă mișcă de fapt obiectul jucătorului. Mai întâi modifică setul de imagini, apoi îl mută cu 40 de pixeli pe verticală.
Linia:
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
Adaugă un efect de relaxare animației, deci pare mai realist.
Schimbați metoda butonului Stocat pentru a arăta astfel:
- (void) buttonPress [salt self: self.player];
Construiți și alergați. Prin apăsarea butonului, personajul va sari, dar va rămâne înghețat în aer. Progres bun! Să-l dăm jos.
Deasupra metodei jump adăugate anterior, adăugați:
-(void) cădere: (NSString *) animationID terminat: (NSNumber *) context finit: (void *) context [self cleanStance]; [self normalStance]; [UIView beginAnimations: context zero: NULL]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; [Durata de desfășurare a programului: 0,2]; self.player.transform = CGAffineTransformMakeTranslation (0, 0); [Afișează comenziAnimații];
Această metodă readuce caracterul la starea normală și îl readuce înapoi în poziția inițială.
Acum, schimbați metoda de salt care arata ca:
- (void) salt: (UIImageView *) imagine [auto jumpStance]; [UIView beginAnimations: context zero: NULL]; [Durata de desfășurare a activării: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; // Executați căderea după terminarea animației [UIView setAnimationDelegate: self]; [UIView setAnimationDidStopSelector: @selector (cădere: terminat: context :)]; image.transform = CGAffineTransformMakeTraducere (0, -40); [Afișează comenziAnimații];
Construiți și alergați. Apăsați butonul roșu acum și personajul nostru ar trebui să sară și să se întoarcă la sol. Asta e!
Acum ar trebui să aveți o înțelegere de bază a unora dintre cele mai utilizate clasificate cum ar fi: UIButton, NSLog, UIImageView și cum să executați animații. O abordare similară poate fi aplicată pentru a adăuga alte butoane pe ecran, ceea ce poate declanșa diferite evenimente, astfel încât obiectul țintă poate efectua alte acțiuni. Nu ezitați să vă contactați sau să urmați-mă pe Twitter @tudorizer.
