iPhone SDK Informationen zu Touch-Events und grundlegenden Spielanimationen

Eine der häufigsten Aktionen für iPhone- oder iPad-Anwendungen ist das Touch-Ereignis. Ein Ereignis ist nicht nützlich, wenn es keine sinnvolle Aktion auslöst. In diesem Lernprogramm wird beschrieben, wie ein Berührungsereignis an eine benutzerdefinierte Schaltfläche angehängt wird und wie die Animation eines Objekts ausgelöst wird. Das Ergebnis ist ein einfacher On-Screen-Game-Controller, der bis an die Grenzen Ihrer Vorstellungskraft erweitert werden kann.

Schritt 1: Erstellen Sie ein neues Projekt

Öffnen Sie Xcode und starten Sie ein neues Projekt. Wählen Sie Ansichtsbasierte Anwendung. Nennen Sie die App "Springen", damit Sie problemlos mitverfolgen können.

Schritt 2: Importieren Sie die Projektressourcen

Öffnen Sie nach dem Herunterladen der angehängten Projektdatei den Ordner "Images". Hier finden Sie alle Bildressourcen, die wir für dieses Projekt benötigen, einschließlich drei Sprite-Bildern von Ryu von Streetfighter, die von PanelMonkey erstellt wurden. Sie müssen die Bilder in den Projektressourcenordner kopieren, indem Sie sie aus dem Ordner im Finder in den Bereich "Groups & Files" in Xcode ziehen.

Aktivieren Sie in der daraufhin angezeigten Xcode-Eingabeaufforderung das Kontrollkästchen "Elemente in den Zielgruppenordner kopieren (falls erforderlich)".

Alle für das Projekt benötigten Bilder sollten jetzt in den Ordner kopiert werden, in dem sich die Projektdatei befindet. Um den Ressourcenordner sauber zu halten, gruppieren wir jetzt alle Bilder, die wir gerade importiert haben. Wählen Sie alle Bilder aus, indem Sie den Befehl gedrückt halten und auf jede Datei klicken. Klicken Sie nun mit der linken Maustaste oder bei gedrückter Strg-Taste und wählen Sie im daraufhin angezeigten Menü "Gruppieren". Benennen Sie die Gruppe, wie Sie möchten. Ich habe meine "Bilder" genannt.

Erstellen Sie die App und führen Sie sie im aktuellen Status aus. Es sollten keine Kompilierungsfehler auftreten und der Simulator sollte einen einfachen, grauen Bildschirm anzeigen.

Schritt 3: Ändern Sie jumpingAppDelegate.m

Ändern Sie im Feld jumpingAppDelegate.m die didFinishLaunchingWithOptions-Methode, indem Sie die folgende Zeile hinzufügen:

 // Eine neue Ansicht zuordnen und diese Zeile hinzufügen: self.viewController = [jumpingViewController allocat]; [Fenster addSubview: viewController.view];

Dadurch wird ein neuer View-Controller zugewiesen. Dieser Schritt ist notwendig, da wir den Interface Builder nicht verwenden werden, um unsere Ansicht für uns zu erstellen.

Schritt 4: Ändern Sie jumpingViewController.h

Deklarieren Sie in der Header-Datei des View-Controllers (jumpingViewController.h) in der Schnittstelle eine neue Eigenschaft, indem Sie Folgendes hinzufügen:

UIImageView * Spieler;

Fügen Sie dann vor @Ende Folgendes hinzu:

@ property (nonatomic, keep) UIImageView * player;

Dadurch können wir "player" als Klasseneigenschaft für ein Bild verwenden.

Die Header-Datei sollte jetzt so aussehen:

#einführen  @interface jumpingViewController: UIViewController UIImageView * player;  @ property (nichtatomisch, beibehalten) UIImageView * player; @Ende

Schritt 5: Ändern Sie jumpingViewController.m

Im nächsten Schritt fügen Sie der Ansicht die grafischen Elemente und Oberflächenelemente hinzu.

Öffnen Sie die Datei jumpingViewController.m und löschen Sie die vorhandenen kommentierten Methoden. Lassen Sie diejenigen, die nicht kommentiert sind.

Fügen Sie oben nach @implementation jumpingViewController Folgendes hinzu:

@ Spieler synthetisieren;

Aktualisieren Sie die Dealloc-Methode wie folgt:

- (void) Dealloc [Spielerfreigabe]; [Super Dealloc]; 

Als nächstes fügen Sie die folgende Methode ein:

- (void) addButton UIButton * button = [[UIButton buttonWithType: UIButtonTypeCustom] initWithFrame: CGRectMake (240, 150, 50, 50)]; // Das Bild der Schaltfläche setzen [Schaltfläche setBackgroundImage: [UIImage imageNamed: @ "button.png"] forState: UIControlStateNormal]; // Ereignis anhängen [button addTarget: self action: @selector (buttonPressed) forControlEvents: UIControlEventTouchUpInside]; // Füge die Schaltfläche zur Ansicht hinzu [self.view addSubview: button]; 

Die addButton-Methode wird später aufgerufen, um die Schaltfläche zur Ansicht hinzuzufügen. Das erste, was zu bemerken ist, ist, dass dies eine benutzerdefinierte Schaltfläche ist. Zweitens ist buttonPressed der Name einer Methode, die aufgerufen wird, wenn das Berührungsereignis ausgelöst wird.

Fahren Sie fort und definieren Sie eine temporäre buttonPressed-Methode, indem Sie Folgendes einfügen:

- (void) buttonPressed NSLog (@ "Taste gedrückt"); 

NSLog () sendet eine Nachricht an die Konsole, auf die Sie über das Menü unter Ausführen (cmd + shift + R) zugreifen können..

Die neue Schaltfläche sollte auf dem Bildschirm erscheinen, nachdem die Ansicht geladen wurde. Fügen Sie dazu die folgende Methode hinzu:

- (void) loadView // Weisen Sie die Ansicht zu. self.view = [[UIView-Zuordnung] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Hintergrundfarbe der Ansicht setzen self.view.backgroundColor = [UIColor blackColor]; // Hintergrundbild erstellen UIImageView * bg = [[UIImageView-Zuordnung] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // Erzeuge die Schaltfläche [self addButton]; 

Diese Methode ist standardmäßig für Ansichtscontroller vorgesehen. Wir fügen ein Hintergrundbild hinzu und senden die addButton-Nachricht.

Speichern Sie Ihre Arbeit und erstellen Sie das Projekt, und führen Sie es aus. Sie sollten das Hintergrundbild und die rote Schaltfläche sehen. Wenn das Konsolenfenster geöffnet ist, sollte durch Berühren der Schaltfläche über NSLog () eine Meldung in der Konsole angezeigt werden..

Schritt 6: Hinzufügen eines Zeichens zum Bildschirm

Um unser UIImageView-Objekt zu initialisieren, fügen Sie über die addButton-Methode in JumpingViewController.m Folgendes hinzu:

- (void) initPlayer self.player = [[UIImageView-Zuordnung] initWithFrame: CGRectMake (10, 100, 77.0, 94.0)]; [self normalStance]; // undurchsichtig für eine bessere Leistung self.player.opaque = YES; [self.view addSubview: self.player];  - (void) normalStance [self.player setImage: [UIImage imageNamed: @ "ryu.png"]]; 

Dieser Code initialisiert ein UIImageView-Objekt und fügt es der Hauptansicht hinzu. Die normalStance-Methode wird sich später als nützlich herausstellen.

Wir senden nun die initPlayer-Nachricht an die Hauptansicht. Wir tun dies, indem wir die loadView-Methode wie folgt ändern:

- (void) loadView // Weisen Sie die Ansicht zu. self.view = [[UIView-Zuordnung] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Hintergrundfarbe der Ansicht setzen self.view.backgroundColor = [UIColor blackColor]; // Das Hintergrundbild erstellen UIImageView * bg = [[UIImageView-Zuordnung] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // die Schaltfläche erstellen [self addButton]; // Jetzt den Player initialisieren [self initPlayer]; 

Bauen und ausführen Ein Charakter erschien auf dem Bildschirm, richtig?

Schritt 7: Den Charakter springen lassen

Nun zum Spaß. Über addButton fügen Sie hinzu:

- (void) cleanStance [self.player setImage: nil]; self.player.animationImages = nil;  - (void) jumpStance [self cleanStance]; NSArray * imageArray = [[NSArray-Zuordnung] 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]; 

Die erste hinzugefügte Methode entfernt alle mit dem Player-Objekt verknüpften Bilder. Wir verwenden dies, um die zuvor verwendeten Animationsbilder zu säubern. Die zweite Methode fügt unserem Player-Objekt eine einfache Animation hinzu. Dies wird angezeigt, wenn sich das Objekt bewegt.

Fügen Sie nach der jumpStance-Methode Folgendes hinzu:

- (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]; 

Diese Methode verschiebt tatsächlich das Spielerobjekt. Zuerst wird der Bildsatz geändert und dann vertikal um 40 Pixel verschoben.

Die Linie:

[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];

Fügt der Animation einen Beschleunigungseffekt hinzu, sodass sie realistischer wirkt.

Ändern Sie die buttonPressed-Methode wie folgt:

- (void) buttonPressed [self jump: self.player]; 

Bauen und ausführen Wenn Sie jetzt die Taste drücken, springt der Charakter, bleibt jedoch in der Luft eingefroren. Gute Fortschritte! Lass uns ihn jetzt runterbringen.

Schritt 8: Finalisierung der Charakteranimation

Fügen Sie über der zuvor hinzugefügten Sprungmethode Folgendes hinzu:

-(void) fall: (NSString *) animationID beendet: (NSNumber *) beendete Kontext: (void *) context [self cleanStance]; [self normalStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; [UIView setAnimationDuration: 0.2]; self.player.transform = CGAffineTransformMakeTranslation (0, 0); [UIView commitAnimations]; 

Diese Methode setzt das Zeichen in den Normalzustand zurück und verschiebt es in die Ausgangsposition.

Ändern Sie nun die Sprungmethode wie folgt:

- (void) jump: (UIImageView *) image [self jumpStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; // Execute fall nach dem Ende der Animation [UIView setAnimationDelegate: self]; [UIView setAnimationDidStopSelector: @selector (Fall: beendet: Kontext :)]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations]; 

Bauen und ausführen Drücke jetzt den roten Knopf und unser Charakter sollte springen und wieder auf dem Boden landen. Das ist es!

Fazit

Nun sollten Sie ein grundlegendes Verständnis für einige der am häufigsten verwendeten Klassen wie UIButton, NSLog, UIImageView und das Ausführen von Animationen besitzen. Ein ähnlicher Ansatz kann zum Hinzufügen weiterer Schaltflächen auf dem Bildschirm angewendet werden, die verschiedene Ereignisse auslösen können, sodass Ihr Zielobjekt andere Aktionen ausführen kann. Fühlen Sie sich frei, mich auf Twitter @tudorizer zu kontaktieren oder mir zu folgen.