IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Journal de la création d'un RTS en HTML5
Suivez étape par étape la naissance d'un jeu de stratégie

Le , par imikado

9PARTAGES

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 : Sélectionner tout
1
2
var oCanvas = new Canvas('idDeMonCanvas'); 
oCanvas.drawRectStroke(x,y,largeur,hauteur,epaisseur,couleur);
Au lieu de :
Code javascript : Sélectionner tout
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

Une erreur dans cette actualité ? Signalez-le nous !