Mis à jour le mardi 1 mars 2016
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mise en place des bases

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans cette partie, nous allons poser les fondations de notre jeu.

Ce n'est pas une partie difficile, mais c'est la plus importante.

Structure des fichiers

Explications

Avant de commencer tout codage, je pense qu'il est important de mettre en place l'arborescence de notre application. Vous n'êtes bien sûr pas forcé d'utiliser la même que moi, mais au moins nous saurons avec précision où trouver ce que l'on cherche.

Notre application terminée ne comportera qu'un seul et unique fichier HTML. Je le nomme index.html pour des raisons pratiques, mais si vous intégrez plus tard notre mini-RPG dans un site plus complet, sachez que le nom de ce fichier n'a aucune importance.

Arborescence

J'ai également à la racine de mon application les dossiers suivants :

  • css

  • js

  • maps

  • sprites

  • tilesets

Comme vous devez vous en douter, les dossiers js et css contiendront nos fichiers JavaScript et CSS. Le dossier maps comportera les fichiers définissant les cartes de notre jeu (j'ai l'habitude de les appeler "map", ce qui veut dire la même chose en Anglais. Si vous êtes amateur de jeux, ce terme devrait vous être familier.). Quant aux sprites et aux tilesets, j'expliquerai ça plus tard.
Dans mon dossier js, j'ai un sous-répertoire "classes". J'organiserai mon code comme ceci :

  • Les fichiers directement placés dans js seront des fonctions et des bouts de codes divers

  • Chaque classe JavaScript sera dans le dossier js/classes, et le nom du fichier sera celui de la classe, suivi de l'extension (.js)

Résultat

Vous devriez avoir quelque chose comme ceci :

Structure de base de notre mini-RPG

Mise en place du canvas

Code de base

Bien, maintenant que nous avons mis en place notre arborescence, nous pouvons commencer la partie la plus intéressante : le codage. Ouvrez le fichier index.html (et créez le si ce n'est pas déjà fait) dans votre éditeur favori.

Copiez/collez la page suivante (elle est vide mais ça vous évitera de devoir tout taper ;) ) :

<!DOCTYPE html>
<html>
	<head>
		<title>Mini-RPG</title>
	</head>
	<body>
		
	</body>
</html>

Nous allons maintenant y placer notre canvas.

Canvas

C'est quoi un canvas ?

Le canvas est une des nombreuses nouvelles possibilités offertes par HTML5. Concrètement ça fait pas mal de temps qu'elle existe déjà (c'est Apple qui l'a inventée, au sein de son navigateur Safari). Le canvas offre la possibilité de dessiner (carrés, rectangles, droites, texte, ronds, images ...) via du code JavaScript.

Ajoutez donc la ligne suivante dans le body de votre page HTML :

<canvas id="canvas">Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer.</canvas>

La phrase "Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour pour jouer" placée dans la balise n'apparaîtra que sur les navigateurs concernés. En effet : si vous mettez quoi que ce soit dans la balise canvas, ce sera ignoré par les navigateurs compatibles. En revanche, les navigateurs qui ne connaissent pas cette balise vont tout simplement l'ignorer... et donc afficher son contenu.

Vous pouvez maintenant voir... Une page blanche. C'est pas beau la technologie ? C'est tout à fait normal étant donné que nous ne dessinons rien dans notre canvas pour le moment. Cependant, pour des raisons pratiques nous allons lui mettre un cadre.

Du CSS pour une meilleure visibilité

Créez donc un fichier style.css dans le dossier css. Ensuite liez-le à votre page HTML en mettant la ligne suivante dans votre head (rien de complexe si vous maîtrisez HTML) :

<link rel="stylesheet" type="text/css" href="css/style.css" />

Pour afficher des bordures au canvas, il suffit de faire comme ceci :

canvas {
	border: 1px solid black;
}

Le cas d'Internet Explorer

Quelle(s) solution(s) au problème ?

Si vous n'utilisez pas Internet Explorer, ce chapitre ne vous concerne pas personnellement. Cependant, il faut penser à vos futurs joueurs qui seront adeptes de ce navigateur.

Mais comment allons-nous faire s'il ne connaît pas canvas ?

Pour cela, nous allons devoir utiliser une librairie externe qui se nomme ExplorerCanvas.

Mise en place

Téléchargez la dernière version disponible sur le lien ci-dessus (à l'heure où j'écris ces lignes, le fichier se nomme excanvas_r3.zip) et dé-zippez le. Le fichier qui nous intéresse est excanvas.compiled.js.

À quoi sert le fichier excanvas.js ?

Le fichier excanvas.js est le code source de la librairie. L'autre aussi me direz vous, mais si vous ouvrez la version "compiled", vous verrez que le code n'est pas très digeste.

Les créateurs d'ExplorerCanvas ont tout simplement utilisé un obfuscateur de code. C'est un outil qui permet d'alléger le code source en supprimant les caractères inutiles au navigateur (commentaires, indentations, sauts de lignes), et de renommer les variables plus simplement (si vous survolez le code, vous verrez qu'il y a plusieurs variables et fonctions qui se nomment a, b, c...). Ainsi le fichier est plus rapide à charger et les curieux auront beaucoup de mal à copier le code source (ce qui n'est pas très utile pour cette librairie vu qu'elle est open source).

Mettez le fichier excanvas.compiled.js dans le dossier js de notre jeu. Ensuite, ajoutez cette ligne dans le head de la page html :

<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]-->

Et voilà, maintenant ça fonctionne dans tous les navigateurs !

Explications

Mais comment les créateurs de cette librairie ont-ils fait pour dessiner des ronds, des carrés et des lignes ?

Internet Explorer implémente la technologie VML (Vector Markup Language) qui permet faire des choses semblables à canvas. Je ne sais pas vous donner plus de détails, mais je sais que les créateurs d'ExCanvas l'ont utilisée.

Utilisation de l'objet context

Quelques bases

Dans cette partie, je vais vous présenter un peu les possibilités de canvas. Nous n'attaquerons pas le jeu lui-même, c'est plutôt pour vous apprendre à vous familiariser avec l'objet "contexte".

Créez un fichier rpg.js (si vous trouvez un nom plus original n'hésitez pas :-° ) à la racine du dossier js, et liez-le à votre page html (dans le head).

Ensuite placez-y le code suivant :

window.onload = function() {
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	
	ctx.fillStyle = 'blue';
	ctx.fillRect(10, 10, 100, 50);
	
	ctx.strokeStyle = 'red';
	ctx.strokeRect(75, 75, 50, 50);
}

Si tout va bien vous devriez obtenir ceci :

Résultat de notre bout de code

Explications sur le code

La première ligne n'a rien de difficile, elle nous permet de faire en sorte que notre code JavaScript ne soit exécuté qu'une fois la page chargée complètement. Ensuite nous récupérons l'élément DOM de notre canvas. Rien de nouveau non plus.

La ligne suivante est plus intéressante :

var ctx = canvas.getContext('2d');

Elle nous permet de récupérer notre objet "context" (son nom est CanvasRenderingContext2D pour être plus précis).

Pourquoi on passe '2d' en paramètres ?

Le canvas est prévu pour être capable de faire bien plus que de la 2D. Le canvas permet déjà (sous les navigateurs Firefox 4 et Google Chrome 9) d'utiliser la technologie WebGL. Le webGL est une implémentation d'OpenGL pour JavaScript. Lorsque tous les navigateurs seront compatibles, vous pourrez donc voir fleurir des jeux 3D en JavaScript sans souci ni problèmes de performances puisque WebGL utilise l'accélération 3D.

Avant de continuer, je dois quand même préciser que le système de coordonnées de canvas (et de la grande majorité des langages de programmation) ne fonctionne pas dans le même sens qu'en mathématiques. Les axes fonctionnent dans ce sens :

Coordonnées

Maintenant étudions la partie la plus intéressante du code :

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
	
ctx.strokeStyle = 'red';
ctx.strokeRect(75, 75, 50, 50);

Dans l'objet context, nous avons beaucoup de méthodes et d'attributs qui portent un nom commençant par 'fill' ou 'stroke'. Les méthodes en fill remplissent la forme que vous dessinez avec la couleur précisée dans l'attribut fillStyle. Les méthodes en stroke dessinent uniquement les contours des formes avec la couleur définie via strokeStyle.

Traitement des images

Ces méthodes de dessin sont bien sympathiques, mais elles nous seront peu utiles pour notre RPG. Le dessin d'images par contre est très utile. Les méthodes de dessin du context nous permettent :

  • De simplement dessiner une image

  • De dessiner une image avec une taille différente

  • De dessiner une partie d'une image

Ajoutez donc le code suivant à votre page pour voir concrètement ce que ça donne :

ctx.drawImage(smiley, 200, 10);
	
ctx.drawImage(smiley, 200, 30, 100, 50); 
ctx.drawImage(smiley, 0, 0, 10, 19, 200, 100, 10, 19);

Ainsi que celui-ci tout en haut du fichier (en dehors de tout bloc) :

var smiley = new Image();
smiley.src = "http://www.siteduzero.com/Templates/images/smilies/heureux.png";

Nous obtenons ceci :

Résultat de l'utilisation des méthodes de dessin d'image du context

Dans la documentation, on peut voir qu'il y a surcharge de la méthode drawImage, ce qui nous donne trois possibilités :

drawImage(image, dx, dy) 
drawImage(image, dx, dy, dw, dh) 
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Plus de détails sur les noms des paramètres :

  • d : Destination

  • s : Source

  • x : Coordonnée X

  • Coordonnée Y

  • w : Largeur

  • h : Hauteur

La première se contente de dessiner l'image sans la modifier à partir des coordonnées du point en haut à gauche passé en paramètre. Dans la seconde, l'image est dessinée en fonction de la taille (dw et dh) passée en paramètre. Et dans la troisième, on précise une partie de l'image source que l'on souhaite (en précisant les coordonnées x et y, ainsi que la largeur et la hauteur du "rectangle" que l'on sélectionne. On précise la même chose pour la destination.

Dans cette partie, nous n'avons pas encore réellement commencé le RPG.

Néanmoins, poser les bases était nécessaire. Le canvas est primordial pour notre RPG. N'hésitez donc pas à vous entraîner pour bien le maîtriser, ainsi que les méthodes du context avant de poursuivre ce cours.

Exemple de certificat de réussite
Exemple de certificat de réussite