Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Chapitre 1 : Moteur isométrique et HTML

Compatible 1. Cliquer pour en savoir plus sur les compatibilités.Par gnicos (Nicolas Gauville), le 02 juillet 2012

Pour commencer, nous allons revoir brièvement le concept d'un moteur isométrique, et surtout comment nous allons pouvoir en coder un en HTML et Javascript.

Navigation rapide :

Sommaire - Chapitre 2 >>

I. Moteur isométrique

A. Le concept

L'isométrie est un mode d'affichage qui consiste à réaliser une fausse perspective avec un assemblage d'images, ne tenant pas compte du point de fuite. Ces images sont appelées “tuiles”.

Pour obtenir une tuile de base (un sol), il suffit de dessiner un losange dont la hauteur est égale à la moitié de la largeur.

On peut, par exemple, prendre un carré, le faire pivoter de 45 degrés, et diviser sa hauteur par deux pour obtenir ce résultat.

Ce type de représentation est encore utilisé pour de multiples raisons, et il constitue une alternative intéressante à la 3D.

B. Quelques exemples

À titre d'exemple, Dofus ou encore Habbo sont des jeux isométriques, codės en AS3.

e1.1.jpg

II. HTML5 et la balise Canvas

A. Canvas, la balise qui nous sauve

La balise Canvas, introduite en HTML5, permet d'effectuer des rendus dynamiques d'images via des scripts (en Javascript notamment).

Nous pourrions évidemment nous contenter d'images, mais le résultat est incomparable en terme de performances et flexibilité de l'application finale.

Selon Wikipédia :

L'élément canvas est un composant de HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts. Déjà implémenté dans certains navigateurs, il fait partie de la future spécification HTML5 qui est en cours de finalisation.

En savoir plus sur Wikipédia.

B. Implémentation dans les navigateurs

Le défaut de la balise Canvas réside dans le fait qu'elle soit introduite avec le HTML5 et soit donc très jeune. En conséquence, les vieux navigateurs sont souvent incompatibles avec cette technologie.

La compatibilité d'un jeu avec les navigateurs est tout de même très importante, et un chapitre y sera d'ailleurs consacré, de façon à s'intéresser à tous les problèmes de compatibilité du jeu avec les divers navigateurs sur les diverses plateformes, et, évidemment, tenter de les corriger.

Pour la balise Canvas dont je vous parle, il existe justement un script permettant de convertir le code en VML à la volée (c'est à dire pendant l'exécution de la page par le navigateur), de façon à assurer la compatibilité avec les anciennes versions d'Internet explorer.

III. Notre travail

A. Affichage

La partie principale du moteur sera évidement l'affichage, là ou la balise Canvas nous sera très utile. Il s'agira de calculer la position de chaque image et évidemment l'afficher. Le second chapitre de ce cours sera entièrement consacré à l'affichage, assurant ainsi le calcul des positions et l'affichage des tuiles à l'écran.

B. Déplacements et contrôles

Pour rendre notre moteur utilisable pour un jeu, il faudra évidemment permettre à l'utilisateur de contrôler un personnage. Dans les moteurs isométriques, deux gameplay sont généralement proposés : le déplacement au clic ou le déplacement au clavier. Pour des raisons de simplicité, nous commencerons ici par le déplacement au clavier, plus simple. Nous réaliserons quand même un déplacement au clic, de façon à rendre notre jeu compatible avec les tablettes tactiles.

IV. Commençons !

Nous n'avons plus qu'à commencer à coder ! Notre code sera pour le moment réparti dans trois fichiers : un fichier HTML “index.html”, et un dossier “assets” (ressources) qui contiendra un fichier CSS “skin.css” et un fichier JavaScript “core.js”.

ls.1.jpg

Le fichier dans lequel nous coderons la plus grande partie du jeu sera bien évidement le fichier JavaScript. Nous ajouterons tout de même quelques images et sons pour notre jeu dans d'autres dossiers dans la suite de ce tutoriel.

A. Code HTML

Globalement, nous n'allons pas avoir beaucoup de code à écrire dans le fichier HTML. Nous allons nous contenter de trois choses : insérer le fichier CSS, mettre une balise Canvas (dont nous avons déjà parlė), et insérer le fichier JavaScript.

Pour la balise Canvas, nous allons devoir définir trois paramètres : la hauteur, la largeur et l'ID (pour pouvoir y accéder en Javascript et CSS). Nous placerons également un message à l'intérieur qui s'affichera si le navigateur de l'utilisateur ne supporte pas la balise Canvas (tout comme on le fait généralement pour la balise vidéo). On obtient alors le code suivant, avec un Canvas de 600×600 px.

<!DOCTYPE html>
<html>
<!--
	Tutoriel sur les jeux à base de tuiles
	Page Index
	Par Nicolas Gauville
 -->
	<head>
		<meta charset="utf-8" />
 
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" media="screen" href="assets/skin.css" />
 
		<title>Mon super jeu</title>
	</head>
	<body>
		<!-- BODY -->
		<canvas id="gameview" width="600" height="600">
  			Désolé, votre navigateur ne supporte pas la technologie Canvas, veillez utiliser un navigateur plus ressent.
		</canvas>
 
		<!-- JS -->
		<script type="text/javascript" src="assets/core.js"></script>
	</body>
</html>

B. Le CSS

Au niveau du CSS, on ne va rien faire de très compliqué non plus. On va juste mettre un fond noir et centrer le texte pour l'instant. Nous pourrons le compléter plus tard, mais inutile d'en mettre plus pour l'instant.

body
{
	background-color: black;
	text-align: center;
}
 
canvas
{
	border: 1px dashed #333;
}

C. Javascript

Nous allons maintenant initialiser le document Javascript. Pour cela, nous allons simplement déclarer une variable qui correspondra à notre balise Canvas :

var gameview = document.getElementById('gameview');
var contexte = gameview.getContext('2d');

D. Rétro compatibilité

Enfin, un petit passage sur la compatibilité de notre balise Canvas. En effet, ayant été introduite avec le HTML5, elle est malheureusement incompatible avec les anciens navigateurs, notamment Internet Explorer (les autres étant, de façon générale, plus souvent à jour sur les ordinateurs des utilisateurs).

Nous pouvons régler ce problème grâce à un petit script Javascript, qui, comme expliquė précédemment, transforme notre code en VML (que Microsoft avait décidé d'utiliser).

Ce script est téléchargeable sur Google code. Nous allons l'implanter dans notre projet de façon à assurer la rétro compatibilité avec les anciens navigateurs. Nous n'aurons encore une fois que peu de choses à faire, il suffira d'ajouter le fichier téléchargé dans le dossier assets, et de compléter un tout petit peu notre script JavaScript.

Vous pouvez télécharger le fichier ici : ExplorerCanvas sur GoogleCode

Une fois téléchargé, dézippez le fichier, et placez le fichier “excanvas.compiled.js” dans notre dossier Assets. Vous pouvez aussi le renommer “excanvas.js”. Il ne reste plus qu'à modifier le fichier “index.html” pour charger et appliquer le fichier Excanvas. On obtient le résultat suivant : (reportez vous à la documentation d'ExplorerCanvas pour plus d'informations sur le sujet).

<!DOCTYPE html>
<html>
<!--
	Tutoriel sur les jeux à base de tuiles
	Page Index
	Par Nicolas Gauville
 -->
	<head>
		<meta charset="utf-8" />
 
		<!--[if lt IE 9]><script src="assets/excanvas.js"></script><![endif]-->
 
		<!-- CSS -->
		<link rel="stylesheet" type="text/css" media="screen" href="assets/skin.css" />
 
		<title>Mon super jeu</title>
	</head>
	<body>
		<!-- BODY -->
		<canvas id="gameview" width="600" height="600">
  			Désolé, votre navigateur ne supporte pas la technologie Canvas, veillez utiliser un navigateur plus ressent.
		</canvas>
 
		<!--[if lt IE 9]><script>
		G_vmlCanvasManager.initElement( document.getElementById('gameview') );
		</script><![endif]-->
 
		<!-- JS -->
		<script type="text/javascript" src="assets/core.js"></script>
	</body>
</html>

V. Conclusion

Nous avons ainsi posé les bases de notre futur jeu isométrique en HTML5 et Javascript. Dans le prochain chapitre, nous allons ainsi pouvoir nous attaquer à l'affichage des tuiles !

Pour le moment, nous avons posés nos bases en créant les fichiers prêts à recevoir le code, et assuré une retrocompabilité avec Internet Explorer.

Navigation rapide :

Sommaire - Chapitre 2 >>