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

palais des congrès Paris

7, 8 et 9 février 2012

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

Nathanaël MARCHAND

Nathalie PETTIERSo@t

PrésentationOutils multiplateformeCouche de communicationArchitecture des jeuxLogique jeuxGestuelle avec KinectDesignBackOffice

SOMMAIRE

Introduction

Equipe

Cyril CATHALAExpert .NETBlog : http://cyril.cathala.orgTwitter : @CyrilCathala

Nathalie PETTIERExperte Silverlight / WPFBlog : blog.devndesign.frTwitter : @nathaliepettier

David POULINExpert .NET

Nathanaël MARCHANDExpert .NETBlog : http://blog.ou-bien.netTwitter : @NatMarchand

Merci à :Sébastien FERRAND

Expert .NET

So@t Expertsblog.soat.fr@SoatExpertsNETfacebook.com/SoatExpertsNET

SSII spécialisé dans le développement10 ans de savoir-faire .Net / Java

250 collaborateursTous les métiers du développement

4 ans d’expertise Silverlight / WPFSociété Générale, Dexia, Vente Privée, Canal+, M6, Radio France, Crédit Agricole, Eurosport, Sarenza.com

So@t en quelques mots …

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 expertiseAnimation de conférencesPublication d’applications de référence :

HappyNet, application compositeSoPrism, générateur d’application Silverlight intégrant le framework PRISM pour créer des applications compositesSoMVC, 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

VIDEO

Présentation de SoNuts & SoTank

SoNuts SoTank

Faites volez un écureuil !2DKinect3 écrans : XNA, Silverlight, Windows Phone

Pilotez un tank 3D2D + 3DKinect2 écrans : XNA, Windows Phone

Présentation des jeux

=> Équipe de développeurs débutante dans les jeux vidéos

Schéma global de communication

Hot Spot Wifi

BDD

Dossier PartagéServeur de jeux = TV + PC + Kinect

Back Office

Joueur 2

Joueur 1

Web Service

Reconnaissance joueurs

+ scores

Autres écrans (observateurs du jeu)

Architecture

Architecture des jeux

Communicator

Messaging Messaging

SoNuts SoTank

Architecture des jeux : SoNuts

Communicator

Messaging

Windows WP7 Silverlight

Clients

Game Logic

Windows WP7 Silverlig

ht

Architecture des jeux : SoTank

Communicator

Messaging

Windows WP7Silverlig

ht

Clients 3D

Game Logic 2D

WP7

Game Logic 3D

Windows

Silverlight

Client 2D

Couche de communication

TCPConnecté FiableOrdonnéContrôles de flux et congestion

UDPDéconnectéSimple & RapideAucune garantie de fiabilité ou d’ordreGestion de flux manuelle

UDP vs TCP

TCP semble mieux …… FAUX !

La fiabilité a un prix« Flot » de donnéesAcquittementRenvoi d’un paquet perdu

Jeux = Temps réelBonus : Multicast !

UDP vs TCP

Outils multiplateforme

Partage du code

Portable Class Library.NET Framework, Silverlight, WP7, Xbox 360Certaines dll supportées

Project LinkerSynchronisation de projets via liens symboliques

Rx Framework

Outils multiplateforme

DEMO

ArborescenceCommunication

Logique des jeux

SoNuts : Communication client / serveur

Statut initial

Partie en cours

Joueurs prêts

Partie terminée

Ecureuil tapé (gentimment)

Ecureuil volant

Ecureuil par terre

Jeu Joueur

Mises à jour :- position de l’écureil- position oiseaux- position bonus

Client « stupide » sans aucune prédiction

Approche #1

Position 1 [Server]

Position 1 [Server]

Serveur

Client

Position 2 [Server]

Position 2 [Server]Position 3

[Server]

Position 3 [Server]

réseau

Client « stupide » sans aucune prédiction

Approche #1

Position 1 [Server]

Position 1 [Server]

Serveur

Client

Action joueur [Client]

Position 3 [Server]

Position 3 [Server]

réseau

Action joueur [Client]

Approximation côté client en attendant le retour serveurInterpolation lors de la synchronisation serveur

Approche #2

Position + Vitesse 1 [Server]

Position + Vitesse 1 [Server]

Serveur

Client

Position + Vitesse 2 [Server]

Position + Vitesse 2 [Server]

interpolation + lissage

Position 1.1 [Client]

Position 1.2 [Client]

réseau

Approximation côté client en attendant le retour serveurLissage lors de la synchronisation serveur

Approche #2

interpolation client

position serveur

Le client prédit les mouvements à chaque action du joueurCorrection par historisation des actions passées

Approche #3

Position + Vitesse 1 [Server]

Position 1 [Server]

Serveur

Client

prédiction

Position + Vitesse 1.1 [Client]

Position + Vitesse 1.2 [Client]

réseau

Action joueur [Client]

Position + Vitesse 2 [Server]

Position + Vitesse 2 [Server]

Action joueur [Client]

DEMO

Lissage

Workflow de jeu comparable à SoNuts

Un client PC plus complexe à animer

Des responsabilités moins décentralisées

Des problématiques similaires

SoTank : Communication client / serveur

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 : La puissance de XNA

Différence dans les API XNA: HiDef Reach

Silverlight ne possède pas tout XNA

Considérations Matérielles

SoTank & SoNuts: Portabilité

Gestures avec Kinect

Kinect SDK pour Windows

3 flux disponiblesImageProfondeurAudio

Suivi de squeletteNotion de joint (point de repère)

Présentation de Kinect

Présentation de Kinect

Gesture sur SoNuts

Amplitude = α2 + α1

α1

α2

Gesture sur SoTank

Direction du canon

x

y

z Déclenchement du canon : mouvement haut vers bas

+

-

DEMO

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:SplashScreenIcones : tile, icone application

Images communes : Sprites / Textures 2DPersonnages (écureuil, oiseaux, panda)Environnement (arbre, panneaux, nuages, noisettes, etc.)

Hauteur, largeur identiques pour chaque image

Images pour WindowsPhone:SplashScreenIcones : tile, icone application

Images communes : Sprites / Textures 2DSignalétiques (icônes du menu, etc.)

3D : tank, environnement (sol, arbres, etc.)

Texture qui génère les reliefs du terrainVue « carte » du terrain

BackOffice : SoGame

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

Envoi des photos des joueurs

Application WPF « Metro Style » qui gère :

Inscription des joueurs

Présentation de SoGame

Récupération des scores et photos

Synchronisation des joueurs et parties

Reconnaissance faciale joueurs

Top des joueurs

Lancement de la capture de flux vidéos dans le Kinect runtime :

Prise de photo avec Kinect

En fin de la partie, envoi du score + photo via web service

L’image est sauvegardée sur la machine

var runtime = Runtime.Kinects[0];runtime.Initialize(RuntimeOptions.UseColor);//Camera vidéoruntime.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…

OPENCV : bibliothèque Open Source de traitement d’image en temps réelEmguCV : permet d’utiliser la librairie OPENCV dans un environnement .NET

Comment ça marche ?Chargement haarcascades pour la détection de visageInitialiser le périphérique de captureDetectHaarCascade et EigenObjectRecognizer pour chaque image à analyser

Reconnaissance faciale

Lancement de la capture de flux vidéos

Comment faire avec Kinect ?

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

NOM Prénom

DEMO

Reconnaissance faciale

Conclusion

Ecosystème Microsoft

Visual Studio pour tout unirFaire des jeux c’est « facile »

Le design c’est important !

Code source : http://sogames.codeplex.comBlog : blog.soat.fr

Conclusion

Viens chercher le fun !Stand So@t (n°39)

Envie d’essayer ?

Q&A

Vous avez des questions ?

Nous avons des réponses

Cyril Cathala – http://cyril.cathala.org - @CyrilCathalaNathanaël Marchand – http://blog.ou-bien.net - @NatMarchandNathalie Pettier – http://blog.devndesign.fr - @NathaliePettier