background preloader

HTML5 jeu canvas

Facebook Twitter

I'm Taking Part in Inclusive Design 24 - Coolfields Consulting. I’m proud to have been invited by Léonie Watson to take part in Inclusive Design 24, a 24 hour event the Paciello Group and Adobe are sponsoring to mark Global Accessibility Awareness Day on Thursday 15th May 2014. Inclusive Design 24 – May 15th 2014. Global Accessibility Awareness Day Global Accessibility Awareness Day (or GAAD) is an annual event that aims to ‘get people talking, thinking and learning about digital (web, software, mobile, etc.) accessibility and users with different disabilities.’ It tries to connect with design, development and UX communities who are interested in learning more about digital accessibility, but who may not know where to start. With that in mind I’ve decided to run a webinar entitled ‘So How Do I Know if My Website is Accessible?’.

It’s going to be a reworking of a presentation I’ve given to a number of WordPress WordCamps and Meetup groups in the last few months. What I’m going to cover Who would benefit from this webinar? When is the webinar? Introduction à l’HTML5. Cet article est destiné aux débutants en HTML5, et à tous ceux qui souhaitent en savoir un peu plus sur cette nouvelle technologie qui agite le web et le monde mobile. Si vous vous intéressez aux technologies du web, vous avez probablement déjà entendu parler de l’HTML5 aux cours des dernières années.

Cette introduction va vous donner un premier aperçu de ce qui se cache derrière le terme HTML5, vous présentera le contexte dans lequel évolue cette technologie, et nous verrons un bon nombre de nouvelles fonctionnalités qu’il apporte. Sommaire : L’HTML5 c’est quoi ? L’HTML5 n’est pas… Tout d’abord, je suis convaincu que parmi vous certains se disent : L’HTML5, c’est un nouveau langage ? Ou encore : Je débute, j’ai envie d’apprendre l’HTML5 directement, ça a l’air mieux que l’HTML d’avant.

Voire : Pfff, moi qui venait d’apprendre l’HTML, je vais devoir tout réapprendre… Il est grand temps de clarifier les choses : L’HTML5 n’est pas un nouveau langage. L’HTML5 est… Le W3C et le WHATWG On y arrive ! Impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz. 60 Frameworks et Moteurs de jeu HTML5. Suite à l’article « RPG JS, moteur de jeu en HTML5 gratuit & OpenSource », j’ai eu la surprise d’avoir un retour courriel plutôt important me demandant si je connaissais d’autres ressources… à ce moment là, non Mais après quelques recherches, voici une liste (probablement pas tout à fait exhaustive mais déjà bien fourni) qui devrait vous aider à trouver le moteur de jeu que vous avez besoin.

Comme vous pourrez le voir, il existe une soixantaine de moteurs de jeu en tout genre… Toutefois, j’aimerais mettre en avant un plugin jQuery : pp3Diso, développé parJean-François RENAULD. pp3Diso pp3Diso est un plugin jQuery qui permet l’affichage et la gestion d’une carte 2D isométrique (ou 3D isométrique par abus de langage). Ce plugin est distribué gratuitement pour une utilisation personnelle ou commerciale. La seule obligation est l’insertion d’un lien vers www.prelude-prod.fr sur le site utilisant ce plugin. Ce plugin a été développé pour êtrecompatible avec une grande partie des navigateurs. Graphismes HTML5 grâce à SVG, Canvas 2D et WebGL. Introduction aux APIs graphiques d’HTML5: SVG & Canvas (1/2) - David Rousset - HTML5 & Gaming Technical Evangelist. Au programme de cette série d’articles, nous allons découvrir : 1 – les bases de SVG et de Canvas 2 – les scénarios clés d’utilisation de ces 2 jeux d’APIs Ce premier article traitera donc des bases de SVG et de Canvas.

Note : vous pouvez tester la plupart des exemples directement au sein de cet article si vous utilisez IE9, Firefox 4.0 ou Chrome. Opera 11 ne supportant pas apparemment le SVG “in-line”, la plupart de mes exemples SVG ne fonctionnent pas. Par ailleurs, j’ai corrigé l’exemple de jeu en SVG à la fin de l’article fourni par le tutorial MSDN pour le faire fonctionner sous Firefox. Les bases de SVG Les scènes statiques Commençons donc par la base de la base de SVG. Vous avez un ensemble de primitives pour dessiner (rectangle, cercle, ellipse, etc.) ou alors via des Paths. Si vous êtes développeur Silverlight, SVG vous rappellera furieusement XAML si nous devions faire un parallèle. Nous donne le résultat suivant (si votre navigateur supporte SVG) : Ajout de l’interactivité <! <! <! ). Introduction aux APIs graphiques d’HTML5: SVG & Canvas (2/2) - David Rousset - HTML5 & Gaming Technical Evangelist.

Nous allons voir ici les scénarios clés d’utilisation de canvas ou SVG après avoir vu les bases dans l’article précédent. Cet article fait donc parti de cette série : 1 – les bases de SVG et de Canvas 2 – les scénarios clés d’utilisation de ces 2 jeux d’APIs En complément, il existe un cours MVA de 40 min en français et en vidéo reprenant la base de cet article (y ajoutant d’ailleurs en plus un peu de WebGL) : Graphismes HTML5 grâce à SVG, Canvas 2D et WebGL (module 2).

Le but du jeu étant de vous donner quelques éléments de réponse et des orientations d’usage pour vous aider à choisir le mode potentiellement le plus adapté à vos besoins. Tableau récapitulatif des grandes différences Commençons tout d’abord par rappeler les grandes différences entre <canvas> et SVG : Pour ceux qui connaissent la programmation sur Windows Phone 7, vous savez que vous avez 2 choix possibles pour vos interfaces: XNA ou Silverlight (avant l’arrivée de Mango qui peut les mélanger). Bref, vous voyez l’idée. Voilà. Tout ce qu’il faut savoir pour réaliser des jeux HTML5 avec Canvas et SVG - David Rousset - HTML5 & Gaming Technical Evangelist. Au sommaire : - Canvas et SVG : 2 façons de dessiner à l’écran - Les librairies et les outils utiles - Les frameworks de jeux - Les tutoriaux pour démarrer - Des exemples de réalisations en ligne et des retours d’expérience Je passe mon temps ces derniers temps à expliquer en boucle comment faire des jeux en HTML5 à des étudiants, des passionnées, des professionnels voire même à des profs.

Plutôt que garder cela en petit comité, je me suis donc dit qu’il serait plus intelligent de structurer tout cela et d’en faire un billet sur mon blog. Il est donc basé sur ma propre expérience. J’essaierais de le mettre à jour au fur et à mesure de mes futures découvertes et de vos propres retours bien entendu. Au passage, la quasi-totalité des ressources ci-dessous sont en Français ! Mais au fait pourquoi faire des jeux en HTML5 ? Note : on ne parlera ici que de jeux utilisant la balise Canvas d’HTML5 ou SVG. Canvas et SVG : 2 façons de dessiner à l’écran Les librairies et les outils utiles Graphismes. Asset Store. Moteurs de jeux HTML 5. Liste des frameworks et outils de création de jeux en JavaScript et dans Canvas. Ces frameworks sont compatibles avec les mobiles et sont supportés par Android, iOS, WebOS, Windows Phone 7, et autres...

Disney a racheté en mars 2011 la société finlandaise Rocket Pack pour produire de tels jeux multi-plateformes, preuve qu'elle voit un grand avenir dans HTML 5. Moteurs professionnels Les moteurs pro sont payant mais proposent des services supérieurs notamment la gestion d'un travail collaboratif. Il existe bien sûr des services indépendants pour les autres solutions. Unity 3D Le plus connu, et vraiment portable basé sur .NET ou Mono. Unity 3D. Unreal Engine 4 Concurrent d'Unity, il ne présente pas les mêmes limitations sans avoir un coût supérieur.

Unreal Engine. MarketPlace. Lumberyard d'Amazon Gratuit, ce moteur peut se relier au service de cloud d'Amazon, AWS, pour le multi-joueurs en ligne (c'est le seul service de cloud autorisé sauf serveur personnel). Moteurs et frameworks personnels Godot. Les meilleurs cours et tutoriels 2D/3D/Jeux. CutJS : concevez des jeux HTML5 / Canvas pour le Web et les mobiles, la bibliothèque modélise les données comme un arbre DOM.

CutJS : concevez des jeux HTML5 avec Canvas pour le Web et les mobilesCette bibliothèque JavaScript modélise les données comme un arbre DOM CutJS est une bibliothèque graphiques pour développer des jeux. Elle est légère et rapide. C'est un moteur 2D / HTML5 open source et multi-plateforme qui peut être utilisé pour faire des jeux pour le Web, iOS, Android, Win8, Facebook, Chrome Web Store, etc. CutJS est une bibliothèque orientée Canvas et inspirée par DOM et jQuery avec un nouveau concept appelé pinning pour la mise en forme. L'auteur estime que Canvas est le composant graphique du développement de jeux HTML5, mais il a uniquement une API de dessin et aucun modèle de données comme DOM pour composer une application.

Vous devez dessinez votre application manuellement et gérer le rafraichissement de l'affichage. C'est pourquoi CutJS fournit un modèle arborescent semblable au DOM. Conceptuellement, une application se compose d'une arborescence de nœuds. Code javascript : Et vous ? Canvas (HTML) Un article de Wikipédia, l'encyclopédie libre. Pour les articles homonymes, voir Canvas. L'élément canvas est un composant de HTML qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts. Déjà implémenté dans certains navigateurs, il fait partie de la spécification HTML5. canvas se résume en une zone de dessin dont la hauteur et la largeur sont définies dans du code HTML. Du code JavaScript permet d'accéder à l'aire via une série complète de fonctions de dessins, similaires aux autres API 2D, bien que permettant de générer dynamiquement des graphismes. Ce code crée une zone de dessin sur une page HTML : <canvas id="exemple" width="200" height="200"> Affichage d'un texte pour les navigateurs qui ne supportent pas canvas.

Avec JavaScript, il est ensuite possible de dessiner dans la zone : <script> var exemple = document.getElementById('exemple'); var contexte = exemple.getContext('2d'); contexte.fillStyle = "rgba(0,0,255,0.5)"; contexte.fillRect(30, 30, 50, 50);</script> Html5 (@html5) | Twitter. CSS3: Animations vs. Transitions. In CSS, you have two techniques for visualizing change that are competing for your attention: Animations & Transitions.

In this article, let's examine the similarities and differences between them so that you can know when to use which. To make the most of this article, it would be helpful for you to be familiar with using both animations and transitions. If you haven't had a chance to get your hands dirty with them, the Creating a Simple CSS Animation and Looking at CSS3 Transitions tutorials will help you get started.

Similarities From a distance, both animations and transitions are very similar. They both allow you to: Specify which CSS properties to listen for changes on Set timing (easing) functions to alter the rate of going from a one property value to another Specify a duration to control how long the animation or transition will take Programmatically listen to animation and transition-specific events that you can then do with as you wish Visualize CSS property changes. Triggering. Impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz.