Initialisation au développement des jeux vidéo

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

2. 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

3. 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?

4. 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.

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

6. Quelques jeux de GameLoft

7. 9mm

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

10. GT Racing 3D

11. Genre: Course • Sortie le 11 Novembre • Caractéristiques: • 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

13. Let ‘s Golf 3

14. Genre: Sport • Sortie le 11 Novembre • Caractéristiques: • 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

16. 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)

17. Les notions de base • la gestion du temps (permettant la création d’animations)

18. 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.

19. 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é, SurfaceViewimplémentera l’interface SurfaceHolder, qui est responsable du control de la surface (largeur, changement, évènements …).

20. Implémentation de la méthode onDraw: @Override protectedvoidonDraw(Canvascanvas) { 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é)

21. Comment récupérer la source de l’image?

22. 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.

23. 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 intball=0x7f020000; public static final inticon=0x7f020002; } public static final class layout { public static final intmain=0x7f030000; } public static final class string { public static final intapp_name=0x7f040001; public static final inthello=0x7f040000; } }

24. Il suffit après de déclarer la variable bmp de type Bitmap Bitmapbmp Et l’extraire à partir de sa source: bmp = BitmapFactory.decodeResource(getResources(), R.drawable.icon); Ensuiteappeler la méthodeonDraw pour affichernotre image: @Override protectedvoidonDraw(Canvascanvas) { canvas.drawColor(Color.BLACK); canvas.drawBitmap(bmp, 10, 10, null);        }

26. 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.

27. Exemple:

28. 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.

29. 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. - 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)

31. 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.

32. 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)

33. 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.

34. 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){}

35. Cette classe possède deux accesseurs indiquant la position du clique: getX() et getY();

36. Exemple d’utilisation: Nous souhaitons changer la position de l’image vers la position du clique:

37. Le déplacement vertical est la différence des deux ordonnés Le déplacement horizontal est la différence des deux abscisses.

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

39. 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.

40. Nous avons l’angle de déplacement et la vitesse principale, et nous avons besoin de la vitesse verticale et la vitesse horizontale:

41. Çà 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;

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

43. On a ainsi l’impression que l’image se déplace progressivement vers la position du clique.

44. DEMO

45. 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.

46. Merci