Créer un jeu avec Mozilla, Partie 1
Note du traducteur : Les articles de cette série datent maintenant d’à peu près deux ans, il se peut donc que, compte tenu des évolutions récentes de Mozilla, certaines implémentations ne fonctionnent plus. Cependant, après avoir questionné directement les auteurs, il s’avère que la plupart des propos tenus dans ces articles soient toujours pertinents. Brian King a affirmé : “The only obvious thing that jump out at me is the use of the <bulletinboard> element in one of the examples which is now obsolete.“. Ce qui veut dire que seule l’utilisation de l’élément <bulletinboard> dans l’un des exemples est maintenant obsolète. Brian a ajouté : “I think its fine to publish them as is, but add a disclaimer saying they were published over 2 years ago and to go to games.mozdev.org for the latest games.“. En clair, les articles peuvent être publiés dans leur état actuel, mais qu’il est de mon devoir de vous conseiller d’aller sur games.mozdev.org pour récupérer la toute dernière version des jeux.
|
D’une certaine manière, cela revient à connecter une ligne ADSL à un ordinateur Commodore 64. Nous travaillons sur la rééecriture d’un jeu du début des années 80 en nous basant sur les technologies de Mozilla. En combinant deux technologies de deux époques très différentes, nous espérons être capables d’apprendre quelque chose de l’examen, effectué sous un nouvel angle, d’un exemple de programmation classique.
Notre intention est de montrer que Mozilla est capable d’être plus qu’un simple navigateur. D’autres démonstrations d’utilisations différentes de Mozilla telles que le Script Editor et XMLTerm le font déjà, bien qu’elles aient tendance à plus se comporter comme des extensions du framework actuel de Mozilla. Une application radicalement différente de Mozilla qui n’aurait rien à voir avec la navigation Web aurait l’avantage d’élargir la discussion sur les facultés de Mozilla à être une plate-forme et attirerait de nouvelles personnes dans la communauté de ceux qui sont intéressés par les nouveaux aspects de ce projet.
Pourquoi ce jeu ? Pourquoi Mozilla?
Dans les 20 années qui ont suivi la sortie du jeu d’arcade que nous allons émulé, beaucoup de versions différentes ont été créées de différentes manières. Nous allons recréer ce jeu une fois de plus parce qu’il est devenu traditionnel de prendre un vieux concept et de le remanier avec de nouveaux moyens pour en apprendre plus d’un language ou d’une technologie.
D’autres clônes de ce jeux basés sur Internet existent. La plupart de ces versions ont été créées d’une ou deux manières : en utilisant les implémentations inconsistantes et limitées du DHTML dans les navigateurs actuels, ou en utilisant Java, qui peut comporter des bogues et se traîner lamentablement.
Mozilla offre un nouveau choix — un choix open source et pleinement conforme aux standards Internet actuels. Pour cette raison, beaucoup de gens considèrent Mozilla comme une plate-forme de développement. Ce projet tire profit des technologies supportées par Mozilla : JavaScript 1.5, le Document Object Model (DOM — Modèle d’Objet Document) et XML. Nous pouvons créer un framework XUL (XML User interface Language) pour que PAGMAN ressemble à un réel jeu d’arcade, et avec quelques adaptations du code de Mozilla lui-même, nous pouvons même activer le support d’un joystick.
XML dynamique
PAGMAN est développé en XML à cause de sa capacité à gérer les données efficacement. Du fait que nous travaillons sous Mozilla, nous n’allons pas nous soucier du problème qui empêche XML d’être plus largement déployé sur le Web aujourd’hui : manque de support de la part des navigateurs. (Même le support XML de Internet Explorer 5 est partiel et non conforme aux Standards du W3C).
Le fait de travailler sous Mozilla nous assure aussi du plein support des DOM, du JavaScript et des CSS. Cela va nous permettre de contrôler dynamiquement notre fondement en XML.
DHTML s’est un peu légèrement étiolé du fait de support incomplet dans les navigateurs. Au fur et à mesure que la popularité de Mozilla se répand, nous pouvons espérer que DHTML évoluera en DXML, ou XML Dynamique. C’est pour cette raison que nous avons décidé d’utiliser XML dans notre projet. Nous aurions certainement pu utiliser HTML qui aurait fonctionner dans les versions 4 et supérieures des navigateurs, mais le but de ce projet est d’utiliser des nouvelles technologies pour créer des possibilités qui n’existaient pas avant.
La grille XML
Le labyrinthe du jeu est représenté par une grille d’éléments graphiques XML. Nous n’avons besoin que d’une poignée de ces éléments pour créer la grille : des points, des gellules de pouvoir, des murs verticaux et horizontaux, des espaces et quatre éléments différents pour les coins (supérieur droit, supérieur gauche, inférieur droit et inférieur gauche).
Notre fichier XML est assez simple. Il permet à chaque élément graphique de dresser la carte d’une section unique de la structure grille. Nous n’avons pas totalement construit le labyrinthe cependant, mais nous avons prouvé le concept avec une grille de 6×5. Notre exemple contient chacun des éléments graphiques pour montrer comment ils fonctionnent ensemble.
Le code XML contient des balises de colonne contenues dans des balises de lignes. Dans notre exemple, 30 points uniques ont été créés et ils peuvent être suivis individuellement. Bien que nous utilisions des éléments graphiques génériques, chaque point de la grille est unique. Cela veut dire que nous pouvons contrôler chaque point de la grille, nous permettant ainsi de changer un point en espace dès que le point a été mangé. Voici un exemple de code pour une ligne de la grille :
<row_04>
<col_01 class="vert_wall" />
<col_02 class="powerup" />
<col_03 class="vert_wall" />
<col_04 class="blank" />
<col_05 class="blank" />
<col_06 class="vert_wall" />
</row_04>Reportez-vous au code complet du fichier échantillon de grille XML.
La grille créée avec ce fichier peut être affichée en utilisant un fichier CSS associé. Le CSS fait correspondre les différents éléments graphiques à ceux de la grille en utilisant la valeur de classe assignée aux balises dans le fichier XML.
La grille XML+CSS complètement opérationnelle n’a pas encore été terminée, mais une version HTML de cet échantillon de grille montre les différents éléments ensemble. Une présentation de la grille montre les pièces individuelles de manière séparée, et l’autre montre les mêmes images assemblées pour former une section cohérente du labyrinthe.
Maintenant, ce n’est plus qu’une question d’extension du fichier XML pour former la carte complète des différents points et pour finir le labyrinthe. Une fois que cette fondation de base est en place, les autres éléments peuvent être ajoutés et accrochés à la fonctionnalité qui fera que le jeu puisse marcher.
Prochaines étapes
Dans le prochain article de cette série, nous jéterons un oeil à la couche qui se superposera à la grille XML. Cette couche contiendra les éléments mobiles qui rendront le jeu jouable, les fantômes et notre PAGMAN d’une couleur autre que jaune. La fonctionnalité de cette couche sera créée en JavaScript et en feuilles de style pour manipuler les éléments graphiques au travers de la grille.
Cette série se terminera avec un article qui détaillera la prise en main du jeu et son emballage dans une interface XUL, comparable à un celle d’un jeu d’arcade complétée de commandes de mouvement et d’options de jeu, construite au sein de notre application basée sur Mozilla. Nous espérons que cela démontrera que l’on peut créer une application pleinement fonctionnelle, qui n’a rien à voir avec un navigateur Web et qui peut tourner sur des ordinateurs Windows, Linux et Macintosh.
Bien sûr, le prochain article sera peut-être consacré à prouver que notre approche d’une grille XML était mauvaise pour créer ce jeu. Nouos développons PAGMAN en même temps que nous écrivons des articles dessus, nous ne pouvons donc que deviner ce à quoi ce projet aboutira. Nous garderons le suivi de nos erreurs en même temps que de notre progression, et nous parlerons de ces deux aspects dans les futurs articles de cette série.
Textes originaux en anglais sur O’Reilly : http://www.oreillynet.com/pub/au/64
Chargement
Commentaires récents