Initialisation au développement des jeux vidéo

Présentation au sujet: "Initialisation au développement des jeux vidéo"— Transcription de la présentation:

1 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

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 30/11/2011

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? 30/11/2011

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. 30/11/2011

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

6 Quelques jeux de GameLoft
30/11/2011

7 9mm 30/11/2011

8 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

9 30/11/2011

10 GT Racing 3D 30/11/2011

11 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

12 30/11/2011

13 Let ‘s Golf 3 30/11/2011

14 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

15 30/11/2011

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) 30/11/2011

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

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. 30/11/2011

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

20 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

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

22 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

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

24 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:        protected void onDraw(Canvas canvas) {              canvas.drawColor(Color.BLACK);              canvas.drawBitmap(bmp, 10, 10, null);        } 30/11/2011

25 30/11/2011

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. 30/11/2011

27 Exemple: 30/11/2011

28 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

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/11/2011

30 - 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

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. 30/11/2011

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) 30/11/2011

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. 30/11/2011

34 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

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

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

37 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

38 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

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. 30/11/2011

40 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

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; 30/11/2011

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

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

44 DEMO 30/11/2011

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. 30/11/2011

46 Merci 30/11/2011