La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


Présentation au sujet: "Initialisation au développement des jeux vidéo Réalisé par: Réalisé par: Hidri Jouda - Haj Ayache Souhail - Elj Asma Présenté par: Présenté par: Hidri."— Transcription de la présentation:

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

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

3 Actualité… L'ouverture Android OS a permis lépanouissement dune é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/20113

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

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

6 Quelques jeux de GameLoft 30/11/20116

7 9mm 30/11/20117

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

9 30/11/20119

10 GT Racing 3D 30/11/

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

12 30/11/201112

13 Let s Golf 3 30/11/201113

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

15 30/11/201115

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

17 la gestion du temps (permettant la création danimations) 30/11/ Les notions de base

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

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 limage sur lécran). -Dun autre côté, SurfaceView implémentera linterface SurfaceHolder, qui est responsable du control de la surface (largeur, changement, évènements …). 30/11/201119

20 Implémentation de la méthode 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 limage sera dessinée. On aura besoin de préciser la source de limage (Bitmap bmp), la position de limage (labscisse et lordonné) 30/11/201120

21 Comment récupérer la source de limage? 30/11/201121

22 Toute image, doit être placée dans le dossier drawable. Limage 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/201122

23 Voici un exemple dune 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; } Limage 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 limage. 30/11/201123

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

25 30/11/201125

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 soccupe dun côté de mise à jour continue des variables et dun autre côté de laffichage des images. 30/11/201126

27 Exemple: 30/11/

28 On devra créer une classe qui hérite de la classe Thread. Cette classe soccupera du loop. Cette classe soccupera de la gestion du temps et de ce quon 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/201128

29 Animer une image: Sprite et frame Sprite est une image 2D. On peut créer une classe qui soccupe de nos images. À chaque fois on a besoin dinsérer une nouvelle image, on peut instancier cette classe qui soccupera de son chargement, mise à jour et affichage. 30/11/201129

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 limage (rectangle SRC) et la partie de lécran dans laquelle on veut insérer limage (rectangle DST) 30/11/201130

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

32 Cette technique nous épargnera également le chargement dune nouvelle image à chaque fois on a besoin de changer limage affichée. Egalement, lappel 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/201132

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 linput: 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/201133

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){} 30/11/201134

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

36 Nous souhaitons changer la position de limage vers la position du clique: Exemple dutilisation: 30/11/201136

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

38 On a besoin de savoir le pas (la vitesse) de lavancement vertical et lavancement horizontal lors de chaque boucle. X+=? Y+=? 30/11/201138

39 On doit éviter de se trouver dans le cas suivant: Langle de déplacement par boucle doit être le même que langle de déplacement total. 30/11/201139

40 Nous avons langle de déplacement et la vitesse principale, et nous avons besoin de la vitesse verticale et la vitesse horizontale: 30/11/201140

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

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

43 On a ainsi limpression que limage se déplace progressivement vers la position du clique. 30/11/201143

44 DEMO 30/11/201144

45 Conclusion Ces notions sont les fondements de base pour créer un jeux vidéo dune 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. Dautres notions sont également intéressantes comme le multijoueur qui permet à deux personnes ou plus de jouer ensemble et la notion dintelligence artificielle qui permet de jouer contre un adversaire fictif. 30/11/201145

46 30/11/201146


Télécharger ppt "Initialisation au développement des jeux vidéo Réalisé par: Réalisé par: Hidri Jouda - Haj Ayache Souhail - Elj Asma Présenté par: Présenté par: Hidri."

Présentations similaires


Annonces Google