palais des congrès paris 7, 8 et 9 février 2012. jeux multi-écrans : envolez-vous avec kinect,...
TRANSCRIPT
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 [email protected]/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