"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."
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.)
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
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
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 !
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
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]
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
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
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
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