Your SlideShare is downloading. ×
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

333

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 …

"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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
333
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. palais descongrèsParis7, 8 et 9février 2012
  • 2. Jeux multi-écrans :envolez-vous avec Kinect,Silverlight et WP7 Cyril CATHALA Nathanaël MARCHAND Nathalie PETTIER So@t
  • 3. SOMMAIRE Présentation Outils multiplateforme Couche de communication Architecture des jeux Logique jeux Gestuelle avec Kinect Design BackOffice
  • 4. Introduction
  • 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. 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. 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. Présentation des jeuxmulti-écrans
  • 9. VIDEOPrésentation de SoNuts & SoTank
  • 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. 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. Architecture
  • 13. Architecture des jeux SoNuts SoTank Messaging Messaging Communicator
  • 14. Architecture des jeux : SoNuts Clients Windows WP7 Silverlight Window Silverligh s WP7 t Game Logic Messaging Communicator
  • 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. Couche decommunication
  • 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. 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. Outils multiplateforme
  • 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. DEMOArborescenceCommunication
  • 22. Logique des jeux
  • 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. 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. 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. 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. Approche #2 Approximation côté client en attendant le retour serveur Lissage lors de la synchronisation serveur interpolation position serveur client
  • 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. DEMOLissage
  • 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. 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. SoTank & SoNuts: Portabilité Différence dans les API XNA:  HiDef  Reach Silverlight ne possède pas tout XNA Considérations Matérielles
  • 33. Gestures avec Kinect
  • 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. Présentation de Kinect
  • 36. Gesture sur SoNuts α2α1 Amplitude = α2 + α1
  • 37. Gesture sur SoTank + - yx z Déclenchement du canon : mouvement haut vers bas Direction du canon
  • 38. DEMOGestures Kinect(ou comment avoir l’air intelligent)
  • 39. DesignLe design offre une vrai plus value à tous lesprojets numériques, une promesse« d’expérience utilisateur » digne de ce nom.
  • 40. Processus de développement Avant Après => Collaboration Designer / Développeur
  • 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. 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. BackOffice :SoGameLe « back » se doit d’être aussi joli et à lahauteur que le « front »
  • 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. 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. 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. 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. DEMOReconnaissance faciale
  • 49. Conclusion
  • 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. Envie d’essayer ? Viens chercher le fun ! Stand So@t (n°39)
  • 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

×