52
palais des congrès Paris 7, 8 et 9 février 2012

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

palais des congrès Paris

7, 8 et 9 février 2012

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

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

Nathanaël MARCHAND

Nathalie PETTIERSo@t

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

PrésentationOutils multiplateformeCouche de communicationArchitecture des jeuxLogique jeuxGestuelle avec KinectDesignBackOffice

SOMMAIRE

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

Introduction

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

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 [email protected]/SoatExpertsNET

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

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 …

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

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

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

Présentation des jeux multi-écrans

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

VIDEO

Présentation de SoNuts & SoTank

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

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

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

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)

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

Architecture

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

Architecture des jeux

Communicator

Messaging Messaging

SoNuts SoTank

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

Architecture des jeux : SoNuts

Communicator

Messaging

Windows WP7 Silverlight

Clients

Game Logic

Windows WP7 Silverlig

ht

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

Architecture des jeux : SoTank

Communicator

Messaging

Windows WP7Silverlig

ht

Clients 3D

Game Logic 2D

WP7

Game Logic 3D

Windows

Silverlight

Client 2D

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

Couche de communication

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

TCPConnecté FiableOrdonnéContrôles de flux et congestion

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

UDP vs TCP

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

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

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

Outils multiplateforme

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

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

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

DEMO

ArborescenceCommunication

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

Logique des jeux

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

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

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

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

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

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]

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

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

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

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

Approche #2

interpolation client

position serveur

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

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]

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

DEMO

Lissage

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

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

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

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

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

Différence dans les API XNA: HiDef Reach

Silverlight ne possède pas tout XNA

Considérations Matérielles

SoTank & SoNuts: Portabilité

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

Gestures avec Kinect

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

Kinect SDK pour Windows

3 flux disponiblesImageProfondeurAudio

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

Présentation de Kinect

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

Présentation de Kinect

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

Gesture sur SoNuts

Amplitude = α2 + α1

α1

α2

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

Gesture sur SoTank

Direction du canon

x

y

z Déclenchement du canon : mouvement haut vers bas

+

-

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

DEMO

Gestures Kinect(ou comment avoir l’air intelligent)

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

Design

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

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

Processus de développement

Avant Après

=> Collaboration Designer / Développeur

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

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

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

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

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

BackOffice : SoGame

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

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

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

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

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…

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

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

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

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

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

DEMO

Reconnaissance faciale

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

Conclusion

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

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

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

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

Envie d’essayer ?

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

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