Archives de catégorie : Jeux

Jeux vidéos en WebGL

Spacegoo Chess is Alive

Nous avions développé un jeu d’échecs en 3D avec vue webcam de l’adversaire en partenariat avec la Fondation Mozilla pour le salon de l’IETF de l’année dernière, qui se tenait à Paris.

Le jeu avait alors été développé pour Chrome 19, encore en version bêta. Puis il avait été porté pour une version spéciale de Firefox, créée pour le salon et intégrant le support Webrtc.

Google avait effectué des mises à jour cassantes dans le support webrtc, c’est pourquoi nous avons sorti une version compatible avec Chrome 22 il y a quelques mois. Malheureusement, il y a eu depuis encore des updates cassantes, faisant que le jeu ne fonctionnait plus. Je viens de le mettre à jour. Il fonctionne désormais avec la dernière version de Google Chrome (la 27).

Le jeu est disponible ici :

http://www.spacegoo.com/chess

La transmission des flux vidéos et audio est assurée en P2P via l’API webrtc, tandis que les données de contrôle sont transmises via AJAX et un simple serveur push PHP. Le rôle du serveur est très simple : il relaie les messages, sans contrôler les parties.

Si votre connexion est protégée par un firewall, il est possible que le jeu ne fonctionne pas. Dans ce cas vous pouvez toujours visionner la vidéo capture d’écran ci-dessous 😉

Webgl/Webrtc CHESS

Runtime: 6:29
Compteur de vues: 6,581

Démineur multijoueurs

Laisser un commentaire

Voici un démineur multi-joueur que nous avions développé il y a plus d’un an et demi. Il n’utilise pas le webgl, mais seulement l’élément canvas d’HTML5 muni d’un contexte 2D. L’application a été testée avec Chrome.

La partie réseau est gérée avec les websockets et utilise un serveur NodeJS, vieux pentium 4 hébergé dans nos locaux (nous sommes désolés s’il y a d’éventuelles ruptures de service 😉 ). Au cas où personne n’est connecté, des bots peuvent intervenir, avec plus ou moins de dextérité.

L’application est disponible ici : http://www.spacegoo.com/demineur

Spacegoo webgl/webrtc Chess est maintenant en ligne

Laisser un commentaire

En Mars 2012 nous avions développé un jeu d’échecs en 3D avec vue webcam de l’adversaire, utilisant les technologies webgl pour la 3D, getUserMedia API pour la récupération de l’image webcam et webRTC pour la transmettre n P2P entre les joueurs.

L’article sur la démo est ici

Cette application avait été développée en partenariat avec la Mozilla Fundation, et présentée lors du 83° meeting de l’IETF à Paris afin de promouvoir la technologie webRTC.

Lien vers l’article sur Mozilla Hacks

L’intégration de la technologie webRTC a été particulièrement rapide sur Chrome. Les versions stables actuelles l’intègrent parfaitement. Nous avons modifié l’application afin de la mettre en ligne. Voici les fonctionnalités rajoutées :

Légères améliorations du design (sol bleu, éclairage, correction de bugs),
Intégration d’ICE pour la traversée des NAT
Remplacement du serveur utilisé pour la mise en relation entre les joueurs et l’envoi des données de jeu (avant c’était un programme spécifique, indéployable sur notre serveur, et maintenant c’est un script PHP utilisant AJAX et un protocole ACK à fenêtre coulissante).

L’application ayant été développée très rapidement (moins d’une semaine), il est possible qu’elle ne soit pas entièrement déboguée.

Elle est disponible ici : http://www.spacegoo.com/chess

Une vidéo capture d’écran de l’ancienne version est ici : http://www.youtube.com/watch?v=aK1DC2zp6ZE

TEACH ME TO FLY – Jeu de vol en webgl

1 réponse

TEACH ME TO FLY est un petit jeu de vol en webgl développé en deux jours en utilisant la librairie Three.js . Le code est disponible sur github ici.

Ce jeu peut facilement être recustomisé. Tux est un modèle Collada créé sous Blender puis exporté. La map est dans l’index.html et elle est composée de lignes sous la forme :

 FF 32 00 EA EA EF EF FF FF A8 00 FF \

Chaque ligne de ce type représente une rangée de building. Chaque bloc de charactères hexadécimaux représente un building. La forme du building correspond à la notation binaire du bloc en hexadécimal. Par exemple FF s’écrit 11111111 en binaire, et sera donc un building plein de hauteur maximale.

L’éclairage de la scène se compose d’une spotlight placée au niveau du pingouin pour éclairer les buildings, d’une lumière ambiante, d’une pointlight orangée placée au niveau de la caméra pour éclairer surtout le pingouin, et d’une lumière directionnelle utilisée uniquement pour l’ombrage.

Le jeu est disponible ici

Voici la vidéo capture d’écran pour les non compatibles webgl :

Webgl game : teach me to fly

Runtime: 1:29
Compteur de vues: 4,247

CHESS CAM, un jeu d’échecs en 3D avec webcam

2 réponses

Nous avons effectué un petit break dans le projet sur lequel nous travaillons depuis 3 mois, et sur lequel nous n’avons encore rien communiqué, afin de développer un sympathique jeu d’échecs en 3D en 5 jours.

Au niveau 3D, la démonstration repose sur une version allégée du moteur 3D SPACEGOO. L’éclairage est réalisé par combinaison d’ambient occlusion par cuisson de texture (baking) avec le modèle d’éclairage de Blinn Phong ( http://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_shading_model ). Les ombres sont réalisées en ombres projetées, en activant l’option GL.BLEND et en utilisant le stencil buffer pour ne pas foncer plusieurs fois les mêmes pixels de l’ombre.

Au niveau de la retransmission webcam, nous avons utilisé la récente technologie webrtc ( http://www.webrtc.org ) . Cette dernière permet de récupérer l’image de la webcam dans l’élément VIDEO d’HTML5, et de la retransmettre en P2P.

Pour l’ouverture du canal de transmission et la transmission P2P, nous avons utilisé le serveur d’exemple (peerconnection_server) dont la compilation est expliquée ici : http://www.webrtc.org/reference/getting-started . Ce serveur ayant tendance à être assez capricieux (il communique par requêtes AJAX avec les clients et parfois il ne les retransmet pas), il a été nécessaire de rajouter un petit protocole de transmission de données avec ACK pour éviter des deadends au cours des parties.

Cette démonstration serait présentée au meeting de l’IETF à Paris à la fin du mois, dans le but de promouvoir la technologie webrtc et de montrer que cette dernière peut apporter bien plus qu’un simple « Skype dans le navigateur ».

En attendant que la démo soit en ligne (il manque le serveur pour la faire tourner, et pour l’instant notre contrat d’hébergement ne nous permet pas de faire tourner ce serveur sur spacegoo.com), voici une video screenshot du résultat :