Share
Avec l'avènement d'outils comme Adobe Edge et de bibliothèques telles qu'EaselJS, les développeurs souhaitant créer du contenu HTML5 interactif disposent de davantage de ressources. Bon nombre de ces outils sont spécialement conçus pour les développeurs Flash afin de faciliter la transition de la toile ActionScript à la toile HTML5. Cet article passera en revue oCanvas, une bibliothèque HTML5 que les développeurs pourraient trouver non seulement inestimable mais aussi très facile à utiliser..
Avant de nous lancer dans l'exploration de oCanvas, définissons rapidement le fonctionnement du canevas HTML5. Si vous souhaitez une explication plus détaillée sur l'utilisation de la toile HTML5, consultez ce didacticiel..
Si vous connaissez ActionScript, vous connaissez déjà beaucoup de JavaScript, qui est le véritable pouvoir lorsque vous travaillez avec la toile. Nous utilisons l'API de dessin HTML5 pour créer notre contenu avec quelques bons vieux JavaScript pour rendre les choses interactives et dynamiques. Mais lorsque nous combinons les deux, l’approche utilisée pour assembler notre code est un peu différente de celle à laquelle nous sommes habitués avec ActionScript..
En bref, pour utiliser l'API Canvas native, nous dessinons des pixels sur le contexte de dessin du canevas. Mais l’essentiel à retenir est que nous travaillons avec la totalité de la toile, pas seulement avec une forme ou une image unique. Chaque fois que nous voulons modifier quelque chose que nous avons dessiné, nous devons redessiner toute la toile. Si nous voulons animer quelque chose, nous devons redessiner la toile dans notre code JavaScript pour faire croire que les choses bougent..
Cette notion est très similaire à l'animation traditionnelle, où les animateurs devaient dessiner chaque pose dans leur séquence et laisser la caméra la traverser très rapidement pour simuler le mouvement. Mais si vous êtes habitué à des structures en forme d'arborescence telles que le DOM ou la liste d'affichage dans Actionscript, cette notion peut être difficile à comprendre. Cette approche de la programmation avec rinçage et répétition est très différente du travail avec des objets pour la plupart des développeurs..
Heureusement pour ceux d'entre nous qui avons l'habitude de travailler avec des objets, oCanvas apporte cette approche familière à la toile HTML5. oCanvas est une bibliothèque JavaScript développée par Johannes Koggdal dans le but de faciliter le développement avec la toile HTML5. Il vous permet de travailler directement avec des objets, de modifier leurs propriétés et d’y associer des événements tout en gérant pour vous les tâches fastidieuses en coulisses. Comme le dit le mieux Johannes sur son blog:
Mon objectif a toujours été de rendre très facile la tâche des gens de créer des éléments de toile basés sur des objets. J'ai choisi le nom oCanvas comme contraction de "object canvas".
Pour commencer à utiliser oCanvas, nous devons inclure une copie de la bibliothèque sur notre page HTML. Nous pouvons référencer le fichier hébergé sur le CDN ou héberger nous-mêmes une copie locale. Accédez au site Web oCanvas et vous pouvez télécharger une copie de la bibliothèque ou récupérer la référence à la version hébergée sur CDN. La version actuelle est la 2.0 et a été publiée il y a quelques semaines à peine. Elle corrigeait bon nombre des bogues de la version initiale. Il existe sur le site une version de production réduite, qu'il est bon d'utiliser lorsque vous êtes prêt à déployer votre projet. Il existe également une version de développement non compressée mais qui convient mieux au débogage. J'aime créer un lien direct avec la version hébergée pour accélérer le chargement et la mise en cache par le navigateur..
Après avoir fait référence à oCanvas, nous devons ensuite configurer un élément canvas dans le corps de notre code HTML et créer une référence à utiliser dans notre code Javascript..
Comme toujours, si vous placez votre script au-dessus de l'élément canvas, vous devez l'envelopper dans une fonction afin de savoir que le DOM est prêt. Il y a plusieurs façons d'aller ici. Vous pouvez soit créer votre propre fonction, puis l'appeler dans votre élément body lors de son chargement, comme ceci:
function Main () // votre code oCanvas
Ou vous pouvez envelopper votre code dans la commande intégrée de oCanvas domReady () méthode. C'est l'équivalent de jQuery $ (document) .ready (). Dans oCanvas, nous utilisons ceci:
oCanvas.domReady (function () // votre code ici);
Remarque: Vous pouvez utiliser jQuery $ (document) .ready () méthode si vous vouliez.
Ce morceau de code est absolument nécessaire et est la première chose que vous devez écrire lorsque vous utilisez oCanvas..
var canvas = oCanvas.create (canvas: "#canvas", arrière-plan: "# 0cc", fps: 60);
Dans ce code, nous stockons une référence à l'élément canvas dans notre document et avons accès à l'instance principale, ce qui vous permettra de commencer à créer des objets. le créer() La méthode prend un objet comme argument qui contrôle le fonctionnement de oCanvas. Il y a de nombreuses propriétés à passer dans le créer() méthode, mais la seule obligatoire est la propriété canvas: un sélecteur CSS qui doit pointer sur un élément canvas dans le DOM.
Les autres propriétés transmises dans le code ci-dessus sont les propriétés background et fps. La propriété background permet d'appliquer un arrière-plan au canevas, qui peut être des valeurs de couleur CSS, des dégradés et des images. Si c'est omis, la toile sera transparente. La propriété fps définit le nombre d'images par seconde de n'importe quelle animation. La valeur par défaut est 30 ips.
Remarque: Bien que nous examinions de nombreuses fonctionnalités de oCanvas, je vous recommande de consulter la documentation de la bibliothèque pour mieux comprendre chaque section..
OCanvas permet de créer de nombreux types d’objets d’affichage. Vous pouvez créer des formes telles que des rectangles, des ellipses, des polygones et des lignes ainsi que des images, du texte et même des feuilles de sprite. Pour créer un nouvel objet d'affichage, nous utilisons le module d'affichage de oCanvas, et précisons le type d'objet d'affichage que nous voulons créer, ainsi que certaines propriétés de base - comme ceci:
var box = canvas.display.rectangle (x: 50, y: 150, largeur: 50, hauteur: 50, remplissage: "# 000");
Ensuite, pour l'ajouter à l'écran, nous appelons une méthode familière pour vous les développeurs Flash…
Oui, un ancien, mais un goodie, ce qui rend l'ajout d'objets à oCanvas un processus familier. Donc, pour ajouter notre boîte à la toile, nous écririons:
canvas.addChild (boîte);
Tout comme dans ActionScript, addChild () ajoute l'objet spécifié en tant qu'enfant de l'appelant. Et à son tour, les x et y de l'enfant seront relatifs à ses parents. Donc, dans ce cas, nous faisons de box un enfant de la toile, que nous pourrions simplifier comme ceci:
box.add ();
le ajouter() La méthode ajoute également l’objet à la zone de dessin - ce qui est vraiment la même chose que canvas.addChild (box). Mais addChild () est très utile pour ajouter un objet en tant qu'enfant à un objet d'affichage déjà créé, comme:
var square = canvas.display.rectangle (x: 0, y: 0, largeur: 10, hauteur: 10, remplissage: "# 990000"); box.addChild (carré);
Jetons un coup d'œil aux différents types d'objets d'affichage que vous pouvez créer dans oCanvas..
Vous avez déjà vu un carré, mais nous pouvons utiliser le rectangle objet d'affichage pour créer beaucoup de choses. Voici un rectangle avec un trait bleu:
var rectangle = canvas.display.rectangle (x: 500, y: 100, width: 100, height: 200, remplissage: "# 000", contour: "en dehors de 2px blue");
le remplir La propriété peut prendre n'importe quelle couleur CSS valide, ainsi que des dégradés CSS et même des motifs d'image..
Pour créer une ellipse, nous écririons:
var ellipse = canvas.display.ellipse (x: 100, y: 100, radius_x: 20, radius_y: 30, remplissage: "rgba (255, 0, 0, 0.5)");
Si vous voulez un cercle complet, remplacez simplement le radius_x et radius_y propriétés avec un seul rayon propriété.
Créer tout type de polygone régulier est tout aussi simple: il vous suffit de spécifier le nombre de côtés et le rayon que vous souhaitez que votre forme ait. Pour créer un triangle:
var triangle = canvas.display.polygon (x: 320, y: 145, côtés: 3, rayon: 50, remplissage: "# 406618");
Que diriez-vous d'un pentagone?
var pentagon = canvas.display.polygon (x: 200, y: 50, côtés: 5, rotation: 270, rayon: 40, remplissage: "# 790000");
Pour ce faire, avec l’API de dessin HTML5, vous devez tracer de nombreux chemins et essayer de déterminer les positions x et y pour les joindre. J'ai essayé de dessiner un octogone à des fins de comparaison, mais comme vous pouvez le voir ci-dessous, j'ai abandonné assez facilement. Pas tout à fait sûr de ce que cela est supposé être.
Accentsconagua
var canvas = $ ("# canvas"); var ctx = canvas.get (0) .getContext ("2d"); ctx.fillStyle = '# 000'; ctx.beginPath (); ctx.moveTo (0, 0); ctx.lineTo (100,50); ctx.lineTo (50, 100); ctx.lineTo (0, 90); ctx.closePath (); ctx.fill (); La création d'objets d'affichage avec des images ne devient pas plus simple que dans oCanvas. Spécifiez simplement une position x et y et le chemin d'accès au fichier image:
var tree = canvas.display.image (x: 100, y: 350, image: "tree.png");
Une fonctionnalité intéressante de l'objet d'affichage d'image est le tuile propriété, qui vous permet de créer facilement une grille de la même image au lieu de la dessiner encore et encore.
oCanvas contient un objet d'affichage texte et gère le style de police comme le fait CSS.
var text = canvas.display.text (x: 70, y: 300, aligner: "centre", police: "gras 18px sans-serif", texte: "oCanvas Rocks", remplissage: "violet");
Vous pouvez utiliser de nombreuses autres propriétés de texte que vous connaissez bien à partir de CSS. Consultez la documentation sur le texte pour plus.
Tous les objets d'affichage héritent d'un groupe commun de propriétés et de méthodes. Certaines des propriétés d'objet d'affichage les plus courantes sont: x, y, largeur, hauteur, rotation, mise à l'échelleX, mise à l'échelleY, opacité, ombre (utilise la syntaxe CSS-box-shadow) et zIndex. Vous pouvez consulter ce lien pour obtenir une liste complète des propriétés et méthodes de base. Jetons un coup d'oeil à quelques autres remarquables.
Cette méthode permet de gagner beaucoup de temps, car elle vous permet de définir facilement l’origine dans l’objet. En d'autres termes, cela vous permet de définir le point d'alignement de l'objet. Si vous avez déjà essayé d'effectuer une rotation à partir du centre avec l'API HTML5 Canvas, vous savez à quel point cela peut vous donner mal à la tête. Vous devez effectuer toute une série d'actions pour enregistrer l'état de dessin, traduire le canevas, effectuer votre rotation, puis restaurer l'état de dessin. Avec le origine propriété, vous pouvez facilement définir l’origine d’un objet:
var obj = canvas.display.image (x: 270, y: 270, origine: x: "centre", y: "centre");
Cela attirerait l'image de son centre; si nous devions faire pivoter l'objet, il le ferait également à partir de son centre. Outre "centre", vous pouvez également passer "gauche" ou "droite" pour le x et "haut" ou "bas" pour les positions y. En plus d'utiliser les mots-clés prédéfinis, vous pouvez également fournir des nombres positifs ou négatifs en tant que valeurs indiquant où dessiner l'objet. L'origine par défaut de tous les objets d'affichage est définie en haut à gauche..
Vous pouvez également utiliser le setOrigin () méthode à tout moment pour définir l’origine d’un objet:
obj.setOrigin ("left", "bottom") L'identifiant d'un objet d'affichage, qui est en réalité une propriété en lecture seule, correspond à l'endroit où l'objet existe dans la liste de tirage - que vous pouvez considérer comme la liste d'affichage. Je trouve cela très utile car cela peut servir d'identifiant unique dans certaines situations où vous pourriez rechercher un objet spécifique dans votre code. Considérons un extrait de base comme ceci:
getId (box.id) function getId (id) if (id == 9) console.log ("CORRECT!" + id) sinon console.log ("FAUX!" + id) La propriété de composition est l'équivalent de globalCompositeOperation au sein de l'API Canvas native. Si vous ne le connaissez pas, il détermine essentiellement le rendu des pixels lorsqu'il est dessiné sur des pixels déjà existants du canevas. Je vous encourage à lire les différentes opérations de composition que vous pouvez définir, mais avec oCanvas, vous pouvez simplement définir l'opération souhaitée en la passant sous forme de chaîne:
var shape = canvas.display.rectangle (x: 270, y: 270, largeur: 180, hauteur: 80, remplissage: "# ff6900", composition: "destination-atop");
Vous pouvez passer de nombreuses opérations différentes, mais je pense que l’une des choses intéressantes que vous pouvez faire avec la propriété de composition est de créer des masques entre différents objets d’affichage. Découvrez le fichier nommé masks.html dans le package de téléchargement. Si vous vous êtes déjà appuyé sur la création de masques de calque dans vos applications Flash, vous apprécierez celui-ci..
Comme nous avons mentionné plus tôt la rotation des objets, vous pouvez rapidement faire pivoter un objet avec tourner() et rotation vers () méthodes:
obj.rotate (45);
Vous pouvez également simplement définir la propriété de rotation:
obj.rotation = 45;
Il y a aussi le bouge toi() et déménager à() méthodes qui, comme le suggèrent leurs noms, vous permettent de déplacer un objet d'un nombre spécifié de pixels pour le premier et vers une position x et y spécifiée pour le dernier.
obj.moveTo (100, 100)
La même idée fonctionne pour le échelle() et scaleTo () méthodes ():
obj.scale (1.25, 0.25) obj.scaleTo (1.5, 1.5)
Nous avons mentionné addChild () avant; n'oublions pas removeChild () et removeChildAt (). Et comme le ajouter() méthode, on peut faire le contraire avec retirer().
Une autre méthode vraiment utile est cloner(), qui vous permet de dupliquer un objet d'affichage et toutes ses propriétés.
var box = canvas.display.rectangle (x: 50, y: 150, largeur: 50, hauteur: 50, remplissage: "# 000"); var box2 = box.clone (x: 200)
Un gros avantage pour oCanvas est que vous pouvez ajouter des événements à des objets spécifiques. OCanvas contient de nombreuses méthodes et propriétés pour gérer facilement les événements de souris, de clavier et même de contact, le tout avec une seule méthode.
Si vous connaissez jQuery, vous savez probablement déjà où je vais avec cette.
canvas.bind ("click tap", function () canvas.background.set ("# efefef");); Tout cela ne change que la couleur de fond de la toile, mais vous remarquez comment nous passons "click tap", ce qui nous permet facilement d’ajouter un support pour les périphériques souris et tactiles..
Outre les événements de clic, vous pouvez également écouter d'autres événements de souris:mousedown, mouseup, mousemove, mouseenter, mouseleave et dblclick.
Un simple effet de survol pourrait ressembler à ceci:
box.bind ("mouseenter", function () canvas.background.set ("# 333");). bind ("mouseleave", function () canvas.background.set ("# 000"); ) Ceci est un exemple de fonctions de chaînage - qui (ne pas ressembler à un enregistrement brisé) est une autre fonctionnalité jQuery exploitée dans oCanvas.
Mais au lieu de modifier le canevas lorsqu'un événement de souris survient, pourquoi ne pas modifier un objet d'affichage réel? Après tout, il s’agit toujours de Canvas HTML5. Nous devons donc nous rappeler d’appeler une méthode importante pour que le canevas se mette à jour.
le redessiner () La méthode (qui fait partie du module Draw et non du module Events) redessine le canevas avec tous les objets d'affichage ajoutés. Donc, si vous voulez effectuer une action sur un objet particulier et conserver le reste de la liste de tirage intact, nous devons ajouter cette simple ligne de code à nos fonctions:
square.bind ("click tap", function () square.x + = 50; canvas.redraw ();); À quoi sert un écouteur d'événement si nous ne pouvons pas le supprimer?
rectangle.bind ("cliquez sur", function onClick () this.fill = "# FF9933"; canvas.redraw (); rectangle.unbind ("cliquez sur", onClick)); Nous n'avons pas besoin de lier() méthode pour celui-ci. Nous écrivons juste:
circle.dragAndDrop ();
C’est probablement le code de glisser-déposer le plus rapide et le plus simple que vous puissiez écrire.
Note sur les événements: Lorsque vous travaillez avec des événements, il est naturel de vouloir obtenir autant d'informations que possible sur l'événement. Heureusement, nous pouvons toujours le faire lorsque nous travaillons avec oCanvas. Par exemple, si nous prenons le gestionnaire de clics quelques lignes et que nous enregistrons l'événement dans la console, nous pouvons voir toutes les propriétés que nous avons de l'événement..
rectangle.bind ("cliquez sur", fonction onClick (e) this.fill = "# FF9933"; canvas.redraw (); rectangle.unbind ("cliquez sur", onClick); console.log (e); ) 
Outre les événements de souris, oCanvas propose des modules complets dédiés aux événements de clavier et tactiles avec leurs propres méthodes et propriétés. Ces événements sont également gérés avec le lier() méthode. Le système des événements dans oCanvas est un sujet très vaste, je vous encourage donc à consulter la section événements de la documentation et à expérimenter..
Avec le module Timeline, nous pouvons configurer notre boucle principale pour notre application. Si vous créez un jeu, ce sera essentiellement votre boucle de jeu. J'aime penser à cela comme l'équivalent d'un ENTER_FRAME en flash.
C'est simple à installer - nous appelons simplement le setLoop la fonction et la chaîne début() méthode pour cela:
canvas.setLoop (function () triangle.rotation + = 5;). start ();
Si nous voulions lier le setLoop () fonction à un événement - dire à un clic de souris - nous pourrions faire quelque chose comme ceci:
canvas.setLoop (function () triangle.rotation + = 5;) button.bind ("cliquez sur", function () canvas.timeline.start ()); Et nous pourrions arrêter la chronologie en appelant simplement:
canvas.timeline.stop ();
En utilisant setLoop () C’est la voie à suivre pour les animations qui se dérouleront sur une longue période et pour gérer les mises à jour constantes que vous devez effectuer tout au long de votre application. Mais oCanvas a des méthodes intégrées pour gérer des animations plus simples et plus simples qui sont généralement nécessaires. Ces méthodes sont aussi pratiquement prises textuellement de jQuery.
le animer() Cette méthode fonctionne comme dans jQuery. Si vous n'êtes pas familier avec ce côté de jQuery, pensez-y s'il s'agit d'un moteur d'interpolation tel que TweenMax ou Tweener for Flash. Vous pouvez animer toute propriété pouvant être définie par une valeur numérique:
circle.animate (y: circle.y - 300, scalingX: .5, scalingY: .5, "court", "facilité", function () circle.fill = "# 45931e"; canvas.redraw (););
Ici, nous animons la position y et la taille globale du cercle, appliquons un léger assouplissement et, une fois l'opération terminée, nous exécutons une fonction de rappel qui modifie sa couleur de remplissage. Mais n'oubliez pas d'appeler redessiner ().
fadeIn (), disparaître(), et fondu au() Pour faire apparaître ou disparaître un objet, nous pourrions simplement appeler:
square.fadeIn (); square.fadeOut ();
Pour atténuer l'opacité à une valeur spécifique, nous utiliserions fondu au():
square.fadeTo (0,6);
Vous pouvez également définir la durée, l’accélération et fournir une fonction de rappel pour ces méthodes de la même manière que vous le feriez avec le animer() méthode.
oCanvas contient un module de scènes très utile qui vous permet de séparer facilement votre application en différents états. Les développeurs de jeux peuvent apprécier celui-ci car il s’agit d’une approche simple pour décomposer votre jeu en différentes sections. Même les animateurs Flash de la vieille école peuvent assimiler le module Scènes au panneau Scènes, ce qui vous permet de créer littéralement différentes scènes dans un projet Flash..
Pour créer une scène dans oCanvas, nous appelons le créer() méthode pour retourner un des scènes objet:
var intro = canvas.scenes.create ("intro", function () // ajoute les objets d'affichage ici); Dans le créer() méthode on passe en deux arguments: le nom de la scène sous forme de chaîne et une fonction où l'on ajoute l'objet d'affichage que l'on veut ajouter à cette scène.
var introText = canvas.display.text (x: canvas.width / 2, y: canvas.height / 2, aligner: "centre", police: "bold 36px sans-serif", texte: "Introduction", remplissage: "# 133035"); var intro = canvas.scenes.create ("intro", function () this.add (introText);); Maintenant nous devons charger notre scène et ces objets seront ajoutés à l'affichage:
canvas.scenes.load ("intro"); Remarquez que nous passons dans le nom que nous avons donné à la scène lorsque nous l'avons créée.
Et bien sûr, nous pouvons décharger une scène à tout moment:
canvas.scenes.unload ("intro"); Imaginez à quel point cela pourrait vous faire gagner du temps si vous utilisiez des scènes et des gestionnaires d’événements ensemble..
Le seul inconvénient réel d’oCanvas est qu’il n’a pas gagné autant de poids que vous ne le pensez dans la communauté du développement - ou du moins cela semble être le cas pour le moment. Je pense qu’une partie de cette raison est due à la popularité d’EaselJS. Il semble y avoir beaucoup plus de sensibilisation et de ressources sur EaselJS que sur oCanvas - ce qui est difficile à croire depuis la sortie de ce dernier en mars 2011, mais pour une raison quelconque, il est passé inaperçu..
J'utilise les deux bibliothèques depuis un certain temps déjà, et je peux honnêtement dire que je suis un grand fan des deux. EaselJS se sent certainement plus comme si vous utilisiez ActionScript et si vous êtes un développeur Flash, il sera facile à comprendre. Et comme nous l'avons vu, oCanvas pourrait passer pour le frère perdu de jQuery à bien des égards. Donc, si vous êtes un pur ActionScripter, vous pouvez naturellement vous tourner vers EaselJS, d’autant plus que Easel a été écrit spécifiquement pour plaire aux développeurs Flash..
Cependant, j'utilise Actionscript depuis bien plus longtemps que jQuery et je trouve personnellement que oCanvas est plus simple à utiliser et moins détaillé à écrire. Et même si EaselJS est assez facile à utiliser, la syntaxe simple dans oCanvas en fait un outil aussi bienvenu.
Mais outre la syntaxe la plus simple, oCanvas et EaselJS sont très interchangeables à bien des égards. Les deux bibliothèques peuvent accomplir plus ou moins les mêmes tâches et il y a très peu de différence de performance, le cas échéant. Cependant, je remarque que la fonction de ticker dans EaselJS est un peu plus fluide que celle d’oCanvas. setLoop fonction (bien que cela puisse être juste une différence basée sur un navigateur).
EaselJS dispose d'une API beaucoup plus étendue, notamment en ce qui concerne le dessin et les effets. Et si vous prenez en compte TweenJS et SoundJS, Easel est certainement un outil plus complet - en particulier si vous êtes habitué à utiliser une application telle que Flash qui offre un contrôle précis de vos projets. Mais si vous débutez dans le jeu HTML5, il est probable que vous lancerez beaucoup plus rapidement oCanvas. Lorsque j'ai découvert oCanvas pour la première fois, je trouvais cela très amusant de jouer avec. Tout est déjà là pour vous - toutes les méthodes et tous les événements nécessaires pour créer, manipuler et animer des objets immédiatement.
Quelle que soit la bibliothèque que vous préférez, oCanvas et EaselJS ne sont que le début de ce que je pense sera un afflux d’outils et de ressources pour permettre aux développeurs de créer facilement des applications basées sur un navigateur. Les fonctionnalités d’oCanvas détaillées dans cet article ne font qu’effleurer ce qui pourrait être créé avec cette bibliothèque très puissante..
OCanvas (ou n'importe quelle bibliothèque d'ailleurs) n'est en aucun cas une raison de ne pas apprendre ni utiliser l'API HTML5 de Canvas native. Mais si vous vous retrouvez dans une situation où tous vos anciens clients Flash vous cherchent maintenant pour créer des applications HTML5 (comme le mien) et que vous n'avez pas le temps d'apprendre quelque chose comme la matrice de transformation inacceptable de l'API Canvas native - oCanvas peut certainement faciliter la courbe d'apprentissage.
