Discussion :

[Bovino]

Nicolas Legrand vous propose un cours JavaScript sur l'utilisation de la balise HTML5 <canvas> : Comment créer un moteur d'affichage 2D en HTML5.

À travers un exemple concret, vous apprendrez comment utiliser l'API JavaScript de cette balise en commençant par tracer les formes les plus simples jusqu'aux concepts les plus avancés.

N'hésitez pas à faire part de vos remarques et commentaires sur ce guide.

Comment créer un moteur d'affichage 2D en HTML5.

à lui !

[SylvainPV]

Article très complet qui prend bien le temps d'introduire le sujet
Il manque peut-être quelques démos pour faire saliver.

Partie IV-C, il est dit que le prototypage vient à notre secours pour un ersatz de namespacing, mais je pense qu'il est davantage question de la mutabilité des objets que des prototypes dans ce cas.

[atlanthot]

Merci à tous d'avoir si bien accueilli mon travail, je prends note de la remarque concernant la mutabilité des objets vs prototypage, en effet c'était une bourde de ma part que je vais corriger dès ce soir et mettre en ligne dès ce soir sur mon site ( je vais également essayer de MAJ la version developpez.com ).

Encore merci à tous ! Bonne lecture !

[Kdence]

Merci à toi pour ce super tutoriel. Il m'a permit de comprendre certains concepts qui m'étaient encore inconnus.

Cependant, il y a quelques petites erreurs parfois dans les codes et quelques oublis aussi. (ligne de code manquante, commentaire sans les //, etc...)
Mais je pense que c'est mieux comme ça ça nous pousse à comprendre le code plutôt que de bêtement le copier.

Du coup je ne vais même pas les énumérés ici

Sinon j'ai un peu galéré avec les animations et je pense que ça mériterait un exemple concret.

[mrqs2crbs]

Salut,

Merci à Nicolas Legrand pour ce gros boulot.

Je viens juste de commencer le tutoriel, et j'ai remarqué une petite erreur (?).

Sur firefox 29.0.1, la balise canvas, telle qu'elle est donnée dans le script du tutoriel :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<canvas id="tomahawk" width="300" height="600"></canvas>

Ne permet pas le redimensionnement. Il faut virer les "guillemets" sur les valeurs des attributs width et height :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<canvas id="tomahawk" width=300 height=600></canvas>

Et là ça passe (je n'ai pas testé sur d'autres navigateurs).

Bon, je ne sais pas si je suis au bon endroit pour ce genre de commentaire.

[doudoulolita]

Bonjour et merci pour ce gros travail,

J'ai déjà fait un peu de javascript mais pas de programmation objet, donc autant la première partie du tuto jusqu'à la programmation objet ne m'a pas posé de problème, autant pour la suite, j'ai fait du copier-coller sans trop comprendre.

Il manque peut-être dans le tuto une section intermédiaire, ou alors il faudrait pouvoir afficher quelque chose plus rapidement, avant d'avoir fait des tonnes de classes, pour voir si notre code n'est pas mal placé, ou si le tuto ne comporte pas d'erreurs de frappe.

Pour l'affichage des images, au début, il y a des techniques où on n'a pas besoin de l'afficher dans la page html et cela n'est pas expliqué. Comme cette partie est pour les débutants, c'est un peu dommage.

Ce qui est assez compliqué également, c'est qu'il n'est pas toujours précisé dans quel dossier on doit placer images et fichiers quand on en arrive à la programmation objet. A priori, je pense que les images sont au même niveau que sample1.html et sample1.js ? L'image modèle venant de RPGMaker n'a même pas un des noms prévus dans le tuto, ce serait plus simple pourtant, et ce n'est ni un perso ni un décor. C'est un détail mais ce serait plus simple.

Il est dit dans le chapitre VI-B. Le point de départ : La classe DisplayObject que sa fonction render affichera l'image et la fonction draw le carré.

Cependant, on n'a pas vraiment d'exemple de la manière de créer un nouvel objet DisplayObject. Pour ma part, j'ai essayé plusieurs façon sans arriver ni à afficher la rectangle, ni une de mes images (renommée ground.png).
La seule explication pour créer un nouvel objet est, me semble-t-il, celle des voitures, et il n'y a pas de test (avec une fonction qui afficherait une boite de dialogue ou mieux, une image de voiture).

Pour le rectangle, j'ai tout bêtement essayé ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var carre = new DisplayObject();
carre.draw(context);

Pour l'image, autre essai (parmi plusieurs):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var ground = new DisplayObject("ground");
sol.width=50;
sol.height=50;
sol.render(context);

On ne sait pas non plus à quel endroit on doit placer ce code. Dans la fonction init de sample1.js ?

Comme on n'a pas moyen de savoir où se situent nos erreurs quand on débute, on est pas mal embêté. J'ai cru voir des fonctions qui ne se terminaient pas par un point-virgule alors que toutes les autres en avaient mais même en changeant ça, ça ne donne rien dans mon canvas.

A priori, j'ai bien fait le lien vers tous les fichiers js dans le head de ma page html.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
	<script type="text/javascript" src="tomahawk/Tomahawk.js"></script>
	<script type="text/javascript" src="tomahawk/Texture.js"></script>
	<script type="text/javascript" src="tomahawk/TextureAtlas.js"></script>
	<script type="text/javascript" src="tomahawk/DisplayObject.js"></script>
	<script type="text/javascript" src="tomahawk/utils/AssetsLoader.js"></script>
	<script type="text/javascript" src="tomahawk/utils/AssetsManager.js"></script>
	<script type="text/javascript" src="sample1.js"></script>

[francis60]

Bonjour et merci beaucoup à Nicolas,

J'ai une question concernant l'usage des guillemets dans la balise canvas dans ton tutoriel:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!-- La balise canvas que nous utiliserons dans le fichier sample.js-->
    <canvas id="tomahawk" width=”800” height=”600”></canvas>

Dans notepad, le guillemet incliné de ton code s'affiche ce cette façon (sans les espaces):

& # 8 2 2 1 ;

Si je le remplace par un guillement classique " ou si j'enlève le guillemet, la taille du canvas augmente dans le browser Chrome.

Quelqu'un peut-il m'expliquer ?

Bien cordialement,