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

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

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

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

4. Introduction

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

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. VIDEO
Présentation de SoNuts & SoTank

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

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

15. Architecture des jeux : SoTank
Clients 3D Client 2D
Windows Silverlight WP7
Window Silverligh
s t
WP7
Game Logic
Game Logic 3D 2D
Messaging
Communicator

16. Couche de
communication

17. UDP vs TCP
TCP
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

18. 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 !

19. Outils multiplateforme

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

21. DEMO
Arborescence
Communication

22. Logique des jeux

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

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

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

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

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

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

29. DEMO
Lissage

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

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

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

33. Gestures avec Kinect

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

35. Présentation de Kinect

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

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

38. DEMO
Gestures Kinect
(ou comment avoir l’air intelligent)

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

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

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

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

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

44. Présentation de SoGame
Application WPF « Metro Style » qui gère :
Inscriptio
n des
joueurs
Récupération
des scores et
photos
Synchronisati Envoi des Reconnais Top des
on des photos des sance joueurs
joueurs et joueurs
parties
faciale
joueurs

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

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

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

48. DEMO
Reconnaissance faciale

49. Conclusion

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

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

52. Q&A
Vous avez des Nous avons des
questions ? 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