Bonjour à tous !

Je vous avait parlé ici-même, il y a quelques temps, du projet Fightly : un jeu par navigateur de stratégie au tour par tour, dont le but est d'exploiter des technologies récentes du Web pour amener une expérience de jeu avancée dans un navigateur, le tout en utilisant des technologies de l'Open Web. Eh bien ce projet a quelque peu changé, puisqu'il s'est coupé en deux parties : la création du jeu en lui-même est mise en pause, pendant que l'on travaille actuellement sur un moteur de jeu web qui fournira une grosse base au développement de Fightly. 

Un des gros avantages de ce découpage, c'est que le moteur sera libre, relativement générique, et très extensible. Il aura donc pour but d'être utilisé par vous, développeurs de jeux web ! Et puis aussi par moi, quand même ! :) L'autre avantage, c'est que ce projet est développé dans le cadre de mes études en Master 2 Technologies de l'Information ! Nous sommes donc 5 à travailler dessus, et Pierre-Antoine Champin, enseignant-chercheur à Lyon, a accepté de jouer le rôle de client, et nous guide donc sur le développement de ce projet. 

Je reparlerai plus en détail de ce projet, il y a beaucoup de choses à faire et à dire. Aujourd'hui, je vous livre un texte que j'ai rédigé en introduction du cahier des charges de ce projet, et qui présente le contexte de ce projet, et pourquoi il apparaît viable actuellement. 

Le Jeu vidéo

Le marché du jeu vidéo s’est beaucoup développé depuis l’arrivée de l’ancêtre Pong ou du célèbre Tetris. On joue aujourd’hui à des jeux de plus en plus beaux, demandant de plus en plus de ressources à nos machines. Mais on voit aussi d’autres utilisations du jeu vidéo arriver : le Serious Gaming, par exemple, est une branche en pleine expansion en ce moment. Le Social Gaming également, représenté activement par les nombreux jeux basés sur Facebook et ses possibilités en terme de diffusion.

Si on s’essayait à une catégorisation rapide des jeux vidéo, voici ce qui pourrait ressortir : les jeux consoles, les jeux PC “classiques”, les jeux en ligne (MMO en tous genres compris). Dans cette dernière catégorie, on trouve beaucoup de types de jeux différents : les MMO dans le genre de World of Warcraft, les jeux multijoueur comme Counter Strike ou Team Fortress, les modes multi des jeux principalement solo, et les jeux par navigateur.

Les jeux par navigateur

Le jeu par navigateur, ou Browser Game en anglais, se joue par définition dans un navigateur Internet. On retrouve donc dans cette catégorie les jeux “Facebook” cités plus haut, la majorité des jeux en Flash, mais également un très grand nombre de jeux que nous appellerons les Jeux Web, puisqu’ils se basent sur les technologies du Web ouvert. Quelques exemples de jeux web relativement connus : Ogame, Travian, ou le français Hordes.

Ces trois exemples ne sont cependant pas représentatifs de la diversité que l’on trouve dans les jeux web. Les jeux d’élevage virtuel, par exemple, sont extrêmement nombreux sur le Web. À quoi est due cette profusion de jeux web ? Majoritairement à la simplicité d’accès du développement web. Faire un jeu web, en soit, c’est développer un site web. Or, avec des technologies très répandues comme PHP, HTML et CSS, avec toutes les ressources que l’on trouve autour de ces dernières (il suffit de regarder les tutoriels du Site du Zéro pour s’en rendre compte), il est très simple pour une personne un peu motivée de créer son propre jeu web.

Malheureusement, s’il est simple de créer un jeu web “basique”, les développeurs sont rapidement limités par les technologies qu’ils utilisent. Il est quasiment impossible de faire du temps réel avec PHP, le couple HTML / CSS n’est pas adapté à l’affichage d’effets spéciaux ou d’animations complexes, et si l’arrivée récente de frameworks JavaScript comme jQuery a permis de repousser un peu ces limites techniques, cela ne résout pas le problème.

Les technologies du web

Il existe une solution simple aux limitations techniques actuelles des technologies web : se tourner vers le futur et utiliser de nouvelles technologies, pas encore éprouvées, mais qui permettent d’aller beaucoup plus loin dans la création de nos jeux web.

HTML 5, la nouvelle mouture du langage de description des pages web, apporte au développeur un très grand nombre de fonctionnalités clés : le temps réel dans le navigateur avec les WebSockets, les manipulations graphiques avancées avec le SVG et les Canvas, la vidéo et le son avec Video et Audio, et bien d’autres.

La version 3 du langage CSS offre elle aussi d’alléchantes nouveautés : les animations, les transitions, les polices particulières, ainsi que tous les effets graphiques amplement simplifiés.

Objectifs du projet

Toutes les avancées actuelles du web ouvrent indéniablement les portes à des jeux de plus en plus impressionnants, de plus en plus profonds, le tout se passant dans un navigateur ! Il faudra cependant du temps pour que les développeurs maîtrisent tout ceci, pour que des outils facilitant l’utilisation de ces technologies apparaissent, et donc pour que l’accès à toutes ces possibilités pour nos jeux devienne simple.

Voici donc où se place ce projet : notre objectif est de fournir un outil complet, permettant de créer de façon simple et rapide un jeu profitant des dernières avancées en matière de technologie web. Il constitura un ensemble d'outils qui fournissent un cadre de développement et des fonctionnalités permettant d'implémenter tout ou partie d'un jeu.

Je serai ravi d'avoir vos avis éclairés sur cette introduction ! Peut-être ai-je raconté des bêtises, peut-être ma vision des choses est-elle fausse, trop orientée, ou idéaliste... Quoi qu'il en soit, si vous avez des commentaires à faire, ils sont tous les bienvenus ! 

À bientôt pour la suite de nos aventures ! :)

Bonjour ! 

Je vous livre aujourd'hui un bout de code qui vient de m'être utile, et qui permet d'obtenir des éléments de même hauteur. A priori, pour résoudre ce problème, on utiliserait des display: table; et display: table-cell; sur les éléments concernés. Grâce au plugin jQuery que je vous présente, les choses sont bien plus simples : le plugin calcule la plus grande hauteur des éléments concernés, et aligne tous les éléments sur cette hauteur. 

Le problème

Ce qu'on veut

Solution

Le code d'origine est de Adham Dannaway, sur son blog cre8ivecommando : Equal height columns using jQuery. La version qui suit est légèrement améliorée, puisqu'elle permet de passer en paramètre le type des enfants à redimensionner.

Voici le code HTML utilisé pour cet exemple : 

<div class="boxes">
<div class="box">
<h1>Col 1</h1>
<p>Integer lacus orci, eleifend non semper ac, dictum ut urna. Donec sed lacus ligula, nec varius nisl. Cras eleifend porta varius. Nunc porttitor, dui ut scelerisque tincidunt, lorem nulla semper odio, non laoreet nisi dui id lorem. </p>
</div>
<div class="box">
<h1>Col 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non dolor eu enim aliquam cursus. </p>
</div>
<div class="box">
<h1>Col 3</h1>
<p>Lorem ipsum stuff... </p>
</div>
<div>This div isn't a box ! </div>
</div>

Intégrez à votre page HTML la bibliothèque jQuery, puis ajoutez le code du plugin qui suit : 

/* Plugin to make variable height divs equal heights */
$.fn.sameHeights = function(childrenSelector) {
$(this).each(function(){
var tallest = 0;
$(this).children(childrenSelector).each(function(i){
if (tallest < $(this).height()) { tallest = $(this).height(); }
});
$(this).children(childrenSelector).css({'height': tallest});
});
return this;
};

Il ne vous reste qu'à appeler cette fonction sur les éléments qui vous intéressent : 

$(document).ready(function() {
$('.boxes').sameHeights('.box');
});

Notez que le paramètre de la fonction sameHeights est optionnel : si vous ne mettez rien, la fonction prendra tous les enfants sans distinction. Ce paramètre m'a été utile pour pas appliquer la redimmension à un <div class="clear"></div> contenu dans le <div> parent. 

Voili voilou ! J'espère que ça vous sera utile ! Un grand merci à Adham Dannaway qui a partagé cette astuce. :)

Liens

• Démonstration en ligne : http://adrian.gaudebert.fr/labs/jquery.sameheight/example.html
• Télécharger l'archive contenant les fichiers : http://adrian.gaudebert.fr/labs/jquery.sameheight/jquery.sameheight.tar.gz
• Article d'origine par Adham Dannaway : http://www.cre8ivecommando.com/equal-height-columns-using-jquery-6164/

PS : navré pour l'indentation, j'ai encore du boulot à réaliser sur mon blog... 

Bonjour les amis ! 

Regardez autour de vous : ce site vient tout juste d'être entièrement refait ! 

Ça faisait un bout de temps que je voulais le faire, et puis j'ai enfin trouvée l'excuse idéale : je cherche un stage pour ma période de fin d'études. J'ai donc entrepris de refaire tout le site, avec deux buts : d'abord, lui donner une meilleure image, qui reflète plus ce que je suis et ce que je fais, et ensuite le simplifier, en limitant le nombre de pages au minimum, et en affichant que le contenu utile. L'interface est donc épurée, le contenu plus pertinent, plus "pro", et le site s'en trouve, je l'espère, grandement amélioré. 

Bon, ce n'est pour l'instant qu'une première version, il reste pas mal de détails à régler, d'éléments à améliorer, etc. Le blog notamment est loin d'être au point, mais c'est majoritairement du à Dotclear qui n'est vraiment pas propre... Il faut donc que je passe un peu de temps à faire du cleaning du HTML de mon thème. Ça viendra ! 

Vous remarquerez dans le menu (celui qui flotte sur votre gauche) que le site est disponible en deux langues : le français et l'anglais. La traduction anglaise est en cours de relecture par ma prof d'anglais (merci à elle :) ), et devrait donc se voir corrigée d'ici quelques jours. 

J'accepte volontiers toutes vos remarques, critiques et questions par commentaire ou par mail ! 

[Photo : http://www.flickr.com/photos/gnondpomme/3867809702/sizes/m/in/photostream/]

Bonjour les gens !!

Bon je sais, ça fait un bail, mais voila, c'est ça aussi la vie d'un blog, y a des hauts et des bas ! 

Aujourd'hui, j'vais vous parler de deux choses, qui sont liées. Tout d'abord, je lance un nouveau projet de jeu vidéo, un jeu web (ou browser game) pour être précis. Mon annonce sur le Site du Zéro présente bien le projet, je vous invite donc à aller la lire si vous êtes intéressé. 

Pour résumer, le jeu sera un jeu de stratégie en tour par tour, faisant s'affronter des unités typées médiéval (infanterie, archerie, chevalerie) sur une carte constituée de cases hexagonales, le tout en vue 2d isométrique. Le but est de faire un jeu simple d'accès, permettant à un joueur de faire une partie rapidement, juste avec son navigateur (sans nécessiter de plugin quelconque), et sans avoir à gérer des tas de trucs avant de se lancer dans la partie. 

Voir le Game Concept Document de Fightly

Techniquement, le jeu utilisera HTML, CSS et JavaScript pour la partie client, PHP pour la génération des pages et Python pour le serveur de gestion des parties. L'intérêt est l'utilisation des récentes WebSockets, actuellement implémentées dans Chrome et Chromium uniquement, mais pour lesquelles il existe des fallback. Je vous ferai bien une présentation détaillée de l'utilisation des WebSocket, et pourquoi c'est top moumoute, mais non. J'vais plutôt vous balancer quelques liens intéressants sur le sujet : 

• The WebSocket API, W3C
• Les WebSockets sur Wikipedia
• Les WebSockets faciles avec Cramp, par Damien Mathieu
• Why WebSockets are not yet on Firefox

Et on en arrive au deuxième point : dans le cadre de ce projet, j'ai développé un début de serveur permettant de communiquer avec une page web via les WebSockets. Chez le client, on a un code JavaScript assez classique, qui utilise la très simple interface WebSocket. Et du côté du serveur, j'ai donc développé un serveur en Python qui créé les connexions, reçoit les messages des clients, les analyse et les traite comme il faut, puis renvoie aux clients le nouvel état du "monde". C'est assez étonnant de simplicité, d'autant que j'ai commencé à apprendre Python environ 3 jours avant de réussir à faire ce serveur. Bon faut avouer que je ne suis pas parti de rien, j'ai repris le code de Eneko Alonso, donné sur son blog : More WebSockets, now with Python!

Tout ça pour en venir au point intéressant : j'ai décidé de partager avec vous la partie qui gère les WebSockets. Elle est orientée objet, utilise un thread pour chaque client (donc pour chaque connexion), et vous permet assez simplement d'ajouter votre propre comportement lors de réception d'un message. 

Voir le projet python-websocket-server sur GitHub

Bon, c'est le premier truc que je fais en Python, donc y a surement des erreurs. Mais j'espère que vous saurez me les faire remarquer ! :) Je sais par exemple que je ne gère par l'arrêt du serveur par interruption, et que c'est un problème car le serveur ne s'arrête pas tant que tous les clients ne sont pas déconnectés (puisqu'il y a encore des thread en cours de fonctionnement). Je sais également que je pourrais faciliter l'utilisation du code en ajoutant un mécanisme de fonction callback, mais je sais pas encore faire ça en Python, donc ça viendra plus tard ! ^^

Actuellement, le code est celui d'un chat très simple. A chaque fois qu'un client envoie un message, le serveur le renvoie à tous les clients. Pour tester, lancer le server.py dans une console, et accédez à la page index.html depuis votre localhost. Ouvrez cette dernière dans plusieurs onglets, et envoyer un message dans l'un d'eux. Vous devriez voir apparaitre le message sur toutes les autres fenêtres quasiment instantanément. 

Pour ajouter votre propre comportement, modifiez le code de la fonction onreceive de la classe WebSocketClient (websocketclient.py). Il est aussi possible que vous ayez à changer la configuration du serveur dans le fichier config.py. 

J'espère que ce code pourra être utile à certains d'entre vous. Et bien sur, si vous avez des questions, n'hésitez-pas ! Passez à ma grotte ! Laissez-moi un message !