[Article] Comment créer un moteur d'affichage 2D en HTML5
:salut:
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.
:arrow: Comment créer un moteur d'affichage 2D en HTML5.
:merci: à lui !
class DisplayObject inopérante
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:
1
2
| var carre = new DisplayObject();
carre.draw(context); |
Pour l'image, autre essai (parmi plusieurs):
Code:
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:
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> |
guillemets || ou // ____ & # 8 2 2 1 ;
Bonjour et merci beaucoup à Nicolas,
J'ai une question concernant l'usage des guillemets dans la balise canvas dans ton tutoriel:
Code:
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):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,
