EaselJS | Javascript/HTML5 Canvas. Recent Updates Follow @CreateJS November 2014 Updates in preparation for next release (coming soon).New class model, with big performance increases October 2014 Lots of bug fixes and pull requests.New 'Extras' folder in GitHub with useful tools and classes July 2014 Major overhaul of Graphics to include a useful command pattern, and a big performance increase.Added Graphics.store() / unstore() The Story Why we built EaselJS About EaselJS EaselJS provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas. Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries. By b10b b10b
Tutoriels HTML, HTML5, CSS, CSS3, standards du web SVG: Graphisme au format XML pour le web SVG, Scalable Vector Graphic, est une spécification de documents pour décrire des graphiques 2D à dimension variable, en XML. Il est compatible avec XML 1.0. On l'utilisera principalement pour faire des pages Web graphiques en remplacement de Flash. Il existe des frameworks pour réaliser des applications Web en SVG. Pourquoi utiliser SVG? SVG permet de placer du graphisme dans une page Web ou un document local qui soit en interaction avec des données textuelles. Par rapport à Canvas, SVG convient mieux comme format pour des graphismes produits avec un logiciel de dessin ou autre, à intégrer dans une page web, tandis que Canvas convient pour du graphisme créé dynamiquement dans la page au moment ou elle s'affiche. Par rapport à une image bitmap, SVG à l'avantage du redimensionnement sans perte en définition, et permet l'interaction avec l'utilisateur. Un fichier SVG est un document XML dont les balises sont propres au graphisme. Exemple: Fonctions principales de SVG Transformations. SVG vs.
HTML5 Introduction Free 2D Game Engine Rapid Results Blazingly Fast Development Engineered with stability, performance and care. Construct 2 is the rapid development tool you need. You need a tool you can rely on. You need a tool that won't let you down. Freedom Grow at Your Own Pace Be wary of tools that force you to publish through them, or even take a cut of your sales when you start distributing your games! Be smart. Support Enlightening & Friendly Everyone needs a helping hand every now and then and you don't want to be left in the dark. We have a completed manual, lots of tutorials and our community is one of the most helpful and friendly around. Over 1 Million Downloads. Thousands upon thousands of game developers have already downloaded Construct 2 — What are you waiting for?
SVG vs Canvas, à l'heure du choix Quel format choisir pour intégrer des graphismes dans une page Web, ou pour réaliser une application en ligne? Balises contre fonctions SVG est un langage à balise dérivé de XML. Par exemple, voila comment on affiche un texte vectoriel en SVG: <svg width="320px" height="48px"> <g> <text font-size="24" font-style="italic" x="16" y="16" style="fill:purple"> Un texte en SVG </text> </g></svg> Et avec Canvas: <canvas id="can" width="320" height="48">Un texte avec Canvas</canvas><script>function cText(){ var ctx = document.getElementById('can').getContext('2d'); ctx.fillStyle="rgb(255,32,32)"; ctx.font='italic normal 24px Calibri, sans-serif'; ctx.fillText("Un texte avec Canvas", 16, 16);}window.onload=cText;</script> Vectoriel et bitmap? Même s'il est certain que SVG est vectoriel, donc que l'utilisateur peut changer la taille de l'image, Canvas n'est pas bitmap pour autant. Interaction avec l'utilisateur Le code SVG est fait de balises qui peuvent se combiner avec les balises HTML. Scripting
Presentation Samuel Ronce, WebCreative5 26 Novembre 2012 LyonJS Création d'un jeu avec CanvasEngine Structure d'une scène Propriétés et méthodes de la scène Appel de la scène canvas.Scene.call("MyScene"); Créer un élément Groupe d'éléments Rafraichissement Extend var canvas = CE.defines("canvas_id"). extend(Animation). ready(function() { canvas.Scene.call("MyScene"); }); Timeline Easing name : Un Sprite animé Image composée de 4 animations de 5 séquences Largeur : 250px Hauteur : 200px Animation Code dans la méthode "ready". var canvas = CE.defines("canvas_id"). extend(Input). ready(function() { canvas.Scene.call("MyScene"); }); Gestion du clavier Code dans la méthode "ready". Aperçu de la manette Gestion de la manette Code dans la méthode "ready" reprenant le code précédent. Code dans la méthode "render". this.gamepad.update(); stage.refresh(); Test de la manette Level Design Préparation Penser à charger le fichier JS pour Tiled Map Editor Etendre Canvas Engine Charger une carte
Aptana Studio The professional, open source development tool for the open web It's ready. It's time. Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python. We've got you covered! Core Features HTML, CSS, and JavaScript Code Assist Aids in authoring of HTML, CSS, JavaScript, PHP, and Ruby. Code Assist Deployment Wizard Support for one-shot as well as keep-synchronized setups. Deployment Wizard Support for one-shot as well as keep-synchronized setups. Integrated Debugger Set breakpoints, inspect variables, control execution. Integrated Debugger Git Integration Easily put your projects under git source code control. Git Integration Easily put your projects under git source code control. Built-in Terminal Quickly access a command line terminal for execution of operating system commands and language utilities such as gem, rake, etc. Built-in Terminal IDE Customization IDE Customization
SVG ou Canvas, que choisir ? Depuis plusieurs années que je m’intéresse à SVG et aux nouvelles possibilités qu’offre HTML5, on me pose régulièrement cette même question : « Quel est le mieux entre SVG et Canvas ? ». Je réponds alors stoïquement et laconiquement : « Les deux mon capitaine, ça dépend ». En effet, ça dépend, voilà donc un petit guide pour vous aider à choisir entre ces deux technologies. Voyons tout d’abord ce que ces technologies ont en commun. Il est très rare que dans le cadre du Web nous ayons deux standards qui fassent la même chose... Vecteurs contre bitmap La première différence entre ces deux technologies tient aux types de données qu’elles manipulent. La différence entre les deux va donc se jouer sur des questions assez simples finalement : si vous devez envisager un redimensionnement sans perte de qualité, SVG sera plus indiqué. Déclaratif contre programmatif Une autre différence de fond entre ces deux technologies tient à la façon de les utiliser. DOM or not DOM, zat iz ze question Conclusion
HTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS - David Rousset - HTML5 & Gaming Technical Evangelist Après quelques heures passées sur le clavier à coder en JavaScript, j’ai finalement complètement porté l’exemple de jeu Platformer issu des samples XNA 4.0 vers HTML5/Canvas à l’aide du framework EaselJS. Vous trouverez dans cet article le jeu en lui-même ainsi qu’un petit retour d’expérience sur les parties qui m’ont fait me poser le plus de questions. Si vous cherchez à savoir comment fonctionne le jeu en interne, le mieux est de tout simplement en lire le code. Il est disponible au téléchargement à la fin de cet article. Vous pouvez jouer au jeu directement au sein de cette iframe (avec les flèches droite et gauche & W pour sauter). Vous pouvez également jouer au jeu dans une fenêtre séparée en suivant ce lien : HTML5 Platformer Note 1: ce jeu a d'abord été publié en septembre 2011 avec EaselJS 0.3.2 et a été mis à jour pour EaselJS 0.4. Note 2: ce jeu a été testé avec succès sous IE9/10, Chrome 17, Firefox 11, IE9 sur Windows Phone et sous iPad 2. - Are We Fast Yet? David
Create Games with Construct 2 - Scirra.com Que peut-on faire avec SVG? Les meilleures applications actuelles réalisées avec SVG vous ferons voir ce que l'on peut faire avec ce langage graphique standard. SVG est un langage pour convertir les données en graphiques. Nous allons voir avec la liste d'applications qui suit que cela peut représenter en fait une variété très étendue d'utilisations. Mais avant tout, il ne faut pas se leurrer, SVG ne convient pas à tous les cas de figure et souvent il vaudra mieux remplacer le code par une simple image, éventuellement avec une image map pour ajouter un peu d'interactivité... Parce que le code SVG est lourd, on peut souvent le remplacer par une image sans ralentir le chargement de la page. Mais lorsque les conditions sont réunies, il est alors possible de fournir grâce à SVG des choses étonnantes... SVG Web Demo Ce site propose un outil qui convertit SVG en Flash afin de l'afficher sur tous les navigateurs. Tracer un chemin sur une carte Jeu de plateau Le lien est sur un fichier SVG. Le jeu Invaders Le jeu Tetris
C SVG Working Group SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. This is a public group, which works on an open mailing list and which welcomes your feedback. Upcoming Events The Graphical Web 2014 – Winchester, England, August 27–30, 2014 The Graphical Web will showcase SVG, as well as related technologies like Canvas, WebGL, CSS, Javascript, and HTML5 video and audio. News CSS-SVG Effects Task Force Started The CSS and SVG Working groups have started a joint task force to discuss and develop mutual features such as gradients, transforms, filters, and animation.