Share
L'une des actions les plus couramment utilisées pour une application iPhone ou iPad est l'événement tactile. Un événement n'est pas utile s'il ne déclenche pas une action significative. Ce tutoriel explique comment associer un événement tactile à un bouton personnalisé et comment déclencher l'animation d'un objet. Au final, le résultat est un simple contrôleur de jeu à l'écran, qui peut être étendu jusqu'aux limites de votre imagination..
Ouvrez Xcode et démarrez un nouveau projet. Sélectionnez une application basée sur les vues. Nommez l'application "Jumping" pour pouvoir suivre facilement.
Après avoir téléchargé le fichier de projet joint, ouvrez le dossier "Images". Vous trouverez ici toutes les ressources d’image dont nous avons besoin pour ce projet, y compris trois images sprites de Ryu de Streetfighter créées par PanelMonkey. Vous devrez copier les images dans le dossier de ressources du projet en les faisant glisser du dossier dans le Finder et dans le volet "Groupes et fichiers" dans Xcode..
Dans l'invite Xcode qui apparaîtra, veillez à cocher la case "Copier les éléments dans le dossier du groupe de destination (si nécessaire)".
Toutes les images nécessaires au projet doivent maintenant être copiées dans le même dossier que le fichier de projet. Maintenant, pour garder le dossier de ressources propre, regroupons toutes les images que nous venons d'importer. Sélectionnez toutes les images en maintenant la commande enfoncée et en cliquant sur chaque fichier. Maintenant, faites un clic gauche ou ctrl + clic et sélectionnez "Groupe" dans le menu résultant. Nommez le groupe comme vous le souhaitez. J'ai nommé le mien "images".
Générez et exécutez l'application dans l'état actuel. Il ne devrait y avoir aucune erreur de compilation et le simulateur devrait afficher un écran clair et gris..
Dans jumpingAppDelegate.m, modifiez la méthode didFinishLaunchingWithOptions en ajoutant la ligne suivante:
// Alloue une nouvelle vue, ajoute cette ligne: self.viewController = [jumpingViewController alloc]; [window addSubview: viewController.view];
Cela allouera un nouveau contrôleur de vue. Cette étape est nécessaire car nous n'utiliserons pas Interface Builder pour créer notre vue pour nous..
Dans le fichier d'en-tête du contrôleur de vue (jumpingViewController.h), dans l'interface, déclarez une nouvelle propriété en ajoutant:
UIImageView * player;
Ensuite, avant @end, ajoutez:
@property (nonatomic, keep) UIImageView * player;
Cela nous permettra d'utiliser "player" comme propriété de classe pour une image..
Le fichier d'en-tête devrait maintenant ressembler à ceci:
#importation@interface jumpingViewController: UIViewController UIImageView * player; @property (nonatomic, keep) UIImageView * player; @fin
Notre prochaine étape consiste à ajouter les éléments graphiques et d'interface à cette vue..
Ouvrez le fichier jumpingViewController.m et supprimez les méthodes commentées existantes. Laisse ceux qui ne sont pas commentés.
Au sommet, après @implementation jumpingViewController, ajoutez:
@synthesize player;
Mettez à jour la méthode dealloc comme suit:
- (vide) dealloc [libération du joueur]; [super dealloc];
Ensuite, insérez la méthode suivante:
- (void) addButton UIButton * button = [[UIButton buttonWithType: UIButtonTypeCustom] initWithFrame: CGRectMake (240, 150, 50, 50)]; // Définit l'image du bouton [button setBackgroundImage: [UIImage imageNamed: @ "button.png"] forState: UIControlStateNormal]; // Attacher un événement [button addTarget: action propre: @selector (buttonPressed) forControlEvents: UIControlEventTouchUpInside]; // Ajoute le bouton à la vue [self.view addSubview: button];
La méthode addButton sera appelée ultérieurement afin, vous l'aurez deviné, d'ajouter le bouton à la vue. La première chose à noter est qu’il s’agit d’un bouton personnalisé. Deuxièmement, buttonPressed est le nom d'une méthode qui sera appelée lors du déclenchement de l'événement tactile..
Continuez et définissez une méthode temporaire ButtonPressed en insérant les éléments suivants:
- (void) buttonPressed NSLog (@ "Bouton enfoncé");
NSLog () enverra un message à la console, accessible depuis le menu, sous Exécuter (cmd + shift + R).
Notre nouveau bouton devrait apparaître à l’écran une fois la vue chargée. Pour ce faire, ajoutez la méthode suivante:
- (void) loadView // Allocation de la vue self.view = [[UIView alloc]] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Définit la couleur d'arrière-plan de la vue self.view.backgroundColor = [UIColor blackColor]; // Crée l'image d'arrière-plan UIImageView * bg = [[UIImageView alloc]] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [auto.view addSubview: bg]; // Crée le bouton [self addButton];
Cette méthode est fournie par défaut pour les contrôleurs de vue. Nous ajoutons une image d'arrière-plan et envoyons le message addButton.
Enregistrez votre travail, puis générez et exécutez le projet. Vous devriez voir l'image de fond et le bouton rouge. Si la fenêtre de la console est ouverte, appuyez sur le bouton pour afficher un message dans la console via NSLog ().
Pour initialiser notre objet UIImageView, ajoutez ce qui suit dans la méthode jumpingViewController.m, ci-dessus, addButton:
- (void) initPlayer self.player = [[UIImageView alloc]] initWithFrame: CGRectMake (10, 100, 77.0, 94.0)]; [auto normalStance]; // opaque pour de meilleures performances self.player.opaque = YES; [self.view addSubview: self.player]; - (void) normalStance [self.player setImage: [UIImage imageNamed: @ "ryu.png"]];
Ce code initialisera un objet UIImageView et l'ajoutera à la vue principale. La méthode normalStance s'avérera utile plus tard.
Nous allons maintenant envoyer le message initPlayer à la vue principale. Nous faisons cela en modifiant la méthode loadView comme suit:
- (void) loadView // Allocation de la vue self.view = [[UIView alloc]] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Définit la couleur d'arrière-plan de la vue self.view.backgroundColor = [UIColor blackColor]; // crée l'image d'arrière-plan UIImageView * bg = [[UIImageView alloc]] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [auto.view addSubview: bg]; // crée le bouton [self addButton]; // maintenant initialise le lecteur [self initPlayer];
Construire et exécuter. Un personnage est apparu à l'écran, à droite?
Maintenant pour la partie amusante. Au-dessus de addButton, ajoutez:
- (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];
La première méthode ajoutée supprime toutes les images associées à l'objet joueur. Nous l'utilisons pour nettoyer les images d'animation précédemment utilisées. La seconde méthode ajoute une animation simple à notre objet player. Cela apparaîtra pendant que l'objet se déplace.
Après la méthode jumpStance, ajoutez:
- (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];
Cette méthode déplace en réalité l'objet joueur. D'abord, il change le jeu d'images, puis le déplace de 40 pixels verticalement.
La ligne:
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
Ajoute un effet d'accélération à l'animation, de sorte qu'elle semble plus réaliste.
Changez la méthode buttonPressed pour qu'elle ressemble à ceci:
- (void) buttonPressed [self jump: self.player];
Construire et exécuter. En appuyant sur le bouton maintenant, le personnage sautera mais restera figé dans les airs. Bon progrès! Descendons-le maintenant.
Au-dessus de la méthode de saut précédemment ajoutée, ajoutez:
-(void) fall: (NSString *) animationID terminée: (NSNumber *) terminé contexte: (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];
Cette méthode remet le caractère à l'état normal et le ramène à la position initiale..
Maintenant, changez la méthode de saut pour ressembler à:
- (void) jump: (UIImageView *) image [self jumpStance]; [UIView beginAnimations: nil context: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; // Exécute fall après la fin de l'animation [UIView setAnimationDelegate: self]; [UIView setAnimationDidStopSelector: @selector (automne: terminé: contexte :)]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Construire et exécuter. Appuyez sur le bouton rouge maintenant et notre personnage devrait sauter et atterrir sur le sol. C'est tout!
Vous devez maintenant avoir une compréhension de base des classes les plus utilisées, telles que: UIButton, NSLog, UIImageView et comment exécuter des animations. Une approche similaire peut être appliquée pour ajouter d'autres boutons à l'écran, pouvant déclencher différents événements, afin que votre cible puisse effectuer d'autres actions. N'hésitez pas à me contacter ou à me suivre sur Twitter @tudorizer.
Accentsconagua