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

CocosSharp est un Framework de développement de jeux 2D multiplateformes (Android, iOS, et Windows). Il s’agit du portage XAMARIN du projet open source Cocos2D intégrant un moteur physique et une gestion poussée des animations, des sprites, des transitions, … Et quoi de mieux qu’un petit jeu rétro pour découvrir un peu plus cet univers ?

Ÿ Rétrogaming : retour vers le futur…

Les moins jeunes d’entre nous doivent se souvenir des premiers jeux électroniques de poche produit par Nintendo dans les années 80. CocosSharp pour XAMARIN semble être le bon choix pour moderniser l’un des plus célèbres des jeux de la firme japonaise : « FIRE » :

retro-gaming

Ÿ Etape 1 : Initialisation du projet Android

Une fois les prérequis complétés, lancez Microsoft Visual Studio et créez un nouveau projet :

visual-studio

Dans la fenêtre de paramétrage du projet, sélectionnez le template pour CocosSharp (Android) et configurez les noms et le répertoire de votre solution (par convention, les projets ciblant Android se terminent par « .Droid ») :

template-coco-sharp

Une fois la solution créée, votre explorateur de projets se compose ainsi (notez la présence des librairies CocosSharp, MonoGame.Framework et Mono.Android) :search-solution-explorer

Commençons par faire un peu de ménage en supprimant le fichier « GameLayer.cs », nous le rajouterons plus tard dans la solution :

game-layer

Editez le fichier « MainActivity.cs » afin de lui attribuer le style qui permet de supprimer la barre de titre. Définissez l’orientation de l’écran de notre jeu afin qu’il soit toujours orienté en paysage et modifiez la procédure LoadGame afin qu’elle ressemble à celle-ci :

main-activity

La partie Android est maintenant prête à recevoir notre projet partagé qui contiendra toute la logique du jeu.

Ÿ Etape 2 : Initialisation du projet iOS

Rajoutez un nouveau projet à la solution existante (clic droit dans l’explorateur de solution) :

solution-explorer-ios

Dans la fenêtre de paramétrage, sélectionnez le template pour CocosSharp (iOS) et configurez le nom du projet (par convention, les projets ciblant iOS se terminent par « .iOS ») :

template-coco-shar-ios

Comme pour le projet Android, commençons par faire un peu de ménage en supprimant les fichiers ci-dessous :

suppression-fichier-gaming

Ouvrez la fenêtre des propriétés en cliquant sur le projet (click droit) et sélectionnez l’onglet « iOS Application » afin de sélectionner l’orientation paysage uniquement et cibler la version de déploiement :

ios-application

Editez dans le fichier « ViewController.cs » la procédure LoadGame afin qu’elle ressemble à celle ci-dessous :

view-controller

La partie iOS est maintenant prête elle aussi à recevoir notre projet partagé.

Ÿ Etape 3 : Initialisation du projet partagé

Rajoutez un nouveau projet à la solution existante (clic droit dans l’explorateur de solution) :

shared-project

Le projet partagé va contenir toute la logique de notre jeu. Android et iOS utiliseront donc le même code mutualisé afin d’afficher le rendu graphique et gérer la physique.

Rajoutez une nouvelle classe « GameController.cs » à ce projet :

class-game-controller

Cette classe statique va nous permettre de définir la résolution de notre écran et initialiser la première scène de notre jeu. Elle permet aussi de définir l’endroit où sont stockées nos ressources (animations, pixels, sprites, …).

Editez le fichier « GameController.cs » pour rendre la classe publique et statique. Rajoutez une propriété statique « GameView » de type « CCGameView » (toutes les classes, méthodes, propriétés, … de type CocosSharp commencent par CC…). « CCGameView » est le point d’entrée de l’application CocosSharp. C’est elle qui gère les animations, les transitions, les effets sonores, … et surtout le lancement du jeu :

ccgameview

Note : nous n’avons pas encore fait référence à notre projet partagé, ne vous inquiétez donc pas pour l’instant des références à utiliser dans la partie des déclarations de notre classe.

Enfin, il ne nous reste plus qu’à initialiser notre contrôleur en lui indiquant la résolution à utiliser, la localisation des ressources et la scène à démarrer :

initialisation-game-controller

Notre classe est prête et exécutera notre première scène « MainScene ».

Rajoutez une nouvelle classe « MainScene.cs » au projet partagé :

classe-main-scene

Une scène dans CocosSharp est comme une scène au théâtre. Il y a des décors, des acteurs qui dialoguent et se déplacent sur l’estrade, de la musique, etc.… Et pour organiser tout cela, il faut un metteur en scène qui dirigera les éléments qui feront de la pièce un succès ou non. Ici, notre metteur en scène serait la classe « GameController.cs » et la scène serait la classe « MainScene.cs » :

mainscene-cs-2

Enfin, pour rajouter des acteurs à notre scène il faut une sorte de décors ou d’estrade pour pouvoir placer les éléments. C’est la variable privée « layer » de type « CCLayer » ajoutée lors de l’initialisation de notre scène qui s’en occupera.

C’est peut-être le moment de tester tout cela sur nos appareils afin d’avoir le rendu de notre jeu. Rajoutez donc un acteur pour avoir une représentation visuelle de notre scène :

mainscene-test

Ÿ Etape 4.1 : Testez notre jeu sous Android

Rajoutez au projet « Xamarin.GameWatch.Fire.Droid » la référence au projet partagé :

add-reference

xamarin-gamewatch-fire-droid

Une fois fait, rajoutez dans la procédure « LoadGame » de la classe « MainActivity.cs » du projet « Xamarin.GameWatch.Fire.Droid » l’appel à notre contrôleur du projet partagé comme ceci :

game-controller-initialize

Enfin, il ne reste plus que les références manquantes à rajouter à nos deux classes « MainScene.cs » et « GameController.cs » :

ccs-scene

Exécutez l’application Android sur votre appareil ou simulateur :

executer-appli

Ÿ Etape 4.2 : Testez notre jeu sous iOS

Rajoutez au projet « Xamarin.GameWatch.Fire.iOS » la référence au projet partagé (exactement de la même manière que le projet pour la version Android ). Une fois fait, rajoutez dans la procédure « LoadGame » de la classe « ViewController.cs » du projet « Xamarin.GameWatch.Fire.iOS » l’appel à notre contrôleur du projet partagé comme ceci :

Exécutez l’application iOS sur votre appareil ou simulateur :

bienvenue-sur-coco-sharp

François Botte

Chef de projet Technique, SQLI Toulouse

0 commentaires

votre commentaire

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Inscription newsletter

Ne manquez plus nos derniers articles !