Share
Een van de meest voorkomende acties die worden gebruikt voor een iPhone- of iPad-toepassing, is de aanraakgebeurtenis. Een evenement is niet nuttig als het geen zinvolle actie teweegbrengt. Deze tutorial behandelt hoe een touch-gebeurtenis aan een aangepaste knop wordt gekoppeld en hoe de animatie van een object kan worden geactiveerd. Uiteindelijk is het resultaat een eenvoudige gamecontroller op het scherm die kan worden uitgebreid tot de verbeelding.
Open Xcode en start een nieuw project. Selecteer View-Based Application. Noem de app "springen", zodat je gemakkelijk kunt volgen.
Na het downloaden van het bijgevoegde projectbestand, opent u de map "Afbeeldingen". Hier vindt u alle beeldbronnen die we nodig hebben voor dit project, inclusief drie sprite-afbeeldingen van Ryu van Streetfighter zoals gemaakt door PanelMonkey. U moet de afbeeldingen naar de projectresource-map kopiëren door ze vanuit de map in Finder naar het venster "Groepen en bestanden" in Xcode te slepen.
In de Xcode-prompt die wordt weergegeven, moet u het selectievakje "Items in de map van de bestemmingsgroep kopiëren (indien nodig)" aanvinken.
Alle afbeeldingen die nodig zijn voor het project moeten nu worden gekopieerd naar dezelfde map als het projectbestand. Laten we de afbeeldingen die we net hebben geïmporteerd, groeperen om de bronmap schoon te houden. Selecteer alle afbeeldingen door de opdracht ingedrukt te houden en op elk bestand te klikken. Klik nu met de linkermuisknop of Ctrl + klik en selecteer "Groep" in het resulterende menu. Noem de groep wat je maar wilt. Ik heb mijn "afbeeldingen" genoemd.
Bouw en voer de app uit in de huidige staat. Er mogen geen compileerfouten zijn en de simulator moet een gewoon, grijs scherm weergeven.
Binnen jumpAppDelegate.m, pas de didFinishLaunchingWithOptions-methode aan door de volgende regel toe te voegen:
// Wijs een nieuwe weergave toe, voeg deze regel toe: self.viewController = [jumpingViewController alloc]; [window addSubview: viewController.view];
Hiermee wordt een nieuwe weergaveregelaar toegewezen. Deze stap is nodig omdat we Interface Builder niet gebruiken om ons beeld voor ons te creëren.
Kopieer in het view-controller-headerbestand (jumpingViewController.h) binnen de interface een nieuwe eigenschap door het volgende toe te voegen:
UIImageView * -speler;
Voeg vervolgens vóór @end het volgende toe:
@property (nonatomic, retain) UIImageView * -speler;
Dit stelt ons in staat om "speler" te gebruiken als een klasseneigenschap voor een afbeelding.
Het header-bestand zou er nu als volgt uit moeten zien:
#importeren@interface springenViewController: UIViewController UIImageView * -speler; @property (nonatomic, retain) UIImageView * -speler; @einde
Onze volgende stap is om de grafische elementen en interface-elementen toe te voegen aan deze weergave.
Open het jumpingViewController.m-bestand en verwijder de bestaande methoden met commentaar. Laat degenen die niet zijn becommentarieerd.
Aan de top, na @implementation jumpingViewController, voeg je toe:
@synthesize speler;
Werk de dealloc-methode bij naar het volgende:
- (void) dealloc [player release]; [super dealloc];
Voer vervolgens de volgende methode in:
- (void) addButton UIButton * button = [[UIButton buttonWithType: UIButtonTypeCustom] initWithFrame: CGRectMake (240, 150, 50, 50)]; // Stel de afbeelding van de knop in [button setBackgroundImage: [UIImage imageNamed: @ "button.png"] forState: UIControlStateNormal]; // Voeg een evenement toe [button addTarget: self action: @selector (buttonPressed) forControlEvents: UIControlEventTouchUpInside]; // Voeg de knop toe aan de weergave [self.view addSubview: knop];
De methode addButton wordt later gebeld om, u raadt het al, de knop aan de weergave toe te voegen. Het eerste dat opvalt is dat dit een aangepaste knop is. Ten tweede is buttonPressed de naam van een methode die wordt aangeroepen wanneer de aanraakgebeurtenis wordt afgevuurd.
Ga je gang en definieer een tijdelijke buttonPressed-methode door het volgende in te voegen:
- (lege) knop ingedrukt NSLog (@ "Knop ingedrukt");
NSLog () stuurt een bericht naar de console, die toegankelijk is via het menu, onder Uitvoeren (cmd + shift + R).
Onze nieuwe knop zou op het scherm moeten verschijnen nadat het beeld is geladen. Voeg de volgende methode toe om dit te laten gebeuren:
- (void) loadView // De weergave toewijzen self.view = [[UIView-toewijzing] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Stel de achtergrondkleur van de weergave in self.view.backgroundColor = [UIColor blackColor]; // Maak de achtergrondafbeelding UIImageView * bg = [[UIImageView-toewijzing] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // Maak de knop [self addButton];
Deze methode is standaard voor view controllers. We voegen een achtergrondafbeelding toe en verzenden het bericht addButton.
Sla uw werk op en bouw en run vervolgens het project. Je zou de achtergrondafbeelding en de rode knop moeten zien. Als het consolevenster open is, zou het aanraken van de knop een bericht in de console moeten weergeven via NSLog ().
Om ons UIImageView-object te initialiseren, voegt u het volgende toe in jumpingViewController.m, boven de methode addButton:
- (void) initPlayer self.player = [[UIImageView alloc] initWithFrame: CGRectMake (10, 100, 77.0, 94.0)]; [zelfnormaliteit]; // ondoorzichtig voor betere prestaties self.player.opaque = YES; [self.view addSubview: self.player]; - (void) normalStance [self.player setImage: [UIImage imageNamed: @ "ryu.png"]];
Deze code initialiseert een UIImageView-object en voegt dit toe aan de hoofdweergave. De normaleStance-methode zal later nuttig blijken te zijn.
We sturen nu het initPlayer-bericht naar de hoofdweergave. We doen dit door de loadView-methode als volgt aan te passen:
- (void) loadView // De weergave toewijzen self.view = [[UIView-toewijzing] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Stel de achtergrondkleur van de weergave in self.view.backgroundColor = [UIColor blackColor]; // maak de achtergrondafbeelding UIImageView * bg = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // maak de knop [self addButton]; // initialiseer nu de speler [self initPlayer];
Bouw en ren. Er verscheen een personage op het scherm?
Nu voor het leuke gedeelte. Voeg boven addButton toe:
- (void) cleanStance [self.player setImage: nil]; self.player.animationImages = nil; - (ongeldig) jumpStance [self cleanStance]; NSArray * imageArray = [[NSArray alloc] initWithObjects: [UIImage imageNamed: @ "jump1.png"], [UIImage imageNamed: @ "jump2.png"], nihil]; self.player.animationImages = imageArray; self.player.animationDuration = 0.3; self.player.contentMode = UIViewContentModeBottomLeft; [self.view addSubview: self.player]; [self.player startanimatie];
De eerste methode toegevoegd verwijdert alle afbeeldingen die aan het spelerobject zijn gekoppeld. We gebruiken dit om de eerder gebruikte animatieframes te reinigen. De tweede methode voegt een eenvoudige animatie toe aan ons spelerobject. Dit zal verschijnen terwijl het object in beweging is.
Voeg na de jumpStance-methode toe:
- (void) jump: (UIImageView *) afbeelding [self jumpStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Met deze methode wordt het spelerobject feitelijk verplaatst. Eerst wordt de afbeeldingsset gewijzigd en vervolgens 40 pixels verticaal verplaatst.
De lijn:
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
Voegt een versnellend effect toe aan de animatie, zodat deze er realistischer uitziet.
Wijzig de buttonPressed-methode om er als volgt uit te zien:
- (lege) knop ingedrukt [zelfspringen: self.player];
Bouw en ren. Door nu op de knop te drukken, springt het personage, maar blijft het in de lucht bevroren. Goede voortgang! Laten we hem nu naar beneden halen.
Voeg boven de eerder toegevoegde springmethode toe:
-(void) fall: (NSString *) animationID finished: (NSNumber *) finished context: (void *) context [self cleanStance]; [zelfnormaliteit]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; [UIView setAnimationDuration: 0.2]; self.player.transform = CGAffineTransformMakeTranslation (0, 0); [UIView commitAnimations];
Met deze methode wordt het teken teruggezet naar de normale status en wordt het teruggezet naar de beginpositie.
Wijzig nu de springmethode om er als volgt uit te zien:
- (void) jump: (UIImageView *) afbeelding [self jumpStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; // Uitvoeren na afloop van de animatie [UIView setAnimationDelegate: self]; [UIView setAnimationDidStopSelector: @selector (fall: finished: context :)]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Bouw en ren. Druk nu op de rode knop en ons karakter moet springen en weer op de grond landen. Dat is het!
Nu zou je een basiskennis moeten hebben van enkele van de meest gebruikte classificaties zoals: UIButton, NSLog, UIImageView en hoe animaties uit te voeren. Een vergelijkbare aanpak kan worden toegepast om andere knoppen op het scherm toe te voegen, die verschillende gebeurtenissen kunnen activeren, zodat uw doelobject andere acties kan uitvoeren. Neem gerust contact met me op of volg me op Twitter @tudorizer.
Accentsconagua