Share
Una delle azioni più comuni utilizzate per un'applicazione iPhone o iPad è l'evento touch. Un evento non è utile se non innesca un'azione significativa. Questo tutorial spiega come allegare un evento tattile a un pulsante personalizzato e come attivare l'animazione di un oggetto. Alla fine, il risultato è un semplice controller di gioco su schermo, che può essere esteso ai limiti della tua immaginazione.
Apri Xcode e inizia un nuovo progetto. Seleziona applicazione basata su vista. Dai un nome all'app "salta", in modo da poter seguire facilmente.
Dopo aver scaricato il file di progetto allegato, apri la cartella "Immagini". Qui troverai tutte le risorse di immagine di cui abbiamo bisogno per questo progetto, incluse tre immagini sprite di Ryu di Streetfighter create da PanelMonkey. Dovrai copiare le immagini nella cartella delle risorse del progetto trascinandole dalla cartella in Finder e nel riquadro "Gruppi e file" in Xcode.
Nel prompt Xcode che apparirà, assicurati di selezionare la casella "Copia gli elementi nella cartella del gruppo di destinazione (se necessario)".
Tutte le immagini necessarie per il progetto dovrebbero ora essere copiate nella stessa cartella in cui si trova il file di progetto. Ora, per mantenere pulita la cartella delle risorse, raggruppiamo tutte le immagini che abbiamo appena importato insieme. Seleziona tutte le immagini tenendo premuto il comando e facendo clic su ciascun file. Ora fai clic con il tasto sinistro o ctrl + clic e seleziona "Raggruppa" dal menu risultante. Dai un nome al gruppo come preferisci. Ho chiamato il mio "immagini".
Crea ed esegui l'app nello stato corrente. Non ci dovrebbero essere errori di compilazione e il simulatore dovrebbe mostrare uno schermo semplice e grigio.
All'interno di jumpingAppDelegate.m, modificare il metodo didFinishLaunchingWithOptions aggiungendo la seguente riga:
// Assegna una nuova vista, aggiungi questa riga: self.viewController = [jumpingViewController alloc]; [window addSubview: viewController.view];
Questo alloca un nuovo controller di visualizzazione. Questo passaggio è necessario perché non utilizzeremo Interface Builder per creare la nostra visualizzazione per noi.
Nel file di intestazione del controller della vista (jumpViewController.h), all'interno dell'interfaccia, dichiarare una nuova proprietà aggiungendo:
Lettore UIImageView *;
Quindi, prima di @end, aggiungi:
@property (nonatomic, retain) giocatore UIImageView *;
Questo ci permetterà di usare "player" come proprietà di classe per un'immagine.
Il file di intestazione dovrebbe ora assomigliare a questo:
#importare@interface jumpingViewController: UIViewController UIImageView * player; @property (nonatomic, retain) UIImageView * player; @fine
Il nostro prossimo passo è aggiungere gli elementi grafici e di interfaccia a questa vista.
Aprire il file jumpingViewController.m ed eliminare i metodi commentati esistenti. Lascia quelli che non sono commentati.
In alto, dopo @implementation jumpingViewController, aggiungi:
@ giocatore sintetizzatore;
Aggiorna il metodo dealloc al seguente:
- (void) dealloc [release del giocatore]; [super dealloc];
Quindi, inserire il seguente metodo:
- (void) addButton UIButton * button = [[Pulsante UIButtonWithType: UIButtonTypeCustom] initWithFrame: CGRectMake (240, 150, 50, 50)]; // Imposta l'immagine del pulsante [button setBackgroundImage: [UIImage imageNamed: @ "button.png"] forState: UIControlStateNormal]; // Allegare un evento [pulsante addTarget: self action: @selector (buttonPressed) forControlEvents: UIControlEventTouchUpInside]; // Aggiungi il pulsante alla vista [self.view addSubview: button];
Il metodo addButton verrà chiamato in seguito per, avete indovinato, aggiungere il pulsante alla vista. La prima cosa da notare è che questo è un pulsante personalizzato. In secondo luogo, buttonPressed è il nome di un metodo che verrà chiamato quando viene attivato l'evento touch.
Vai avanti e definisci un pulsante temporaneo Metodo stampato inserendo quanto segue:
- (vuoto) buttonPressed NSLog (@ "Pulsante premuto");
NSLog () invierà un messaggio alla console, a cui si può accedere dal menu, sotto Esegui (cmd + MAIUSC + R).
Il nostro nuovo pulsante dovrebbe apparire sullo schermo dopo che la vista è stata caricata. Affinché ciò si verifichi, aggiungere il seguente metodo:
- (void) loadView // Assegna la vista self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Imposta il colore di sfondo della vista self.view.backgroundColor = [UIColor blackColor]; // Crea l'immagine di sfondo UIImageView * bg = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // Crea il pulsante [self addButton];
Questo metodo viene fornito per impostazione predefinita per i controller di visualizzazione. Stiamo aggiungendo un'immagine di sfondo e inviando il messaggio addButton.
Salva il tuo lavoro e poi costruisci ed esegui il progetto. Dovresti vedere l'immagine di sfondo e il pulsante rosso. Se la finestra della console è aperta, toccare il pulsante dovrebbe visualizzare un messaggio nella console tramite NSLog ().
Per inizializzare il nostro oggetto UIImageView, aggiungere quanto segue in jumpingViewController.m, sopra il metodo addButton:
- (void) initPlayer self.player = [[UIImageView alloc] initWithFrame: CGRectMake (10, 100, 77.0, 94.0)]; [auto normalStance]; // opaco per prestazioni migliori self.player.opaque = YES; [self.view addSubview: self.player]; - (void) normalStance [self.player setImage: [UIImage imageNamed: @ "ryu.png"]];
Questo codice inizializzerà entrambi un oggetto UIImageView e lo aggiungerà alla vista principale. Il metodo NormalStance risulterà utile in seguito.
Ora invieremo il messaggio initPlayer alla vista principale. Lo facciamo modificando il metodo loadView come segue:
- (void) loadView // Assegna la vista self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Imposta il colore di sfondo della vista self.view.backgroundColor = [UIColor blackColor]; // crea l'immagine di sfondo UIImageView * bg = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // crea il pulsante [self addButton]; // ora inizializza il player [self initPlayer];
Costruisci ed esegui. Un personaggio è apparso sullo schermo, giusto?
Adesso per la parte divertente. Sopra aggiungereButton, aggiungere:
- (void) cleanStance [self.player setImage: nil]; self.player.animationImages = nil; - (void) jumpStance [self cleanStance]; NSArray * imageArray = [[NSArray alloc] initWithObjects: [UIImage imageNamed: @ "jump1.png"], [UIImage imageNamed: @ "jump2.png"], nil]; self.player.animationImages = imageArray; self.player.animationDuration = 0.3; self.player.contentMode = UIViewContentModeBottomLeft; [self.view addSubview: self.player]; [self.player startAnimating];
Il primo metodo aggiunto rimuove le immagini associate all'oggetto giocatore. Lo usiamo per pulire i fotogrammi dell'animazione utilizzati in precedenza. Il secondo metodo aggiunge una semplice animazione al nostro oggetto giocatore. Questo apparirà mentre l'oggetto si sta muovendo.
Dopo il metodo jumpStance, aggiungere:
- (void) jump: (UIImageView *) image [self jumpStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Questo metodo sposta effettivamente l'oggetto giocatore. Per prima cosa cambia il set di immagini, quindi lo sposta di 40 pixel in verticale.
La linea:
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
Aggiunge un effetto di attenuazione all'animazione, quindi sembra più realistico.
Cambia il pulsante Metodo stampato per assomigliare a questo:
- (vuoto) buttonPressed [self jump: self.player];
Costruisci ed esegui. Premendo il pulsante ora, il personaggio salterà, ma rimarrà congelato a mezz'aria. Buoni progressi! Smettiamolo adesso.
Sopra il metodo di salto aggiunto in precedenza, aggiungere:
-(void) fall: (NSString *) animationID finished: (NSNumber *) finito context: (void *) context [self cleanStance]; [auto normalStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; [UIView setAnimationDuration: 0.2]; self.player.transform = CGAffineTransformMakeTranslation (0, 0); [UIView commitAnimations];
Questo metodo riporta il personaggio allo stato normale e lo riporta nella posizione iniziale.
Ora, cambia il metodo di salto in modo che assomigli:
- (void) jump: (UIImageView *) image [self jumpStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; // Esegue la caduta dopo la fine dell'animazione [UIView setAnimationDelegate: self]; [UIView setAnimationDidStopSelector: @selector (fall: finished: context :)]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Costruisci ed esegui. Premi il pulsante rosso ora e il nostro personaggio dovrebbe saltare e atterrare a terra. Questo è tutto!
Ora dovresti avere una conoscenza di base di alcuni dei più usati come: UIButton, NSLog, UIImageView e come eseguire le animazioni. Un approccio simile può essere applicato per aggiungere altri pulsanti sullo schermo, che possono innescare diversi eventi, in modo che l'oggetto target possa eseguire altre azioni. Non esitate a contattare o seguimi su Twitter @tudorizer.
Accentsconagua