palais descongrèsParis7, 8 et 9février 2012
Jeux multi-écrans :envolez-vous avec Kinect,Silverlight et WP7       Cyril CATHALA       Nathanaël MARCHAND       Nathalie...
SOMMAIRE Présentation Outils multiplateforme Couche de communication Architecture des jeux Logique jeux Gestuelle avec Kin...
Introduction
Equipe  So@t Experts                     Cyril CATHALAblog.soat.fr                     Expert .NET@SoatExpertsNET         ...
So@t en quelques mots …  SSII spécialisé dans le développement     10 ans de savoir-faire .Net / Java  250 collaborateurs ...
So@t Experts  3 pôles d’expertise à So@t : .NET / Java / Agilité  Capitalisation (publications sur le blog, production de ...
Présentation des jeuxmulti-écrans
VIDEOPrésentation de SoNuts & SoTank
Présentation des jeux         SoNuts                       SoTank  Faites volez un               Pilotez un tank 3D  écure...
Schéma global decommunication                                           Joueur 1                                          ...
Architecture
Architecture des jeux        SoNuts           SoTank      Messaging         Messaging             Communicator
Architecture des jeux : SoNuts                Clients     Windows     WP7        Silverlight      Window                Si...
Architecture des jeux : SoTank       Clients 3D         Client 2D  Windows   Silverlight      WP7   Window   Silverligh   ...
Couche decommunication
UDP vs TCP  TCP   Connecté   Fiable   Ordonné   Contrôles de flux et congestion  UDP   Déconnecté   Simple & Rapide   Aucu...
UDP vs TCP  TCP semble mieux …  … FAUX !  La fiabilité a un prix     « Flot » de données     Acquittement     Renvoi d’un ...
Outils multiplateforme
Outils multiplateforme  Partage du code  Portable Class Library    .NET Framework, Silverlight, WP7, Xbox 360    Certaines...
DEMOArborescenceCommunication
Logique des jeux
SoNuts : Communication client/ serveur       Jeu                Joueur    Statut initial                     Joueurs prêts...
Approche #1  Client « stupide » sans aucune prédiction         Serveur       réseau   Client          Position 1          ...
Approche #1  Client « stupide » sans aucune prédiction         Serveur         réseau   Client           Position 1       ...
Approche #2  Approximation côté client en attendant le retour  serveur  Interpolation lors de la synchronisation serveur  ...
Approche #2  Approximation côté client en attendant le retour  serveur  Lissage lors de la synchronisation serveur        ...
Approche #3  Le client prédit les mouvements à chaque action du  joueur  Correction par historisation des actions passées ...
DEMOLissage
SoTank : Communication client /serveur  Workflow de jeu comparable à SoNuts  Un client PC plus complexe à animer  Des resp...
SoTank : La puissance de XNA  Extensibilité du content pipeline:    Génération du terrain via une texture (Height Map)   ...
SoTank & SoNuts: Portabilité  Différence dans les API XNA:    HiDef    Reach  Silverlight ne possède pas tout XNA  Consi...
Gestures avec Kinect
Présentation de Kinect  Kinect SDK pour Windows  3 flux disponibles     Image     Profondeur     Audio  Suivi de squelette...
Présentation de Kinect
Gesture sur SoNuts                  α2α1     Amplitude = α2 + α1
Gesture sur SoTank                                         +                                         -         yx    z    ...
DEMOGestures Kinect(ou comment avoir l’air intelligent)
DesignLe design offre une vrai plus value à tous lesprojets numériques, une promesse« d’expérience utilisateur » digne de ...
Processus de développement       Avant                    Après    => Collaboration Designer / Développeur
Images pour WindowsPhone:   SplashScreen   Icones : tile, icone applicationImages communes : Sprites / Textures 2D   Perso...
Images pour WindowsPhone:        SplashScreen        Icones : tile, icone application    Images communes : Sprites / Textu...
BackOffice :SoGameLe « back » se doit d’être aussi joli et à lahauteur que le « front »
Présentation de SoGame  Application WPF « Metro Style » qui gère : Inscriptio n des joueurs Récupération des scores et pho...
Prise de photo avec Kinect     Lancement de la capture de flux vidéos dans le Kinect runtime : var runtime = Runtime.Kinec...
Reconnaissance faciale  OPENCV :                  Comment ça marche ?  bibliothèque Open         Chargement  Source de tra...
Comment faire avec Kinect ?  Lancement de la capture de flux                NOM Prénom  vidéos évènement  A chaque  OnVide...
DEMOReconnaissance faciale
Conclusion
Conclusion  Ecosystème Microsoft  Visual Studio pour tout unir  Faire des jeux c’est « facile »  Le design c’est important...
Envie d’essayer ?  Viens chercher le fun !  Stand So@t (n°39)
Q&AVous avez des                  Nous avons desquestions ?                    réponses Cyril Cathala – http://cyril.cath...
Prochain SlideShare
Chargement dans…5
×

Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7

682 vues

Publié le

"Pour assister à cette session, il faudra aimer au moins une de ces choses : les jeux, Windows Phone, Kinect, agiter les bras, les écureuils ou les tanks. Nous avons imaginé, pour toi public, des scénarios multi-écrans mettant en scène tous ces éléments ! En effet, avec la palette des technologies et outils proposée par Microsoft, il est assez simple de réaliser des applications originales et de bonne qualité. Pour autant, rien n’est magique et quelques concepts nécessitent de se retrousser un peu les manches. Pour mieux les saisir, cette session propose de se glisser dans les coulisses de la réalisation de plusieurs jeux collaboratifs: - SoSlam : Le premier joueur doit lancer un écureuil dans les airs à l'aide de son Windows Phone, le timing est décisif ! Le second joueur entre alors en action et doit battre des bras pour maintenir l'écureuil en l'air le plus longtemps possible, grâce à Kinect. - SoTank : Le premier joueur, Windows Phone en main, prend le contrôle d'un tank qu'il doit déplacer sur un terrain parsemé de cibles. Son co-pilote contrôle quant à lui le canon du blindé, et doit tirer sur les cibles le plus rapidement possible, grâce au Kinect. Ces deux jeux déjantés qui raviront votre âme de geek, offrent en plus la possibilité à une foule en délire d’être au cœur de l’action depuis leurs postes via un client Silverlight 5. Basées sur XNA, Silverlight, Kinect et WPF, ces démos permettront de faire le tour de plusieurs problématiques telles que: - Comment faire communiquer plusieurs clients en temps réel ? - Comment factoriser le code et le partager entre plusieurs plates-formes ? - Quid de l'architecture globale ? L'objectif est de montrer les possibilités offertes par l'environnement riche de Microsoft, et pourquoi pas, donner les clés pour les applications de demain. Attention, en prévision d’éventuelles chutes d’écureuils, un port du casque est vivement conseillé. La bonne humeur est, elle, obligatoire."

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
682
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
4
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7

  1. 1. palais descongrèsParis7, 8 et 9février 2012
  2. 2. Jeux multi-écrans :envolez-vous avec Kinect,Silverlight et WP7 Cyril CATHALA Nathanaël MARCHAND Nathalie PETTIER So@t
  3. 3. SOMMAIRE Présentation Outils multiplateforme Couche de communication Architecture des jeux Logique jeux Gestuelle avec Kinect Design BackOffice
  4. 4. Introduction
  5. 5. Equipe So@t Experts Cyril CATHALAblog.soat.fr Expert .NET@SoatExpertsNET Blog : http://cyril.cathala.orgfacebook.com/SoatExpertsNET Twitter : @CyrilCathala Nathanaël MARCHAND Nathalie PETTIERExpert .NET Experte Silverlight / WPFBlog : http://blog.ou-bien.net Blog : blog.devndesign.frTwitter : @NatMarchand Twitter : @nathaliepettierMerci à : David POULIN Sébastien FERRANDExpert .NET Expert .NET
  6. 6. So@t en quelques mots … SSII spécialisé dans le développement 10 ans de savoir-faire .Net / Java 250 collaborateurs Tous les métiers du développement 4 ans d’expertise Silverlight / WPF Société Générale, Dexia, Vente Privée, Canal+, M6, Radio France, Crédit Agricole, Eurosport, Sarenza.com
  7. 7. So@t Experts 3 pôles d’expertise à So@t : .NET / Java / Agilité Capitalisation (publications sur le blog, production de support de formation) Formations externes ciblées expertise Animation de conférences Publication d’applications de référence : HappyNet, application composite SoPrism, générateur d’application Silverlight intégrant le framework PRISM pour créer des applications composites SoMVC, générateur d’application ASP.Net MVC 3 basé sur la structure d’une base de donnée SQL Server Support technique dans les forums communautaires et groupes (developpez.com, facebook, etc.)
  8. 8. Présentation des jeuxmulti-écrans
  9. 9. VIDEOPrésentation de SoNuts & SoTank
  10. 10. Présentation des jeux SoNuts SoTank Faites volez un Pilotez un tank 3D écureuil ! 2D + 3D 2D Kinect Kinect 2 écrans : XNA, 3 écrans : XNA, Windows Phone Silverlight, Windows Phone=> Équipe de développeurs débutante dans les jeux vidéos
  11. 11. Schéma global decommunication Joueur 1 Autres écrans Hot Spot Wifi (observateurs du jeu)Serveur de jeux = TV + PC + Kinect Dossier Partagé + scores BDD Joueur 2 Web Service Back Office Reconnaissance joueurs
  12. 12. Architecture
  13. 13. Architecture des jeux SoNuts SoTank Messaging Messaging Communicator
  14. 14. Architecture des jeux : SoNuts Clients Windows WP7 Silverlight Window Silverligh s WP7 t Game Logic Messaging Communicator
  15. 15. Architecture des jeux : SoTank Clients 3D Client 2D Windows Silverlight WP7 Window Silverligh s t WP7 Game Logic Game Logic 3D 2D Messaging Communicator
  16. 16. Couche decommunication
  17. 17. UDP vs TCP TCP Connecté Fiable Ordonné Contrôles de flux et congestion UDP Déconnecté Simple & Rapide Aucune garantie de fiabilité ou d’ordre Gestion de flux manuelle
  18. 18. UDP vs TCP TCP semble mieux … … FAUX ! La fiabilité a un prix « Flot » de données Acquittement Renvoi d’un paquet perdu Jeux = Temps réel Bonus : Multicast !
  19. 19. Outils multiplateforme
  20. 20. Outils multiplateforme Partage du code Portable Class Library .NET Framework, Silverlight, WP7, Xbox 360 Certaines dll supportées Project Linker Synchronisation de projets via liens symboliques Rx Framework
  21. 21. DEMOArborescenceCommunication
  22. 22. Logique des jeux
  23. 23. SoNuts : Communication client/ serveur Jeu Joueur Statut initial Joueurs prêts Ecureuil tapé Mises à jour : (gentimment) - position de Partie en cours l’écureil - position oiseaux Ecureuil volant - position bonus Ecureuil par Partie terminée terre
  24. 24. Approche #1 Client « stupide » sans aucune prédiction Serveur réseau Client Position 1 [Server] Position 1 Position 2 [Server] [Server] Position 2 [Server] Position 3 [Server] Position 3 [Server]
  25. 25. Approche #1 Client « stupide » sans aucune prédiction Serveur réseau Client Position 1 [Server] Position 1 [Server] Action joueur Action joueur [Client] [Client] Position 3 [Server] Position 3 [Server]
  26. 26. Approche #2 Approximation côté client en attendant le retour serveur Interpolation lors de la synchronisation serveur Serveur réseau Client Position + Vitesse 1 [Server] Position + Vitesse 1 [Server] Position 1.1 [Client] interpolation Position 1.2 Position + Vitesse [Client] + lissage 2 [Server] Position + Vitesse 2 [Server]
  27. 27. Approche #2 Approximation côté client en attendant le retour serveur Lissage lors de la synchronisation serveur interpolation position serveur client
  28. 28. Approche #3 Le client prédit les mouvements à chaque action du joueur Correction par historisation des actions passées Serveur réseau Client Position + Vitesse 1 [Server] Position 1 [Server] Action joueur [Client] Action joueur Position + Vitesse [Client] 1.1 [Client] prédiction Position + Vitesse Position + Vitesse 1.2 [Client] 2 [Server] Position + Vitesse 2 [Server]
  29. 29. DEMOLissage
  30. 30. SoTank : Communication client /serveur Workflow de jeu comparable à SoNuts Un client PC plus complexe à animer Des responsabilités moins décentralisées Des problématiques similaires
  31. 31. SoTank : La puissance de XNA Extensibilité du content pipeline:  Génération du terrain via une texture (Height Map)  Positionnement des arbres Shaders  Effets pyrotechniques  Billboarding des arbres Utilisation intensive des Maths!  Matrices en folies & Transformations dans l’espace
  32. 32. SoTank & SoNuts: Portabilité Différence dans les API XNA:  HiDef  Reach Silverlight ne possède pas tout XNA Considérations Matérielles
  33. 33. Gestures avec Kinect
  34. 34. Présentation de Kinect Kinect SDK pour Windows 3 flux disponibles Image Profondeur Audio Suivi de squelette Notion de joint (point de repère)
  35. 35. Présentation de Kinect
  36. 36. Gesture sur SoNuts α2α1 Amplitude = α2 + α1
  37. 37. Gesture sur SoTank + - yx z Déclenchement du canon : mouvement haut vers bas Direction du canon
  38. 38. DEMOGestures Kinect(ou comment avoir l’air intelligent)
  39. 39. DesignLe design offre une vrai plus value à tous lesprojets numériques, une promesse« d’expérience utilisateur » digne de ce nom.
  40. 40. Processus de développement Avant Après => Collaboration Designer / Développeur
  41. 41. Images pour WindowsPhone: SplashScreen Icones : tile, icone applicationImages communes : Sprites / Textures 2D Personnages (écureuil, oiseaux, panda) Environnement (arbre, panneaux, nuages, noisettes, etc.) Hauteur, largeur identiques pour chaque image
  42. 42. Images pour WindowsPhone: SplashScreen Icones : tile, icone application Images communes : Sprites / Textures 2D Signalétiques (icônes du menu, etc.) 3D : tank, environnement (sol, arbres, etc.)Texture qui génère les reliefs du terrain Vue « carte » du terrain
  43. 43. BackOffice :SoGameLe « back » se doit d’être aussi joli et à lahauteur que le « front »
  44. 44. Présentation de SoGame Application WPF « Metro Style » qui gère : Inscriptio n des joueurs Récupération des scores et photos Synchronisati Envoi des Reconnais Top des on des photos des sance joueurs joueurs et joueurs parties faciale joueurs
  45. 45. Prise de photo avec Kinect Lancement de la capture de flux vidéos dans le Kinect runtime : var runtime = Runtime.Kinects[0]; runtime.Initialize(RuntimeOptions.UseColor); //Camera vidéo runtime.VideoStream.Open(ImageStreamType.Video , 2, ImageResolution.Resolution640x480, ImageType.Color); runtime.VideoFrameReady += OnVideoFrameReady; private void OnVideoFrameReady(object s, ImageFrameReadyEventArgs e) { if (_takePicture) Déclenchement unique de la photo var screenshot = durant la partie… e.ImageFrame.ToBitmapSource(); } L’image est sauvegardée sur la machine En fin de la partie, envoi du score + photo via web service
  46. 46. Reconnaissance faciale OPENCV : Comment ça marche ? bibliothèque Open Chargement Source de traitement haarcascades pour la d’image en temps réel détection de visage Initialiser le périphérique EmguCV : permet de capture d’utiliser la librairie DetectHaarCascade et OPENCV dans un EigenObjectRecognizer environnement .NET pour chaque image à analyser
  47. 47. Comment faire avec Kinect ? Lancement de la capture de flux NOM Prénom vidéos évènement A chaque OnVideoFrameReady, on utilise la méthode DetectHaarCascade pour détecter des visages Parmi ces visages, on compare avec notre liste de visages enregistrés (BDD) avec la méthode EigenObjectRecognizer Si un visage est reconnu, on le retire de la liste pour continuer la comparaison sur les autres visages
  48. 48. DEMOReconnaissance faciale
  49. 49. Conclusion
  50. 50. Conclusion Ecosystème Microsoft Visual Studio pour tout unir Faire des jeux c’est « facile » Le design c’est important ! Code source : http://sogames.codeplex.com Blog : blog.soat.fr
  51. 51. Envie d’essayer ? Viens chercher le fun ! Stand So@t (n°39)
  52. 52. Q&AVous avez des Nous avons desquestions ? réponses Cyril Cathala – http://cyril.cathala.org - @CyrilCathalaNathanaël Marchand – http://blog.ou-bien.net - @NatMarchandNathalie Pettier – http://blog.devndesign.fr - @NathaliePettier

×