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

Présentation au sujet: "Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7"— Transcription de la présentation:

1

2 Jeux multi-écrans : envolez-vous avec Kinect, Silverlight et WP7
Cyril CATHALA Nathanaël MARCHAND Nathalie PETTIER

3 SOMMAIRE Présentation Outils multiplateforme Couche de communication
Architecture des jeux Logique jeux Gestuelle avec Kinect Design BackOffice

4 Introduction

5 Equipe Merci à : So@t Experts Cyril CATHALA Expert .NET
blog.soat.fr @SoatExpertsNET facebook.com/SoatExpertsNET Cyril CATHALA Expert .NET Blog : Twitter Nathanaël MARCHAND Expert .NET Blog : Twitter Nathalie PETTIER Experte Silverlight / WPF Blog : blog.devndesign.fr Twitter Merci à : David POULIN Expert .NET Sébastien FERRAND 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 date

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 jeux multi-écrans

9 Présentation de SoNuts & SoTank

10 Présentation des jeux SoNuts SoTank Faites volez un écureuil ! 2D
Kinect 3 écrans : XNA, Silverlight, Windows Phone Pilotez un tank 3D 2D + 3D Kinect 2 écrans : XNA, Windows Phone => Équipe de développeurs débutante dans les jeux vidéos

11 Schéma global de communication
Joueur 1 Autres écrans (observateurs du jeu) Hot Spot Wifi Serveur de jeux = TV + PC + Kinect Dossier Partagé + scores Joueur 2 BDD 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 Game Logic Windows WP7 Silverlight Messaging Communicator

15 Architecture des jeux : SoTank
Clients 3D Client 2D Windows Silverlight WP7 Game Logic 3D Windows Silverlight Game Logic 2D WP7 Messaging Communicator

16 Arborescence des projets

17 Couche de communication

18 UDP vs TCP TCP UDP 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 date

19 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 ! date

20 Outils multiplateforme

21 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 date

22 Arborescence Communication

23 Logique des jeux

24 SoNuts : Communication client / serveur
Jeu Joueur Statut initial Joueurs prêts Partie en cours Ecureuil tapé (gentimment) Mises à jour : - position de l’écureil - position oiseaux - position bonus Ecureuil volant Ecureuil par terre Partie terminée

25 SoNuts : Performances et synchronisation avec le serveur
Approche #1 : Client « stupide » sans aucune prédiction 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 date

26 Approche #1 Client « stupide » sans aucune prédiction Serveur Client
réseau Position 1 [Server] Position 1 [Server] Position 2 [Server] Position 2 [Server] Position 3 [Server] Position 3 [Server]

27 Approche #1 Client « stupide » sans aucune prédiction Serveur Client
réseau Position 1 [Server] Position 1 [Server] Action joueur [Client] Action joueur [Client] Position 3 [Server] Position 3 [Server]

28 Approche #2 Serveur Client
Approximation côté client en attendant le retour serveur Interpolation lors de la synchronisation serveur Serveur Client réseau Position + Vitesse 1 [Server] Position + Vitesse 1 [Server] Position 1.1 [Client] interpolation + lissage Position 1.2 [Client] Position + Vitesse 2 [Server] Position + Vitesse 2 [Server]

29 Approche #2 Approximation côté client en attendant le retour serveur
Lissage lors de la synchronisation serveur interpolation client position serveur

30 Approche #3 Serveur Client
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] Position + Vitesse 1.1 [Client] Action joueur [Client] prédiction Position + Vitesse 1.2 [Client] Position + Vitesse 2 [Server] Position + Vitesse 2 [Server]

31 Lissage

32 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

33 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

34 SoTank & SoNuts: Portabilité
Différence dans les API XNA: HiDef Reach Silverlight ne possède pas tout XNA Considérations Matérielles

35 Gestures avec Kinect

36 Présentation de Kinect
Kinect SDK pour Windows 3 flux disponibles Image Profondeur Audio Suivi de squelette Notion de joint (point de repère)

37 Présentation de Kinect

38 Gesture sur SoNuts α2 α1 Amplitude = α2 + α1

39 Gesture sur SoTank Déclenchement du canon : Direction du canon + - y x
z Déclenchement du canon : mouvement haut vers bas Direction du canon

40 Gestures Kinect (ou comment avoir l’air intelligent)

41 Design Le design offre une vrai plus value à tous les projets numériques, une promesse « d’expérience utilisateur » digne de ce nom.

42 Processus de développement
Avant Après => Collaboration Designer / Développeur

43 Images pour WindowsPhone:
SplashScreen Icones : tile, icone application Images communes : Sprites / Textures 2D Personnages (écureuil, oiseaux, panda) Environnement (arbre, panneaux, nuages, noisettes, etc.) Hauteur, largeur identiques pour chaque image

44 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

45 Le « back » se doit d’être aussi joli et à la hauteur que le « front »
BackOffice : SoGame Le « back » se doit d’être aussi joli et à la hauteur que le « front »

46 Présentation de SoGame
Application WPF « Metro Style » qui gère : Inscription des joueurs Récupération des scores et photos Synchronisation des joueurs et parties Envoi des photos des joueurs Reconnaissance faciale joueurs Top des joueurs

47 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) var screenshot = e.ImageFrame.ToBitmapSource(); } Déclenchement unique de la photo durant la partie… L’image est sauvegardée sur la machine En fin de la partie, envoi du score + photo via web service date

48 Reconnaissance faciale
OPENCV : bibliothèque Open Source de traitement d’image en temps réel EmguCV : permet d’utiliser la librairie OPENCV dans un environnement .NET Comment ça marche ? Chargement haarcascades pour la détection de visage Initialiser le périphérique de capture DetectHaarCascade et EigenObjectRecognizer pour chaque image à analyser

49 Comment faire avec Kinect ?
Lancement de la capture de flux vidéos NOM Prénom A chaque évènement 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 date

50 Reconnaissance faciale

51 Conclusion

52 Conclusion Ecosystème Microsoft Visual Studio pour tout unir
Faire des jeux c’est « facile » Le design c’est important ! Code source : Blog : blog.soat.fr

53 Envie d’essayer ? Viens chercher le fun ! Stand (n°39)

54 Vous avez des questions ? Nous avons des réponses 
Q&A Vous avez des questions ? Nous avons des réponses  Cyril Cathala – Nathanaël Marchand – Nathalie Pettier –