+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 650
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 650
    Points : 91 548
    Points
    91 548
    Billets dans le blog
    20

    Par défaut [Article] Comment créer un moteur d'affichage 2D en HTML5



    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 !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 152
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 152
    Points : 9 218
    Points
    9 218

    Par défaut

    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.
    One Web to rule them all

  3. #3
    Membre habitué

    Homme Profil pro
    Développeur multimédia
    Inscrit en
    août 2012
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur multimédia
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : août 2012
    Messages : 19
    Points : 148
    Points
    148

    Par défaut Merci !

    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 !

  4. #4
    Futur Membre du Club
    Profil pro
    Inscrit en
    février 2013
    Messages
    16
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : février 2013
    Messages : 16
    Points : 5
    Points
    5

    Par défaut Super tutoriel!

    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.

  5. #5
    Membre averti
    Avatar de mrqs2crbs
    Profil pro
    Inscrit en
    juin 2013
    Messages
    101
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2013
    Messages : 101
    Points : 318
    Points
    318
    Billets dans le blog
    2

    Par défaut

    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.

  6. #6
    Futur Membre du Club
    Femme Profil pro
    animatrice multimédia
    Inscrit en
    mai 2014
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : animatrice multimédia
    Secteur : Associations - ONG

    Informations forums :
    Inscription : mai 2014
    Messages : 10
    Points : 7
    Points
    7

    Par défaut 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 : 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>

  7. #7
    Membre habitué Avatar de francis60
    Homme Profil pro
    Aide à la décision, modélisation coût/process
    Inscrit en
    août 2011
    Messages
    133
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Aide à la décision, modélisation coût/process
    Secteur : Conseil

    Informations forums :
    Inscription : août 2011
    Messages : 133
    Points : 141
    Points
    141

    Par défaut 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 : 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,

Discussions similaires

  1. [Article] Comment créer facilement un framework JavaScript - Partie 1
    Par kalyparker dans le forum Bibliothèques & Frameworks
    Réponses: 8
    Dernier message: 11/10/2010, 07h45
  2. [Article] Comment créer facilement un framework JavaScript - Partie 2
    Par kalyparker dans le forum Bibliothèques & Frameworks
    Réponses: 3
    Dernier message: 10/02/2010, 10h13
  3. comment créer un moteur audio?
    Par luckyvae dans le forum API graphiques
    Réponses: 5
    Dernier message: 16/05/2008, 11h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo