XAMARIN : mon premier jeu Cross Platform avec CocosSharp - Partie 2 -

Ÿ Etape 5 : Création du décor animé

Dans cette partie, nous allons créer le décor de notre jeu. Il se constitue de plusieurs parties (les layers) que nous allons superposer et animer si nécessaire. Nous allons découvrir deux nouveaux types de classe CocosSharp qui sont les « CCSprite » et les « CCSpriteSheet ». Le premier représente un élément statique de notre jeu, c’est-à-dire une ressource fixe (par exemple un fichier imag) alors que le second se compose de plusieurs éléments statiques qui peuvent être enchainés rapidement afin de créer une animation (exactement comme le principe des dessins animés).

Si nous décomposons notre décor en plusieurs éléments, nous pouvons établir une sorte de cartographie des éléments de type « CCSprite » ou « CCSpriteSheet » à superposer dans le bon ordre :

Nom	Type	Ressource
title.png	CCSprite (Fixe)
castle.png	CCSprite (Fixe)
smoke.png	CCSpriteSheet (Animé)
fire.png	CCSpriteSheet (Animé)

Editez la classe « MainScene.cs » en créant une nouvelle méthode privée nommée « CreateBackGround » (profitez-en pour supprimer ou mettre en commentaire notre test permettant d’afficher un label « Bienvenue sur CocosSharp ») :

La méthode « CreateBackGround » instancie une classe de type « CCSprite » avec une ressource « title.png ». Cette ressource doit être placé dans le répertoire « Assets/Content » de notre application (Android et iOS) :

Dans l’univers CocosSharp, les coordonnées (x,y) d’un « CCSprite » sont positionnées au milieu de la ressource. La propriété « AnchorPoint » permet de les redéfinir. Ainsi, nous indiquons que le centre de la ressource est maintenant en bas à gauche et non au milieu. Voici un exemple sans et avec :

Enfin, la propriété « IsAntiAliased » permet de ne pas lisser la ressource. C’est le cas ici car nous voulons avoir un aspect pixélisé pour avoir le rendu « rétro gaming ».

N’oubliez pas de rajouter les ressources au projet iOS (vous pouvez les ajouter en tant que lien pour éviter de multiplier les fichiers identiques) :

Comme pour le fond, rajoutez maintenant le château en créant une nouvelle méthode « CreateCastle ». N’oubliez pas l’appel de la méthode dans le constructeur de notre scène :

Le château n’est pas placé correctement sur l’axe des y. Il devrait être « docké » vers le haut. Définissez la propriété « PositionY » ainsi :

Pour rajouter la fumée, créez une nouvelle méthode « CreateSmoke ». Cette méthode utilisera « CreateAnimationFromSpriteSheet » qui permet à partir d’une liste d’extraire tous les sprites afin de les enchainer rapidement, créant ainsi notre animation :

Note : N’oubliez pas de rajouter les ressources smoke.plist et smoke.png aux projet Android et iOS.

Exécuter le projet (Android ou iOS) :

La fumée s’anime mais elle est au-dessus de notre château. C’est normal puisque les « layers » s’ajoutent dans l’ordre de création. Il faut donc positionner notre méthode avant l’ajout du château comme ceci :

De la même façon, rajoutez le feu au château et notre décor animé sera complet :

Exécuter le projet (Android ou iOS) :

Ÿ Etape 6 : Création des acteurs

Dans cette partie, nous allons créer les personnages qui tiennent le trampoline : Mario et Luigi. Dans ce jeu, ils se trouvent sur le chemin et tiennent une sorte de planche qui permettra à Yoshi de rebondir jusqu’au carrosse et ainsi être sauvé. C’est trop mignon n’est-ce pas ? C’est l’utilisateur qui contrôlera les deux personnages en les faisant naviguer soit vers la gauche soit vers la droite. Trois positions sont possibles pour afficher les deux personnages :

Dans le fichier « MainScene.cs », rajoutez trois nouvelles méthodes :

Notez que nous cachons les personnages au centre et à droite pour ne laisser que ceux de gauche par défaut au démarrage du jeu. N’oubliez pas d’appeler ces trois méthodes dans le constructeur de votre classe et de rajouter les ressources dans les deux projets :

Exécutez le projet (Android ou iOS) :

Rajoutez le carrosse situé complétement à droite. C’est la porte de sortie pour notre personnage Yoshi :

Note : N’oubliez pas de rajouter les ressources goal.plist et goal.png aux projet Android et iOS.

Ÿ Etape 7 : Animation des acteurs

Pour animer les deux personnages, ajoutez une nouvelle méthode « CreateTouchListener » :

Le listener va « attraper » tous les « taps » sur l’écran (« CCEventListenerTouchAllAtOnce ») et exécuter la méthode « HandleTouchesBegan ». Celle-ci analyse si un « tap » ou un « click » utilisateur a été déclenché et regarde ou l’utilisateur a appuyé. Nous avions, lors de la création de la classe « GameView » défini la taille de l’écran ainsi :

Donc si la coordonnée X de l’appui de l’utilisateur est <120, alors c’est un click gauche, sinon click droit. En fonction de cela, il ne nous reste plus qu’à rendre visible les bons personnages suivant la position actuelle de celui déjà affiché. N’oubliez pas d’ajouter dans le constructeur de la scène l’appel de la méthode « CreateTouchListener ».

Exécutez le projet (Android ou iOS) et testez les clicks ou taps à droite et à gauche :

Ÿ Etape 7 : Le lancée de Yoshi (un peu de math…)

Rajoutez la méthode « CreateYoshi ». N’oubliez pas de l’appeler dans le constructeur de la scène et avant la méthode « CreateGoal » car Yoshi doit passer derrière le carrosse pour plus de réalisme :

Attention, on attaque la partie un peu pénible pour ceux qui sont allergiques avec les mathématiques. Vous pouvez passer cet étape et copier-coller le code tel quel si vous voulez. Pour les autres, un peu de théorie :

Voici le mouvement que va suivre notre Yoshi. Il va se jeter du château en suivant une parabole et son mouvement va accélérer au fur et à mesure de sa descente jusqu’à ce qu’il rencontre soit le trampoline soit le sol. S’il rencontre le trampoline, alors on inverse la courbe mais il ira moins haut. S’il rencontre le sol, la partie est finie et notre pauvre Yoshi aussi…

Cela se traduit donc par trois boucles sur lesquels nous allons itérer pour calculer les coordonnées de i et y en fonction de chaque point x :

Bon, le but n’est pas de faire des mathématiques alors mettons en place cela. Nous allons rajouter la méthode CocosSharp « Schedule » qui permet d’effectuer tout ce que l’on a besoin de faire durant un temps exprimé en frame (rafraichissement de l’écran). En résumé, à chaque rafraichissement de l’écran, cette méthode est appelée :

Dans le constructeur de la scène on rajoute la méthode suivante :

La méthode « RunGameLogic » appelle en début de procédure une autre méthode « JumpYoshi » qui permet de réinitialiser notre héros une fois qu’il est arrivé au carrosse. Par contre, s’il tombe, alors c’est la méthode « CreateYoshiBoom » qui affichera Yoshi à l’endroit de la chute avec une animation particulière :

Note : N’oubliez pas de rajouter les ressources yoshiboum.plist et yoshiboum.png aux projet Android et iOS.

Exécutez le projet (Android ou iOS) :

Conclusion

Voilà un rapide aperçu de la bibliothèque CocosSharp pour Xamarin. Evidemment, notre jeu est loin d’être fini et Il faudrait intégrer la notion de score, pouvoir paramétrer la difficulté, lancer plusieurs Yoshi en même temps, ect… Les idées ne manquent pas mais vous avez tous les éléments pour continuer ce petit jeu style « rétro gaming ».

CocosSharp rempli véritablement son contrat avec Xamarin. Une seule classe partagée permet le déploiement sur toutes les plateformes mobiles. Avec ses milliers de possibilités et son moteur de physique intégré, c’est la solution idéale pour commencer la programmation de jeu qui n’auront qu’une seule limite : vous !

François Botte

Chef de projet Technique, SQLI Toulouse