Ça y est, c'est décidé, vous voulez apprendre à programmer un jeu vidéo ! Vous avez regardé à droite à gauche et vous avez décidé de partir sur une solution à base de Javascript. Seulement vous ne savez pas programmer, ou à peine et globalement, vous n'avez aucune idée de comment tout cela fonctionne.

Ce que je vous propose ici, c'est de me suivre pour découvrir la programmation d'un jeu vidéo qui utilise une technologie HTML5 nommée Canvas. Nous verrons plus en détails ce que cela signifie.

Audience visée

Cet article s'adresse aux débutants. Mon but est d'expliquer simplement les concepts nécessaires. Le domaine de la programmation est vaste, et je ferai des raccourcis lorsque je le jugerai nécessaire.

Préparations

La programmation consiste à instruire une machine sur une série de calculs qui seront ensuite exécutés automatiquement. Ces calculs peuvent être nombreux et influencés par des paramètres d'entrées, comme les mouvements d'une souris, et fournir des sorties, comme une image produite.

Différents langage de programmation offrent des manières différentes d'instruire la machine de ce que l'on veut qu'elle fasse. En Javascript, on écrira une suite d'instructions qui seront exécutées les une après les autres.

Version simplifiée : on écrit des commandes dans un fichier texte suivant certaines règles, puis on l'exécute et voilà, un jeu !

La boucle classique dans un jeu vidéo est de partir d'un état, d'y appliquer les transformations qui découlent des entrées et des règles du jeu et ainsi d'obtenir un nouvel état. En effet de bord du calcul de cet état, une image et du son sont produits.

Environnement de travail

Il est important, lors de la lecture de ces billets, d'essayer vous même. Chaque texte d'explication se terminera pas une phase d'expérimentation qui vous incitera à découvrir par vous même. C'est le meilleur moyen de comprendre et retenir.

Il vous faudra donc écrire et modifier des programmes. Et pour cela, un ordinateur de bureau ou portable est nécessaire. Il est techniquement possible de travailler sur smartphone ou tablette... si vous y tenez.

Premièrement, un navigateur avec support HTML5 est indispensable. Firefox ou Chrome/Chromium, Opera ou autre de votre choix. Le navigateur vous permettra de voir le résultat de vos progrès.

En second, il vous faut de quoi éditer des fichiers texte. Programmer est en effet écrire et modifier du texte. Un éditeur de texte minimaliste peut suffire, mais il est préférable d'en choisir un qui puisse afficher et éditer du Javascript de manière un peu sympathique en utilisant des couleurs pour identifier rapidement la syntaxe du programme (c'est la colorisation syntaxique).

Sous Linux, MacOS ou Windows, si vous avez la possibilité d'utiliser Sublime Text, il s'agit d'un bon choix. C'est cependant un logiciel payant qui peut sembler onéreux.

Sous Windows, Notepad++ est puissant et gratuit.

Il n'est pas nécessaire pour le moment de se lancer dans des solutions complètes intégrées (type Eclipse), à moins que vous soyez déjà habitué à ces environnements.

Et c'est tout.

C'est l'avantage d'une solution de programmation à base de HTML5/Canvas. Elle permet de démarrer avec des logiciels qui sont déjà probablement installés sur votre ordinateur et que vous connaissez déjà.

Kit de démarrage

Afin de ne nous occuper que du principal sans s'encombrer de tous les détails qui font qu'un programme fonctionne dans le navigateur web, j'ai préparé un kit d'apprentissage sous forme d'une archive que je vous invite à télécharger. Vous pouvez ensuite décompresser cette archive où bon vous semble sur votre disque dur.

Dans cette archive se trouvent quatre fichiers :

• kit.html, kit.css et kit.js : ce sont les fichiers qui s'occupent de créer l'environnement dans lequel nous allons évoluer. Nous ne nous préoccuperons pas de leur contenu pour le moment. Je donnerai des explications dans un article futur.
• game.js : c'est dans ce fichier que vous écrirez vos commandes afin de créer votre programme.

Pour démarrer le kit, vous avez plusieurs choix selon votre préférence. Le but est de faire lire le fichier kit.html par le navigateur choisi. Glisser/déposer, menu Fichier, double-clic sur le fichier ou ligne de commande, c'est comme vous voulez.

Si tout se passe bien, voici ce que vous devriez voir s'afficher.

La grande partie blanche rectangulaire est l'espace d'affichage, le canvas. C'est là que s'affichera ce que vous allez programmer.

Première étape. Histoire de rectangles.

Vous devriez donc à présent avoir un navigateur avec le fichier kit.html ouvert. Démarrez votre éditeur de texte et ouvrez le fichier game.js.

    game = {};
    game.loop = function(context) {
        // Here you can type your program
    };

Ce qui nous intéresse est ce qui se trouve à la ligne 4, avec l'indication en anglais signalant que c'est ici que le programme va être écrit.

Cette indication est un commentaire, ce qui est signalé par les deux '/' (slash) en début de ligne (les espaces qui se trouvent avant ne comptent pas).

Tout ce qui se trouve après ces deux slash est un texte libre. On y indique des choses importantes à signaler au lecteur du programme, soi-même quelque jours plus tard ou bien quelqu'un qui travaillerait sur le même programme.

Modifiez le programme pour qu'il ait ce contenu :

    game = {};
    game.loop = function(context) {
        context.strokeRect(70, 50, 200, 100);
    };

Puis sauvez le fichier et rechargez kit.html dans votre navigateur (Ctrl-R ou F5 suivant les navigateurs généralement, ou bien ré-ouvrez-le comme précédemment).

Un rectangle noir est apparu. Ce rectangle noir a son origine (en haut à gauche) à 70 pixels du bord gauche et 50 pixels du bord haut du cadre d'expérimentation. Il a aussi 200 pixels de large et 100 pixels de haut.

Revenons au fichier. Il y a une nouvelle ligne qui remplace la ligne de commentaire. Cette ligne contient une instruction que l'on donne à l'ordinateur.

Analysons cette ligne.

context.strokeRect(70, 50, 200, 100);

• context représente le contexte d'affichage, c'est à dire une manière de dessiner dans la surface (canvas) contenu dans la page HTML. Cet outil offre entre autre la possibilité de tracer des rectangles.
• un point. Le point après context indique que nous allons utiliser une capacité du contexte. En termes plus corrects, nous déclenchons l'exécution d'une méthode (rect) sur l'objet context. On peut voir context est une boite à outils et rect un outil que l'on utilise.
• strokeRect est le nom de la méthode que nous voulons exécuter sur le context. Nous signalons que nous voulons dessiner un rectangle en spécifiant ses caractéristiques.
• (70, 50, 200, 100). Ce sont les paramètres de la méthode. Chaque méthode peut recevoir des paramètres et nous devons spécifier les valeurs attendues. La méthode strokeRect s'attend à recevoir quatre valeurs numériques qui sont : les coordonnées x puis y de l'origine du rectangle, puis sa largeur et sa hauteur. Les paramètres doivent être séparées par des virgules.
• un point virgule. Le point-virgule indique la fin de l'instruction. En Javascript, il est optionnel. Vous pouvre l'omettre. Mon conseil est de rester constant : ou bien vous terminez toutes vos instructions avec un point virgule, ou bien aucune.

Avec cette instruction, nous avons indiqué au contexte d'affichage les caractéristiques d'un rectangle afin de l'afficher.

Expérimentations

Avant d'aller plus loin, il est temps d'expérimenter, c'est-à-dire de tester par vous-même.

Par exemple, dupliquez la ligne de d'affichage du rectangle en changeant les coordonnées, la largeur et la hauteur. Répétez l'opération et faites un dessin à base de rectangles !

Tentez des expériences. Que se passe-t-il si la largeur ou la hauteur est égale à 1 ? Ou à zéro ? Ou les deux simultanément ? Si le rectangle sort du cadre de l'affichage ?

Où se trouve la coordonnée (0,0) ? Quelle sont les coordonnées maximales ?

Je vous laisse jouer avec les rectangles et je vous donne rendez-vous au prochain épisode.