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

720 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×