Journal de la création d'un RTS en HTML5

Suivez étape par étape la naissance d'un jeu de stratégie

Le 2013-12-30 17:08:51, par imikado, Rédacteur

Introduction
Ce billet fait suite au billet précédent: http://blog.developpez.com/ducodeetd...n-html5-jour-1

Dans ce billet je vais vous détailler les fichiers rts.js et canvas.js , leur utilisation, leur construction.

Faire une application HTML5/canvas
Mais avant, je dois vous expliquer le fonctionnement global d’une application HTML5: pour ceux qui ont déjà fait des jeux en flash, il faut se dire vous dire que l’HTML5 est plus austère: oubliez la scène, la timeline et les clips, ici juste un canvas, soit une image fixe.
Ce que l’on fait pour créer une animation, selectionner un élement.. ce sont des maths : aucun objet sur un canvas, juste des pixels de couleurs différentes imprimés ou éffacés sur une image (le canvas).
Pour simplifier un peu la gestion et les performances, on créé autant de canvas que de calques nécéssaires:
Un canvas pour le sol, un canvas pour les batiment, un autre pour les personnage, le brouillard, la selection…

lib3/canvas.js
Cette classe est très importante dans ce projet, elle permet de faciliter les interactions avec les canvas.
Vous pouvez ainsi coder plus facilement:

Code javascript :

1
2
var oCanvas = new Canvas('idDeMonCanvas'); 
oCanvas.drawRectStroke(x,y,largeur,hauteur,epaisseur,couleur);

Au lieu de :

Code javascript :

1
2
3
4
5
6
7
8
  
var canvas = document.getElementById('idDeMonCanvas'); 
var ctx = canvas.getContext('2d'); 
ctx.beginPath(); 
ctx.lineWidth=epaisseur; 
ctx.strokeStyle=couleur; 
ctx.strokeRect(x,y,largeur,epaisseur); 
ctx.closePath();

La suite dans le billet: http://blog.developpez.com/ducodeetd...n-html5-jour-2