Initialisation au développement des jeux vidéo Atelier Gaming Initialisation au développement des jeux vidéo Android Réalisé par: Hidri Jouda - Haj Ayache Souhail - Elj Asma Présenté par: Hidri Jouda – Haj Ayache Souhail

Plan de la présentation Actualité: Game Command App Quelques jeux de GameLoft Initialisation au développement des jeux vidéos: Notions de base Afficher une image sur l’écran: la class SurfaceView Bouger une image sur l’écran: Thread et Loop Animer une image: Sprite et frame Gestion des évènements: onTouchEvent Conclusion 30/11/2011

Actualité… L'ouverture Android OS a permis l’épanouissement d’une énorme quantité de créativité.  Des centaines de jeux sur le marché! Mais, il est souvent terriblement difficile pour les utilisateurs moyens de trouver des applications qui fonctionnent bien sur leurs appareils spécifiques. Comment savoir quels jeux sont optimisés? 30/11/2011

Solution… Game Command Proposée par Qualcomm. Disponible à partir de Janvier 2012. Gratuite pour les terminals Qualcomm. permettra aux propriétaires des téléphones et tablettes tournant cette puce de Qualcomm d’avoir une liste des meilleurs jeux qui sont garantis de marcher sur leurs propres équipements. 30/11/2011

Game Command On trouvera une liste de jeux marqués « enhanced » ou « featured » qui vont profiter du matériel special. 30/11/2011

Quelques jeux de GameLoft 30/11/2011

9mm 30/11/2011

Genre: Action Sortie le 11 Octobre Caractéristiques: Prix: $6,99 Guerre des gangs Possibilité de jouer en ligne avec des amis Prix: $6,99 Note (sur 5) : 4,5

30/11/2011

GT Racing 3D 30/11/2011

Genre: Course Sortie le 11 Novembre Caractéristiques: Prix: $4,99 Plus de 100 voitures Grande variété de pistes Multi-joueurs en local et en ligne jusqu' ‘à 6 personnes Prix: $4,99 Note (sur 5) : 4,7 30/11/2011

30/11/2011

Let ‘s Golf 3 30/11/2011

Genre: Sport Sortie le 11 Novembre Caractéristiques: Prix : free 6 endroits fantastiques 4 joueurs peuvent s'affronter en ligne, en local (Wi-Fi ou Bluetooth) ou sur le même appareil.Multi-joueurs en local et en ligne jusqu' ‘à 6 personnes Prix : free Note (sur 5) : 3,6 30/11/2011

30/11/2011

Les notions de base Pour développer un jeux vidéo, qu’il soit un simple jeu d’arcade ou bien un jeu 3D avancé, trois services sont nécessaires: le graphisme (permettant de dessiner des images sur l’écran) 30/11/2011

Les notions de base la gestion du temps (permettant la création d’animations) 30/11/2011

Les notions de base la gestion des évènements (permettant de traiter des informations provenant de l’entrée, input)  Lors de cette présentation, on parlera de ces trois notions. 30/11/2011

Afficher une image sur l’écran: SurfaceView -Pour afficher une image sur l’écran, on aura besoin de la classe SurfaceView qui hérite de la classe View. -La classe SurfaceView, ré implémentera la méthode onDraw via @override, qui est responsable du rendering (le dessin de l’image sur l’écran). -D’un autre côté, SurfaceView implémentera l’interface SurfaceHolder, qui est responsable du control de la surface (largeur, changement, évènements …). 30/11/2011

Implémentation de la méthode onDraw: @Override        protected void onDraw(Canvas canvas) {              canvas.drawColor(Color.BLACK);              canvas.drawBitmap(bmp, 10, 10, null);        } Pour dessiner une image, on aura également besoin de la classe Canvas. Canvas, est un comme un rectangle dans lequel l’image sera dessinée. On aura besoin de préciser la source de l’image (Bitmap bmp), la position de l’image (l’abscisse et l’ordonné) 30/11/2011

Comment récupérer la source de l’image? 30/11/2011

Toute image, doit être placée dans le dossier drawable Toute image, doit être placée dans le dossier drawable . L’image doit être de type PNG. A chaque fois on ajoute une nouvelle image dans ce dossier, la classe R.drawable se met à jour, dans le fichier R.java. 30/11/2011

L’image icon.png, est une image existante dans le dossier drawable par défaut. Si on ajoute une image ball.png, on va remarquer que ce fichier va se mettre à jour automatiquement et ajouter la ligne soulignée. Pour chaque image, on a un identifiant unique portant son nom. Cet identifiant est un entier, permettant de retrouver la source de l’image. Voici un exemple d’une classe R public final class R { public static final class attr } public static final class drawable public static final int ball=0x7f020000; public static final int icon=0x7f020002; public static final class layout public static final int main=0x7f030000; public static final class string public static final int app_name=0x7f040001; public static final int hello=0x7f040000; 30/11/2011

Il suffit après de déclarer la variable bmp de type Bitmap Bitmap bmp Et l’extraire à partir de sa source:  bmp = BitmapFactory.decodeResource(getResources(), R.drawable.icon); Ensuite appeler la méthode onDraw pour afficher notre image:        @Override        protected void onDraw(Canvas canvas) {              canvas.drawColor(Color.BLACK);              canvas.drawBitmap(bmp, 10, 10, null);        } 30/11/2011

30/11/2011

Bouger une image sur l’écran: Thread et loop. Dans chaque jeux, il existe la notion de boucle. Sous Android, on parle plutôt de Loop. Pour un loop, on doit créer un Thread à part qui s’occupe d’un côté de mise à jour continue des variables et d’un autre côté de l’affichage des images. 30/11/2011

Exemple: 30/11/2011

On devra créer une classe qui hérite de la classe Thread On devra créer une classe qui hérite de la classe Thread. Cette classe s’occupera du loop. Cette classe s’occupera de la gestion du temps et de ce qu’on appelle FPS et UPS: Frame per second: combien de fois la méthode onDraw sera appelée par seconde. Update per second: combien de fois la méthode update sera appelée par seconde. 30/11/2011

Animer une image: Sprite et frame Sprite est une image 2D. On peut créer une classe qui s’occupe de nos images. À chaque fois on a besoin d’insérer une nouvelle image, on peut instancier cette classe qui s’occupera de son chargement, mise à jour et affichage. 30/11/2011

- On peut insérer une image sur l’écran en précisant ses coordonnées - On peut insérer une image sur l’écran en précisant ses coordonnées. - Mais il est également possible de le faire en passant par la classe Rectangle. - On précise la partie à afficher de l’image (rectangle SRC) et la partie de l’écran dans laquelle on veut insérer l’image (rectangle DST) 30/11/2011

En modifiant successivement les coordonnés du rectangle SRC, on pourra avoir une animation. Exemple: On affichant successivement l’une de ces trois images, on aura l’impression que cette image est animée. 30/11/2011

Cette technique nous épargnera également le chargement d’une nouvelle image à chaque fois on a besoin de changer l’image affichée. Egalement, l’appel de la méthode onDraw en lui donnant deux paramètres de type Rectangle, nous permet de créer un zoom (que ce soit zoom in ou zoom out, selon le rapport de SRC et DST) 30/11/2011

Gestion des évènements: OnTouchEvent La gestion des évènements, ou bien le Events Handeler est un moyen pour déclencher une action à chaque fois il y a une modification au niveau de l’input: mouvement du doight sur l’écran par exemple. A chaque fois il y a un clique sur l’écran, une méthode est appelée OnTouchEvent. 30/11/2011

Cette méthode prend une variable en paramètre de type Event. On pourra mettre dans le corps de cette méthode toutes les actions que nous souhaitons exécuter au moment de cet évènement. Cette méthode prend une variable en paramètre de type Event. OnTouchEvent(Event e){} 30/11/2011

Cette classe possède deux accesseurs indiquant la position du clique: getX() et getY(); 30/11/2011

Exemple d’utilisation: Nous souhaitons changer la position de l’image vers la position du clique: 30/11/2011

Le déplacement vertical est la différence des deux ordonnés Le déplacement horizontal est la différence des deux abscisses. 30/11/2011

On a besoin de savoir le pas (la vitesse) de l’avancement vertical et l’avancement horizontal lors de chaque boucle. X+=? Y+=? 30/11/2011

On doit éviter de se trouver dans le cas suivant: L’angle de déplacement par boucle doit être le même que l’angle de déplacement total. 30/11/2011

Nous avons l’angle de déplacement et la vitesse principale, et nous avons besoin de la vitesse verticale et la vitesse horizontale: 30/11/2011

Çà donnera les deux lignes suivantes: xSpeed= (float) Math.cos(Math.atan2(depVert, depHor)); ySpeed= (float) Math.sin(Math.atan2(depVert, depHor)); xSpeed *= 5; ySpeed *= 5; 30/11/2011

Et bien sûr, par la suite, on aura seulement besoin de modifier les deux lignes suivantes: X += xSpeed; Y +=ySpeed; 30/11/2011

On a ainsi l’impression que l’image se déplace progressivement vers la position du clique. 30/11/2011

DEMO 30/11/2011

Conclusion Ces notions sont les fondements de base pour créer un jeux vidéo d’une façon générale et un jeu sous android. On trouve les même notions dans tous les langages capables de créer un jeu. D’autres notions sont également intéressantes comme le multijoueur qui permet à deux personnes ou plus de jouer ensemble et la notion d’intelligence artificielle qui permet de jouer contre un adversaire fictif. 30/11/2011

Merci 30/11/2011