shufflepuck legend : conception d'un jeu vidéo simple avec cimg
DESCRIPTION
Blanchard Cédric Brincin Guillaume El-Ouarti Haitam Griffon Jean-Louis. Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg. Contexte. Shufflepuck Café : Jeu de « air hockey », Joueur contrôle une raquette et doit envoyer le palet dans la camp adverse. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/1.jpg)
1
Shufflepuck Legend :Conception d'un jeu vidéo simple
avec CImg
Blanchard CédricBrincin GuillaumeEl-Ouarti HaitamGriffon Jean-Louis
![Page 2: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/2.jpg)
2
Shufflepuck Café :
•Jeu de « air hockey »,
•Joueur contrôle une raquette et doit envoyer le palet dans la camp adverse.
Créer un clone de ce jeu.
Affichage des raquettes et du palet en 3 dimensions
Jeu jouable à la souris
Menu, Effets spéciaux, Musique, …
Code court et portable
Obligation d’utiliser CImg
Contexte
![Page 3: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/3.jpg)
3
Affichage effectué grâce à CImg
– Bibliothèque C++ Open Source,– Spécialisée dans le traitement d’images,– Composée d’un unique fichier entête CImg.h– Réalisée par David TSCHUMPERLE,– Développée au laboratoire CNRS CREYC de
Caen.
Code simple, compact et portable.
Contexte
![Page 4: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/4.jpg)
4
IntroductionContexte
Mise en oeuvre Moteur Physique et IA Gestion de l’affichage de base Effets spéciaux Character Design Fonctionnalités Supplémentaires
Conclusion
Plan
![Page 5: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/5.jpg)
5
I. Mise en oeuvre
tant que non(partie terminée ou escape frappée ou croix cliquée) faire| si joueur1 est humain| | détecter les touches frappées //détection touches/souris| | déplacer la raquette en conséquences| sinon| | évaluer mouvement de la raquette en fonction de la position du | | palet //IA| | déplacer la raquette en conséquences| si joueur2 est humain| | détecter les touches frappées| sinon| | évaluer mouvement de la raquette en fonction de la position du| | palet| évaluer la prochaine position du palet en fonction de son mouvement | | actuel et de l'environnement //gestion de la physique du palet| afficher état actuel de la scène //affichage de base/effets spéciauxfin tant que
![Page 6: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/6.jpg)
6
IntroductionContexte
Mise en oeuvre Moteur Physique et IA Gestion de l’affichage de base Effets spéciaux Character Design Fonctionnalités Supplémentaires
Conclusion
Plan
![Page 7: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/7.jpg)
7
• Gestion des collisions et déplacements des différents objets qui constituent le jeu.
• Objectifs : Déterminer les paramètres nécessaires aux
mouvements Détecter les collisions et déterminer leurs effets sur
les objets Bomber la face avant de la raquette Elaborer une intelligence artificielle pour affronter le
joueur Gestion de la souris ou du clavier
II. Moteur physique et IA
![Page 8: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/8.jpg)
8
II. Moteur physique et IA
Implémentation :• Position, vitesse et
accélération dans « Object »• Géométrie des éléments
dans les classes héritées• Mode de déplacement :
contrôlé, pour les raquettes (IA ou joueur)
calculé en fonction du mouvement suivi et des collisions, pour le palet
![Page 9: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/9.jpg)
9
II. Moteur physique et IA
Différents types de collisions :• Rebond simple sur les
bords de table• Collision avec transmission
de vitesse entre une raquette et le palet
• Bombage de la face avant des raquettes
![Page 10: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/10.jpg)
10
II. Moteur physique et IA
Mouvement latéral de l’IA :• Détermination du point de
collision éventuel (sans considérer les rebonds intermédiaires éventuels)
• Déplacement à vitesse adaptée
• Prise de risque réglable pour déterminer la zone de la raquette ou aura lieu le choc
![Page 11: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/11.jpg)
11
II. Moteur physique et IA
Amortis et coups accélérés :• Pourcentage réglable du
nombres de coups de chaque type
• Prise de décision lorsque le palet rentre dans une zone proche
• Replacement au centre lorsque le palet n’est pas à proximité
![Page 12: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/12.jpg)
12
II. Moteur physique et IA
Contrôle du palet par le joueur :• S’il y a deux joueurs simultané, au moins l’une
des raquettes se déplace au moyen du clavier (inconvénient : vitesse de déplacement constante)
• Contrôle optimal avec la souris• Curseur caché pendant la partie• Curseur constamment ramené au centre de la
fenêtre
![Page 13: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/13.jpg)
13
II. Moteur physique et IA
Réalisation d’un prototype :• Indépendant du
développement de l’affichage final
• Permet de tester les paramètres physiques
• Permet le réglage des IA
Démo physique
![Page 14: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/14.jpg)
14
IntroductionContexte
Mise en oeuvre Moteur Physique et IA Gestion de l’affichage de base Effets spéciaux Character Design Fonctionnalités Supplémentaires
Conclusion
Plan
![Page 15: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/15.jpg)
15
1. Présentation des objectifs
Plateau de jeu original Nouveau plateau de jeu
Afficher sur décor plat 2d deux raquettes et un palet en 3D
Donner l’impression qu’ils sont posés sur la table
Utiliser CImg
III. Gestion de l’affichage de base
![Page 16: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/16.jpg)
16
III. Gestion de l’affichage de base
2. Création de la scène
Déplacement des objets dans un espace à 2 dimensions
+ rotation pour créer l’illusion
![Page 17: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/17.jpg)
17
III. Gestion de l’affichage de base
Création des objets 3D
4 paramètres :•une liste de points qui sont sommets des polygones,•une liste de primitives regroupant 3 ou 4 sommets coplanaires pour former un polygone,•une liste de couleurs donnant la couleur de chaque polygone,•une liste d’opacités décrivant le niveau d’opacité des polygones.
La raquette Le palet
![Page 18: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/18.jpg)
18
III. Gestion de l’affichage de base
Intégration dans la scène
Programme de réglage
![Page 19: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/19.jpg)
19
3. Intégration dans le jeu
Code concernant l’affichage regroupé dans une méthode disp() de la classe Game appelée à chaque boucle de jeu,
Chaque objet est positionné sur la table grâce aux coordonnées fournies par la partie gérant la physique,
Vitesse d’animation contrôlée par une méthode wait() fournie par CImgDisplay.
Illusion de voir les objets glisser sur la table qui restreint d’ailleurs leur mouvements
III. Gestion de l’affichage de base
![Page 20: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/20.jpg)
20
III. Gestion de l’affichage de base
Résultat
Plateau de jeu original Notre table de jeu
![Page 21: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/21.jpg)
21
IntroductionContexte
Mise en oeuvre Moteur Physique et IA Gestion de l’affichage de base Effets spéciaux Character Design Fonctionnalités Supplémentaires
Conclusion
Plan
![Page 22: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/22.jpg)
22
IV. Effets spéciaux
Objectifs
Réaliser des effets spéciaux utilisant la bibliothèque de traitement d’image CImg.
Ces effets doivent donner du dynamisme et embellir le rendu graphique du jeu ShufflePuck.
![Page 23: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/23.jpg)
23
IV. Effets spéciaux
1. PrincipeLes effets sont créés en 2D et son intégrés dans l’univers 3D à l’aide de Sprites.
Avantage : les effets sont « liés » à l’objet 3D
• au niveau mouvement• au niveau de la profondeur : diminution automatique de la taille.
Réalisation d’animations au rendu 3D sans utilisation de mémoire importante
![Page 24: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/24.jpg)
24
IV. Effets spéciaux
2. Les effets (travail préliminaire) « L’impact »
Utilisation: onde de choc lors d’un rebond du palet contre la raquette ou contre les parois de la table.
« la spirale »
Utilisation: effet spécial de la raquette lors d’un coup spécial du type « aspiration ».
Effet « spirale »
![Page 25: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/25.jpg)
25
IV. Effets spéciaux
2. Les effets (travail préliminaire) « la fumée »Utilisation : lorsque la palet perd brusquement de la
vitesse, c’est-à-dire lorsque la raquette recule rapidement.
« concentration »Utilisation : coup spécial de la raquette, le palet reste
collé à la raquette avant d’être renvoyé très rapidement. Effet « concentration »
![Page 26: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/26.jpg)
26
IV. Effets spéciaux
3. Les effets Sprites « multicouches »
Utilisation de 3 sprites superposés affichant
chacun une animation différente.
Utilisation d’un masque pour chaque image
pour un rendu transparent plus réaliste.
sprites superposés
sprites superposés transparents
![Page 27: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/27.jpg)
27
IV. Effets spéciaux
4. Les effets du Jeu Les explosionsUtilisation: • lorsque le palet touche les bords de la table (sprite
simple)• lorsque le palet sort de la table (sprite multicouches)
Le coup spécial Utilisation:• lorsqu’il y a eu un assez grand nombre d’échangesVisuel: • une barre d’ énergie (image simple)• une onde de force associée à la raquette (sprite associé
à la raquette)
Explosion du jeu
Coup Spécial du jeu
![Page 28: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/28.jpg)
28
IntroductionContexte
Mise en oeuvre Moteur Physique et IA Gestion de l’affichage de base Effets spéciaux Character Design Fonctionnalités Supplémentaires
Conclusion
Plan
![Page 29: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/29.jpg)
29
V. Character Design
1.Principe
Symbolisation de l’adversaire par des personnages
Différentes attitudes suivant le déroulement de la partie
Un personnage par niveau de difficulté
![Page 30: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/30.jpg)
30
V. Character Design
2 Présentation des personnages Nounours (Niveau Facile)
GeekMaster (Niveau Moyen)
CaenGourou (Niveau Difficile)
![Page 31: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/31.jpg)
31
IntroductionContexte
Mise en oeuvre Moteur Physique et IA Gestion de l’affichage de base Effets spéciaux Character Design Fonctionnalités Supplémentaires
Conclusion
Plan
![Page 32: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/32.jpg)
32
VI. Fonctionnalités Supplémentaires
Création d’un menu
Création de musiques,
de mélodies originales et de bruitages
(Intégration dans le jeu grâce à la bibliothèque audio fmod)
![Page 33: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/33.jpg)
33
VI. Fonctionnalités Supplémentaires
Création d’un site de téléchargement
www.shufflepuck-legend.fr.st
![Page 34: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/34.jpg)
34
Résultat final
![Page 35: Shufflepuck Legend : Conception d'un jeu vidéo simple avec CImg](https://reader030.vdocuments.pub/reader030/viewer/2022033108/56814f60550346895dbd1424/html5/thumbnails/35.jpg)
35
Conclusion
Merci de votre attention. Des Questions ?