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

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

Introduction

Equipe Merci à : So@t Experts Cyril CATHALA Expert .NET blog.soat.fr @SoatExpertsNET facebook.com/SoatExpertsNET Cyril CATHALA Expert .NET Blog : http://cyril.cathala.org Twitter : @CyrilCathala Nathanaël MARCHAND Expert .NET Blog : http://blog.ou-bien.net Twitter : @NatMarchand Nathalie PETTIER Experte Silverlight / WPF Blog : blog.devndesign.fr Twitter : @nathaliepettier Merci à : David POULIN Expert .NET Sébastien FERRAND Expert .NET

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

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

Présentation des jeux multi-écrans

Présentation de SoNuts & SoTank

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

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

Architecture

Architecture des jeux SoNuts SoTank Messaging Messaging Communicator

Architecture des jeux : SoNuts Clients Windows WP7 Silverlight Game Logic Windows WP7 Silverlight Messaging Communicator

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

Arborescence des projets

Couche de communication

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

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

Outils multiplateforme

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

Arborescence Communication

Logique des jeux

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

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

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]

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]

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]

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

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]

Lissage

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

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

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

Gestures avec Kinect

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

Présentation de Kinect

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

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

Gestures Kinect (ou comment avoir l’air intelligent)

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

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

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

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

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 »

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

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

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

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

Reconnaissance faciale

Conclusion

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

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

Vous avez des questions ? Nous avons des réponses  Q&A Vous avez des questions ? Nous avons des réponses  Cyril Cathala – http://cyril.cathala.org - @CyrilCathala Nathanaël Marchand – http://blog.ou-bien.net - @NatMarchand Nathalie Pettier – http://blog.devndesign.fr - @NathaliePettier