Share
En av de vanligaste åtgärderna som används för en iPhone eller iPad-applikation är touch-händelsen. En händelse är inte användbar om den inte utlöser en meningsfull handling. Denna handledning täcker hur du bifogar en touch-händelse till en anpassad knapp och hur du aktiverar ett objekts animering. I slutändan är resultatet en enkel spelkontroll på skärmen, som kan utvidgas till gränserna för din fantasi.
Öppna Xcode och starta ett nytt projekt. Välj Visa-baserat program. Namn appen "hoppar", så att du enkelt kan följa med.
När du har hämtat den bifogade projektfilen öppnar du mappen "Bilder". Här hittar du alla bildresurser vi behöver för projektet, inklusive tre spritbilder av Ryu från Streetfighter som skapats av PanelMonkey. Du måste kopiera bilderna till projektresursmappen genom att dra dem från mappen i Finder och till panelen "Grupper och filer" i Xcode.
I den Xcode-prompten som visas ska du kolla rutan med etiketten "Kopiera objekt till destinationsgruppens mapp (om det behövs)."
Alla bilder som behövs för projektet ska nu kopieras till samma mapp där projektfilen är. Nu, för att hålla resursmappen ren, låt oss gruppera alla bilder som vi just importerat tillsammans. Välj alla bilder genom att hålla ned kommandot och klicka på varje fil. Nu vänster-klicka eller ctrl + klicka och välj "Grupp" från den resulterande menyn. Namn gruppen vad du än vill. Jag heter min "bilder".
Bygg och kör appen i nuvarande tillstånd. Det ska inte finnas några kompileringsfel och simulatorn ska visa en vanlig grå skärm.
Inside jumpAppDelegate.m, ändra methoden didFinishLaunchingWithOptions genom att lägga till följande rad:
// Tilldela en ny vy, lägg till den här raden: self.viewController = [jumpingViewController alloc]; [fönster addSubview: viewController.view];
Detta kommer att tilldela en ny bildkontrollenhet. Detta steg är nödvändigt eftersom vi inte använder gränssnittsbyggare för att skapa vår syn för oss.
I huvudkontrollens huvudfil (jumpingViewController.h), inuti gränssnittet, förklarar du en ny egenskap genom att lägga till:
UIImageView * spelare;
Sedan, före @end, lägg till:
@property (nonatomic, behåll) UIImageView * spelare;
Detta gör det möjligt för oss att använda "spelare" som en klassegenskap för en bild.
Huvudfilen ska nu se ut så här:
#importera@interface jumpingViewController: UIViewController UIImageView * -spelare; @property (nonatomic, behåll) UIImageView * spelare; @slutet
Vårt nästa steg är att lägga till de grafiska och gränssnittselementen i den här vyn.
Öppna filen jumpingViewController.m och ta bort de befintliga kommenterade metoderna. Lämna de som inte kommenteras.
Överst, efter @ implementation jumpingViewController, lägg till:
@synthesize player;
Uppdatera deallokmetoden till följande:
- (void) dealloc [player release]; [super dealloc];
Sätt sedan in följande metod:
- (void) addButton UIButton * knappen = [[UIButton buttonWithType: UIButtonTypeCustom] initWithFrame: CGRectMake (240, 150, 50, 50)]; // Ställ in knappens bild [knappen setBackgroundImage: [UIImage imageNamed: @ "button.png"] förState: UIControlStateNormal]; // Bifoga en händelse [knapp addTarget: self action: @selector (buttonPressed) forControlEvents: UIControlEventTouchUpInside]; // Lägg till knappen till vyn [self.view addSubview: button];
AddButton-metoden kommer att ringas senare för att du gissade den, lägg till knappen till vyn. Det första att märka är att det här är en anpassad knapp. För det andra är knapptryckt namnet på en metod som kommer att ringas när beröringshändelsen avfyras.
Gå vidare och definiera en tillfällig knapptryckt metod genom att infoga följande:
- (tom) -knappen Tryck på NSLog (@ "Knapptryckt");
NSLog () skickar ett meddelande till konsolen, som kan nås från menyn, under Run (cmd + shift + R).
Vår nya knapp ska visas på skärmen när vyn har laddats. För att detta ska uppstå, lägg till följande metod:
- (void) loadView // Tilldela visningen self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Ange bildens bakgrundsfärg self.view.backgroundColor = [UIColor blackColor]; // Skapa bakgrundsbilden UIImageView * bg = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // Skapa knappen [self addButton];
Den här metoden kommer som standard för visningskontrollerna. Vi lägger till en bakgrundsbild och skickar addButton-meddelandet.
Spara ditt arbete och bygg och kör sedan projektet. Du bör se bakgrundsbilden och den röda knappen. Om konsolfönstret är öppet, ska du trycka på knappen för att visa ett meddelande i konsolen via NSLog ().
För att initiera vårt UIImageView-objekt, lägg till följande i jumpViewController.m, ovanför addButton-metoden:
- (void) initPlayer self.player = [[UIImageView alloc] initWithFrame: CGRectMake (10, 100, 77,0, 94,0)]; [själv normalstans]; // opak för bättre prestanda self.player.opaque = JA; [self.view addSubview: self.player]; - (void) normalStance [self.player setImage: [UIImage imageNamed: @ "ryu.png"]];
Denna kod initierar både ett UIImageView-objekt och lägger till det i huvudvyn. NormalStance-metoden kommer att visa sig vara användbar senare.
Vi skickar nu initPlayer-meddelandet till huvudvyn. Vi gör detta genom att ändra loadView-metoden enligt följande:
- (void) loadView // Tilldela visningen self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Ange bildens bakgrundsfärg self.view.backgroundColor = [UIColor blackColor]; // skapa bakgrundsbilden UIImageView * bg = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // skapa knappen [self addButton]; // starta nu spelaren [self initPlayer];
Bygg och kör. Ett tecken uppträdde på skärmen, till höger?
Nu för den roliga delen. Över addButton, lägg till:
- (void) cleanStance [self.player setImage: nil]; self.player.animationImages = nil; - (void) jumpStance [self cleanStance]; NSArray * imageArray = [[NSArray tilldela] initWithObjects: [UIImage imageNamed: @ "jump1.png"], [UIImage imageNamed: @ "jump2.png"], noll]; self.player.animationImages = imageArray; self.player.animationDuration = 0.3; self.player.contentMode = UIViewContentModeBottomLeft; [self.view addSubview: self.player]; [self.player startAnimating];
Den första metoden som läggs till tar bort alla bilder som är kopplade till spelarobjektet. Vi använder detta för att rengöra de tidigare använda animationsramarna. Den andra metoden lägger till en enkel animering i vårt spelarobjekt. Detta kommer att visas när objektet rör sig.
Efter jumpStance-metoden lägger du till:
- (void) hoppa: (UIImageView *) bild [self jumpStance]; [UIView startAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Denna metod flyttar faktiskt spelarobjektet. Först ändras bildsatsen och flyttas sedan med 40 pixlar vertikalt.
Linjen:
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
Lägger till en lättnadseffekt för animationen, så det ser mer realistiskt ut.
Ändra knappen Knapppressad för att se så här ut:
- (void) buttonPressed [självhopp: self.player];
Bygg och kör. Genom att trycka på knappen nu kommer tecknet hoppa, men kommer att förbli fryst i mitten av luften. Goda framsteg! Låt oss få ner honom nu.
Över den tidigare tillagda hoppmetoden, lägg till:
-(void) fall: (NSString *) animationID slutfört: (NSNumber *) färdigt sammanhang: (void *) sammanhang [self cleanStance]; [själv normalstans]; [UIView startAnimations: nil context: NULL]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; [UIView setAnimationDuration: 0.2]; self.player.transform = CGAffineTransformMakeTranslation (0, 0); [UIView commitAnimations];
Med den här metoden ställs tecknet tillbaka till det normala läget och flyttas tillbaka till startpositionen.
Ändra nu hoppmetoden så att den ser ut:
- (void) hoppa: (UIImageView *) bild [self jumpStance]; [UIView startAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; // Utför höst efter animationen slutade [UIView setAnimationDelegate: self]; [UIView setAnimationDidStopSelector: @selector (fall: finished: context :)]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Bygg och kör. Tryck på den röda knappen nu och vår karaktär ska hoppa och landa tillbaka på marken. Det är allt!
Nu borde du ha en grundläggande förståelse för några av de mest använda klassificerade som: UIButton, NSLog, UIImageView och hur man kör animeringar. Ett liknande tillvägagångssätt kan tillämpas för att lägga till andra knappar på skärmen, vilket kan utlösa olika händelser, så ditt målobjekt kan utföra andra åtgärder. Du är välkommen att kontakta eller följa mig på Twitter @tudorizer.
Accentsconagua