Un jeu de casse briques

Lancez Xcode, définissez un nouveau projet de type Single View Application et donnez-lui le nom « pong » (C'est moins long que « casse-briques » mais tout aussi parlant pour notre application.).

Ce jeu va utiliser plusieurs éléments graphiques :

• une image d'arrière-plan de 320x480 pixels ;
  
• une image PNG d'une brique de 70x15 pixels ;
  
• une image PNG d'une raquette de 70x15 pixels ;
  
• une image PNG d'une balle de 16x16 pixels.
  

L'arrière-plan est une quelconque image enregistrée au format JPG ou PNG et de dimensions bien précises : 320x480 pixels.
Les briques, la raquette et la balle sont au format PNG. Vous pouvez créer vous-mêmes vos images, mais au cas où, vous pouvez télécharger celles que j'ai utilisées dans ce chapitre.

Pour accéder facilement à ces éléments graphiques, vous allez les placer dans les ressources de l'application. Cliquez du bouton droit sur la première icône du volet de navigation et sélectionnez New group dans le menu contextuel. Renommez le nouveau dossier « Resources ». Maintenez le bouton gauche de la souris enfoncé et glissez-déposez les fichiers background.png, brique.png, raquette.png et balle.png depuis le Finder dans le dossier Resources de l'application. Au relâchement du bouton gauche de la souris, une boîte de dialogue est affichée. Assurez-vous que la case Copy items into destination group's folder (if needed) est cochée, puis cliquez sur Finish. Votre arborescence devrait ressembler à la figure suivante.



Vous allez maintenant créer l'interface du jeu avec Interface Builder.

Cliquez sur MainStoryboard.storyboard dans le volet de navigation et affichez si nécessaire le volet des utilitaires en cliquant sur l'icône Hide or Show the Utilities dans la barre d'outils. Vous allez maintenant déposer neuf contrôles UIImageView (oui, vous avez bien lu !) depuis la bibliothèque d'objets sur la vue de l'application.



Eh bien oui, tous ces objets sont nécessaires : sept vont représenter les briques, un la raquette et le dernier la balle.

Je vais vous montrer comment procéder pour un de ces objets, une brique en l'occurrence. En utilisant la même technique, vous n'aurez aucun mal à définir et positionner les autres objets. Pour ajouter une brique, suivez les étapes ci-après.

1. Glissez-déposez un contrôle UIImageView sur la feuille de l'application.
   
2. Cliquez sur l'icône Show the Attributes inspector dans le volet des utilitaires. Déroulez la liste Image et choisissez « brique.png ».
   
3. Cliquez sur l'icône Show the Size inspector et modifiez les dimensions de la brique : « 70 » dans la case Width et « 15 » dans la case Height (c'est la taille de notre brique), comme indiqué à la figure suivante.
   
4. Déplacez la brique dans la partie supérieure de la vue.
   

Ajoutez puis déplacez les huit objets restant pour obtenir quelque chose ressemblant à la figure suivante.





Pour en terminer avec l'interface de l'application, vous allez ajouter un contrôle Label. Ce contrôle sera utilisé pour afficher des informations textuelles du type « 3, 2, 1, partez… » lorsque le joueur perdra la balle.

Glissez-déposez un contrôle Label de la bibliothèque d'objets sur la vue. Redimensionnez ce contrôle pour qu'il occupe les trois quarts de la vue. Dans l'inspecteur des attributs, supprimez le contenu de la case Text pour que le Label n'affiche rien par défaut et choisissez une police System de 50 points, comme à la figure suivante.

Liaison des contrôles au code

Pour pouvoir interagir avec ces contrôles, vous devez créer des outlets. Contrôle-glissez-déposez tour à tour chacun des objets de la vue sur le fichier d'en-têtes et créez les outlets brique1 à brique7, balle, raquette et stop3s (pour le contrôle Label). Une fois tous les outlets créés, le fichier d'en-têtes devrait ressembler à ceci :

Code : Objective-C

Définition de l'arrière-plan de l'application

Vous allez maintenant commencer à écrire le code de l'application. La première étape va consister à définir l'image d'arrière-plan. Cliquez sur ViewController.m dans le volet de navigation et insérez l'instruction suivante au début de la méthode viewDidLoad :

Code : Objective-C

Cette instruction a déjà été rencontrée à plusieurs reprises. Elle affecte une image d'arrière-plan (méthode backgroundColor) à la vue courante (self.view) en utilisant une image dans les ressources ([[UIColor alloc] initWithPatternImage:[UIImage imageNamed:). L'image utilisée a pour nom « background.png ». Libre à vous d'utiliser une quelconque autre image, pourvu que sa taille soit égale à 320x480 pixels.

Vous pouvez lancer l'application. Vous l'avez bien mérité. La figure suivante représente ce que vous devriez obtenir.

Déplacement de la balle

Avant de pouvoir jouer, plusieurs étapes sont nécessaires. Dans un premier temps, vous allez donner vie à la balle. Pour cela, vous allez devoir mettre en place un timer. Mais avant, retournez dans le fichier d'en-têtes et définissez la variable d'instance vitesseBalle comme suit :

Code : Objective-C

La variable vitesseBalle est une structure CGPoint. Elle consiste en deux flottants qui définissent des coordonnées. Dans notre cas, nous utiliserons cette variable pour calculer l'endroit où la balle doit être affichée. La figure suivante vous montre ce que dit la documentation Apple sur la structure CGPoint.



Retournez dans le fichier ViewController.m et définissez la méthode boucleJeu comme suit :

Code : Objective-C

Examinons les instructions utilisées dans cette méthode.

La ligne 3 calcule les prochaines coordonnées de la balle (balle.center). Ces coordonnées sont obtenues en ajoutant aux coordonnées actuelles (balle.center.x et balle.center.y) le déplacement désiré (vitesseBalle.x et vitesseBalle.y). Tout ce petit monde est passé à une instruction CGPointMake, qui retourne les nouvelles coordonnées de la balle (CHPointMake(…)). Pour que la balle se déplace, il suffit d'affecter le résultat de l'instruction CGPointMake à la propriété center de l'objet balle, c'est-à-dire au centre de la balle :

Code : Objective-C

L'instruction suivante s'intéresse à l'abscisse (la position horizontale) de la balle qui, rappelons-le, vient d'être calculée. Si cette abscisse est supérieure à la largeur de la vue (balle.center.x > self.view.bounds.size.width) ou si elle est négative (|| balle.center.x < 0), il suffit d'inverser la direction en X de la balle pour qu'elle ne sorte pas de la vue (vitesseBalle.x = -vitesseBalle.x;). Ce qui donne :

Code : Objective-C

Examinez l'instruction suivante. Je suis sûr que vous y voyez quelques similitudes :

Code : Objective-C

Ici, c'est l'ordonnée (la position verticale) qui est examinée. Si elle dépasse la hauteur de la vue (balle.center.y > self.view.bounds.size.height) ou si elle est négative (|| balle.center.y < 0), la direction en Y est inversée pour que la balle ne sorte pas de la vue (vitesseBalle.y = -vitesseBalle.y).



Effectivement. Nous allons immédiatement réparer cette lacune en ajoutant l'instruction suivante dans la méthode viewDidLoad :

Code : Objective-C

Cette instruction définit l'objet CGPoint vitesseBalle et affecte les valeurs 10 et 15 à ses composantes X et Y. Par la suite, nous utiliserons cet objet pour modifier les coordonnées de la balle… et donc la déplacer.

Je vous sens impatients de lancer l'application pour voir la balle se déplacer dans la vue. Je ne vais pas vous priver de ce plaisir. Cliquez sur Run et admirez… admirez… cette belle balle immobile au milieu de la vue !



Réfléchissez un peu. Vous avez défini une méthode pour animer la balle, mais croyez-vous que cette méthode va s'exécuter toute seule ? Bien sûr que non, il faut le lui demander en mettant en place un timer. Ajoutez l'instruction suivante dans la méthode viewDidLoad :

Code : Objective-C

Cette instruction définit l'objet timer1 (timer1 =) en utilisant un message Objective-C. Le message dit en substance ceci :

• le code du timer doit être exécuté toutes les 0,05 seconde, soit 20 fois par seconde : [NSTimer scheduledTimerWithTimeInterval:0.05 ;
  
• la méthode à exécuter se trouve dans la classe courante, c'est-à-dire celle du contrôleur de vue : target:self ;
  
• la méthode à exécuter a pour nom boucleJeu : selector:@selector(boucleJeu) ;
  
• aucune information complémentaire n'est passée à cette méthode : userInfo:nil ;
  
• la méthode doit se répéter indéfiniment (ou du moins jusqu'à ce qu'il soit désactivé) : repeats:YES].
  

Pensez également à déclarer l'objet timer dans le fichier ViewController.h :

Code : Objective-C

Maintenant, vous pouvez lancer l'application et voir (oh merveille !) la balle se déplacer et rebondir sur les coins de l'écran (et votre doigt sur le device).

Déplacement de la raquette

Vous allez maintenant donner vie à la raquette et lui demander de suivre la souris dans le simulateur.

Définissez la méthode suivante dans le fichier ViewController.m (par exemple, juste après la méthode boucleJeu) :

Code : Objective-C

Examinons les instructions contenues dans cette méthode.
À la ligne 3, l'objet touch de classe UITouch est défini (UITouch *touch). Il est initialisé avec toutes les actions toucher de l'utilisateur (= [[event allTouches] anyObject];) :

Code : Objective-C

La ligne 4 définit l'objet location de classe CGPoint (CGPoint location) et l'initialise avec la position du toucher (= [touch locationInView:touch.view];) :

Code : Objective-C

La variable location contient la position du doigt de l'utilisateur dans la vue. L'instruction de la ligne 5 affecte l'abscisse de cette position à celle de la raquette (raquette.center = CGPointMake(location.x, …). L'ordonnée de la raquette, quant à elle, ne doit pas suivre le doigt de l'utilisateur, mais rester sur une ligne horizontale (raquette.center.y) :

Code : Objective-C

Lancez l'application en cliquant sur Run. La raquette doit maintenant suivre les mouvements de la souris, bouton gauche enfoncé. Quelle réussite !

Lisez vite la suite, vous allez découvrir comment détecter des collisions entre deux objets. Cela vous permettra de faire rebondir la balle sur la raquette et d'effacer les briques sur lesquelles rebondit la balle.

Détection des collisions

Comme nous l'avons vu précédemment, il est possible de connaître les coordonnées d'un objet en utilisant les propriétés center.x et center.y de cet objet. Par exemple, les coordonnées de la balle sont obtenues avec les expressions balle.center.x et balle.center.y.

Est-ce que vous savez comment détecter la collision entre deux objets ? En testant leurs coordonnées center.x et center.y bien entendu ! Encore plus fort : vous pouvez utiliser la méthode CGRectIntersectsRect pour tester la collision entre deux objets.

Voyons comment tester le contact de la balle sur la première brique. Ajoutez le test suivant dans la méthode boucleJeu :

Code : Objective-C

La première ligne teste la collision (CGRectIntersectsRect) entre la balle (balle.frame) et la première brique (brique1.frame), dans le cas où cette brique est toujours affichée (brique1.hidden == NO) :

Code : Objective-C

La troisième ligne cache la première brique :

Code : Objective-C

Quant à la quatrième ligne, elle inverse le sens de progression vertical de la balle :

Code : Objective-C

La brique 1 n'est pas la seule présente dans la vue. Vous devez donc écrire un code équivalent pour les briques 2 à 7 :

Code : Objective-C



Exécutez l'application. Sous vos yeux ébahis, les briques disparaissent les unes après les autres !
Il nous reste encore à détecter la collision entre la balle et la raquette et à réagir en conséquence.

Ajoutez le test suivant dans la méthode boucleJeu :

Code : Objective-C

La ligne 1 teste la collision entre la balle (balle.frame) et la raquette (raquette.frame) :

Code : Objective-C

La ligne 3 teste si la balle se trouve plus bas que la raquette :

Code : Objective-C

Dans ce cas, il convient d'inverser le sens de progression verticale de la balle pour qu'elle ne sorte pas de la vue :

Code : Objective-C



Exécutez l'application. Ça y est, la balle rebondit sur la raquette. Bravo !
Il est temps de passer à l'étape suivante.

Musique de fond et bruits événementiels

Pour ajouter une musique de fond à l'application, vous utiliserez la technique étudiée dans la section « Jouer des éléments audio » du chapitre consacré au son. Reportez-vous à cette section pour avoir des renseignements détaillés sur sa mise en œuvre.

Une musique de fond, c'est bien, mais ce serait vraiment mieux si la balle produisait un bruit de balle lorsqu'elle frappe sur la raquette ou sur une brique. Pour cela, vous allez devoir utiliser un objet SystemSoundID.

Télécharger le son

Ajoutez un son au format CAF dans les ressources de l'application.
Cliquez sur le fichier ViewController.h dans le volet de navigation et ajoutez l'instruction suivante dans la définition de l'interface :

Code : Objective-C

Rendez-vous dans le fichier ViewController.m et ajoutez cette instruction dans la méthode viewDidLoad :

Code : Objective-C

Cette instruction met en relation le fichier audio à jouer (« pong.caf » dans cet exemple) et un objet SystemSoundID qui sera utilisé pour jouer le son (bruit dans cet exemple).

Maintenant, vous devez encore ajouter quelques instructions pour jouer le son « pong.caf » lorsque la balle entre en contact avec la raquette ou avec une brique.
Repérez le test de collision entre la balle et la raquette dans la méthode boucleJeu et complétez-le comme suit :

Code : Objective-C

La ligne 6 joue le son « bruit » via la méthode AudioServicesPlaySystemSound.

Vous allez maintenant ajouter la même instruction dans les tests de collision entre la balle et chacune des briques. Voici par exemple à quoi doit ressembler le test de collision entre la balle et la brique 1 :

Code : Objective-C

Insérez cette même instruction dans les six autres tests de collision.

Perte de la balle

Je ne sais pas si vous avez remarqué, mais ce jeu présente un (petit) défaut : si le joueur n'arrive pas à rattraper la balle avec la raquette, celle-ci rebondit sur la partie inférieure de l'écran. Que diriez-vous d'ajouter un traitement relatif à la perte de la balle ? Par exemple… émettre un rire pour augmenter le stress du joueur.

Télécharger le son

Commencez par ajouter un son au format caf dans les ressources de l'application. Pour que ce son puisse être joué, vous devez définir un objet SystemSoundID et le relier à ce son. Ajoutez l'instruction suivante dans la partie interface du fichier ViewController.h :

Code : Objective-C

Vous allez maintenant agir sur le code. Cliquez sur ViewController.h dans le volet de navigation et ajoutez l'instruction suivante un peu avant la fin de la méthode viewDidLoad :

Code : Objective-C

Pour savoir si le joueur a laissé passer la balle, ajoutez le test suivant dans la méthode boucleJeu :

Code : Objective-C

Si l'ordonnée de la balle (balle.center.y) est supérieure à la hauteur de la vue (self.view.bounds.size.height), les instructions comprises entre les accolades sont exécutées.

L'instruction de la ligne 3 émet un son pour signifier la perte de la balle :

Code : Objective-C

Quant à l'instruction de la ligne 4, elle repositionne la balle pour poursuivre la partie :

Code : Objective-C

La touche finale

Pour terminer cette application, nous allons afficher un message dans le Label lorsque toutes les briques ont été effacées et mettre fin à la boucle de jeu. Rendez-vous dans le fichier ViewController.m et ajoutez le bloc d'instructions suivant dans la méthode boucleJeu :

Code : Objective-C

Ça y est, l'application est entièrement fonctionnelle. Amusez-vous bien !

Le code de l'application se trouve dans le dossier pong.

ViewController.h

Secret (cliquez pour afficher)

ViewController.m

Secret (cliquez pour afficher)