Archives par étiquette : webgl game

Spacegoo Chess is Alive

Laisser un commentaire

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

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

 

 

Mise à jour de la démo de jeu de cartes

Laisser un commentaire

SPACEGOO CARDS v2 est en ligne. Par rapport à la première version, nous avons :

  • Allégé la démo (elle pèse maintenant 1,7MO), notamment grâce à une simplification du maillage du personnage,
  • Fluidifié les mouvements
  • Ajouté le clignement des yeux par changement de texture
  • Ajouté un mouvement léger de respiration
  • Ajouté des accessoires (un chapeau et des lunettes)
  • Rajouté des expressions du visage, par déformation du maillage en deux points
  • Mis en place un menu à droite pour éviter le recours systématique au clavier
  • Relooké le personnage (surtout la coiffure !)

Afficher la démo

Si vous n’êtes pas compatible webgl, vous pouvez toujours admirer la capture d’écran vidéo :

WebGL card Dealer (v2)
Runtime
0:58
Compteur de vues
547

Nous sommes maintenant dans les starting blocks pour le développement d’un poker complet.

Nouveau jeu : Machine à sous

4 réponses

Notre nouveau jeu en ligne est une machine à sous en 3D.

Vous pouvez y jouer en suivant ce lien.

Le joueur commence avec 100 crédits qu’il mise un par un. Il faut cliquer sur le bouton « spin » pour miser 1 crédit. Les gains sont sur la ligne du milieu. Un logo SPACEGOO vous fera gagner deux crédits, alors qu’il faut trois symboles identiques pour en gagner plus (le tableau des gains est sur la machine).

Vous pouvez également cliquer sur les divers objets dans la pièce, certains sont interactifs.

Si vous n’êtes pas compatibles WebGL, voici la vidéo de présentation :

WebGL slot machine
Runtime
0:50
Compteur de vues
888

Nouvelle démo webgl : SPACEGOO Cards

Laisser un commentaire

SPACEGOO Cards est une démo de jeu de cartes en ligne.
Dans ce domaine, le webgl s’avère une alternative intéressante au flash.

La démo est disponible ici : www.spacegoo.com/cards

Voici les différents contrôles :
– Clic sur une carte : poser/prendre une carte sur la table
– Clic sur le tableau joker : aide
– Touches claviers :
1 : Vue avant (éloignée)
2 : Vue du personnage
3 : Vue de dessus
4 : Vue de droite
5 : Vue de gauche
6 : Vue de gauche en arrière
7 : Vue de droite en arrière
8 : Vue de devant (proche)
Espace/v : Vue suivante
a,b,c,d,e,f,g,h,l,r,s : actions diverses et variées. On vous laisse découvrir !

Si votre configuration n’est pas compatible Webgl ( c’est à dire si ça ne marche pas ), voici la vidéo capture d’écran :

Dans cette démo le personnage est animé par squelette, c’est à dire qu’un seul maillage est chargé, et chaque partie est liée à un ‘os’.
La plupart des autres démos/jeux programmés en webgl et disposant de personnages animés sont réalisés en ‘keyframe’, c’est à dire que plusieurs maillages correspondant à des positions clés du personnages sont chargés, et le mouvement est réalisé par interpolation linéaire entre ces maillages.

Nous avons choisi la technique de l’animation par squelette pour plusieurs raisons :
– le temps de chargement du personnage est quasiment indépendant du nombre d’actions. On peut alors utiliser des maillages assez fins ( le maillage du personnage comporte 14000 points) avec des personnages pouvant effectuer des actions variées sans faire exploser le temps de chargement.
– il est plus facile de gérer les points de liaisons avec cette technique (un point de liaison est par exemple une paume de main à laquelle on peut lier un autre objet, typiquement une carte dans le cas présent).