David Rousset

Venez découvrir le parcours Web aux Techdays 2012 avec du Windows 8 dedans !

David Rousset — Fri, 27 Jan 2012 12:35:00 GMT

Mise à jour du 27/01/2012 spéciale Windows 8 :

Beaucoup d’entre vous ne l’ont pas encore remarqué mais nous avons la chance de pouvoir vous présenter en 3 sessions le modèle de développement de Windows 8 Metro. Ces 3 sessions seront jouées aux mêmes créneaux horaires sur les 3 jours. Les voici :

Windows 8 : Construire une application au style METRO : vous découvrirez ici les 8 traits importants constituant les bases d’une bonne application Metro. Cette session sera animée par mes amis Eric Vernié et David Catuhe

Windows 8 : Architecture du nouveau Runtime de Windows : nous verrons ici les 3 manières de créer une application Metro à l’aide de C++, C# et HTML5/JavaScript. Développeurs JS : vous verrez ainsi, entre autres, comment créer une application “from scratch” en 20 min accédant à l’ensemble de la plateforme. J’aurais la chance d’animer cette session avec mon clone David Catuhe.

Windows 8 : Les outils pour construire des applications au style METRO : nous verrons ici les outils mis à disposition du développeur pour créer des applications Metro. Ici on parlera en détails de Visual Studio 11 et d’Expression Blend 5. J’aurais la chance d’animer cette session avec mon ami Eric Vernié.

Donc messieurs, mesdames les développeurs “web”, venez voir comment réutiliser vos compétences pour fabriquer des applications Windows 8. Pour cela, inscrivez-vous vite sur le site des Techdays 2012 !

Par ailleurs, comme depuis maintenant plusieurs années, j’ai la chance d’être responsable du parcours Développement Web aux Microsoft Techdays. Cette mission implique la définition des sujets que je souhaiterais voir traiter, la délicate opération de sélection des fameux “speakers” (ou orateurs en bon français) et bien entendu l’immense joie de délivrer moi-même certaines sessions.

Cette année, je voulais mettre un accent fort sur HTML5 et tout ce qui gravite autour (JavaScript, CSS3, etc.) d’une part et les nouveautés de nos frameworks/outils d’autre part. J’ai également fait appel à des orateurs issus de communautés que j’apprécie et dont la qualité est reconnue de tous. Au final, je suis particulièrement content du programme. A vous de me dire ce que vous en pensez !

Commençons par la galaxie HTML5 regroupée dans le parcours découverte sur le site des TechDays.

HTML5

Parcours Web

Introduction à JavaScript animé par Jean-Pierre Vincent et Pierre Lagarde

Si vous êtes d’origine C#, VB.NET, C++, Java ou PHP et que vous souhaitez vous mettre au JavaScript pour de bonnes raisons, voici une excellente session à suivre que j’ai programmé le 1er créneau du 1er jour. N’oubliez pas en effet que derrière HTML5, il y a toujours du JavaScript qui tourne ! Mieux vaut donc savoir comment il fonctionne et éviter de partir sur de mauvais aprioris. Quoi de mieux que des experts tel que Jean-Pierre et Pierre pour cela ? (et non vous n’êtes pas obligé d’avoir Pierre dans votre prénom pour faire du JS).

Les nouveautés HTML5 et CSS3 dans Internet Explorer 10 animé par moi-même

IE10 a désormais autant de trucs cools que les petits copains comme CSS3 Transitions/Animations ou IndexedDB et l’offline voir même des trucs en plus comme CSS3 Grid bien pratiques. Je passerais en revue toutes les nouveautés importantes qui vont nous permettre d’envisager la construction d’applications de plus en plus riches en JavaScript/HTML5.

Développement Web pour Mobiles animé par Aurélien Verla

Une session animée par l’excellent Aurélien qui sera à cheval entre le développement côté serveur et côté client qui vous montra comme tirer partie d’ASP.NET MVC côté serveur et d’HTML5 et de jQuery Mobile côté client pour créer des expériences web mobiles.

Patterns et bonnes pratiques autour de JavaScript animé par Jean-Pierre Vincent

Ici que je veux que Jean-Pierre vous montre que l’on peut bien architecturer son code JavaScript en suivant les bon patterns (module, namespace, etc.) voir même que l’on peut tester unitairement son code ! Bref, les bases indispensables à avoir pour travailler sur des projets sérieux où une équipe doit délivrer de la qualité. Cela tombe bien, Jean-Pierre a justement travaillé dans ce domaine ! C’est également le co-auteur du livre HTML5 : De la page web à l'application web. C’est donc une session à suivre derrière la session d’introduction si vous en avez besoin.

Création d'une application HTML5 gérant l'offline et le stockage client animé par David Catuhe et moi-même

Avec David (l’autre), nous souhaitons vous présenter les nouveautés intéressantes autour “d’HTML5” pour construire des applications pouvant fonctionner hors connexion (Offline). Nous allons en profiter ainsi pour les démontrer à travers une belle application que nous réutiliserons également dans une autre session. Au programme : IndexedDB, Offline APIs, Drag’n’drop, File APIs, etc. Vous verrez ainsi que lorsque l’on utilise les tous derniers standards, on peut vraiment faire de belles choses !

Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations animé par Raphael Goetter

Le Monsieur CSS3 d’Alsacréations auteur du livre CSS avancées vers HTML5 et CSS3 nous fait le plaisir de venir animer une session autour de 3 avancées majeures dans ce domaine. Je vous conseille donc vivement cette session animée par l’une des références françaises sur CSS !

Développement de jeux 2D avec HTML5 animé par Pierre-Loic Doulcet

Rencontré lors du ParisJS hébergé par Microsoft France, Pierre-Loic partage le même genre de passion que moi. Il s’occupera de vous faire rêver avec le développement de jeux 2D mobile et web grâce à HTML5.

Création d'une application HTML5 utilisant Canvas, SVG et les animations CSS3 animé par David Catuhe et moi-même

Ici nous allons reprendre l’application gérant l’offline et mettre l’accent sur la partie “graphique” de l’application. Nous reverrons rapidement les bases et les différences entre canvas et SVG puis nous verrons comment nous les avons utilisés dans notre application d’exemple. Nous verrons également l’utilisation des nouveautés de CSS3 pour animer nos éléments. C’est donc une session complémentaire de la précédente.

Autres parcours

Pour finir sur HTML5, voici 2 autres sessions que je vous recommande issues d’autres parcours :

Accessibilité du Web 2.0 : HTML5 et WAI-ARIA animé par Aurélien Levy et Thibault Lanssade

L’accessibilité est un sujet éminemment important et HTML5 apportera quelques éléments de réponses intéressants. Venez découvrir ce sujet animé par 2 experts en la matière.

HTML5 sur mobile: le bon, la brute et un gros paquet de truands animé par Pierre Cauchois

Réputé pour avoir les titres de sessions les plus cool des TechDays, Pierre a envie ici de faire un état des lieux sur le développement cross-plateformes en HTML5 et de faire sauter certaines croyances erronées sur la magie trop souvent associée à HTML5.

Du côté du serveur Web

Développer le potentiel de IIS7.5 pour des scénarios de haute disponibilité animé par Loïc Calvy et Paul Cociuba

Revenons aux bases! Venez découvrir comment tirer au mieux partie d’IIS dans plusieurs scénarios de haute disponibilité. Loïc dispose d’une expérience et d’un recul très intéressant sur de la mise en production sur ce sujet et Paul nous vient de nos équipes de support européen en tant qu’ingénieur d’escalade sur IIS. Bref, à eux 2, vous devriez forcément apprendre plein de choses intéressantes!

Quoi de neuf dans ASP.NET 4.5 animé par Thomas Jaskula

Thomas aura pour mission ici de vous faire découvrir l’ensemble des nouveautés de la plateforme ASP.NET 4.5, du cœur en passant par WebForms et MVC. Bref, une session assurément à ne pas louper pour suivre les dernières évolutions de la brique ASP.NET du framework .NET.

Architecture, bonnes pratiques et recettes pour la réussite de vos projets avec ASP.NET MVC animé par Rui Carvalho et Julien Corioland

Rui et Julien ont tous les 2 une véritable expertise sur la mise en pratique d’ASP.NET MVC. Cette session vous permettra de profiter de leur expérience pour bénéficier d’un cahier de recettes à mettre en œuvre dans vos futurs projets utilisant notre framework.

WebMatrix 2 : le couteau suisse gratuit pour vos développements Web animé par Gilles Pommier et Pierre Couzy

Une heure sympa pour découvrir WebMatrix 2 et Razor en compagnie de Gilles et de mon collègue Pierre qui vous monteront comment réaliser une application de bout en bout. Si vous ne connaissez pas WebMatrix, c’est un outil gratuit permettant soit d'éditer des solutions toutes faites comme Drupal, Wordpress, DotNetNuke très facilement, soit de développer avec le langage Razor. Ca vaut vraiment le coup d’y jeter un œil si vous ne connaissez pas déjà.

Introduction à DotNetNuke animé par Cyril Plassard

Cela fait justement parti des solutions déployables par WebMatrix. Venez découvrir ce CMS basé sur les technologies Microsoft et présenté par un membre de sa communauté.

PHP dans le monde Microsoft animé par Christophe Villeneuve et Pierre Couzy

Microsoft s’est véritablement intéressé au monde PHP ces dernières années et ce n’est pas Pierre Couzy qui me dira le contraire ! Venez justement voir un membre de l’AFUP et un employé de Microsoft vous partager comment les 2 univers ont travaillé ensemble pour avancer dans le bon sens avec différentes illustrations comme Drupal, le driver PDO pour SQL Server, le support de SQL Azure, etc.

En résumé…

J’espère que ce petit programme sera à la hauteur de votre soif technique et de ce que vous cherchez en ce moment comme type de sessions, que ce soit pour vos besoins de veilles technologies ou de choix d’architectures. Normalement, que vous soyez développeurs web “front” ou “back”, il devrait y avoir de bonnes choses à apprendre.

Allez, bonne année 2012, bon Techdays 2012 et à bientôt au palais des congrès !

David

AMDEV JavaScript: vidéos, slides et exemples de code des 4 sessions

David Rousset — Fri, 06 Jan 2012 04:00:00 GMT

Vous étiez un peu plus de 200 à être venus à notre centre de conférence retirer votre T-Shirt et surtout pour assister à l’après-midi du développement consacrée à JavaScript et HTML5. Merci à vous !

Je tiens tout d’abord à remercier chaleureusement les 2 orateurs non-Microsoft pour la qualité de leur présentation : Jean-Pierre Vincent pour les fondamentaux de JavaScript et Aurélien Verla de Wygwam pour sa superbe session sur jQuery.

JavaScript

Vous pouvez retrouver les slides de Jean-Pierre ici : les fondamentaux de JavaScript et la programmation orienté objet . Vous pourrez donc revoir tout cela calmement à la maison pour essayer de digérer toutes les bonnes pratiques que Jean-Pierre nous a partagées. En complément, si le sujet vous intéresse, je ne serais que trop vous conseiller ces 3 livres si vous ne les avez pas déjà lus :

- JavaScript The Good Parts
- JavaScript Patterns

Sans compter le livre de Jean-Pierre bien entendu : HTML5 - De la page web à l'application web ! Avec tout ça, à vous la maitrise des closures, prototypage, namespace, POO à la sauce JavaScript, j’en passe et des meilleurs. J’espère que les sceptiques seront alors convaincus que l’on peut organiser son code, faire du développement sérieux et maintenable (et même testable!) avec JavaScript en évitant d’avoir 480 variables globales par exemple.

Voici la vidéo de session :

Download Video: MP4, WebM, HTML5 Video Player by VideoJS

Outils de debug

Download Video: MP4, WebM, HTML5 Video Player by VideoJS

jQuery

Download Video: MP4, WebM, HTML5 Video Player by VideoJS

Côté jQuery, je publierais les slides d’Aurélien dès que je les aurais en mettant à jour ce post. Mais comme il a tout fait avec son plug-in jQuery, je vous zipperais sa solution plutôt.

Canvas & SVG

Les slides de notre session avec David Catuhe sur Canvas et SVG sont ici (PowerPoint en JavaScript ! ) :

Je les ai mis aussi sur SlideShare : http://www.slideshare.net/davrous/amdev-graphismes-avec-html5-grce-canvas-et-svg

La vidéo :

Download Video: MP4, WebM, HTML5 Video Player by VideoJS

Vous retrouverez quasiment tous les exemples de code des démos démontrées à travers ces 4 articles ou séries d’articles :

- Introduction aux APIs graphiques d’HTML5: SVG & Canvas (2 articles)
- HTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS (3 articles)
- Bolas Lenses : un développement HTML5 Canvas & JavaScript
- Développer un jeu de casse-briques avec Canvas et SVG

Côté accessibilité, si le sujet vous intéresse, j’avais été un peu plus loin que ce que je vous ai montré cette après-midi dans cet article : Techdays 2011 – slides et ressources de la session Accessibilité d’HTML5 et Silverlight

Je finirais par remercier mon acolyte Monsieur Catuhe avec lequel je me suis bien marré. Nous avons essayé de partager notre bonne humeur naturelle et notre humour pourrie de g33k/développeur.

A bientôt pour de nouvelles aventures !

David²

Tutorial: how to create HTML5 applications on Windows Phone thanks to PhoneGap

David Rousset — Fri, 23 Dec 2011 17:00:17 GMT

We will first see in this article what the added values of PhoneGap for HTML5 applications are. We’ll then discover how to create our very first project where we will retrieve the accelerometer’s values from our JavaScript code. At last, we will review a complete HTML5 gaming sample almost ported as-is to PhoneGap to use the accelerometer available on the Windows Phones.

Introduction
PhoneGap: a framework filling the gap
Let’s create our first PhoneGap project
Getting the accelerometer’s values from JavaScript
Review of a complete sample with the HTML5 Platformer game
1. Forcing the landscape orientation
2. Handling various resolutions
3. Loading the levels with calls to the file system instead of using XHR
4. Modification of the gameplay to use the accelerometer
5. Screenshots of the result and FPS on some phones
6. Complete Visual Studio Solution to download
Conclusion

Introduction

The Mango update for Windows Phone came with the support of HTML5 thanks to the embedded IE9 browser. As the desktop version, the mobile version of IE9 delivers hardware acceleration through the GPU of your Windows Phone. Thus, combined with JavaScript, IE9 can now serve as a base of interesting user’s experiences usually reserved to “native code”.

The Pros of using HTML5 as a development platform is a relative promise to easily re-use parts of the code on others compatibles platforms like Android or iOS. HTML5 has then driven a lot of interests from the mobiles developers’ ecosystem during the last months.

However, even if the HTML5/CSS3/SVG & JavaScript specifications have greatly evolved during the last months, they still lack some major features to build mobile applications. Indeed, a phone or a tablet exposes specific capabilities like: GPS, accelerometer, camera, sending SMS, accessing contacts, etc.

To have access to these capabilities from the JavaScript code, the W3C has been working now for a while on what we call “Device APIs” or DAP. Unfortunately, we can consider that no implementation currently exists of those specifications as this document seems to confirm: Standards for Web Applications on Mobile: November 2011 current state and roadmap . Mozilla has started an interesting work by more or less forking those specifications via what they call Web APIs to support their Boot To Gecko project. This is then a good news as a form of implementation seems to start with an on-going discussions with the W3C. However, even if things start to move slowly, we will probably have to wait for several years before having a stable official W3C specification implemented widely on all platforms.

So the question is: what should we do in the meantime? Can HTML5 really address those scenarios?

PhoneGap: a framework filling the gap

While waiting on real standardized specifications, we don’t have the choice: we need to create some bridges between JavaScript and the native code of the targeted platform to have access to its capabilities. The idea is then the following one: taking the native languages of each platform (C#, Objective-C and Java) and creating a framework with these languages that will expose interfaces to the JavaScript developer.

This is exactly what PhoneGap is doing. Let’s take the Windows Phone case which is the main topic of this article. A Windows Phone’s PhoneGap project is simply a Silverlight application hosting the WebBrowser control (and thus IE9) as well as a Silverlight Assembly written in C# which does the job to access to the accelerometer, GPS, contacts, camera and so on. In this way, as a JavaScript developer, you will use a DLL named WP7GapClassLib.dll (the PhoneGap core runtime) without even knowing it via the usage of the code embedded in the phonegap-1.3.0.js file. This DLL contains some C# code which does calls to the Silverlight runtime available on the phone. As the runtime has access to all the capabilities of the phone, the JavaScript will do also. The JavaScript library will then act as a gateway between both worlds. Moreover, the good point of using this library is that your code will most of the time works as-is on the PhoneGap versions of Android or iOS. PhoneGap offers then an interesting form of portability.

Please note by the way that the PhoneGap support for Windows Phone is now totally complete since the recent 1.3.0 version:

At last, PhoneGap offers also another interesting service. It embeds your .js, .css, .html, .png resources inside its projects to package it as a classical application. In summary, you can use PhoneGap to package your HTML5 application for the various applications' stores. This is for instance the case of the SujiQ Windows Phone application built using this approach.

Let’s create our first PhoneGap project

Prerequisites

Here are the very first steps you need to follow:

Download the Windows Phone SDK: Windows Phone SDK
Download the last version of Phone (1.3.0 today) on their site: http://phonegap.com/
Unzip the downloaded file
Copy the PhoneGapStarter.zip and PhoneGapCustom.zip files into \Documents\Visual Studio 2010\Templates\ProjectTemplates

File->New project

Once the previous steps are done, you will be able to create your first PhoneGap project. Start Visual Studio 2010, select the “Visual C#” templates and filter them via the “Gap” keyword. You should then see a new type of project named PhoneGapStarter:

Name your project “MyFirstPhoneGapProject”. Once done, you will find the files I was talking about before in the Solution Explorer:

You just now have to insert your HTML5 application into the “www” directory.

Here are several tips I’d like to share with you about this default project template:

- never ever touch the phonegap-1.3.0.js file if you’d like to keep a portable code on other versions of PhoneGap
- all files you will add inside the “www” directory must be set as “Content” in the properties window
- instead of the WP7GapClassLib.dll binary file, you can add a reference to the WP7GapClassLib.csproj C# project available in the “Windows Phone\framework” directory of the downloaded PhoneGap archive. It will help you debugging or discovering the native code of the PhoneGap library if needed.

Ok, let’s now start by doing something normally impossible by default with IE9 Mango: accessing to the accelerometer’s values from JavaScript.

Getting the accelerometer’s values from JavaScript

We’re going to see here how to get the values sent back by the accelerometer (of the emulator or the real device) in a very simple way.

Open the “index.html” page and change its default body by this one:

<body>
    <h1>Accelerometer sample</h1>
    <div id="valueX"></div>
    <div id="valueY"></div>
    <div id="valueZ"></div>
</body>

We will simply use 3 <div> tags to display the current X, Y & Z values of the accelerometer.

Next step is to change the last default <script> block by this one:

<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, false);

    // variable to output the current x, y & z values of the accelerometer
    var valueX;
    var valueY;
    var valueZ;

    // when PhoneGap tells us everything is ready, start watching the accelerometer
    function onDeviceReady() {
        valueX = document.getElementById("valueX");
        valueY = document.getElementById("valueY");
        valueZ = document.getElementById("valueZ");
        startWatch();
    }

    // start monitoring the state of the accelerometer
    function startWatch() {
        var options = { frequency: 500 };
        navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
    }

    // if the z-axis has moved outside of our sensitivity threshold, move the aarvark's head in the appropriate direction
    function onSuccess(acceleration) {
        valueX.innerHTML = "X: " + acceleration.x;
        valueY.innerHTML = "Y: " + acceleration.y;
        valueZ.innerHTML = "Z: " + acceleration.z;
    }

    function onError() {
        alert('onError!');
    }
</script>

Well the code is relatively self-explicit I think. The very first thing to note is that you need to wait for the “deviceready” event raised by PhoneGap to be sure to be in a stable state. You then need to subscribe to this event. In our case, we will be call-backed into the OnDeviceReady() function. This function is getting the references to the 3 <div> tags and then asks to be notified by any changes done inside the accelerometer every 500ms with the startWatch() function. The notifications will be sent to the onSuccess() function that will have access to the acceleration object containing the x, y & z values. You’ll find the complete documentation on the PhoneGap site: PhoneGap Documentation - API Reference - Accelerometer

This is all you need to do on the JavaScript side. However, to make it works, you need to specify in the project’s properties that you want to request access to the device’s sensor. The capabilities needed for the proper execution of our application are listed inside the WMAppManifest.xml file available in the “Properties” directory. By default, since 1.3.0, PhoneGap is listing the strict minimum capabilities:

<Capabilities>
  <Capability Name="ID_CAP_IDENTITY_DEVICE" />
  <Capability Name="ID_CAP_IDENTITY_USER" />
  <Capability Name="ID_CAP_LOCATION" />
  <Capability Name="ID_CAP_NETWORKING" />
  <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
</Capabilities>

It’s then up to you to add the capabilities you need for your PhoneGap application. In our case, we need to add this line:

<Capability Name="ID_CAP_SENSORS" />

To be allowed to access to the accelerometer. You’ll find the complete list of all available capabilities here: Application Manifest File for Windows Phone

Ok, we’re logically ready to test that inside the emulator as a first phase. Press on the magical “F5” key and let’s have a look to the result:

By moving the virtual phone in the emulator on the right, you should see the values of the accelerometer updated. Congratulations!

You can download the complete source code of this first solution here: http://david.blob.core.windows.net/html5/MyFirstPhoneGapProject.zip

Issues with phones using French locale

If you’re testing the very same code on your phone configured to use a French local (as mine for instance! ), you will have the feeling that the application doesn’t work at all…which is indeed the case. I’ve then spent some time debugging the code and I’ve discovered that the following exception was raised inside phonegap-1.3.0.js:

"Error in success callback: Accelerometer = Syntax error"

After dumping the values, I’ve seen that the error was due to a tentative of de-serialization of the following bad formatted JSON string:

"{\"x\":0,00472,\"y\":-0,19879,\"z\":-0,98115}" whereas the proper EN-US is the following one: "{\"x\":0.00472,\"y\":-0.19879,\"z\":-0.98115}"

Yes, we’re using a coma in France as a numeric separator.

2 solutions to solve this problem:

1 – The lazy one: switch your phone into EN-US (I know, this is not a solution!)
2 – Fix the problem that comes from the C# code. For that, replace the following code from the Accelometer.cs file of the WP7GalClassLib library:

/// <summary>
/// Formats current coordinates into JSON format
/// </summary>
/// <returns>Coordinates in JSON format</returns>
private string GetCurrentAccelerationFormatted()
{
    string resultCoordinates = String.Format("\"x\":{0},\"y\":{1},\"z\":{2}",
                    accelerometer.CurrentValue.Acceleration.X.ToString("0.00000"),
                    accelerometer.CurrentValue.Acceleration.Y.ToString("0.00000"),
                    accelerometer.CurrentValue.Acceleration.Z.ToString("0.00000"));
    resultCoordinates = "{" + resultCoordinates + "}";
    return resultCoordinates;
}

By this one:

private string GetCurrentAccelerationFormatted()
{
    string resultCoordinates = String.Format("\"x\":{0},\"y\":{1},\"z\":{2}",
             accelerometer.CurrentValue.Acceleration.X.ToString("0.00000", CultureInfo.InvariantCulture),
             accelerometer.CurrentValue.Acceleration.Y.ToString("0.00000", CultureInfo.InvariantCulture),
             accelerometer.CurrentValue.Acceleration.Z.ToString("0.00000", CultureInfo.InvariantCulture));
    resultCoordinates = "{" + resultCoordinates + "}";
    return resultCoordinates;
}

And the sample will now work with all locales. I’ve filled a bug on this topic here: https://issues.apache.org/jira/browse/CB-141 suggesting the same solution that will normally be shipped with the next version (2.0.0).

By the way, you’re maybe wondering how I’ve managed to debug the JavaScript part of my PhoneGap project? Well, you can simply use the wonderful jsConsole project. If you want to know more about that, please read one of my colleague’s article: jsConsole Remote Debugging in IE9 on Windows Phone Mango

Review of a complete sample with the HTML5 Platformer game

Let’s now review a more complex sample. My idea was to start from the game I’ve written before. It’s exposed in this article: HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS . I wanted to see what I should do to make it works on the phone.

First step is to simply copy/paste the different .js, .png, .css files into the “www” directory and to mark them as “Content”. Here are the others steps to follow.

Forcing the landscape orientation

The game has to be played in landscape mode. I’ve then forced this orientation. I’ve also remove the information bar on the side (the System Tray). For that, you need to open the MainPage.xaml file and change these properties:

SupportedOrientations="Landscape" Orientation="Landscape" shell:SystemTray.IsVisible="False"

Handling various resolutions

As my main goal was to build a game that could run on the highest number of devices, I need to handle a lot of different resolutions.

For that, I’ve slightly modified the initial code of the Platformer you can download in the other article. The game is now capable on running at any resolution by applying a rescale ratio on the images and sprites to draw. Everything is being redrawn based on a specific ratio that came from the Windows Phone (800x480) which is the 100% ratio. You can test this version in your desktop browser here: HTML5 Platformer ReScale and try to dynamically resize the browser window. Moreover, if your screen resolution has a 16/9 aspect ratio, press the F11 key to play in fullscreen! The experience in this mode is really cool as you can see in this screenshot:

We’re letting the browser taking care of the anti-aliasing during this scaling operation. Based on the browser you’ll use, you will notice also that the performance could vary a lot related to the size of the window you’ll have. On my machine, IE9/IE10 seems relatively indifferent to the fullscreen mode or small resolutions by maintaining a stable 60 fps framerate.

Loading the levels with calls to the file system instead of using XHR

In the initial code, the .TXT files linked to the each level were stored on the web server and downloaded via XmlHttpRequest calls. As we’re now running everything client-side in offline mode, XHR local calls are not very appropriated. I’ve then replaced the initial code of the PlatformerGame.prototype.LoadNextLevel function by this one:

PlatformerGame.prototype.LoadNextLevel = function () {
    this.levelIndex = (this.levelIndex + 1) % numberOfLevels;

    // Searching where we are currently hosted
    var nextFileName = "app/www/assets/levels/" + this.levelIndex + ".txt";
    try {
        var instance = this;
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

        function gotFS(fileSystem) {
            fileSystem.root.getFile(nextFileName, null, gotFileEntry, fail);
        }

        function gotFileEntry(fileEntry) {
            fileEntry.file(gotFile, fail);
        }

        function gotFile(file) {
            readAsText(file);
        }

        function readAsText(file) {
            var reader = new FileReader();
            reader.onloadend = function (evt) {
                instance.LoadThisTextLevel(evt.target.result.replace(/[\n\r\t]/g, ''));
            };
            reader.readAsText(file);
        }

        function fail(evt) {
            console.log(evt.target.error.code);
        }
    }
    catch (e) {
        console.log("Error loading level: " + e.message);
        // Probably an access denied if you try to run from the file:// context
        // Loading the hard coded error level to have at least something to play with
        this.LoadThisTextLevel(hardcodedErrorTextLevel);
    }
};

I’ve just re-used the code available in the PhoneGap documentation: FileReader . As you can see, you have a full access to the Windows Phone file system from JavaScript with PhoneGap.

Cool tip: to help you debugging what’s really stored in the Isolated Storage of the phone or not, you should have a look to this awesome tool: IsoStoreSpy written by Samuel Blanchard.

Modification of the gameplay to use the accelerometer

Well, last part is just to mix all parts of this article to obtain the final result. For that, I’ve added the following code into the constructor of the Player object in the Player.js file:

var options = { frequency: 500 };
var that = this;

navigator.accelerometer.watchAcceleration(
    function (accelerometer) { that.moveDirectionAccel(accelerometer); },
    function () { console.log("Error with accelerometer"); }, 
    options);

Here is the function that will be call-backed during the accelerometer variations:

Player.prototype.moveDirectionAccel = function(acceleration) {
    var accelValue = -acceleration.y;

    // Move the player with accelerometer
    if (Math.abs(accelValue) > 0.15) {
        // set our movement speed
        this.direction = Math.clamp(accelValue * this.AccelerometerScale, -1, 1);
    }
    else {
        this.direction = 0;
    }
};

I’ve also added an handler on the “onmousedown” event on the canvas to jump when the user tap on the screen.

Screenshots of the result and FPS on some phones

First, let’s review the result within the Windows Phone emulator:

We have a framerate varying from 54 to 60 fps on my machine. On a real device, the framerate differs logically between models. Let’s take the first game level. On the LG E900, the framerate is around 22 fps. On the HTC Radar, it’s around 31 fps. On the Nokia Lumia 800, it’s around 42 fps.

The gameplay could then be not very convincing in most cases. Indeed, I’m using a fullscreen canvas to draw the whole game. This is not a very good idea for the mobile limited power CPU, even if the Nokia seems powerful enough to handle this approach. A better methodology could be to cut the screen stage into various little canvas that will then be moved by modifying the CSS properties on them. This is what has been done for the HTML5 version of Angry Birds for instance. Some JS gaming frameworks start to think about handling this complexity for you. The idea would then be to code the game once with high level APIs and the framework could switch between a full frame canvas or various little canvas moved via CSS based on the performance.

Well, you’ll get it: the HTML5 gaming experience on mobile is currently just at its beginning. But its future looks very promising!

Complete Visual Studio Solution to download

You’ll find the complete source code of the HTML5 Platformer for PhoneGap here: HTML5GapPlatformer.zip

Other useful resources

Full Support for PhoneGap on Windows Phone is Now Complete!
PhoneGap on Windows Phone Tips from Glen Gardon who has written several very interesting tutorials to follow
Lot of good tutorials in the Wiki section of PhoneGap: http://wiki.phonegap.com/w/page/35501397/Tutorials

Conclusion

PhoneGap offers interesting perspectives to help you writing applications on the phone. It lets you using your existing skills in JavaScript, HTML and CSS. PhoneGap won’t necessary cover all the scenarios currently available with the native development stack (Silverlight or XNA). But this could be something to have a look to if you’d like to capitalize on the HTML skills of one of your team. You will have to pay attention to properly identify the kind of project to work on.

You can also think about mixing both environments to create hybrid experiences: the main branch would be written using “HTML5” and some specific parts into native code. Using this idea, some plug-ins have been created to push a bit further the integration into the Metro UI: PhoneGap Plug-ins for Windows Phone . You’ll find for instance one of them allowing a JavaScript code to update the Tiles.

At last, PhoneGap and HTML5 could allow a relative portability to other platforms… with some limitations. But this is a vast subject with passionate debates that would need a complete dedicated article.

David

Tutorial: créez des applications avec HTML5 sur Windows Phone grâce à PhoneGap

David Rousset — Fri, 23 Dec 2011 13:45:07 GMT

Tout d’abord, nous allons naturellement commencer par voir l’intérêt d’utiliser PhoneGap pour HTML5. Ensuite, nous verrons comment créer son tout 1er projet et récupérer les valeurs de l’accéléromètre en JavaScript. Pour finir, nous allons voir un exemple complet où j’ai repris le code de mon jeu HTML5 Platformer pour le faire fonctionner presque tel quel avec l’accéléromètre d’un Windows Phone.

Introduction
PhoneGap : un framework qui comble les manques
Création de son 1er projet PhoneGap sur Windows Phone
Récupération des valeurs de l’accéléromètre
Exemple complet avec le jeu HTML5 Platformer
1. Forcer le mode paysage
2. Adapter le code pour gérer plusieurs résolutions
3. Chargement des niveaux via l’appel au système de fichiers plutôt que XHR
4. Modification du gameplay pour gérer l’accéléromètre
5. Le résultat en images avec quelques FPS sur les téléphones
6. Solution complète à télécharger
Conclusion

Introduction

La mise à jour Mango sur Windows Phone a apporté le support d’HTML5 via l’arrivée du navigateur IE9. Tout comme sur la version bureau, la version mobile d’IE9 met en place l’accélération matérielle via l’utilisation du GPU embarqué sur votre Windows Phone. Ainsi, couplé à JavaScript, IE9 permet d’envisager la réalisation d’expériences utilisateurs intéressantes autre fois uniquement réservées aux applications dites “natives”.

L’avantage d’utiliser HTML5 comme plateforme de développement est qu’elle permet une facilité “relative” dans la réutilisation d’une partie du code sur d’autres plateformes comme Android ou iOS. HTML5 suscite donc énormément d’intérêt de l’écosystème ces derniers temps pour les plateformes mobiles. Parfois malheureusement à tord mais j’y reviendrais surement dans un autre billet.

Cependant, bien que les spécifications HTML5/CSS3/SVG et JavaScript aient nettement évoluées ces derniers mois, il existe des manques majeurs pour la réalisation d’applications mobiles. En effet, un téléphone ou une tablette dispose de capacités spécifiques à leur mobilité : GPS, accéléromètre, caméra, SMS, accès aux contacts, etc.

Pour accéder à ces spécificités matérielles depuis son code JavaScript, le W3C travaille depuis un moment sur ce que nous appelons les “Device APIs” ou DAP. Malheureusement, on peut considérer qu’il n’existe à l’heure actuelle aucune implémentation de ces spécifications sur le marché comme le confirme ce document : Standards for Web Applications on Mobile: November 2011 current state and roadmap . Mozilla a commencé un travail intéressant sur une forme de fork de ces spécifications nommées Web APIs pour soutenir son projet Boot To Gecko. C’est donc une bonne nouvelle dans la mesure où une forme d’implémentation commence à voir le jour et un dialogue avec le W3C semble s’installer. Les choses commencent doucement à bouger mais il faudra probablement plusieurs années avant de voir une spécification du W3C implémentée et répandue sur toutes les plateformes.

Alors comment faire en attendant ? HTML5 peut-il vraiment adresser ce scénario ?

PhoneGap : un framework qui comble les manques

En attendant l’arrivée de réelles spécifications standardisées, nous n’avons donc pas le choix : il faut créer un pont entre le code JavaScript et le code natif de la plateforme visée pour accéder au matériel. L’idée est donc la suivante : on prend le langage natif de chacune des plateformes (Silverlight, Objective-C et Java) et on en créé un framework qui expose des interfaces pour le développeur JavaScript.

C’est exactement ce que fait PhoneGap. Prenons le cas de Windows Phone qui nous intéresse dans cet article. Un projet PhoneGap expose tout simplement une application Silverlight hébergeant le contrôle WebBrowser (et donc IE9) ainsi qu’une DLL écrite en C# s’occupant d’accéder à l’accéléromètre, au GPS, aux contacts, à la caméra, etc. Ainsi, comme on va le voir un peu plus tard, en tant que développeur JavaScript, vous allez donc utiliser indirectement une DLL nommée WP7GapClassLib.dll (le coeur de PhoneGap) à travers le code exposé dans le fichier phonegap-1.3.0.js. La DLL contient le code C# qui fait appel au runtime Silverlight présent sur le téléphone. Ce dernier peut accéder à l’accéléromètre et au reste du téléphone. La librairie JavaScript contenu dans le .js va faire office d’interface entre les 2 mondes. L’avantage de faire appel à cette librairie est que le code JavaScript que vous allez écrire pour accéder à la caméra du Windows Phone par exemple marchera tel quel sur PhoneGap pour Android ou iOS. PhoneGap offre donc une certaine forme de portabilité.

Sachez d’ailleurs qu’à ce sujet, le support de PhoneGap pour Windows Phone est désormais aussi complet que sur Android ou iOS depuis la récente version 1.3 :

Pour finir, PhoneGap vous fournit également un autre service intéressant. Il vous permet d’inclure vos fichiers JS, CSS, HTML, PNG & co au sein de son projet pour packager l’ensemble comme une véritable application native. En résumé, vous pouvez donc tout à fait utiliser PhoneGap pour packager une application HTML5 que vous déploierez sur le Store. C’est le cas par exemple de l’application SujiQ qui a été conçue ainsi.

Création de son 1er projet PhoneGap sur Windows Phone

Pré-requis

Voici les étapes à suivre avant toute chose :

Téléchargez le SDK Windows Phone si ce n’est déjà fait ici : Télécharger le SDK Windows Phone
Téléchargez la dernière version (1.3 aujourd’hui) de PhoneGap sur leur site : http://phonegap.com/
Décompressez l’archive téléchargée depuis le site de PhoneGap
Copiez les fichiers PhoneGapStarter.zip et PhoneGapCustom.zip dans \Documents\Visual Studio 2010\Templates\ProjectTemplates

Nouveau projet

Une fois toutes ces étapes suivies correctement, nous allons pouvoir créer notre 1er projet PhoneGap. Pour cela, démarrez Visual Studio 2010, rendez-vous dans la partie “Visual C#”, filtrez sur le mot clé “Gap” et vous devriez voir un nouveau type de projet nommé PhoneGapStarter :

Nommez le projet “MonPremierProjetPhoneGap”. Une fois créé, vous allez retrouver les fichiers dont je vous parlais avant dans l’explorateur de solution :

Vous n’avez donc plus qu’à insérer votre application HTML5 dans le répertoire “www”.

Au passage, j’ai plusieurs conseils à vous fournir au sujet de ce projet par défaut :

- ne touchez jamais au fichier phonegap-1.3.0.js si vous souhaitez garder un code portable sur les autres versions de Phone Gap
- tous les fichiers que vous rajouterez dans le répertoire “www” devront être marqué en tant que “Content” dans leurs propriétés
- à la place du binaire WP7GapClassLib.dll,vous pouvez référencer le projet C# WP7GapClassLib.csproj contenu dans le répertoire “Windows Phone\framework” de l’archive PhoneGap téléchargée. Cela vous permettra de débugger ou parcourir le code de la librairie PhoneGap si besoin.

Allez, commençons par effectuer une action normalement impossible par défaut sous IE9 Mango : récupérer les valeurs de l’accéléromètre en JavaScript.

Récupération des valeurs de l’accéléromètre

Nous allons voir comment, de manière très simple, récupérer les valeurs renvoyées par l’accéléromètre (de l’émulateur ou du vrai périphérique).

Rendez-vous dans “index.html” et changer le contenu du body par défaut par celui-ci :

<body>
    <h1>Démo accéléromètre</h1>
    <div id="valueX"></div>
    <div id="valueY"></div>
    <div id="valueZ"></div>
</body>

On va simplement utiliser 3 <div> qui afficheront les valeurs courantes X, Y et Z de l’accéléromètre.

Ensuite, changer le dernier bloc de <script> par celui-ci :

<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, false);

    // variable to output the current x, y & z values of the accelerometer
    var valueX;
    var valueY;
    var valueZ;

    // when PhoneGap tells us everything is ready, start watching the accelerometer
    function onDeviceReady() {
        valueX = document.getElementById("valueX");
        valueY = document.getElementById("valueY");
        valueZ = document.getElementById("valueZ");
        startWatch();
    }

    // start monitoring the state of the accelerometer
    function startWatch() {
        var options = { frequency: 500 };
        navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
    }

    // if the z-axis has moved outside of our sensitivity threshold, move the aarvark's head in the appropriate direction
    function onSuccess(acceleration) {
        valueX.innerHTML = "X: " + acceleration.x;
        valueY.innerHTML = "Y: " + acceleration.y;
        valueZ.innerHTML = "Z: " + acceleration.z;
    }

    function onError() {
        alert('onError!');
    }
</script>

Le code est assez simple à lire je pense. Avant toute chose, vous devez attendre que l’évènement “deviceready” soit levé par PhoneGap pour être de vous retrouver dans un état stable. On commence donc par s’abonner à cet évènement et nous serons rappelé sur la fonction OnDeviceReady().Dans celle-ci, on récupère les 3 instances de <div> qui nous intéresse et on demande ensuite à être notifié des changements de l’accéléromètre toutes les 500ms dans la fonction startWatch(). Si de nouvelles valeurs sont générées, la fonction onSuccess() sera appelée avec les valeurs x, y et z fournies dans l’object acceleration. Vous trouverez toute la documentation sur le site de PhoneGap : PhoneGap Documentation - API Reference - Accelerometer

C’est tout ce qu’il faut faire du côté code JavaScript. Mais pour que cela fonctionne, il faut indiquer dans les propriétés du projet que l’on a besoin d’accéder aux capteurs (sensors) de l’appareil. La liste des capacités nécessaires au bon fonctionnement de notre application se trouve dans le fichier WMAppManifest.xml présent dans le répertoire “Properties”. Par défaut, depuis la version 1.3 de PhoneGap, la liste est limitée au strict nécessaire :

<Capabilities>
  <Capability Name="ID_CAP_IDENTITY_DEVICE" />
  <Capability Name="ID_CAP_IDENTITY_USER" />
  <Capability Name="ID_CAP_LOCATION" />
  <Capability Name="ID_CAP_NETWORKING" />
  <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
</Capabilities>

A vous ensuite d’ajouter ce dont vous avez besoin dans votre application PhoneGap. Dans notre cas, ajoutez cette ligne :

<Capability Name="ID_CAP_SENSORS" />

Pour pouvoir autoriser l’accès à l’accéléromètre. Vous retrouverez la liste de toutes ces autorisations ici : Application Manifest File for Windows Phone

Bon, on est logiquement prêt à tester tout cela dans l’émulateur dans un 1er temps. Appuyez sur la touche magique “F5” et observons le résultat :

En faisant tourner le téléphone virtuel dans l’émulateur, vous devriez bien voir les valeurs de l’accéléromètre bouger. Félicitations !

Vous pouvez récupérer le code complet de cette solution ici : http://david.blob.core.windows.net/html5/MonPremierProjetPhoneGap.zip

Petit problème sur les téléphones configurés en français

Si vous testez le même code sur votre téléphone et que vous avez une locale en français, vous aurez l’impression que l’application ne fonctionne pas. En débuggant un peu le code, je me suis aperçu que l’exception suivante était levée dans phonegap-1.3.0.js :

"Error in success callback: Accelerometer = Syntax error"

Et en dumpant les valeurs, je me suis aperçu que l’erreur venait d’une tentative de dé-sérialisation JSON de la chaine suivante :

"{\"x\":0,00472,\"y\":-0,19879,\"z\":-0,98115}" au lieu d’avoir celle-ci en EN-US : "{\"x\":0.00472,\"y\":-0.19879,\"z\":-0.98115}"

Et oui, notre fameuse virgule de séparation a toujours l’air d’embêter nos chers amis américains…

2 solutions pour résoudre ce problème :

1 – Passer votre téléphone en EN-US (oui, je sais, c’est tout pourri comme solution)
2 – Corriger la source du problème dans le code C#. Pour cela, remplacez le code suivant présent dans Accelometer.cs de la librairie WP7GalClassLib :

/// <summary>
/// Formats current coordinates into JSON format
/// </summary>
/// <returns>Coordinates in JSON format</returns>
private string GetCurrentAccelerationFormatted()
{
    string resultCoordinates = String.Format("\"x\":{0},\"y\":{1},\"z\":{2}",
                    accelerometer.CurrentValue.Acceleration.X.ToString("0.00000"),
                    accelerometer.CurrentValue.Acceleration.Y.ToString("0.00000"),
                    accelerometer.CurrentValue.Acceleration.Z.ToString("0.00000"));
    resultCoordinates = "{" + resultCoordinates + "}";
    return resultCoordinates;
}

Par :

private string GetCurrentAccelerationFormatted()
{
    string resultCoordinates = String.Format("\"x\":{0},\"y\":{1},\"z\":{2}",
             accelerometer.CurrentValue.Acceleration.X.ToString("0.00000", CultureInfo.InvariantCulture),
             accelerometer.CurrentValue.Acceleration.Y.ToString("0.00000", CultureInfo.InvariantCulture),
             accelerometer.CurrentValue.Acceleration.Z.ToString("0.00000", CultureInfo.InvariantCulture));
    resultCoordinates = "{" + resultCoordinates + "}";
    return resultCoordinates;
}

Et désormais, l’exemple fonctionnera avec toutes les locales. J’ai ouvert un bug à ce sujet ici: https://issues.apache.org/jira/browse/CB-141 en proposant la solution ci-dessus qui sera intégrée dans la prochaine version (2.0.0).

Au passage, pour débugger un projet PhoneGap, vous pouvez très bien utiliser jsConsole et toutes les astuces décrites dans mon article précédent : Testez et débuggez vos sites HTML5 sous Windows Phone 7 avec l’émulateur gratuit

Exemple complet avec le jeu HTML5 Platformer

Pour conclure, essayons de mixer tout cela avec un jeu complet que j’avais réalisé dans l’article précédent : HTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS

Voici les étapes que j’ai suivies pour faire fonctionner l’ensemble. La toute première étape consiste simplement à copier/coller les fichiers .js, .png, .css & co dans le répertoire “www” et de bien les marquer comme “Content”. Ensuite, voici les grandes étapes à suivre.

Forcer le mode paysage

Tout d’abord, j’ai forcé l’orientation en mode portrait et retiré la barre d’informations qui prend de la place sur le côté (System Tray) en me rendant de le fichier MainPage.xaml et en changeant ces propriétés :

SupportedOrientations="Landscape" Orientation="Landscape" shell:SystemTray.IsVisible="False"

Adapter le code pour gérer plusieurs résolutions

Le but étant d’être portable sur le plus grand nombre de périphériques possibles, il faut envisager de dessiner à des résolutions très différentes.

Pour cela, j’ai légèrement modifié le code initial du Platformer que vous pouvez retrouver dans l’autre article. Le jeu est ainsi désormais capable de s’adapter à n’importe quelle résolution en appliquant un ratio sur la manière de dessiner nos images et nos sprites. Tout est calculé pour partir de la résolution d’origine du Windows Phone (800x480) pour ensuite redessiner en fonction de ce ratio d’origine quelque soit la résolution. Vous pouvez le tester dans le navigateur ici : HTML5 Platformer ReScale et vous amusez à redimensionner la fenêtre de votre navigateur. Pour finir, si vous êtes sur une résolution 16/9 sur votre moniteur, appuyez sur la touche F11 pour jouer en plein écran ! L’expérience devient vraiment sympa comme le montre cette copie d’écran :

On laisse alors le soin au navigateur d’appliquer éventuellement de l’anti-aliasing lors de cette opération de mise à l’échelle. Vous noterez également, selon certains navigateurs, des performances très différentes en fonction de la taille de la fenêtre et donc de la résolution demandée. IE9/IE10 semble, sur ma machine, relativement indifférent au mode plein écran ou aux petites résolutions en affichant un framerate stable de 60 fps.

Chargement des niveaux via l’appel au système de fichiers plutôt que XHR

Dans le code d’origine, les fichiers .TXT associés à chacun des niveaux étaient stockés sur le serveur et récupérés via des appels XmlHttpRequest. C’est un peu dommage d’effectuer un appel XHR local. Donc j’ai remplacé le code initial de la fonction PlatformerGame.prototype.LoadNextLevel par :

// Loading the next level contained into /level/{x}.txt
PlatformerGame.prototype.LoadNextLevel = function () {
    this.levelIndex = (this.levelIndex + 1) % numberOfLevels;

    // Searching where we are currently hosted
    var nextFileName = "app/www/assets/levels/" + this.levelIndex + ".txt";
    try {
        var instance = this;
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

        function gotFS(fileSystem) {
            fileSystem.root.getFile(nextFileName, null, gotFileEntry, fail);
        }

        function gotFileEntry(fileEntry) {
            fileEntry.file(gotFile, fail);
        }

        function gotFile(file) {
            readAsText(file);
        }

        function readAsText(file) {
            var reader = new FileReader();
            reader.onloadend = function (evt) {
                instance.LoadThisTextLevel(evt.target.result.replace(/[\n\r\t]/g, ''));
            };
            reader.readAsText(file);
        }

        function fail(evt) {
            console.log(evt.target.error.code);
        }
    }
    catch (e) {
        console.log("Error loading level: " + e.message);
        this.LoadThisTextLevel(hardcodedErrorTextLevel);
    }
};

J’ai bêtement repris le code de la documentation de PhoneGap : FileReader . Vous avez donc pleinement accès au système de fichiers du Windows Phone via JavaScript.

Petit tip : pour vous aider à débugger ce qui est présent ou non dans l’Isolated Storage du téléphone, je vous conseille vivement cet outil qui m’a sauvé la vie : IsoStoreSpy écrit par Samuel Blanchard. Une vraie merveille !

Modification du gameplay pour gérer l’accéléromètre

Bon il ne reste plus qu’à mixer les différentes parties de cet article pour arriver au résultat escompté. Pour cela, j’ai ajouté le code suivant dans le constructeur de l’objet Player dans le fichier Player.js :

var options = { frequency: 500 };
var that = this;

navigator.accelerometer.watchAcceleration(
    function (accelerometer) { that.moveDirectionAccel(accelerometer); },
    function () { console.log("Error with accelerometer"); }, 
    options);

Ensuite, voici la fonction qui sera rappelée suite aux variations de l’accéléromètre :

Player.prototype.moveDirectionAccel = function(acceleration) {
    var accelValue = -acceleration.y;

    // Move the player with accelerometer
    if (Math.abs(accelValue) > 0.15) {
        // set our movement speed
        this.direction = Math.clamp(accelValue * this.AccelerometerScale, -1, 1);
    }
    else {
        this.direction = 0;
    }
};

Le résultat en images avec quelques FPS sur les téléphones

Tout d’abord, voici le résultat dans l’émulateur :

Sur un vrai périphérique, l’expérience varie d’un téléphone à l’autre. Prenons l’exemple du tout 1er niveau. Sur le LG E900, le framerate tourne autour de 22 fps, sur le HTC Radar, nous sommes autour de 31 fps et sur le Nokia Lumia 800 autour de 42 fps.

Il en résulte un gameplay souvent décevant dans la plupart des cas. En effet, l’utilisation d’un canvas plein écran n’est pour l’instant pas une bonne idée sur ce genre de mobile même si le Nokia semble être le plus à même de gérer ce scénario. J’en avais déjà parlé lors de ma session ParisWeb 2011 sur le développement “cross-device”. Une approche de découpage de la scène de jeux utilisant de plus petits canvas animés ensuite via leurs propriétés CSS serait plus adaptée. C’est ce qui est fait sur la version HTML5 d’Angry Birds par exemple. Certains frameworks de jeux commencent d’ailleurs à envisager de le gérer pour vous. L’idée serait donc de coder 1 fois le jeu avec des APIs de haut niveau et le framework s’occuperait de choisir soit un canvas plein écran, soit un découpage en plusieurs petits canvas. Vous l’aurez compris : l’expérience de jeux HTML5 sur mobile n’en est qu’à ses débuts mais l’avenir s’annonce très intéressant. A suivre donc !

Solution complète à télécharger

Vous trouverez le code source complet du jeu HTML5 Platformer pour PhoneGap ici : HTML5GapPlatformer.zip

Ressources complémentaires

Full Support for PhoneGap on Windows Phone is Now Complete!
PhoneGap on Windows Phone Tips de Glen Gardon qui contient plusieurs tutoriaux intéressants à suivre
De nombreux tutoriaux excellents à suivre ici: http://wiki.phonegap.com/w/page/35501397/Tutorials

Conclusion

PhoneGap ouvre des perspectives intéressantes pour vous aider à écrire des applications pour le téléphone en reprenant vos compétences existantes en JavaScript, HTML et CSS. Il ne pourra pas forcément couvrir tous les scénarios actuellement adressées par un développement natif (Silverlight ou XNA) mais c’est une voie à envisager si vous souhaitez capitaliser sur les compétences de l’une de vos équipes. Il faudra par contre bien faire attention à vérifier que le type de projet retenu se prête bien aux limitations actuelles d’HTML5.

Il existe aussi la possibilité de mixer les 2 environnements en créant des expériences hybrides : le tronc commun écrit en “HTML5” et le reste par des équipes maitrisant la plateforme native. C’est ainsi que certains plug-ins ont été créés pour pousser un peu loin l’intégration dans l’expérience Metro : Plug-ins PhoneGap pour Windows Phone . Vous y trouverez par exemple la possibilité de mettre à jour les “Tiles” depuis votre code JavaScript.

Pour finir, PhoneGap et l’usage d’HTML5 permet également une portabilité plus simple vers d’autres plateformes… dans une certaines mesure. Cependant, ce sujet précis étant un vaste et passionnant débat remplis de mauvaises idées reçues, j’y reviendrais peut-être dans un autre billet si j’en ai le temps d’ici les TechDays !

David

Testez et débuggez vos sites HTML5 sous Windows Phone 7 avec l’émulateur gratuit

David Rousset — Tue, 13 Dec 2011 10:02:13 GMT

Les internautes arrivent de plus en plus souvent sur vos sites web depuis un périphérique mobile. Il est donc de plus en plus important de leur offrir une bonne expérience sur le navigateur embarqué. Vous ne pouvez plus vous permettre d’ignorer cette population en leur offrant une version trop dégradée. Dans notre cas, depuis la mise à jour nommée “Mango”, Internet Explorer 9 est arrivé sur Windows Phone. Vous pouvez donc lui fournir du HTML5, CSS3 Media Queries & co pour créer une bonne expérience. Je vous propose alors de voir 4 choses dans cet article :

Comment récupérer l’émulateur Windows Phone et l’utiliser
Un point sur les différences entre IE9 Desktop et mobile
Comment débugger votre code JavaScript avec jsConsole
Pour finir, comment débugger le trafic réseau entre l’émulateur et le reste du monde grâce à Fiddler

Le but principal de cet article étant de vous faire gagner potentiellement du temps.

L’émulateur Windows Phone

La toute première chose que je vous invite à faire est de télécharger le SDK qui contient l’émulateur ici : Télécharger le SDK Windows Phone . Vous pouvez l’installer sous Windows Vista ou Windows 7.

Il contient également les outils (gratuits) de développement. Si le sujet vous intéresse et que vous souhaitez découvrir cette plateforme, rendez-vous ici : Découvrir la plateforme Windows Phone

Mais revenons au sujet qui nous intéresse. Une fois le SDK installé, vous trouverez l’émulateur dans votre menu démarrer :

Lorsque vous le lancez, vous aurez ce résultat et vous pouvez configurer 2 ou 3 trucs :

Vous pouvez par exemple choisir entre le fait de recevoir par défaut la version mobile du site ou la version bureau.

Détail important à connaitre : pour éviter de taper les URLs avec le clavier virtuel, cliquez dans l’émulateur et appuyer sur la touche “Pause”. Vous devriez ensuite être en mesure de taper avec votre clavier dans l’émulateur.

Voici les autres choses à connaitre sur l’émulateur qui pourront vous aider à créer vos expériences mobiles sur Windows Phone. Gestion de l’orientation présente sur la barre d’options à droite de l’émulateur :

Et voici le résultat :

Autre détail à connaitre, pour que l’orientation s’effectue correctement et soit prise en compte, il faut ré-appuyer sur la touche “pause” si vous l’avez fait précédemment pour utiliser votre clavier. Sinon, vous aurez l’impression de devoir systématique pencher la tête à gauche ou à droite.

Vous pouvez aussi simuler de votre position pour la géolocalisation. Prenons par exemple ce site web de démo : IE Test Drive Mobile avec Géolocalisation HTML5 qui utilise justement l’API de géolocalisation.

Voici le résultat par défaut dans l’émulateur :

On vous localise sur Redmond. Donc si vous voulez changer cela (sauf si vous habitez vraiment à Redmond ), vous pouvez le faire en faisant apparaitre une fenêtre supplémentaire. Pour cela, cliquez sur “>>” et mettez une punaise (ou push pin en anglais) à l’endroit souhaité. Voici un exemple où j’en mets un sur la Tour Eiffel et l’application HTML5/JavaScript obtient bien la bonne information :

Cela peut donc être très pratique pour débugger une application HTML5 basée sur la géolocalisation sans forcément vous balader physiquement dans toute la France… voir la planète !

Pour le reste, testez votre site de manière habituelle et observez les différences entre la version desktop et mobile comme avec le site Food Sense par exemple mettant en œuvre intelligemment CSS3 Media Queries :

Vous pouvez voir ci-dessus le résultat sur IE9 sous Windows 7, IE9 sur Windows Phone en mode portrait puis paysage.

Donc si tout cela vous intéresse et que vous souhaitez accueillir dans de bonnes conditions les nombreux acheteurs récents du superbe Nokia Lumia 800, foncez télécharger ici le SDK :

Et testez votre site dessus !

Différences entre IE9 desktop et mobile

Commençons par les choses en moins classées par ordre d’importance selon moi:

pas de support des fonts téléchargeables comme EOT, TTF/OTF et WOFF. Bien que le tag font-face soit supporté, le navigateur IE9 mobile n’essaiera pas de télécharger la font. La liste des fonts installées et supportées par Windows Phone se trouve ici : Liste des fonts supportées
pas de support de flux multiples avec la balise audio HTML5
pas de support de mode de rétro compatibilité avec le mode de document Internet Explorer 8. IE9 mobile rendra les sites forcément avec le moteur de rendu d’IE9.
assez logiquement, pas de support de communications “cross-window” via JavaScript
pas de support de VBScript, d’ActiveX, d’extensibilité via les BHO (Browser Helper Objects) et les barre d’outils, pas de support d’Active Document non plus
pas de support de vieilles technologies comme les “binary behaviors”, HTCs, HTML+TIME et VML
pas de compilation JIT

Ainsi, heureusement, la quasi totalité des différences entre la version de bureau d’IE9 et son équivalent mobile représente, je pense, d’excellentes choses.

Dans les choses en plus, nous avons :

support du GPS pour la géolocalisation HTML5. Windows Phone utilise ainsi la couche de localisation du périphérique et utilise donc le GPS s’il est disponible. La version de bureau d’IE9 s’appuyant sur d’autres méthodes n’utilisant pas le GPS car quasiment aucun PC n’en est équipé.
support du Viewport. Width, height et user-scalable. Par contre, bien que certaines de ces fonctionnalités soient supportées dans certains navigateurs, les propriétés minimum-scale, maximum-scale et initial-scale sont pour l’instant non supportées
support de la propriété CSS : -ms-text-size-adjust

Vous retrouverez tout cela un peu plus en détail et en anglais ici : Web Development for Windows Phone

Pour le reste, reportez vous simplement au guide du développeur Internet Explorer 9 qui contient toutes les fonctionnalités supportées par IE9 desktop et donc mobile. J’attire par exemple votre attention sur 2 points importants lorsque vous allez tester du HTML5 ou CSS3 dans IE9 Mobile :

Tout comme IE9 Desktop, il faut absolument avoir créé un document HTML5 standard avec donc la balise <!DOCTYPE html> en tout début de document. Si vous ne la positionnez pas, IE9 Desktop come Mobile basculeront dans un ancien mode de rendu non “compatible” HTML5
IE9 Mobile gère une liste de compatibilité des sites comme décrit ici : IE9’s faster, more capable Compatibility View List… now on Windows Phone! . Donc si vous vous apercevez que votre code ne se comporte par comme prévu dans IE9 Mobile, c’est peut-être que votre site est hébergé sur un nom de domaine marqué comme non compatible dans la liste mise à jour toutes les 2 semaines. Et tout comme IE9 Desktop, vous pouvez forcer le mode standard via le meta tag X-UA-COMPATIBLE.

Par exemple, j’ai eu une interaction récente sur Twitter avec @benjamincrozat sur du border-radius qui ne marchait pas sous IE9 Mobile. En regardant depuis IE9 Desktop son URL de test, je me suis aperçu de la chose suivante dans la console de debug (via F12) :

On observe alors que dropbox.com est présent dans la liste de compatibilité, ce qui fait basculer IE9 en mode de compatibilité IE7. Conclusion : n’hésitez pas à tester votre site sous IE9 “normal” avant de tester sous IE9 mobile pour faire une 1ère passe de tests.

Débugger le code JavaScript avec jsConsole

Dans la mise au point d’un site web pour mobile, la partie la plus pénible est souvent de débugger le code JavaScript sur tournant sur le périphérique. Heureusement, l’excellent Remy Sharp a eu la bonne idée de travailler sur un projet permettant de piloter à distance le code JS exécuté sur le périphérique. Le fruit de son travail est le projet jsConsole : http://jsconsole.com .

Mais plutôt que de vous expliquer en détail son usage, je préfère fortement vous inviter à lire l’excellent tutoriel présent sur le site d’Alsacréations : Déboguer son site mobile avec JsConsole . Je ne vois pas trop comment je pourrais mieux faire.

Par contre, j’ai bien vérifié que cette solution fonctionnait parfaitement avec IE9 sur Windows Phone. Voici un exemple utilisant jsConsole et PhoneGap pour Windows Phone 7 :

Vous pouvez donc compter dessus pour vous aider à tester et corriger votre site sur la version mobile d’IE9.

Attention ! Pour des raisons évidentes de sécurité, attention à bien mettre tout cela en place qu’à des fins de debug et à bien retirer son usage avant la mise en production ! Mais ai-je vraiment besoin de le vous rappeler ?

Débugger le trafic réseau avec Fiddler

Pour finir un peu plus bas dans les couches, nous allons maintenant voir comment capturer le trafic réseau entre l’émulateur Windows Phone et le reste du monde. Voici les étapes à suivre :

Installer la dernière version de Fiddler
Démarrer Fiddler
Aller dans les options via les menus “Tools” –> “Fiddler Options”
Ouvrez l’onglet “Connections” et cochez la case “Allow remote computers to connect”.
Cliquez sur “OK” pour fermer la fenêtre des options de Fiddler
Dans la boite de commandes sous la liste des “Web sessions”, tapez la commande suivante : prefs set fiddler.network.proxy.registrationhostname HostName où HostName correspond au nom de votre machine
Fermer et redémarrer Fiddler
Démarrer (ou redémarrer) l’émulateur Windows Phone
Ouvrer Internet Explorer et naviguez vers le site à débugger
Observez le trafic réseau affiché par Fiddler

Et voici un résultat de capture en naviguant vers le site d’Alsacréations :

Avec notre émulateur gratuit et toutes ces astuces, j’espère que vous serez maintenant correctement armé pour tester et débugger vos sites sur IE9 mobile !

David

Introduction aux animations CSS3

David Rousset — Mon, 05 Dec 2011 23:28:49 GMT

Les applications HTML5 d’aujourd’hui peuvent désormais fournir des expériences inédites grâces aux nouvelles spécifications CSS3. L’une d’entre elles est nommée CSS3 Animations. Elle vous permet de créer des animations évoluées sur des éléments HTML. Cela ouvre d’intéressantes perspectives afin de fournir des retours pertinents à l’utilisateur et construire des applications rapides & fluides. De plus, comme ces nouvelles animations sont la plupart du temps accélérées matériellement par le GPU, elles permettent de monter la qualité de la nouvelle génération d’applications HTML5 vers de nouveaux sommets.

Si l’on traduit une partie des spécifications “CSS Animation Module Level 3” du site officiel du W3C, on découvre que ces spécifications CSS3 introduisent des animations définies, indiquant les propriétés CSS qui évolueront selon un intervalle de temps donné. Cette spécification est une extension du module CSS Transitions.

Comme CSS3 Animations est une extension des CSS3 Transitions, je vous invite à lire dans un 1er temps l’article dédié à ce sujet de mon collègue David Catuhe: Introduction aux transitions CSS3.

A travers cet article, nous allons découvrir une démo intéressante mettant en avant le potentiel des animations CSS3, comment construire des animations simples et finalement comment gérer un éventuel mode dégradé via JavaScript:

CSS3 Animations
Support dans les navigateurs
Librairie JavaScript pour simuler les animations CSS3
Conclusion

Commençons tout d’abord par rapidement découvrir ce que sont les animations CSS3. Voici un exemple d’animation d’un TB-TT (ou AT-AT en anglais) issu de l’univers de StarWars et utilisant CSS3 Animations pour animer les différentes parties du transport. Si votre navigateur ne supporte pas les spécifications CSS3 animations, une librairie JavaScript sera chargée pour simuler son action:

Vous pouvez également tester cet exemple dans une fenêtre séparée ici : http://david.blob.core.windows.net/html5/css3atat/index.htm

Note : cet exemple a été testé avec succès sous IE10 PP3/PP4, Chrome 15, Firefox 8 et iPad 2 pour le support natif des animations. La librairie de “fallback” fonctionne très bien sous IE9 classique et mobile (Windows Phone). Cependant, pour des raisons qui me sont inconnues, elle génère des comportements pour le moins étranges sous Opera 11.50 apparemment résolus sous la 11.60. Par ailleurs, notre chère plateforme de blog force souvent le moteur de rendu IE9 via un meta tag ce qui empêche la démo de fonctionner correctement sous IE10. Pour forcer le moteur IE10 standards, appuyer sur la touche F12 et changer la valeur de “Document Mode”. Sinon, regardez la démo dans une fenêtre séparée.

Cet exemple est basé sur le super boulot réalisé par Anthony Calzadilla. Vous pouvez découvrir d’autres superbes démos mettant en œuvre CSS3 Animations sur son site ici : http://www.anthonycalzadilla.com . J’apprécie particulièrement son exemple I twitty the fool utilisant SVG & CSS3 Animation combinés.

CSS3 Animations

Introduction

Commençons par analyser sur quelles parties vous pouvez jouer pour fabriquer des animations. CSS3 Animations travaille tout simplement sur les mêmes valeurs que CSS3 Transitions.

Les voici: cliquez ici pour les afficher/cacher

couleur : interpolée via ses composantes rouge, verte, bleue et alpha (qui sont considérées comme des nombres)
longueur : interpolée comme un nombre
pourcentage : interpolée comme un nombre
entier :interpolé de manière discrète (en fait l’interpolation se fait sur une version décimale qui est ensuite tronquée vers un entier en utilisant floor())
nombre: interpolé directement comme un réel
liste de transformation : voir la spécification des CSS3 2D Transforms (http://www.w3.org/TR/css3-2d-transforms)
rectangle: interpolé via ses composantes x, y, largeur, hauteur
visibilité: interpolé de manière discrète (en fait l’interpolation est effectuée sur un nombre réel allant de 0 à 1 ou 0 vaut caché et 1 vaut visible)
ombre: interpolé via ses composantes de couleur, x, y et flou
gradient: interpolé au travers de la position et la couleur de chacune des étapes. La valeur d’origine et la valeur de destination de la transitions doivent par contre avoir le même type (linéaire ou radial) et le même nombre d’étapes
paint server (SVG): l’interpolation est uniquement supporté de gradient ver gradient ou de couleur vers couleur
liste séparée par des espaces d’un type ci-dessus : si les listes d’origine et de destination de la transition ont le même nombre d’éléments, les règles ci-dessus s’applique et l’interpolation a bien lieu. Dans le cas contraire, l’interpolation n’est pas jouée
propriété synthétique (shorthand property) : si toutes les parties de la synthèse peuvent être animées alors l’interpolation a lieu comme si chaque propriété avait été spécifiée individuellement

Et les propriétés suivantes doivent être supportées pour les animations: cliquez ici pour les afficher/cacher

background-color (couleur)
background-image (que les gradients)
background-position (pourcentage et longueur)
border-bottom-color (couleur)
border-bottom-width (longueur)
border-color (couleur)
border-left-color (couleur)
border-left-width (longueur)
border-right-color (couleur)
border-right-width (longueur)
border-spacing (longueur)
border-top-color (couleur)
border-top-width (longueur)
border-width (longueur)
bottom (longueur et pourcentage)
color (couleur)
crop (rectangle)
font-size (longueur et pourcentage)
font-weight (nombre)
grid-* (divers)
height (longueur et pourcentage)
left (longueur et pourcentage)
letter-spacing (longueur)
line-height (nombre, longueur et pourcentage)
margin-bottom (longueur)
margin-left (longueur)
margin-right (longueur)
margin-top (longueur)
max-height (longueur et pourcentage)
max-width (longueur et pourcentage)
min-height (longueur et pourcentage)
min-width (longueur et pourcentage)
opacity (nombre)
outline-color (couleur)
outline-offset (entier)
outline-width (longueur)
padding-bottom (longueur)
padding-left (longueur)
padding-right (longueur)
padding-top (longueur)
right (longueur et pourcentage)
text-indent (longueur et pourcentage)
text-shadow (ombre)
top (longueur et pourcentage)
vertical-align (keywords, longueur et pourcentage)
visibility (visibilité)
width (longueur et pourcentage)
word-spacing (longueur et pourcentage)
z-index (entier)
zoom (nombre)

SVG

Les propriétés des objets SVG sont animables lorsque qu’elles sont définies comme animatable:true dans les spécifications SVG : http://www.w3.org/TR/SVG/struct.html. Cependant, à l’heure où j’ai écrit cet article, je n’ai pas réussi à combiner avec succès des animations CSS3 directement sur des éléments SVG dans aucune des dernières versions des navigateurs. Les exemples que vous pourrez trouver utilisent alors une petite astuce: il embarque les ressources SVG dans différents DIV eux-mêmes animés via CSS3 comme l’exemple I twitty the fool d’Anthony.

Déclarations

Pour déclarer une animation dans un fichier CSS, voici le type de code générique que vous aurez à taper:

@keyframes nom_de_l_animation {
  from {
   propriété_à_animer: valeur_initiale;
  }
  50% {
     propriété_à_animer: valeur_intermédiaire;
  }
  to {
    propriété_à_animer: valeur_finale;
  }
}

qui pourrait également s’écrire ainsi :

@keyframes nom_de_l_animation {
    0% {
        propriété_à_animer: valeur_initiale;
    }
    50% {
        propriété_à_animer: valeur_intermédiaire;
    }
    100% {
        propriété_à_animer: valeur_finale;
    }
}

Cette animation définit 3 étapes 0, 50 & 100%. Pour construire une animation valide, vous devez au moins avoir un from (ou 0%) et un to (ou 100%) soit 2 étapes minimum. Après cela, vous pouvez ajouter autant d’étapes (ou keyframes) que vous le souhaitez entre 0 et 100% pour contrôler de manière fine les différentes phases de votre animation.

Une fois la définition faite, vous pouvez l’affecter à un élément en utilisant les sélecteurs CSS3 classiques et il ne vous restera plus qu’à configurer les options de l’animation. Pour cela, voici le type de bloc qu’il faut utiliser:

#id_de_l_element_html {
    animation-name: nom_de_l_animation;
    animation-duration: nombre_de_secondes s;
    animation-iteration-count: nombre | infinite;
}

Pour mieux comprendre, observons un exemple réel. Tout d’abord, comme la spécification CSS3 Animations est toujours à l’état de brouillon, vous devez utiliser les bons préfixes des éditeurs de navigateurs. Prenons par exemple IE10 dont le préfixe est –ms donc. Regardons maintenant comme la tête de notre TB-TT est animée.

Voici la déclaration de l’animation:

@-ms-keyframes rotate-skull {
    0% {
        -ms-transform: rotate(0deg)
    }
    25% {
        -ms-transform: rotate(15deg)
    }
    50% {
        -ms-transform: rotate(-5deg)
    }
    55% {
        -ms-transform: rotate(0deg)
    }
    75% {
        -ms-transform: rotate(-10deg)
    }
    100% {
        -ms-transform: rotate(0deg)
    }
}

Nous avons définit 6 étapes (0, 25, 50, 55, 75 & 100%) qui vont agir sur la propriétés CSS3 2D Transform en jouant sur la valeur de la rotation.

Cette animation est alors appliquée via cette règle CSS:

#skull 
{
    -ms-animation-name: rotate-skull;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: infinite;       
}

On vise l’élément <div> ayant pour “id=skull” et nous lui appliquons l’animation nommée “rotate-skull” dessus. L’animation devra être terminée en 7s et devra être jouée un nombre infini de fois.

Voici le résultat animé si votre navigateur supporte CSS3 Animations :

Nous aurions très bien pu d’ailleurs écrire cette règle de manière raccourcie ainsi :

#skull {
    -ms-animation: rotate-skull 7s infinite;
}

L’animation sera lancée dès qu’une règle qui correspond sera appliquée. Vous pouvez donc jouer ou stopper une animation simplement par JavaScript ou via CSS3 en travaillant sur les classes affectées à un tag.

Animations non linéaires

La propriété “animation-timing-function” doit être utilisée si vous souhaitez mettre en place des animations non linéaires. Vous pouvez même mixer plusieurs types d’animations entre chaque keyframe si vous le souhaitez.

CSS3 animations va utiliser une courbe de Bézier cubique pour “fluidifier” la transition en calculant une vitesse de progression différente tout au long de sa durée.

Les valeurs suivantes sont supportées:

linear: Vitesse constante (comportement par défaut)
cubic-bezier: La vitesse sera calculée grâce à une courbe de Bézier cubique définie par deux points de contrôles : P0 et P1 (Il faudra donc fournir 4 paramètres : P0x, P0y, P1x et P1y).
ease: La vitesse sera calculée avec la formule suivante : cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in: La vitesse sera calculée avec la formule suivante : cubic-bezier(0.42, 0, 1, 1)
ease-inout: La vitesse sera calculée avec la formule suivante : cubic-bezier(0.42, 0, 0.58, 1)
ease-out: La vitesse sera calculée avec la formule suivante : cubic-bezier(0, 0, 0.58, 1)

Voici un outil de simulation écrit par David Catuhe qui utilise du JavaScript 100% pur jus pour démontrer l’impact de chacune des fonctions non linéaires:

Note : cet outil utilise du SVG “in-line” supporté par Firefox, Chrome, Opera 11.60 & IE9/10. Il ne fonctionnera donc pas correctement sous Opera 11.50 et sous Safari sur iPad.

Ce super outil utilise donc SVG. Vous pouvez alors même jouer avec votre souris à éditer la courbe de la fonction “custom”. Si vous souhaitez en savoir davantage sur cet outil, rendez-vous à nouveau sur l’article de David Catuhe sur les transitions.

Si votre navigateur supporte les animations CSS3, regardons maintenant une démo toute simple utilisant les fonctions non linéaires pour bouger un élément <canvas> via CSS3 contenant un sprite animé.

Voici le bloc de CSS3 Animations qui sera utilisé dans cette démo:

@-ms-keyframes demo {
    from {
    -ms-animation-timing-function: ease;
    -ms-transform: translateX(0px);
    }
    50% {
    -ms-animation-timing-function: ease-in;
    -ms-transform: translateX(300px);
    }
    to {
    -ms-animation-timing-function: ease-inout;
    -ms-transform: translateX(900px);
    }
}

#testCanvas
{
    -ms-animation-delay: 0s;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-name: demo;
}

Ainsi que toutes les variations de préfixes pour pouvoir fonctionner sous Google Chrome & Mozilla Firefox. Voici le résultat en image:

Si votre navigateur ne supporte pas CSS3 Animation mais uniquement canvas, l’animation du sprite en train de courir devrait être relativement statique car le personnage ne bougera pas sur toute la largeur de l’écran.

Note : si vous souhaitez en savoir davantage sur <canvas> et l’animation de sprites, je vous invite à lire cet article : Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS

Délais

Ta propriété “animation-delay” permet tout simplement de lancer l’animation un peu plus tard que prévu. Rien de bien sorcier.

Evènements

3 évènements peuvent être levés pendant une animation. Ils sont nommés “AnimationStart”, “AnimationEnd” et “AnimationIteration”. En fonction du navigateur, le nom correctement préfixé sera alors:

Chrome: webkitAnimationEnd
Firefox: mozAnimationEnd
Internet Explorer: MSAnimationEnd

Ces évènements vous donneront les détails suivants:

animationName: nom de l’animation ayant levée l’évènement
elapsedTime: le temps écoulé depuis le début de l’animation, en secondes

En voici un exemple d’usage pour IE10 :

elementToAnimate.addEventListener("MSAnimationEnd", function () {
    alert("the end !");
}, false);

D’autres choses à propos des animations CSS3

Les animations CSS3 sont vraiment utiles pour 2 raisons principales :

L’accélération matérielle: les animations CSS3 sont la plupart du temps gérées directement par le GPU et peuvent donc produire des résultats plus fluides. Cela peut donc être particulièrement intéressant pour les scénarios visant les périphériques mobiles.
Meilleure séparation entre le code et le design: je sais qu’il existe de nombreux débats à ce sujet mais avec David, nous avons tendance à penser qu’un développeur ne devrait pas s’occuper des animations ou de toute autre chose ayant rapport au design autant que possible. De la même manière, un designer/graphiste ne devrait pas s’occuper de JavaScript. CSS3 offre donc cette possibilité et peut permettre aux designers/intégrateurs de travailler avec leurs outils classiques pour générer les animations sur les bons éléments, les changements entre écrans, etc.

Pour illustrer l’importance des performances, sachez que le jeu HTML5 suivant HTML5 Platformer que j’ai écrit et utilisant une balise <canvas> en plein écran tourne à 60 fps sous IE9/IE10 sur mon PC mais à maximum 10 fps sur un iPad 2. C’est tout simplement du au fait que le CPU de l’iPad soit bien moins puissant et qu’il n’utilise pas encore l’accélération matérielle sur le tag <canvas>. L’utilisation de transitions ou d’animations CSS3 pour animer plusieurs petits éléments <canvas> pourrait ainsi fournir un gain très net de performance pour ce jeu. Ne l’oubliez donc pas lorsque vous aurez un projet visant les périphériques mobiles !

Support dans les navigateurs

Depuis la Platform Preview 3 d’IE10 disponible au sein de Windows 8 Developer Preview, nous supportons les animations CSS3. Par ailleurs, comme vous pouvez le voir sur le rapport suivi généré depuis le site caniuse.com, les animations CSS3 sont désormais supportées dans un large panel de navigateurs :

Mais comme la spécification n’est pas encore terminée (working draft), vous devez utiliser les préfixes tels que –ms, –moz, –webkit et –o pour construire des applications compatibles cross-navigateurs.

Mais la question qui devrait alors rapidement se poser est la suivante: comment prendre en charge les navigateurs ne supportant pas cette nouvelle fonctionnalité ?

La première option consiste simplement à ne rien faire. Grâce à la beauté de la dégradation élégante (ou graceful degradation en anglais), vous pouvez simplement offrir une image statique à l’utilisateur. Cela est par exemple le cas des 2 démonstrations d’Anthony : I Twitty the Fool! et Pure CSS3 AT-AT Walker . Lorsqu’affichés sous IE9, vous avez l’impression de n’avoir qu’une image statique. Cependant, lorsque vous les affichez sous IE10, le même code affiche alors de belles animations. Les utilisateurs sous IE10 disposeront d’une version améliorée tant dis que les utilisateurs sous IE9 continueront de pouvoir bénéficier du site. Plus votre navigateur sera moderne, plus vous aurez de bonus visuels.

La deuxième option consiste à détecter le support de la fonctionnalité via une librairie JavaScript comme Modernizr puis de tenter de fournir la même animation avec une autre librairie JavaScript qui s’occupera de copier les animations CSS3. C’est ce que nous appelons communément un mécanisme de “fallback”. Malheureusement, je n’ai pas réussi à trouver aujourd’hui une librairie fonctionnelle et complète pouvant totalement remplacer les animations CSS3 lorsque non supportées par le navigateur.

Il n’en fallait pas plus pour me donner l’envie d’en écrire une petite plus ou moins spécialement étudiée pour notre exemple initial de TB-TT.

Librairie JavaScript pour simuler les animations CSS3

Les animations ne sont finalement qu’une série de transitions séparées pour une certaine durée définie par les keyframes. J’ai donc ré-utilisé les concepts introduits par David Catuhe dans sa librairie pour palier à l’absence éventuelle de CSS3 Transitions. Je vous laisse donc le soin de revoir son article détaillant les concepts derrière ce code si ce n’est déjà fait.

De mon côté, j’ai ajouté le support des animations sur les propriétés rotation & translation de CSS3 2D tranform ainsi qu’une manière d’itérer à travers chacun des keyframes.

Voici la partie principale de la librairie que vous devrez étudier :

// Objet Animation 
// Il a besoin de l’élément HTML visé, du nom de l’animation, de sa durée, du nombre de fois qu’il faut la jouer et
// des keyframes contenus au sein d’un tableau
// Imaginez ainsi une animation comme une simple séquence de transitions jouées un certain nombre de fois
ANIMATIONSHELPER.animation = function (target, name, duration, iterationcount, keyframes) {
    // on sauvegarde les valeurs de nos propriétés
    this.name = name;
    this.duration = duration;
    this.iterationcount = iterationcount;
    this.target = target;

    var elapsedtime = 0;
    var keyframeduration = 0;
    var elapsedtime = 0;

    // On transforme les pourcentages de chaque keyframe en une valeur de durée
    for (var i = 0; i < keyframes.length; i++) {
        keyframeduration = ((keyframes[i].percentage * duration) / 100) - elapsedtime;
        keyframes[i].duration = keyframeduration;
        elapsedtime += keyframeduration;
    }

    this.currentTransition = { isPlaying: false };
    this.keyframes = keyframes;
    this.keyframesCount = keyframes.length;
    this.currentKeyFrameIndex = 0;

    // La fonction nextTransition() retourne la prochaine transition à jouer
    // en fonction du keyframe courant à lancer
    this.nextTransition = function (keyframe, ease, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y) {
        var properties = [];
        var finalValues = [];
        var transition;

        // Comparé au TRANSITIONSHELPER original de David Catuhe
        // Nous avons besoin de code spécifique supplémentaire pour jouer sur les valeurs de 2D Transform
        if (keyframe.propertyToAnimate === "transform") {
            for (var i = 0; i < keyframe.transformType.length; i++) {
                properties.push(keyframe.transformType[i].type);
                if (keyframe.transformType[i].type == "rotate") {
                    finalValues.push({ deg: keyframe.transformType[i].value1 });
                }
                else {
                    finalValues.push({ x: keyframe.transformType[i].value1, y: keyframe.transformType[i].value2 });
                }
            }

            // Création d’une nouvelle transition
            transition = {
                name: this.name + this.currentKeyFrameIndex,
                target: this.target,
                properties: properties,
                finalValues: finalValues,
                originalValues: ANIMATIONSHELPER.extractValues(target.style[ANIMATIONSHELPER.currentTransformProperty], this.name),
                duration: keyframe.duration,
                startDate: (new Date).getTime(),
                currentDate: (new Date).getTime(),
                ease: ease,
                customEaseP1X: customEaseP1X,
                customEaseP2X: customEaseP2X,
                customEaseP1Y: customEaseP1Y,
                customEaseP2Y: customEaseP2Y,
                isPlaying: true,
                type: "transform"
            };

            return transition;
        }
        // Si c’est une propriété simple à animer, on peut tout simplement utiliser le TRANSITIONSHELPER presque tel quel
        else {
            return TRANSITIONSHELPER.transition(this.target, keyframe.propertyToAnimate, keyframe.value, keyframe.duration, TRANSITIONSHELPER.easingFunctions.linear);
        }
    };

    // chaque instance d’animation dispose d’une fonction tick
    // qui sera appelée toutes les 17 ms (pour tenter de viser les 60 fps)
    // Ce ticker surveille l’état de la transition en cours et 
    // en créé une nouvelle dès qu’elle est terminée ou morte
    this.tick = function () {
        if (this.iterationcount > 0) {
            if (!this.currentTransition.isPlaying) {
                this.currentTransition = this.nextTransition(this.keyframes[this.currentKeyFrameIndex], ANIMATIONSHELPER.easingFunctions.linear);
                // Nous utilisons le ticker global de ANIMATIONSHELPER uniquement pour les transformations 2D
                // Sinon, on utilise celui de la librairie TRANSITIONSHELPER
                if (this.currentTransition.type === "transform") {
                    ANIMATIONSHELPER.currentTransitions.push(this.currentTransition);
                }
                this.currentKeyFrameIndex++;

                // Nous avons atteint le dernier keyframe (100%). On peut recommencer au début donc.
                if (this.currentKeyFrameIndex >= this.keyframesCount) {
                    this.currentKeyFrameIndex = 0;
                    this.iterationcount--;
                }
            }
        }
    };
};

La 1ère partie du code parcourt la collection des keyframes pour calculer la durée exacte engendrée par chacun des pourcentages. On définit alors une fonction nextTransition() qui va construire dynamiquement la prochaine transition à jouer en se basant sur l’index courant dans la collection de keyframes associés à l’animation en cours. Pour finir, nous avons une function tick() qui surveille l’état de la transition actuellement affectée. Dès que cette dernière se termine, nous demandons la prochaine transition, on la pousse sur la pile des transitions à jouer et on bouge les différents indexes.

La function tick() est rappelée grâce à ce code :

ANIMATIONSHELPER.launchAnimation = function (animation) {
    // On lance le service global de ticker si nécessaire
    if (ANIMATIONSHELPER.tickIntervalID == 0) {
        ANIMATIONSHELPER.tickIntervalID = setInterval(ANIMATIONSHELPER.tick, 17);
    }

    // Petite closure pour lancer la méthode tick sur la bonne instance d’animation
    setInterval(function () { animation.tick(); }, 17);
};

Pour finir, nous avons ce type de code pour nous aider à fabriquer les keyframes :

// Objet pour construire des keyframes génériques (et pas pour les CSS3 2D Transform donc)
ANIMATIONSHELPER.keyframe = function (percentage, propertyToAnimate, value) {
    this.percentage = percentage;
    this.propertyToAnimate = propertyToAnimate;
    this.value = value;
};

//Objet pour construire des keyframes dédiés aux rotations
ANIMATIONSHELPER.rotationkeyframe = function (percentage, value) {
    this.percentage = percentage;
    this.propertyToAnimate = "transform";
    this.transformType = [];
    this.transformType.push(new ANIMATIONSHELPER.transformType("rotate", value));
};

Pour illustrer son usage, amusons-nous à refaire le 1er exemple d’animations simples effectuées sur la tête de notre TB-TT avec cette librairie :

// nombre de fois que vous souhaitez voir l’animation tourner
var iterationsNumber = 100;

var skullElement = document.getElementById("skull");
var keyframes = [];
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(25, 15));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(50, -5));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(55, 0));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(75, -10));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(100, 0));

var animation1 = new ANIMATIONSHELPER.animation(skullElement, "rotate-skull", 7000, 
                                                iterationsNumber, keyframes);

ANIMATIONSHELPER.launchAnimation(animation1, ANIMATIONSHELPER.easingFunctions.linear);

Et voici le résultat animé qui devrait maintenant fonctionner dans tous les navigateurs supportant CSS3 2D Transform :

Pour finir, si l’on revient sur la toute première démonstration au début de cet article, vous verrez qu’elle utilise Modernizr pour vérifier le support des animations CSS3. Si ce n’est pas le cas, on charge le code qui s’occupera de copier le comportement défini par les keyframes présents dans master.css, moz-master.css & ms-master.css :

// On vérifie le support des animations CSS3
if (!Modernizr.cssanimations) {
    // Si ce n’est pas le cas, on invoque notre librairie JavaScript de secours 
    supportElement.innerHTML = "CSS3 Animations <strong>are not supported</strong>";
    LoadJSAnimationsFallback();
}
else {
    // Si CSS3 Animations est supportée, nous n’avons rien à faire. 
    // Les feuilles de style *master.css seront automatiquement appliquées et utilisées.
    supportElement.innerHTML = "CSS3 Animations <strong>are supported</strong>";
}

La fonction LoadJSAnimationsFallback() est définie dans le fichier jsfallback-master.js qui contient simplement les déclarations de keyframes ainsi que les 19 animations nécessaires à recréer le comportement défini par Anthony en pur CSS3. Avec cette approche, le designer doit donc potentiellement ré-écrire toutes ses règles en faisant appel à la librairie JavaScript. Une autre approche pourrait consister à parser l’un des fichiers CSS en le téléchargeant via une requête XHR puis d’en déduire dynamiquement les appels JavaScript à faire vers la librairie. Cela nécessite cependant bien plus de travail car il vous faut quasiment ré-implémenter l’ensemble de la spécification CSS3 Animations en JavaScript !

Vous avez normalement maintenant une idée de la manière de créer une mécanisme de “fallback” pour supporter le plus grand nombre de navigateurs tout en commençant à utiliser les dernières spécifications CSS3.

Vous pouvez télécharger les fichiers pour l’exemple principal de cet article ici : http://david.blob.core.windows.net/html5/css3atat/CSS3ATATNonMinified.zip

Il contient les versions non minimisées des fichiers JavaScript animationsHelper.js, transitionsHelper.js, jsfallback-master.js ainsi que les différentes déclinaisons des feuilles de style CSS3 pour les différentes préfixes.

Conclusion

Les animations CSS3 représente une technologie puissante pour repousser les applications HTML5 vers un nouveau niveau. Elles offrent des scénarios intéressants. Les designers/intégrateurs peuvent les utiliser pour créer une nouvelle génération d’expérience utilisateur avec des écrans rapides et fluides sans avoir besoin de faire appel à un développeur. Comme elles sont la plupart du temps accélérées matériellement, les développeurs doivent également malgré tout y jeter un œil. Pour finir, les 2 populations peuvent collaborer. Les designers pourraient concevoir une série d’animations prédéfinies répondant aux besoins les plus courants et offrant une expérience homogène. Les développeurs pourraient alors récupérer le fruit de ce travail pour en créer des librairies JavaScript qui implémenteront ces animations. Ces librairies pourraient alors offrir une manière transparente de fournir 2 implémentations sous-jacentes : de la génération dynamique d’animations CSS3 à la volée ou une version de secours en pur JavaScript pour les anciens navigateurs.

Pour aller plus loin

Article sur les transitions CSS3 par David Catuhe: Introduction aux transitions CSS3
Les spécifications CSS3 Animations officielles : http://www.w3.org/TR/css3-animations/
Notre site IE Test Drive pour jouer avec les CSS3 animations: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm
D’autres articles intéressants :
- Alsacréations : Timing des animations et des transitions en CSS3
- Les évènements sont relativement limités selon la spécification CSS3 Animations. Joe Lambert propose alors une solution intéressante pour lever un évènement sur chacun des keyframes pour mieux suivre le déroulement de l’animation : CSS Animation Keyframe Events (Javascript solution)

David Rousset

Introduction to CSS3 Animations

David Rousset — Mon, 05 Dec 2011 23:08:08 GMT

Today’s HTML5 applications can provide awesome experiences thanks to the new CSS3 specifications. One of them is CSS3 Animations. It can help you building rich animations on HTML elements. This can provide interesting feedbacks to the users and enables fast & fluid UIs. As those new animations are most of time hardware accelerated by the GPU, they definitely raise up the quality bar of the new generation of HTML5 applications.

According to the “CSS Animation Module Level 3” specification on the W3C site, CSS3 Animations introduces defined animations, which specify the values that CSS properties will take over a given time interval. This specification is an extension to CSS Transitions.

As CSS3 Animation is an extension to CSS3 Transitions, you should first read the article of my colleague David Catuhe on Transitions here: Introduction to CSS3 Transitions.

We’ll see in this article an interesting demo highlighting the potential of CSS3 animations, how to build simple animations & how to handle fallback in JavaScript:

CSS3 Animations
Browsers Support
CSS3 Animations JavaScript fallback library
Conclusion

Let’s first start by quickly demonstrating what CSS3 Animations are. Here is a sample animation of a StarWars AT-AT which uses CSS3 Animations to animate parts of the transport (and which will fall back to JavaScript if your browser doesn’t support CSS3 Animations):

You can test this sample also in a separate window here: http://david.blob.core.windows.net/html5/css3atat/index.htm

Note: this sample has been tested successfully with native animations under IE10 PP3/PP4, Chrome 15, Firefox 8 & iPad 2 and with JS fallback under IE9 desktop & mobile (Windows Phone). For an unknown reason, it behaves in weird way under Opera 11.50 but works fine with the 11.60. Moreover, our lovely blogging platform is most of the time forcing the IE9 rendering engine via a meta tag. To force it back to the IE10 standards mode, press the F12 key and change the value of “Document Mode” back to IE10. Otherwise, view the demo in a separate window.

This sample is based on the awesome work done by Anthony Calzadilla. You can check other incredible demos on his website here: http://www.anthonycalzadilla.com . I’m a huge fan of the I twitty the fool sample using SVG & CSS3 Animation for instance.

CSS3 Animations

Introduction

Let’s first review on what you can play to build the animations. CSS3 Animations works basically on the same values as CSS3 Transition.

Here they are: click here to display/hide them

color: interpolated via red, green, blue and alpha components (treating each as a number, see below)
length: interpolated as real numbers.
percentage: interpolated as real numbers.
integer: interpolated via discrete steps (whole numbers). The interpolation happens in real number space and is converted to an integer using floor().
number: interpolated as real (floating point) numbers.
transform list: see CSS Transforms specification: http://www.w3.org/TR/css3-2d-transforms/
rectangle: interpolated via the x, y, width and height components (treating each as a number).
visibility: interpolated via a discrete step. The interpolation happens in real number space between 0 and 1, where 1 is "visible" and all other values are "hidden".
shadow: interpolated via the color, x, y and blur components (treating them as color and numbers where appropriate). In the case where there are lists of shadows, the shorter list is padded at the end with shadows whose color is transparent and all lengths (x, y, blur) are 0.
gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated.
paint server (SVG): interpolation is only supported between: gradient to gradient and color to color. They then work as above.
space-separated list of above: If the lists have the same number of items, each item in the list is interpolated using the rules above. Otherwise, no interpolation.
a shorthand property: If all the parts of a shorthand can be animated, then interpolation is performed as if each property was individually specified.

And the following properties must be supported for animations: click here to display/hide them

background-color (color)
background-image (only gradients)
background-position (percentage and length)
border-bottom-color (color)
border-bottom-width (length)
border-color (color)
border-left-color (color)
border-left-width (length)
border-right-color (color)
border-right-width (length)
border-spacing (length)
border-top-color (color)
border-top-width (length)
border-width (length)
bottom (length and percentage)
color (color)
crop (rectangle)
font-size (length and percentage)
font-weight (number)
grid-* (various)
height (length and percentage)
left (length and percentage)
letter-spacing (length)
line-height (number, length and percentage)
margin-bottom (length)
margin-left (length)
margin-right (length)
margin-top (length)
max-height (length and percentage)
max-width (length and percentage)
min-height (length and percentage)
min-width (length and percentage)
opacity (number)
outline-color (color)
outline-offset (integer)
outline-width (length)
padding-bottom (length)
padding-left (length)
padding-right (length)
padding-top (length)
right (length and percentage)
text-indent (length and percentage)
text-shadow (shadow)
top (length and percentage)
vertical-align (keywords, length and percentage)
visibility (visibility)
width (length and percentage)
word-spacing (length and percentage)
z-index (integer)
zoom (number)

SVG

The properties of SVG objects are animatable when they are defined as animatable:true in the SVG specification: http://www.w3.org/TR/SVG/struct.html. But at the time where this article is written, I didn’t manage to combine CSS3 Animation directly on SVG elements in any of the latest browsers versions. Today’s samples on the web are then doing a little trick: they are embedding SVG resources into different DIV animated by CSS3 like the I twitty the fool sample.

Declarations

To declare an animation in a CSS file, here is the kind of generic code you’ll need to write:

@keyframes name_of_the_animation {
  from {
   property_to_animate: initial_value;
  }
  50% {
     property_to_animate: intermediate_value;
  }
  to {
    property_to_animate: final_value;
  }
}

Which could also be written like that:

@keyframes name_of_the_animation {
  0% {
   property_to_animate: initial_value;
  }
  50% {
     property_to_animate: intermediate_value;
  }
  100% {
    property_to_animate: final_value;
  }
}

This animation definition declares 3 steps 0, 50 & 100%. You should at least set a from (or 0%) and a to (or 100%) steps to build a correct animation (minimum 2 steps thus). Once done, you may add as many keyframes as you’d like between 0 and 100% to handle precisely the various steps of your animations.

Once the definition declared, you can affect it to an element using the classical CSS3 selectors and you’ll need also to configure the animation options. Here the kind of generic blocks you’ll see:

#id_of_the_html_element {
    animation-name: name_of_the_animation;
    animation-duration: number_of_seconds s;
    animation-iteration-count: number | infinite;
}

To better understand, let’s review a real sample. First of all, as the CSS3 Animations specification is still in a draft stage, you’ll need to use the appropriate vendor prefix. Let’s use IE10 as a sample with the –ms prefix then. Let’s now see how the head of our AT-AT is moving.

Here’s the animation declaration:

@-ms-keyframes rotate-skull {
    0% {
        -ms-transform: rotate(0deg)
    }
    25% {
        -ms-transform: rotate(15deg)
    }
    50% {
        -ms-transform: rotate(-5deg)
    }
    55% {
        -ms-transform: rotate(0deg)
    }
    75% {
        -ms-transform: rotate(-10deg)
    }
    100% {
        -ms-transform: rotate(0deg)
    }
}

We’ve got 6 steps (0, 25, 50, 55, 75 & 100%) working on the CSS3 2D transform attributes by changing the value of the rotation.

The animation is then applied via this CSS rule:

#skull 
{
    -ms-animation-name: rotate-skull;
    -ms-animation-duration: 7s;
    -ms-animation-iteration-count: infinite;       
}

We’re targeting the <div> element having the “id=skull” and we’re applying the animation named “rotate-skull” on it. The animation will have to be completed in 7s and be played an infinite number of times.

Here is the living result if your browser supports CSS3 Animations:

We could have written this rule in a shorter manner using the animation shorthand property:

#skull {
    -ms-animation: rotate-skull 7s infinite;
}

The animations will be triggered as soon as a matching rule is applied. You can then play or stop animations simply via JavaScript or via CSS3 to play with the classes affected to a tag.

Non-linear animations

The “animation-timing-function” property can be used if you want non-linear animations. You can even mix the type of timing functions during each keyframe.

Basically, CSS3 animations will use cubic bezier curve to smooth the animation by computing different speed over its duration.

The following functions are supported:

linear: Constant speed
cubic-bezier: Speed will be computed according to a cubic bezier curve define by two control points : P0 and P1 (so you will have to define 4 values here : P0x, P0y and P1x, P1y.
ease: Speed will be computed with cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in: Speed will be computed with cubic-bezier(0.42, 0, 1, 1)
ease-inout: Speed will be computed with cubic-bezier(0.42, 0, 0.58, 1)
ease-out: Speed will be computed with cubic-bezier(0, 0, 0.58, 1)

Here is a simulation tool written by David Catuhe that uses pure JavaScript to show the impact of each timing function:

Note: this tool uses in-line SVG supported by Firefox, Chrome, Opera 11.60 & IE9/10. It won’t work properly under Opera 11.50 & Safari on iPad thus.

This is an awesome tool using SVG. You can even play with your mouse on the custom function to edit the curve. If you’d like to know more about this tool, please again have a look to David’s article.

If your browser supports CSS3 animations, let’s now see a simple demo using easing functions to animate a canvas tag containing an animated sprite with CSS3.

Here is the CSS3 animations code that will be used in this demo:

@-ms-keyframes demo {
    from {
    -ms-animation-timing-function: ease;
    -ms-transform: translateX(0px);
    }
    50% {
    -ms-animation-timing-function: ease-in;
    -ms-transform: translateX(300px);
    }
    to {
    -ms-animation-timing-function: ease-inout;
    -ms-transform: translateX(900px);
    }
}

#testCanvas
{
    -ms-animation-delay: 0s;
    -ms-animation-duration: 6s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-name: demo;
}

As well as all the vendor prefixes variations to make it works also in Google Chrome & Mozilla Firefox. And here’s the living output:

If your browser doesn’t support CSS3 Animation but support canvas, the sprite’s running animation should be displayed but the character won’t move through the width of the screen.

Note: if you’d like to know more about canvas and sprites animation, you can have a look to this article: HTML5 Gaming: animating sprites in Canvas with EaselJS

Delay

The “animation-delay” property simply allows an animation to begin execution some time after it is applied.

Events

3 events could be raised during an animation. They are named “AnimationStart”, “AnimationEnd” and “AnimationIteration”. Depending on your browser, the correct name will be for instance:

Chrome: webkitAnimationEnd
Firefox: mozAnimationEnd
Internet Explorer: MSAnimationEnd

The event will give you the following details:

animationName: name of the animation which raised the event
elapsedTime: the amount of time the animation has been running, in seconds

Here is an usage sample for IE10:

elementToAnimate.addEventListener("MSAnimationEnd", function () {
    alert("the end !");
}, false);

More about CSS3 animations

CSS3 animations are really useful for 2 main reasons:

Hardware acceleration: CSS3 Animations are most of the time directly handled by the GPU and could produce smoother results. This could then be a very interesting approach for mobile devices.
Better separation between code and design: I know there is some debates on this point but with David, we think that a developer shouldn’t be aware of animations or anything related to design as much as possible. In the same way the designer/artist must not be aware of JavaScript. CSS3 offers then this possibility and could let the designers work with their classical tools to generate the appropriate animations on elements, between screens, etc.

To highlight this importance in performance, the following HTML5 game I wrote using a full frame <canvas>: HTML5 Platformer run at 60 fps in IE9/IE10 on my PC but at 10 fps max on a iPad 2. This is because its CPU is much more limited and the iPad is currently not hardware-accelerating <canvas>. Using CSS3 Transitions/Animations to animate several smaller <canvas> elements could provide a huge performance boost for this game. Think about it when you’re targeting mobile devices!

Browsers Support

Since the Platform Preview 3 of IE10 available in the Windows Developer Preview, we’re supporting CSS3 Animations. And as you can see on the following report produced by caniuse.com, the CSS3 animations are now supported on a wide range of browsers:

But as the specification is not finished yet (working draft), you must use vendor’s prefixes such as –ms-, –moz-, –webkit-, –o- to make a cross-browsers compatible application.

But the question could be: how to handle browsers that don’t support this new feature?

First option is to just do nothing. Thanks to the beauty of graceful degradation, you could just let the user only see a static image if you’ve worked correctly. This is for instance the case of these 2 original samples of Anthony: I Twitty the Fool! and Pure CSS3 AT-AT Walker . When watched in IE9, it looks like we only have a static image. When watched in IE10, the very same code shows nice animations. IE10 users will then have an enhanced version while IE9 will still be able to view and use properly the website. The more modern your browser is, the more visual bonus you will have.

The second option is to detect the feature via a JS library like Modernizr and try to offer the same animation via a JavaScript library that will mimic the animations. This is what we usually call a fallback mechanism. Unfortunately, I haven’t found today a working & complete JS library that could replace CSS3 animations when not supported by the browser.

I have then written a sample JS library more or less specifically designed for the AT-AT sample.

CSS3 Animations JavaScript fallback library

Animations are nothing more than a series of transitions separated by a certain duration defined via the keyframes. I’ve then reused the concepts built by David Catuhe in his transitions helper library. I let you reviewing his article to check the base of the concepts behind the code.

On my side, I’ve added some support to animate the CSS3 2D Transform rotation & translation values and a way to iterate through the keyframes.

Here is the main part of the library you need to review:

// Animation object
// It need the HTML targeted element, the name of the animation, its duration & iteration count and
// the keyframes contained in an array object
// View the animation simply as a sequence of transitions played a certain number of times
ANIMATIONSHELPER.animation = function (target, name, duration, iterationcount, keyframes) {
    // saving the properties values
    this.name = name;
    this.duration = duration;
    this.iterationcount = iterationcount;
    this.target = target;

    var elapsedtime = 0;
    var keyframeduration = 0;
    var elapsedtime = 0;

    // Transforming the percentage of each keyframe into duration value
    for (var i = 0; i < keyframes.length; i++) {
        keyframeduration = ((keyframes[i].percentage * duration) / 100) - elapsedtime;
        keyframes[i].duration = keyframeduration;
        elapsedtime += keyframeduration;
    }

    this.currentTransition = { isPlaying: false };
    this.keyframes = keyframes;
    this.keyframesCount = keyframes.length;
    this.currentKeyFrameIndex = 0;

    // The nextTransition() function return the next transition to run
    // based on the current keyframe to play
    this.nextTransition = function (keyframe, ease, customEaseP1X, customEaseP1Y, customEaseP2X, customEaseP2Y) {
        var properties = [];
        var finalValues = [];
        var transition;

        // Compared to the original TRANSITIONSHELPER of David Catuhe
        // We need a specific code to play with the CSS3 2D Transform properties values
        if (keyframe.propertyToAnimate === "transform") {
            for (var i = 0; i < keyframe.transformType.length; i++) {
                properties.push(keyframe.transformType[i].type);
                if (keyframe.transformType[i].type == "rotate") {
                    finalValues.push({ deg: keyframe.transformType[i].value1 });
                }
                else {
                    finalValues.push({ x: keyframe.transformType[i].value1, y: keyframe.transformType[i].value2 });
                }
            }

            // Create a new transition
            transition = {
                name: this.name + this.currentKeyFrameIndex,
                target: this.target,
                properties: properties,
                finalValues: finalValues,
                originalValues: ANIMATIONSHELPER.extractValues(target.style[ANIMATIONSHELPER.currentTransformProperty], this.name),
                duration: keyframe.duration,
                startDate: (new Date).getTime(),
                currentDate: (new Date).getTime(),
                ease: ease,
                customEaseP1X: customEaseP1X,
                customEaseP2X: customEaseP2X,
                customEaseP1Y: customEaseP1Y,
                customEaseP2Y: customEaseP2Y,
                isPlaying: true,
                type: "transform"
            };

            return transition;
        }
        // If it's a classic property to animate, we're using more or less the TRANSITIONSHELPER as-is
        else {
            return TRANSITIONSHELPER.transition(this.target, keyframe.propertyToAnimate, keyframe.value, keyframe.duration, TRANSITIONSHELPER.easingFunctions.linear);
        }
    };

    // each animation object has a tick function
    // that will be called every 17 ms (to target 60 fps)
    // This ticker is monitoring the current state of the transition and
    // create a new transition as soon as the old one is finished/dead
    this.tick = function () {
        if (this.iterationcount > 0) {
            if (!this.currentTransition.isPlaying) {
                this.currentTransition = this.nextTransition(this.keyframes[this.currentKeyFrameIndex], ANIMATIONSHELPER.easingFunctions.linear);
                // We're using our own global ticker only for the 2D transformations
                // Otherwise, we're using the one from the TRANSITIONSHELPER library
                if (this.currentTransition.type === "transform") {
                    ANIMATIONSHELPER.currentTransitions.push(this.currentTransition);
                }
                this.currentKeyFrameIndex++;

                // We've reached the last keyframe (100%). We're starting back from the beginning
                if (this.currentKeyFrameIndex >= this.keyframesCount) {
                    this.currentKeyFrameIndex = 0;
                    this.iterationcount--;
                }
            }
        }
    };
};

The first part of the code is iterating through each keyframe to compute the exact duration specified by each percentage. We’re then defining a nextTransition() function that will dynamically build the next transition to play based on the current index into the keyframes collection. At last, we’ve got a tick() function that will monitor the current state of the transition applied. Once the transition is finished or dead, it asks for the next transition, push it to the stack of transitions to be played and moves the indexes.

This tick() function is called thanks to this code:

ANIMATIONSHELPER.launchAnimation = function (animation) {
    // Launching the tick service if required
    if (ANIMATIONSHELPER.tickIntervalID == 0) {
        ANIMATIONSHELPER.tickIntervalID = setInterval(ANIMATIONSHELPER.tick, 17);
    }

    // Little closure to launch the tick method on the appropriate animation instance
    setInterval(function () { animation.tick(); }, 17);
};

At last, we have this kind of code that helps us building the keyframes:

// Object to build a new generic keyframe (not working on the CSS3 2D Transform properties thus)
ANIMATIONSHELPER.keyframe = function (percentage, propertyToAnimate, value) {
    this.percentage = percentage;
    this.propertyToAnimate = propertyToAnimate;
    this.value = value;
};

//Objects to build specific rotation keyframes
ANIMATIONSHELPER.rotationkeyframe = function (percentage, value) {
    this.percentage = percentage;
    this.propertyToAnimate = "transform";
    this.transformType = [];
    this.transformType.push(new ANIMATIONSHELPER.transformType("rotate", value));
};

To highlight its usage, let’s recreate the previous simple CSS3 Animation skull sample with this library :

// number of times you'd like the animations to be run
var iterationsNumber = 100;

var skullElement = document.getElementById("skull");
var keyframes = [];
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(25, 15));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(50, -5));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(55, 0));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(75, -10));
keyframes.push(new ANIMATIONSHELPER.rotationkeyframe(100, 0));

var animation1 = new ANIMATIONSHELPER.animation(skullElement, "rotate-skull", 7000, 
                                                iterationsNumber, keyframes);

ANIMATIONSHELPER.launchAnimation(animation1, ANIMATIONSHELPER.easingFunctions.linear);

And here is the result that will now work in every browser supporting CSS3 2D Transform:

At last, the very first sample demonstrated at the beginning of this article uses Modernizr to check the support for CSS3 Animations. If it’s not the case, it loads the code that will mimic the keyframes defined in the file master.css, moz-master.css & ms-master.css :

// Checking if CSS3 animations is supported
if (!Modernizr.cssanimations) {
    // if so, we can use our JS fallback library
    supportElement.innerHTML = "CSS3 Animations <strong>are not supported</strong>";
    LoadJSAnimationsFallback();
}
else {
    // if CSS3 animation is supported, we have nothing to do. 
    // The *master.css stylesheets will be automatically applied & used.
    supportElement.innerHTML = "CSS3 Animations <strong>are supported</strong>";
}

The LoadJSAnimationsFallback() function is defined into jsfallback-master.js which simply contains all the keyframes declarations and the 19 animations needed to mimic the behavior created by Anthony in pure CSS3. In this approach, the designer then needs to rewrite all rules using the library. Another approach could be to parse one of the CSS file using an XHR call and to create dynamically the JavaScript calls to the library. This needs more work as you almost need to reimplement the CSS3 animations specifications in JavaScript!

You now have an idea on the way to build a fallback mechanism to support more browsers while starting to use the latest CSS3 specifications.

You can download the files for the main sample here: http://david.blob.core.windows.net/html5/css3atat/CSS3ATATNonMinified.zip

It contains the unminified versions of the animationsHelper.js, transitionsHelper.js, jsfallback-master.js JavaScript files as well as the various CSS3 declinaison files for the main vendors prefixes.

Conclusion

CSS3 Animations is a powerful technology to push HTML5 applications to a new level. It offers interesting scenarios. Designers could use it to create a new generation of UI screens with smooth & fluid animations without the need of developers. As it’s hardware-accelerated most of the time, developers should also pay attention to this specification. At last, both could collaborate. Designers could work on a series of predefined animations covering most scenarios. Developers could then create JavaScript libraries that will implement those animations. This library could offer in a transparent way 2 implementations: a dynamic generation of CSS3 on the fly or a fallback for older browsers.

Going further

Article about CSS3 Transitions by David Catuhe: Introduction to CSS3 Transitions
CSS3 Animations specifications: http://www.w3.org/TR/css3-animations/
IE Test Drive on CSS3 animations: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_animations.htm
Others useful posts:
- Events are relatively limited in the CSS3 Animation spec. Joe Lambert is proposing an interesting solution to trigger events on each keyframe: CSS Animation Keyframe Events (Javascript solution)

David Rousset

Vidéo, slides et ressources de ma session sur le développement d’un jeu de plateforme en HTML5

David Rousset — Mon, 21 Nov 2011 18:14:06 GMT

Si vous n’avez pas pu assister à ma session sur le développement d’un jeu de plateforme en HTML5/Canvas pendant notre évènement Microsoft Days 2011 ou si vous souhaitez revoir la session, en voici un enregistrement :

Download Video: MP4, WebM
HTML5 Video Player by VideoJS

Au format HTML5 <video> h264/webm bien sûr. J’utilise d’ailleurs au passage le player VideoJS que je vous conseille et qui propose de jolies CSS et un fallback automatique pour les anciens navigateurs.

Voici les exemples que je vous ai montrés pendant cette heure de session :

- Pour comparer les performances d’animations entre SVG et Canvas sur vos navigateurs : 1000 balles en Canvas et 1000 balles en SVG.
- Les framework de jeux MelonJS (qui marche désormais sous IE9), ImpactJS avec cette démo/benchmark et EaselJS avec ce jeu de Tower Defense : Pirates Love Daisies.

Ensuite, cette session reprenais surtout en très grande partie les 3 tutoriaux que j’ai publiés ici :

- Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS
- Jeux HTML5: construction des objets principaux & gestion des collisions avec EaselJS
- HTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS où vous pouvez d’ailleurs télécharger le source code complet du jeu.

Pour finir, voici quelques ressources complémentaires que je vous conseille :

- Pour aller plus loin sur la boucle “d’update”, on pourrait utiliser les Web Workers. Vous trouverez une introduction ici : Introduction aux Web Workers d’HTML5 : le multithreading version JavaScript
- Il existe des moteurs physiques “open source” pour JavaScript dont le plus connu est Box2D que vous pouvez voir ici : Box2DJS - Physics Engine for JavaScript
- Seth Ladd, un évangéliste de chez Google, s’est d’ailleurs amusé à combiner Web Workers et Box2D. Je vous conseille son excellente série de tutoriaux sur Box2D dont celui qui traite des Web Workers : Box2D and Web workers for JavaScript developers

Pour finir, vous trouverez les slides de cette session ici :

Et également sur slideshare ici : Développement d'un jeu de plateforme en html5

J’espère maintenant avoir suscité des vocations pour un jour vous recroiser riche et célèbre grâce à votre jeu vidéo HTML5 !

David

HTML5 Platformer: portage complet du jeu XNA vers

David Rousset — Fri, 09 Sep 2011 14:10:03 GMT

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. Avant de rentrer dans le vif du sujet, j’aimerais attirer votre attention sur mes motivations principales à l’écriture de ce jeu. Je cherchais tout simplement à mieux apprendre JavaScript en écrivant du code purement JS (sans aucune forme de dépendance avec le DOM). Je cherchais également à écrire un jeu fonctionnant sur tous les navigateurs ainsi que sur les périphériques “compatible” HTML5 lorsque cela est possible. Cela vous aidera peut-être à mieux comprendre certains choix que j’ai effectués.

Vous pouvez jouer au jeu directement au sein de cette iframe (avec les flèches droite et gauche & W pour sauter). Il vous suffit d’appuyer sur le bouton “Start” pour lancer la séquence de téléchargement des ressources puis du jeu lui-même.

Vous pouvez également jouer au jeu dans une fenêtre séparée en suivant ce lien : HTML5 Platformer

Note : ce jeu a été testé avec succès sous IE9/10, Chrome, Firefox 6+, Opera 11+, IE9 sur WP7 Mango et iPad 2. Les éléments de type texte ne sont pas affichés sous Opera à cause d’un bug en cours dans EaselJS. Enfin, si vous souhaitez vraiment jouer au jeu, un navigateur utilisant l’accélération matérielle est fortement recommandé. J’ai par exemple un framerate de 60 images/seconde sur mon Sony Vaio Z13 avec IE9.

Vous trouverez à la fin de cet article le code source complet non compressé (minified) au sein d’une archive ZIP à télécharger. J’ai essayé de commenter le code autant que possible pour le rendre le plus explicite possible. J’espère que vous apprendrez des choses intéressantes en le lisant. Si vous avez d’ailleurs des retours ou suggestions à faire dessus, n’hésitez pas à les faire à travers les commentaires de ce billet de blog.

Pour rappel, j’ai également déjà écrit 2 articles abordant les bases de la logique se trouvant derrière ce jeu:

- Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS
- Jeux HTML5: construction des objets principaux & gestion des collisions avec EaselJS

Construction du gestionnaire de téléchargements

Dans mon article précédent, le gestionnaire de téléchargements ne notifiait pas l’utilisateur du niveau de progression globale des téléchargements. C’était très mal. Heureusement, l’ajout de cette fonctionnalité fut un jeu d’enfant. Vous n’avez en effet qu’à ajouter une méthode tick() à votre objet and mettre à jour un élément de type Text présent dans le Stage d’EaselJS pour afficher la progression. Vous pouvez le voir en lisant le code du fichier ContentManager.js.

Par ailleurs, mon objectif étant de rendre le jeu compatible avec tous les navigateurs, j’ai encodé la musique et les éléments sonores au format MP3 et OGG. Si vous souhaitez en savoir davantage sur cette histoire de codec autour de la balise audio d’HTML5, je vous recommande chaudement la lecture de l’article de mon collègue Stanislas: HTML5 - ce qu il faut savoir sur la balise Audio et également son cahier de vacances HTML5 sur audio/video: Cahiers de vacances HTML5

Bon du coup, de mon côté, je télécharge soit la version MP3 soit la version OGG en utilisant le code suivant :

var canPlayMp3, canPlayOgg;
var audioExtension = ".none";

// Need to check the canPlayType first or an exception
// will be thrown for those browsers that don't support it      
var myAudio = document.createElement('audio');

if (myAudio.canPlayType) {
    // Currently canPlayType(type) returns: "", "maybe" or "probably" 
    canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
    canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
}

if (canPlayMp3)
    audioExtension = ".mp3";
else if (canPlayOgg) {
    audioExtension = ".ogg";
}

// If the browser supports either MP3 or OGG
if (audioExtension !== ".none") {
    SetAudioDownloadParameters(this.globalMusic, "sounds/Music" + audioExtension);
    SetAudioDownloadParameters(this.playerKilled, "sounds/PlayerKilled" + audioExtension);
    SetAudioDownloadParameters(this.playerJump, "sounds/PlayerJump" + audioExtension);
    SetAudioDownloadParameters(this.playerFall, "sounds/PlayerFall" + audioExtension);
    SetAudioDownloadParameters(this.exitReached, "sounds/ExitReached" + audioExtension);
}

J’ai passé un peu plus de temps à essayer de trouver la meilleure façon de précharger ou de télécharger les fichiers audio avant de démarrer le jeu. Dans le cas des éléments de type image, on ne peut tout simplement pas démarrer le jeu si nous n’avons pas entièrement téléchargé toutes les images localement. Sinon, tenter dessiner sur le canvas avec des images non encore entièrement présentes généra une belle exception.

Pour les éléments audio, mon souhait était d’avoir également entièrement le fichier son pour être sûr de bien le jouer le moment venu. Si le joueur meurt, je ne veux pas que le son soit soit joué 2 secondes après sa mort. Il faut pas louper l’heure du son de sa mort. Malheureusement, il n’y a pas de réelle manière de faire cela dans tous les navigateurs à l’heure actuelle. L’élément audio d’HTML5 a plutôt été conçu manifestement pour lire un flux audio en streaming. Il joue donc le son dès qu’il y a suffisamment de données disponibles. Nous n’avons pas par exemple un évènement qui nous indiquerait : “le fichier audio a entièrement été téléchargé”.

Ma dernière idée fut alors de télécharger une vesion encodée en base64 du fichier via un appel à XMLHTTPRequest et de passer le résultat à la balise audio ainsi par exemple : <source src="data:audio/mp3;base64,{base64_string}" />. Mais j’avoue ne pas avoir eu le courage/temps de tester si cela fonctionnait ou pas. Si de votre côté, vous avez fait des tests similaires, je suis très curieux du résultat. N’hésitez pas à les partager !

Finalement, la seule chose que je fais est d’appeler la méthode load() pour tenter de charger autant de données que possible avant de les utiliser. Sur un réseau lent, on pourrait alors tomber dans le cas où le jeu demande à jouer un son avant qu’il ne soit encore tout à fait disponible. Cela ne généra par d’erreurs mais le son ne sera tout simplement pas synchronisé avec l’action en cours.

Ruses autour des limitations de la balise audio HTML5

Pendant que je codais et testais le jeu, j’ai trouvé un autre souci avec l’élement <audio> d’HTML5 (j’avoue que je n’avais pas pensé passer autant de temps sur la partie audio du jeu!). Si le joueur prenais trop vite plusieurs diamants d’affilé, l’élément audio associé à cet évènement n’était pas capable de le gérer. Par exemple, au début, quand le joueur prenais 8 diamants d’affilé sur la même ligne, je ne pouvais entendre le son “GemCollected.mp3/ogg” qu’une à 3 fois. Il n’y avait pas de son de joué pour les 5 derniers éléments restant. Ensuite, après une certaine attente, le son fonctionnait à nouveau pour un nouveau diamant.

Après plusieurs expérimentations, je me suis finalement aperçu que tous les tests que j’effectuais étaient détaillés dans cet article : Multiple Channels for HTML5 Audio.

De mon côté, j’ai fini par utiliser une autre méthode de contournement. Dans l’objet ContentManager, je télécharge 8 fois le même son GemCollected au sein d’un tableau contenant des éléments de type Audio() :

// Used to simulate multi-channels audio 
// As HTML5 Audio in browsers is today too limited
// Yes, I know, we're forced to download N times to same file...
for (var a = 0; a < 8; a++) {
    this.gemCollected[a] = new Audio();
    SetAudioDownloadParameters(this.gemCollected[a], "sounds/GemCollected" + audioExtension);
}

Puis pendant le jeu, je tourne de manière cyclique au sein de ce tableau pour simuler plusieurs canaux audio. Vous pouvez trouver cette astuce dans la méthode UpdateGems() dans le fichier Level.js :

/// <summary>
/// Animates each gem and checks to allows the player to collect them.
/// </summary>
Level.prototype.UpdateGems = function () {
    for (var i = 0; i < this.Gems.length; i++) {
        if (this.Gems[i].BoundingRectangle().Intersects(this.Hero.BoundingRectangle())) {
            // We remove it from the drawing surface
            this.levelStage.removeChild(this.Gems[i]);
            this.Score += this.Gems[i].PointValue;
            // We then remove it from the in memory array
            this.Gems.splice(i, 1);
            // And we finally play the gem collected sound using a multichannels trick
            this.levelContentManager.gemCollected[audioGemIndex % 8].play();
            audioGemIndex++;
        }
    }
};

Je sais, je sais… Cela n’est pas joli, joli. Peut-être que les nouvelles APIs Audio nous aideront dans le futur à mieux gérer la partie audio de nos jeux. Je sais que Mozilla et Google travaillent sur de bonnes idées à ce sujet mais c’est pour l’instant loin d’être finalisé et adopté par tout le monde.

La nature mono-threadée de JavaScript

J’ai déjà abordé ce sujet à travers l’un de mes articles précédents : Introduction aux Web Workers d’HTML5 : le multithreading version JavaScript . Sans les WebWorkers, JavaScript est par nature mono-threadé. Même si les fonctions setInterval() et setTimeout() essaient de nous faire croire que plusieurs choses peuvent arriver en même temps, ce n’est pas le cas. Tout est sérialisé.

Dans mon contexte de jeu, cela engendre des problèmes sur la gestion des animations. Nous n’avons pas la garantie d’être appelé toutes les xxx millisecondes dans notre logique de mise à jour de nos éléments de jeu. Pour éviter cela, XNA fournit 2 boucles séparées : la boucle de dessin (Draw) et la boucle de mise à jour (Update). Dans mon cas, elles sont plus ou moins mélangées. Et c’est bien cela le problème. Imaginez par exemple que le temps écoulé entre 2 ticks est trop important (à cause du traitement mono-threadé global). Je pourrais alors louper un appel à ma méthode Update() qui devait normalement empêcher l’un de mes ennemies de sortir de son environnement. Les tests de collisions deviennent donc non prédictibles dans le temps et cela génère des problèmes très étranges… C’est pourquoi dans certaines parties du code, j’ai codé en dur le temps espéré entre 2 appels à 17 ms. Dans la version XNA, le temps écoulé est bien calculé et équivaut souvent à 16 ms environ (60 FPS). Une solution envisageable pour mieux gérer cette boucle de mise à jour (la méthode tick() dans EaselJS) serait d’utiliser des WebWorkers.

Du côté boucle de dessin, la solution pour gérer correctement les animations dans le jeux HTML5 pourrait venir dans le futur avec requestAnimationFrame(). Cependant, la spécification est aujourd’hui dans un état trop brouillonne et son implémentation varie d’un navigateur à l’autre. Par ailleurs, il y a actuellement des débats intéressants sur son utilisation ou non sur le web. Si le sujet vous intéresse, je vous conseille la lecture de ces 3 articles :

- Are We Fast Yet? de Dominic Szablewski, l’auteur du test HTML5 Benchmark (utilisant ImpactJS) : “At the moment requestAnimationFrame() is truly worthless for games.”
- requestAnimationFrame for smart animating de Paul Irish.
- requestAnimationFrame API de notre site IE Test Drive démontrant notre implémentation courante dans IE10.

Bonus spéciaux pour IE9

J’ai ajouté 2 petits bonus pour les utilisateurs d’IE9 venant tester mon petit jeu :

- un mode épinglé avec une icône haute résolution et une jump list vers des ressources tournant autour du jeu
- des boutons présents dans le mode “preview” de Windows 7 pour jouer au jeu d’une manière originale !

Vous pouvez ainsi glisser/déposer l’onglet contenant le jeu dans la barre des tâches Windows 7. IE9 prendra alors les couleurs du thème du jeu :

Vous disposerez également d’une liste de raccourcis :

Le jeu sera donc présent au sein de la barre des tâches de l’utilisateur comme si c’était une application native.

Pour finir, vous pouvez même jouer discrètement au jeu en utilisant la fonction de prévisualisation d’une fenêtre de Windows 7 !

Il y a 3 petits boutons pour bouger à gauche/droite et même sauter dans ce mode particulier.

Note : il y a une autre dédicace à IE plus ou moins caché dans l’un des niveaux. La trouverez-vous ?

Ajoutez de nouveaux niveaux au jeu

Les niveaux sont stockés dans le répertoire “/levels” dans des fichiers de type .TXT. Vous aurez 4 niveaux par défaut: 0.txt, 1.txt, 2.txt & 3.txt. Ils sont tout simplement téléchargés via une requête XMLHTTPRequest en mode asynchrone et ils sont parsés afin de construire le système de rendu et de collisions du jeu.

Voici par exemple le 2ème niveau du jeu :

....................
....................
..........X.........
.......######.......
..G..............G..
####..G.G.G.G....###
.......G.G.GCG......
......--------......
...--...........--..
......GGGG.GGGG.....
.G.G...GG..G....G.G.
####...GG..GGGG.####
.......GG..G........
.1....GGGG.GGGG.....
####################

Et voici le résultat de son interprétation dans le jeu :

Le caractère 1 indique où commence le joueur, X la sortie, G un diamant, # un bloc d’une plateforme, - un block que l’on peut traverser, C l’un des monstres, etc.

Donc si vous souhaitez ajouter un nouveau niveau au jeu, ajoutez simplement un nouveau fichier de type texte dans le répertoire et éditez le niveau vous-même avec… Notepad ! Vous devrez aussi modifier la valeur de la variable numberOfLevel contenue dans le fichier PlateformerGame.js.

Code source non compressé à télécharger

Chose promise, chose due, vous pouvez télécharger le code source ainsi que tous les éléments du jeu ici : HTML5 Platformer Non-minified.

J’espère que vous aurez apprécié cette série de 3 articles autour du jeu HTML5. Cela vous aidera peut-être à transformer vos idées de jeux en une réalité HTML5 !

David

HTML5 Platformer: the complete port of the XNA game to

David Rousset — Fri, 09 Sep 2011 07:56:37 GMT

After a couple of hours coding with JavaScript, I’ve finally finished porting the XNA 4.0 Platformer game sample to HTML5/Canvas with the help of the EaselJS gaming framework. This article will provide you the game and the story of some of the questions I’ve asked myself while coding it. If you’d like to know how the game works, simply read the JavaScript commented code available at the end of this article. Please note that my main goal was to better learn JavaScript by writing pure JS code (with no form of dependency to the DOM) and to write a cross-browsers working game and cross HTML5 compatible devices when possible also.

You can play the game directly inside this iframe (left & right arrows keys to move & W to jump). Just press the “Start” button to launch the download sequence and the game itself.

Or you can play with it in a separate window through this link: HTML5 Platformer

Note: this game has been tested with success under IE9/10, Chrome, Firefox 6+, Opera 11+, IE9 on WP7 Mango and iPad 2. The text elements are not displayed under Opera as there is a bug with EaselJS on this topic. At last, if you really want to play to the game, an hardware accelerated browser is highly recommended. I’ve got 60 FPS in these conditions on my Sony Vaio Z13.

At the end of this article, you’ll find the complete non-minified source code of this game inside a ZIP archive to download. I’ve tried to comment as much as possible the code to make it self-explicit. I hope you’ll learn some interesting things while reading it. If you have any feedbacks and/or suggestions on it, feel free to add it as a comment to this blog’s post.

I’ve also already written 2 articles covering the basics of the logic behind this game here:

- HTML5 Gaming: animating sprites in Canvas with EaselJS
- HTML5 Gaming: building the core objects & handling collisions with EaselJS

Building the content manager

In the previous article, the download content manager wasn’t notifying the user of the progression of the download process which was very bad. Hopefully, adding this feature was pretty straight forward as you just have to have a tick() method to your object and update a text element on the stage to show the progression. You can find that by reading the ContentManager.js file.

Moreover, as my objective was to be compatible with all browsers, I’ve then encoded the music & audio elements both in MP3 and OGG. If you’d like to know more about this HTML5 Audio tag codecs story, I recommend you having a look to my colleague’s article: 5 Things You Need to Know to Start Using Video and Audio Today

Then, I’m downloading either the MP3 or OGG version using the following code:

var canPlayMp3, canPlayOgg;
var audioExtension = ".none";

// Need to check the canPlayType first or an exception
// will be thrown for those browsers that don't support it      
var myAudio = document.createElement('audio');

if (myAudio.canPlayType) {
    // Currently canPlayType(type) returns: "", "maybe" or "probably" 
    canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
    canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
}

if (canPlayMp3)
    audioExtension = ".mp3";
else if (canPlayOgg) {
    audioExtension = ".ogg";
}

// If the browser supports either MP3 or OGG
if (audioExtension !== ".none") {
    SetAudioDownloadParameters(this.globalMusic, "sounds/Music" + audioExtension);
    SetAudioDownloadParameters(this.playerKilled, "sounds/PlayerKilled" + audioExtension);
    SetAudioDownloadParameters(this.playerJump, "sounds/PlayerJump" + audioExtension);
    SetAudioDownloadParameters(this.playerFall, "sounds/PlayerFall" + audioExtension);
    SetAudioDownloadParameters(this.exitReached, "sounds/ExitReached" + audioExtension);
}

I’ve spent more time trying to figure out what was the best way to preload or download the audio files before starting the game. In the case of the image elements, we can’t start the game at all if we don’t have downloaded all the images locally. Otherwise, trying to draw on the canvas with non-yet downloaded images will fail.

For the audio elements, my wish was to be sure to play it exactly when I will need it. If the player dies, I don’t want the sound to be played 2 sec after the fatal event. Unfortunately, there is no real way to do that properly in all browsers. The HTML5 Audio element has been made to stream the audio file and plays it as soon as enough data is available. We don’t have an event saying: “the audio file has been completely downloaded”. My idea was then to download a base64 version of the file using an XMLHTTPRequest and to pass it to the audio tag using <source src="data:audio/mp3;base64,{base64_string}" /> for instance. But I didn’t have the time to test if this is working or not. If you have done some similar tests, I’m interested in the results.

So finally, the only thing I’m doing is calling the load() method to start loading as much data as possible before using it. But on slow network, this won’t prevent the case where the audio won’t be ready while the game asks it. This won’t generate an error, but the sound won’t be synchronized with the action.

Working around HTML5 Audio tag limitations

While coding and testing the game, I’ve found another issue using the HTML5 <audio> tag (I didn’t expect spending so much time on the audio part!). If the player takes several gems too quickly, the audio element associated to this event can’t handle it. For instance, at the beginning, when the player was taking 8 gems on the same line, I was able to hear only 1 to 3 times the sound “GemCollected.mp3/ogg”. This means that no sound was emitted for the 5 remaining gems.

I’ve then started several experiments and I’ve finally discover that I’ve done everything already related in this article: Multiple Channels for HTML5 Audio.

On my side, I’ve finished by using another workaround. In the content manager object, I’m downloading 8 times the same GemCollected sound into an array of Audio() objects:

// Used to simulate multi-channels audio 
// As HTML5 Audio in browsers is today too limited
// Yes, I know, we're forced to download N times to same file...
for (var a = 0; a < 8; a++) {
    this.gemCollected[a] = new Audio();
    SetAudioDownloadParameters(this.gemCollected[a], "sounds/GemCollected" + audioExtension);
}

And during the game, I’m cycling inside this array to be able to “simulate” multichannels sound. You can find this trick in the UpdateGems() method of Level.js:

/// <summary>
/// Animates each gem and checks to allows the player to collect them.
/// </summary>
Level.prototype.UpdateGems = function () {
    for (var i = 0; i < this.Gems.length; i++) {
        if (this.Gems[i].BoundingRectangle().Intersects(this.Hero.BoundingRectangle())) {
            // We remove it from the drawing surface
            this.levelStage.removeChild(this.Gems[i]);
            this.Score += this.Gems[i].PointValue;
            // We then remove it from the in memory array
            this.Gems.splice(i, 1);
            // And we finally play the gem collected sound using a multichannels trick
            this.levelContentManager.gemCollected[audioGemIndex % 8].play();
            audioGemIndex++;
        }
    }
};

I know this is not efficient at all. Maybe some Audio APIs will help us in the future to better handle the audio in our games. I know Mozilla and Google are working on some good suggestions but this is far from being mainstream for the moment.

The mono-threaded JavaScript nature

I’ve already covered this topic inside one of my previous articles: Introduction to the HTML5 Web Workers: the JavaScript multithreading approach . Without WebWorkers, JavaScript is by nature mono-threaded. Even if setInterval() and setTimetout() try to make the illusions that multiple things occur at the same time, this is not the case. Everything is serialized.

In my gaming scenario, this leads to problems while handling the animations. We don’t have the guarantee of being call-backed every xxx milliseconds in our update logic. To avoid that, XNA provides 2 different separate loops: the drawing loop and the update loop. In my case, they are more or less merged. And this is where the problem is. For instance, if the elapsed time between 2 ticks is too important (due to the single threading processing), I could miss an update call that would prevent one of my enemies to hit testing properly its environment. This then leads to very weird results. This is why in some parts of the code, I’ve hard-coded the expected elapsed time to 17 milliseconds. In the XNA version, the elapsed time is compute and often equal to approximately 16 ms (60 FPS). The solution to better handle the update loop (the tick() method in EaselJS) could be to use some WebWorkers.

On the other side, the solution for HTML5 gaming to properly handle animations could come in the future with requestAnimationFrame(). Unfortunately, the specification is currently in a too draft stage and its implementation varies. Moreover, there are some interesting debates around it on the web. If you’re interested in this topic, I suggest you reading these 2 articles:

- Are We Fast Yet? by Dominic Szablewski, the author of HTML5 Benchmark (using ImpactJS) : “At the moment requestAnimationFrame() is truly worthless for games.”
- requestAnimationFrame for smart animating from Paul Irish.
- requestAnimationFrame API from our IE Test Drive site to show our current IE10 implementation.

Special Kudos for IE9

I’ve added 2 Kudos for IE9 users browsing my little game:

- pinned mode with a high resolution favicon and a jumplist to resources linked to the game
- thumbnail buttons to play the game in an original way!

You can then drag’n’drop the tab into your Windows 7 taskbar. IE9 will then reflect the theme of the game:

You will also have a jumplist available:

The game will then be available on the user’s taskbar as if it was a native application.

At last, you can discretely continue playing the game via the preview mode of Windows7!

There are 3 thumbnails buttons to move left/right and jump even in preview mode.

Note: there is another more or less hidden kudos to IE in one of the levels. Will you find it?

Adding new levels to the game

The levels are stored inside the “/levels” directory inside .txt files. You’ll find 4 levels by default: 0.txt, 1.txt, 2.txt & 3.txt. They are simply downloaded via an asynchronous XMLHTTPRequest call and they parsed to build the appropriate rendering & collisions system.

For instance, here is the 2nd level:

....................
....................
..........X.........
.......######.......
..G..............G..
####..G.G.G.G....###
.......G.G.GCG......
......--------......
...--...........--..
......GGGG.GGGG.....
.G.G...GG..G....G.G.
####...GG..GGGG.####
.......GG..G........
.1....GGGG.GGGG.....
####################

And here is the output in the game:

1 is where the player will start the game, X is the exit, G is a Gem, # is a platform block, - is a passable block, C one of the monsters/enemies, etc.

So, if you’d like to add levels to the game, simply add a new text file and edit the level yourself with… Notepad! You’ll need also to modify the value of the numberOfLevel variable inside PlatformerGame.js.

Non-minified source code

As promised, you can download the source code and all the assets of the game here: HTML5 Platformer Non-minified.

I hope you’ve enjoyed this series of 3 articles around HTML5 Gaming. Maybe this will help you transforming your gaming ideas into an HTML5 reality!

David

Tutorial HTML5: découverte des tags sémantiques, d’un soupçon de CSS3 et de Modernizr

David Rousset — Thu, 25 Aug 2011 13:33:01 GMT

Pendant l’été, avec Stanislas Quastana et David Catuhe, nous avons publié 3 cahiers de vacances autour d’HTML5 sur notre plateforme MSDN : Focus sur HTML5 . Mon cahier abordait les tags sémantiques d’HTML5, un peu de CSS3 et comment rendre le tout compatible même avec IE8 en utilisant Modernizr. Je vous propose de le découvrir ici à nouveau. Vous pouvez télécharger les 2 autres cahiers consacrés à la balise audio/vidéo d’HTML5 et à la création d’un jeu de casse-brique avec Canvas et SVG sur notre site MSDN. Vous pouvez également télécharger ce même tutorial au même endroit aux formats PDF et DOCX.

Introduction

L’objectif de cet exercice est de découvrir votre première page HTML5 utilisant quelques tags sémantiques ainsi qu’un peu de CSS3. Nous allons également voir, en utilisant certaines bonnes pratiques, comment commencer à utiliser ces nouvelles technologies tout en continuant de bien supporter d’anciens navigateurs comme IE8.

Prérequis à l’atelier

1 – Visual Studio 2010 SP1
2 – Web Standards Update : http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83
3 – Internet Explorer 9 ou tout autre navigateur supportant le HTML 5
4 – Téléchargez les sources pour commencer ce cahier ici : CahierVacancesHTML5.zip et rendez-vous dans le répertoire « DebutCahier »

Vous pouvez également bien entendu utiliser votre IDE préféré (VI, Notepad++, etc.) à la place de Visual Studio 2010 pour suivre ces exercices. Vous n’aurez pas beaucoup de mal à vous adapter je pense.

Les tags sémantiques

Avant l’arrivée des tags sémantiques d’HTML5, nous avions l’habitude de construire notre page avec un entête, un pied de page et une barre de navigation à l’aide de <div> habillée par CSS via l’affectation de classes.

Cela marchait très bien mais le problème d’une balise <div> est qu’elle n’a pas de sens. Ce n’est pas forcément grave dans de nombreux cas mais ici pour la structure de notre page, cela peut être vite embêtant en terme de sémantique et d’accessibilité. Si l’accessibilité d’HTML5 vous intéresse d’ailleurs, je vous conseille un article que j’ai écrit à ce sujet : Techdays 2011 – slides et ressources de la session Accessibilité d’HTML5 et Silverlight . Je vous conseille vivement aussi l’excellent article de Jean-Pierre Vincent en complément : Etat des lieux de l‘accessibilité de HTML5

En gros, cela donne ce genre de résultat entre HTML4 et HTML5 :

Pour avoir une meilleure idée de leurs utilisations, vous pouvez lire les spécifications du W3C: http://www.w3.org/TR/html5/sections.html#sections

Dans notre cas, nous allons partir de cette page nommée « Accueil.html » qui utilise ces nouveaux tags sémantiques HTML5 :

Note : cette page a été générée à partir du modèle de base proposé par ASP.NET MVC3 qui supporte désormais les tags sémantiques HTML5.

1. Parcours de la page avec la barre F12

Pour mieux comprendre comment cette page est structurée, nous allons utiliser la barre de développement intégrée à IE9. Pour cela, ouvrez la page « Accueil.html » dans Internet Explorer 9 et appuyez simplement sur la touche F12. Si vous connaissez l’outil Firebug pour Firefox, c’est tout simplement son équivalent nativement présent avec Internet Explorer.

Une fois la barre de développement affichée, cliquez sur le pointeur de sélection :

Puis visez le bas de la page où se trouve notre magnifique développeur sur la plage (ou sur la page si vous voulez !).

Vous obtiendrez le résultat suivant :

La partie que vous avez sélectionnée s’entoure d’un liseré bleu. Ensuite, on voit bien 3 parties différentes qui structurent notre page : <header>, <section> et <footer> où se trouve logiquement notre pied de page.

Amusez-vous ensuite à parcourir le reste de la page de la même manière. Vous verrez qu’à chaque fois cela vous positionne directement au bon endroit. La structure HTML apparaît à gauche et cela vous affiche également le style CSS actuellement affecté à cet élément sur la droite.

En parcourant le code de la page, vous noterez un élément indispensable si vous vous lancez dans l’aventure HTML5 :

<!DOCTYPE html>

La mise en place de cette balise DOCTYPE simplifiée par rapport à ce que vous avez peut-être déjà vu est indispensable si vous souhaitez qu’IE9+ bascule sur son moteur de rendu HTML5. Si vous ne commencez pas par cette balise, en commençant directement avec la balise <html> par exemple, IE9 basculera dans son mode « Quirks » et ne prendra donc pas en charge les nouveaux éléments HTML5 (video, canvas, etc.).

Pour vérifier le mode de rendu actuellement utilisé par IE9, vous pouvez à nouveau le faire grâce à la touche F12. Vérifiez ensuite le mode de document. Observez cet exemple :

Dans cette copie d’écran, nous sommes en mode « Quirks » et nous allons avoir des soucis avec l’affichage d’HTML5. Vous pouvez alors forcer le mode en « IE9 Standards » avec la barre F12 ou corriger le code du site pour utiliser la balise DOCTYPE tout simplement.

2. Utilisation de F12 pour modifier dynamiquement le CSS

A l’aide de la barre F12, modifiez le style CSS3 actuellement mis en place pour que le coin arrondi inférieur gauche de l’élément <footer> passe de 4px à 100px.

Pour cela, via la barre F12, positionnez-vous à nouveau sur l’élément <footer> et cherchez la propriété border-bottom-left-radius pour passer sa valeur de 4 à 100 pixels.

Vous pouvez également cliquez sur l’onglet CSS de la barre de développement et choisir la bonne feuille de style. Cela implique donc que vous sachiez déjà où vous cherchez. Ensuite, utilisez la zone de recherche pour trouver la propriété qui vous intéresse :

Vous devriez voir alors instantanément le résultat de votre modification dans la page :

Le coin inférieur gauche du pied de page a bien été davantage arrondi. La barre F12 est donc très pratique pour tester en live quelques modifications. Vous pouvez même ajouter de nouvelles règles CSS ou des attributs à une règle existante via cette même barre.

Sans le savoir vous avez par ailleurs déjà joué avec l’une des nouveautés de CSS3 présente dans le module CSS3 Background & Borders du W3C. Félicitations !

Ce module n’est pas le plus critique de CSS3 mais c’est l’un des plus simples à comprendre et à expérimenter. Il permet tout simplement d’arrondir les coins de n’importe quel élément HTML ainsi que de positionner également une ombre portée via la propriété box-shadow. Retrouvez davantage d’informations en Français sur notre site MSDN ici : Module CSS3 Arrière-plans et bordures

3. Modification de la feuille de style avec Visual Studio 2010

A l’aide de Visual Studio 2010, ouvrez le fichier « Site.css ». Commencez par bien vérifier que vous êtes actuellement en train de valider du CSS3 et non pas du CSS 2.1 :

La validation et auto-complétion d’HTML5 et de CSS3 vous est offerte par l’installation du prérequis Web Standards Update. Si vous ne l’avez pas installé, ce n’est pas grave. Visual Studio sous-lignera simplement les propriétés CSS3 en rouge puisqu’il ne les connait pas sans cette extension.

Une fois la feuille de style ouverte, modifiez une fois pour toute le style du <footer> pour avoir notre coin arrondi inférieur gauche de 100 pixels :

footer, 
#footer 
{
    background: url(ImagePiedPage.png) no-repeat left bottom;
    background-color: #fff;
    color: #999;
    padding: 0;
    text-align: center;
    line-height: 10em;
    margin: 0 0 30px 0;
    border-radius: 0 0 4px 100px;
}

Au passage, on va en profiter pour faire une ombre portée justement pour faire un effet de halo autour de nos boutons de navigation contenu dans la balise <nav> du coup. Voici la partie de CSS qui nous intéresse :

ul#menu li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #034af3;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

Et cela devrait vous donner ce magnifique résultat :

C’est peut-être subtil mais vous devriez le voir. Amusez-vous par exemple, via la barre F12, à activer/désactiver l’application de cette attribut pour voir la différence.

4. Afficher la page correctement sous IE8

Si vous testez le rendu sous Internet Explorer 8 en forçant par exemple le moteur de rendu associé avec la barre F12 d’IE9 :

Votre page devrait être toute cassée :

Pour quelles raisons ? Tout simplement parce que les balises <header>, <nav> et <footer> que nous utilisons actuellement sont des nouvelles balises HTML5 qu’IE8 ne connait pas. Or, IE8 et inférieurs ont la mauvaise habitude d’ignorer purement et simplement les tags qu’ils ne connaissent pas en ne les créant pas dans le DOM. Du coup, si vous comptiez sur ces tags pour appliquer vos feuilles de style, cela casse tout votre design de page.

La 1^ère solution consiste simplement créer ces nouveaux tags dans le DOM (Document Object Model) d’IE par JavaScript avec un code équivalent à celui-là :

<script>
    document.createElement("header");
    document.createElement("footer");
    document.createElement("section");
    document.createElement("nav");
</script>

IE8 ne connaitra pas pour autant leurs significations mais le fait de les rendre présentes dans le DOM nous permettra d’appliquer désormais correctement le style associé à ces nouvelles balises.

Ainsi, si vous mettez ce code tout en haut de la page « Accueil.html », l’affichage sous IE8 devient magiquement correct :

Nous avons simplement perdus les bords arrondis et les effets d’ombre portée. Ces effets ne seront alors affichés qu’aux navigateurs les plus récents comme « bonus visuels ». Mais notre site continuera d’être fonctionnel pour les navigateurs les plus anciens. Cette approche est la base de ce que nous appelons le « graceful degradation » en Anglais ou dégradation élégante. CSS par nature se prête très bien à cet exercice. Cela vous permet ainsi de commencer à utiliser des nouveautés de CSS3 sans pour autant vous couper des navigateurs les plus anciens.

5. Moderniser vos sites avec Modernizr

Modernizr est une librairie JavaScript qui va nous permettre 2 choses :

1 – Créer toutes les nouvelles balises HTML5 pour les anciens navigateurs pour nous pour éviter d’avoir à faire ce que nous avons fait juste avant
2 – De faire ce que l’on appelle du « feature detection » en Anglais ou détection de fonctionnalités supportées par le navigateur.

Cette librairie est désormais présente par défaut dans les modèles de projets d’ASP.NET MVC3.

Pour le 1^er point, reprenez le code de la page « Accueil.html » et remplacez ce bloc :

<script>
    document.createElement("header");
    document.createElement("footer");
    document.createElement("section");
    document.createElement("nav");
</script>

Juste par cette ligne :

<script src="./Scripts/modernizr-1.7.min.js" type="text/javascript"></script>

Et le tour est joué ! Votre page utilisant les nouveaux tags HTML5 fonctionne toujours bien sous IE8.

Mais ce n’est pas tout. Modernizr va vous permettre de tester les capacités du navigateur par code JavaScript et d’adapter le rendu en fonction de cela.

Une fois la librairie chargée, en mode de rendu IE9, appuyez sur la touche F12 et regardez ce qui a été ajouté à l’élément racine <html> :

On voit que l’attribut « class » a été rempli en fonction de ce que votre navigateur supporte.

Note : il est cependant important de noter que Modernizr n’effectue finalement qu’un simple test binaire. Il répond à la question « votre navigateur supporte-t-il XXX ? » (Oui/Non). Ce n’est pas un test qualitatif pour savoir ensuite si votre navigateur supporte toutes les fonctionnalités associées et surtout si l’implémentation de cette fonctionnalité est correcte ou pas.

Utilisons maintenant Modernizr pour un cas que je trouve intéressant. IE9 supporte désormais le format vectoriel de dessin SVG. Cela nous permet ainsi d’envisager d’afficher des diagrammes, schéma ou toute autre forme d’image en vectoriel pour augmenter la qualité visuelle de nos pages. Oui mais que se passe-t-il pour les anciens navigateurs ne supportant pas SVG ? Et bah nous allons leur donner une version PNG de la même image.

Reprenez la page « Accueil.html » et ajoutez cette déclaration d’image sous l’unique paragraphe de notre section « main » :

<img src="" id=imageThreadJS alt="Diagramme illustrant le cote mono-thread de JavaScript" />

Nous préparons ici une zone qui contiendra notre image. Nous allons y stocker l’illustration issue de l’article suivant : Introduction aux Web Workers d’HTML5 : le multithreading version JavaScript

Ensuite, insérez ce bloc de code à la fin de la page « Accueil.html » juste avant la fermeture de la balise <body> :

<script>
    var imgThreadJS = document.getElementById("imageThreadJS");
    if (Modernizr.svg) {
        imgThreadJS.src = "http://david.blob.core.windows.net/html5/SVGSingleThreadJS.svg";

    }
    else {
        imgThreadJS.src = "http://david.blob.core.windows.net/html5/SVGSingleThread.png";
    }
</script>

Ce code s’occupe de retrouver votre élément de type image puis en fonction de ce que Modernizr nous aura indiqué, nous irons chercher soit la version vectorielle de l’image (.SVG) soit la version bitmap de l’image (.PNG).

Voici ainsi le résultat avec le moteur d’IE9 Standard :

Et voici le résultat avec le moteur d’IE8 :

Note : la détection de fonctionnalités est clairement l’approche que vous devez désormais avoir sur toutes vos nouvelles créations. Ne faites surtout plus de détection de version de navigateurs (ou « user-agent sniffing » en Anglais).

Conclusion

En définitive, si IE9 ou un autre navigateur moderne comme Chrome, Firefox ou Opera arrive sur la page, ils pourront profiter d’une version du site plus moderne visuellement avec du CSS3 et du SVG.

Si IE8 ou un autre navigateur plus ancien arrive sur la page, l’affichage sera peut-être moins aguichant avec une version PNG des images et moins d’effets visuels mais le site continuera d’être fonctionnel.

C’est clairement dans cette direction que vous devrez travailler si vous souhaitez commencer à mettre en production du HTML5/CSS3 & Cie sur vos sites.

Ressources complémentaires

· HTML5: Etat des lieux et projection vers l’avenir
· Introduction aux APIs graphiques d’HTML5: SVG & Canvas
· TechDays 2011 : Introduction à HTML5
· TechDays 2011 - les slides de la session Introduction à HTML5
· Mais qui construit l'HTML5 ?
· HTML5 : respect des standards, tests et marketing
· Site web du W3C pour HTML5

Fun

On s’est bien marrés avec David et Stanislas en réalisant une vidéo de teasing où on fait les andouilles avec chapeaux de paille et shorts de bain. Je ne résiste pas au plaisir de vous la partager à nouveau (en HTML5 h264/WebM bien sûr!) :

Et spéciale décidasse à ma grand-mère g33k !

David

Jeux HTML5: construction des objets principaux & gestion des collisions avec EaselJS

David Rousset — Mon, 22 Aug 2011 16:21:38 GMT

Nous avons vu dans l’article précédent comment animer des sprites avec EaselJS : Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS

Nous allons maintenant voir comment créer certains des objets de base de notre jeu comme les ennemies ou le héro de notre jeu de plateforme. Nous verrons aussi comment implémenter un mécanisme basique de collision entre les 2. Cette fois-ci ce tutoriel sera principalement basé sur l’exemple suivant: EaselJS Game sample

Vous trouverez également un exemple fonctionnel à la fin de cet article. C’est la base d’un petit jeu.

Cette article est le 2ème d’une série de 3 articles :

Construction de l’objet Monster

Cet objet dispose de 2 états :

1 – En train de courir sur la longueur de l’écran
2 – Etre en état de repos une fois l’un des bords de l’écran atteint avant de courir à nouveau.

Oui, je sais, la vie d’un monstre n’est pas palpitante. Mais c’est comme ça ! Attention, aussi stupide soit-il, si vous le touchez vous mourrez.

Cette fois-ci, j’ai fusionné en un unique fichier PNG les sprites venant de l’exemple XNA Platformer définissant les séquences où le personnage court et où il reste immobile. Voici par exemple le PNG associé au monstre MonsterC :

Notre objet monstre est défini au sein du fichier Monster.js et utilise l’objet BitmapSequence comme prototype qui se prête en effet très bien à ce genre de scénarios. Il contient tout ce dont nous avons besoin: une méthode tick(), un mécanisme de “hit testing” pour vérifier les collisions et une manière de gérer nos sprites sous la forme de plusieurs animations séparées.

Il nous faut juste y ajouter de la logique spécifique à notre monstre comme la gestion d’un timer gérant l’état “au repos” et cela devrait faire l’affaire. Voici ainsi le code du fichier Monster.js définissant donc nos ennemies dans le jeu :

(function (window) {
    function Monster(monsterName, imgMonster, x_end) {
        this.initialize(monsterName, imgMonster, x_end);
    }
    Monster.prototype = new BitmapSequence();

    // propriétés publiques
    Monster.prototype.IDLEWAITTIME = 40;
    Monster.prototype.bounds = 0; //taille du cercle visible
    Monster.prototype.hit = 0;     

    // constructeur:
    // unique pour éviter d'écraser celui de la classe de base 
    Monster.prototype.BitmapSequence_initialize = Monster.prototype.initialize; 
    Monster.prototype.BitmapSequence_tick = Monster.prototype.tick; 

    // variables membres pour gérer l’état au repos
    // et le temps à attendre avant de courir à nouveau
    this.isInIdleMode = false;
    this.idleWaitTicker = 0;

    var quaterFrameSize;

    Monster.prototype.initialize = function (monsterName, imgMonster, x_end) {
        var localSpriteSheet = new SpriteSheet(
                    imgMonster, //image à utiliser
            64, //largeur de chacun des sprites
            64, //hauteur
            {
            walk_left: [0, 9],
            idle: [10, 20]
        });

        localSpriteSheet = SpriteSheetUtils.flip(
        localSpriteSheet,
        {
            walk_right: ["walk_left", true, false]
        });

        this.BitmapSequence_initialize(localSpriteSheet);
        this.x_end = x_end;

        this.regX = this.spriteSheet.frameWidth / 2 | 0;
        this.regY = this.spriteSheet.frameHeight / 2 | 0;

        quaterFrameSize = this.spriteSheet.frameWidth / 4;

        // on commence à jouer la 1ère séquence 
        this.gotoAndPlay("walk_right");     

        // mise en place d’une ombre portée. Attention, gros impact sur les performances
        // en fonction des navigateurs/plateformes matérielles.
        this.shadow = new Shadow("#000", 3, 2, 2);

        this.name = monsterName;
        this.speed = 1;
        // 1 = droite & -1 = gauche
        this.direction = 1;
        // vitesse
        this.vX = 1 | 0.5;
        this.vY = 0;
        // on saute directement à la 1ère frame de la séquence walk_right
        this.currentFrame = 21;
    }

    Monster.prototype.tick = function () {
        // Afin  de ralentir la boucle d’animation du sprite, on ne redessine pas à chaque tick
        // Avec un coup de Modulo 4, on divise la vitesse par 4 (incroyable non ?)
        var speedControl = Ticker.getTicks() % 4;

        if (speedControl == 0) {
            this.BitmapSequence_tick();
        }

        if (!this.isInIdleMode) {
            // On bouge le sprite en fonction de la direction et de la vitesse
            this.x += this.vX * this.direction;
            this.y += this.vY * this.direction;

            // On teste les bords de l’écran sinon notre sprite partirait vivre ailleurs (dans le cloud?)
            if (this.x >= this.x_end - (quaterFrameSize + 1) || this.x < (quaterFrameSize + 1)) {
                this.gotoAndPlay("idle");
                this.idleWaitTicker = this.IDLEWAITTIME;
                this.isInIdleMode = true;
            }
        }
        else {
            this.idleWaitTicker--;

            if (this.idleWaitTicker == 0) {
                this.isInIdleMode = false;

                if (this.x >= this.x_end - (quaterFrameSize + 1)) {
                    // Nous avons atteint le côté droit de l'écran
                    // Nous devons maintenant marcher vers la gauche
                    this.direction = -1;
                    this.gotoAndPlay("walk_left");
                }

                if (this.x < (quaterFrameSize + 1)) {
                    // Nous avons atteint le côté gauche de l'écran
                    // Nous devons maintenant marcher vers la droite
                    this.direction = 1;
                    this.gotoAndPlay("walk_right");
                }
            }
        }
    }

    Monster.prototype.hitPoint = function (tX, tY) {
        return this.hitRadius(tX, tY, 0);
    }

    Monster.prototype.hitRadius = function (tX, tY, tHit) {
        if (tX - tHit > this.x + this.hit) { return; }
        if (tX + tHit < this.x - this.hit) { return; }
        if (tY - tHit > this.y + this.hit) { return; }
        if (tY + tHit < this.y - this.hit) { return; }

        //test basé sur une distance à base de cercle
        return this.hit + tHit > Math.sqrt(Math.pow(Math.abs(this.x - tX), 2) 
                        + Math.pow(Math.abs(this.y - tY), 2));
    }

    window.Monster = Monster;
} (window));

La collision est gérée par les méthodes hitPoint() et hitRadius(). Le “hit testing” est fait via des cercles ce qui est moins précis qu’un modèle de boites.

Note: il y actuellement un bug dans l’objet SpriteSheetUtils sur la méthode flip(). Cela a été remonté ici: SpriteSheetUtils working canvas cache . Le comportement du bug est assez étrange. Dans mon cas, si j’instantie plusieurs montres avec des séquences de sprites bien différentes (MonsterA.png, MonsterB.png, etc.), tous les monstres auront malgré tout le même look comme s’ils avaient partagé qu’un seul et même fichier PNG. Cela semble du à un problème avec un objet canvas servant de cache. Il est simplement résolu en recréant le canvas de travail secondaire à chaque fois que l’on appelle la méthode flip(). C’est ce que j’ai fait dans la version que vous pouvez tester à la fin.

Construction de l’objet Player

En tant que digne représentant du joueur humain qui l’anime, la logique associée au personnage principal du jeu est un peu différente des monstres et bien entendu plus évoluée (quoique…) !

Par exemple, les positions x & y sont normalement contrôlées par l’utilisateur souhaitant bouger son personnage avec son clavier. Par ailleurs, notre héro dispose de plus d’animations que nos monstres puisqu’il peut mourir, sauter, bouger, célébrer sa victoire et être immobile.

Voici ainsi le PNG qui lui est dédié :

Bon, dans ce tutoriel, on va rester simple. Nous allons uniquement gérer les séquence où il court, il meurt et où il reste immobile. Cependant, chargeons malgré tout toutes les animations pour un potentiel usage futur. Voici le code du fichier Player.js. La lecture du code et de ses commentaires devraient vous fournir suffisamment de détails pour en comprendre son fonctionnement :

(function (window) {
    function Player(imgPlayer, x_end) {
        this.initialize(imgPlayer, x_end);
    }
    Player.prototype = new BitmapSequence();

    // propriétés publiques
    Player.prototype.bounds = 0;
    Player.prototype.hit = 0;
    Player.prototype.alive = true;

    // constructeur:
    // unique pour éviter d'écraser celui de la classe de base     
    Player.prototype.BitmapSequence_initialize = Player.prototype.initialize;     
    Player.prototype.BitmapSequence_tick = Player.prototype.tick; 

    var quaterFrameSize;

    Player.prototype.initialize = function (imgPlayer, x_end) {
        var localSpriteSheet = new SpriteSheet(
                    imgPlayer, // image à utiliser
            64, //largeur de chacun des sprites
            64, //hauteur
            {
            walk_left: [0, 9],
            die_left: [10, 21, false],
            jump_left: [22, 32],
            celebrate_left: [33, 43],
            idle: [44, 44]
        });

        localSpriteSheet = SpriteSheetUtils.flip(
        localSpriteSheet,
        {
            walk_right: ["walk_left", true, false],
            jump_right: ["jump_left", true, false],
            die_right: ["die_left", true, false, false],
            celebrate_right: ["celebrate_left", true, false]
        });

        this.BitmapSequence_initialize(localSpriteSheet);
        this.x_end = x_end;

        this.regX = this.spriteSheet.frameWidth / 2 | 0;
        this.regY = this.spriteSheet.frameHeight / 2 | 0;

        quaterFrameSize = this.spriteSheet.frameWidth / 4;

        // La 1ère séquence jouée est celle "au repos"
        this.gotoAndPlay("idle");    
        this.isInIdleMode = true;

        // mise en place des ombres
        this.shadow = new Shadow("#000", 3, 2, 2);
        this.name = "Hero";
        this.speed = 1;
        // 1 = droite & -1 = gauche
        this.direction = 1;

        // vitesse
        this.vX = 4 | 0.5;
        this.vY = 0;
        // on commence directement à la 1ère frame de la séquence walk_right
        this.currentFrame = 66;

        // Taille des bords du cercle pour les tests de collisions
        this.bounds = 28;
        this.hit = this.bounds;
    }

    Player.prototype.tick = function () {
        // Toujours la division de la vitesse par 4
        var speedControl = Ticker.getTicks() % 4;

        if (speedControl == 0) {
            this.BitmapSequence_tick();
        }

        if (this.alive && !this.isInIdleMode) {
            // Test sur les bords de l’écran
            // Le joueur est bloqué sur chacun des bords mais on souhaite qu'il continue 
            // de courir quand même
            if ((this.x + this.direction > quaterFrameSize) && 
                (this.x + (this.direction * 2) < this.x_end - quaterFrameSize + 1)) {
                // On bouge le sprite en fonction de sa direction et sa vitesse
                this.x += this.vX * this.direction;
                this.y += this.vY * this.direction;
            }
        }
    }

    window.Player = Player;
} (window));

Le héro sera contrôlé à distance depuis la page principale.

Construction de l’objet Content Manager

En général, la première étape d’un jeu HTML5 est de tout simplement télécharger les ressources dont il a besoin avant de démarrer le jeu. Dans mon cas, vous trouverez un gestionnaire de téléchargements et de ressources très basique au sein du fichier ContentManager.js :

En voici le code :

// Utilisé pour télécharger toutes les ressources utiles 
// hébergées sur le serveur web
function ContentManager() {
    // fonction qui sera rappelée une fois que tous les éléments
    // auront été téléchargés (fonction de callback)
    var ondownloadcompleted;
    // Nombre d'éléments à télécharger
    var NUM_ELEMENTS_TO_DOWNLOAD = 15;

    // Pour l'affectation de la méthode de callback
    this.SetDownloadCompleted = function (callbackMethod) {
        ondownloadcompleted = callbackMethod;
    };

    // Nous avons 4 types d’ennemies, 1 héro & 1 type de bloc
    this.imgMonsterA = new Image();
    this.imgMonsterB = new Image(); 
    this.imgMonsterC = new Image(); 
    this.imgMonsterD = new Image();
    this.imgTile = new Image();
    this.imgPlayer = new Image();

    // le fond du jeu peut être créé à partir de 3 claques différents
    // ces 3 calques existent en 3 versions
    this.imgBackgroundLayers = new Array();
    var numImagesLoaded = 0;

    // méthode publique pour lancer le téléchargement
    this.StartDownload = function () {
        SetDownloadParameters(this.imgPlayer, "img/Player.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgMonsterA, "img/MonsterA.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgMonsterB, "img/MonsterB.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgMonsterC, "img/MonsterC.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgMonsterD, "img/MonsterD.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgTile, "img/Tiles/BlockA0.png", handleImageLoad, handleImageError);

        // téléchargement des 3 claques * 3 versions
        for (var i = 0; i < 3; i++) {
            this.imgBackgroundLayers[i] = new Array();
            for (var j = 0; j < 3; j++) {
                this.imgBackgroundLayers[i][j] = new Image();
                SetDownloadParameters(this.imgBackgroundLayers[i][j], "img/Backgrounds/Layer" + i 
                                      + "_" + j + ".png", handleImageLoad, handleImageError);
            }
        }
    }

    function SetDownloadParameters(imgElement, url, loadedHandler, errorHandler) {
        imgElement.src = url;
        imgElement.onload = loadedHandler;
        imgElement.onerror = errorHandler;
    }

    // notre gestionnaire d'évènement en cas de succès 
    function handleImageLoad(e) {
        numImagesLoaded++

        // Si tous les éléments ont été téléchargés avec succès
        if (numImagesLoaded == NUM_ELEMENTS_TO_DOWNLOAD) {
            numImagesLoaded = 0;
            // On rappelle la méthode de callback mise en place par SetDownloadCompleted
            ondownloadcompleted();
        }
    }

    // appelée si une erreur survient pendant le téléchargement (une 404 par exemple)
    function handleImageError(e) {
        console.log("Error Loading Image : " + e.target.src);
    }
}

Je sais. Il manque pas mal de choses pour en faire un vrai bon gestionnaire de contenu : une barre de progression sur l’état des téléchargements, un meilleur gestionnaire d’erreurs, l’utilisation éventuelle du localStorage, un code peut-être plus générique, etc. Mais bon, j’ai essayé d’en faire un le plus simple et facile à comprendre.

Rassemblons toutes les pièces dans la page principale

Maintenant que nous avons les blocs de base de notre jeu, on peut commencer à s’amuser à les assembler pour construire un jeu de plateforme extrêmement simple. Pour cela, je vous propose de revoir chacune des parties de la page principale hébergeant notre petit jeu.

Dans la méthode init(), nous instancions l’objet Stage d’EaselJS puis nous utilisons l’objet ContentManager vu juste précédemment pour télécharger l’ensemble de nos fichier PNG:

function init() {
    // on récupère l’instance du canvas puis on charge les images
    canvas = document.getElementById("testCanvas");

    // création de l’objet Stage que l’on fait pointer vers notre canvas
    stage = new Stage(canvas);
    // on récupère la largeur et la hauteur du canvas pour de futurs calculs savants
    screen_width = canvas.width;
    screen_height = canvas.height;

    contentManager = new ContentManager();
    contentManager.SetDownloadCompleted(startGame);
    contentManager.StartDownload();
}

Une fois le téléchargement fini, la fonction startGame() est appelée. La 1ère chose qu’elle fait est d’appeler la fonction CreateAndAddRandomBackground(). Cette fonction créée simplement un arrière-plan aléatoire en utilisant les possibilités offertes par les 3 claques. Puis, notre héro est créé et sa position verticale Y est déterminée de manière aléatoire. Juste en dessous du héro, on construit une plateforme très simple sur laquelle notre héro pourra faire son petit jogging. Pour finir, on construit les 4 objets de type Monster() à l’intérieur du tableau Monsters et on ajoute l’ensemble au jeu/au stage :

function startGame() {
    // Nombre aléatoire pour positionner verticalement notre 
    // Héro & ses méchants ennemies sur 8 paliers possibles
    var randomY;
    
    CreateAndAddRandomBackground();

    // Notre héro peut être déplacé avec les flèches (gauche, droite)
    document.onkeydown = handleKeyDown;
    document.onkeyup = handleKeyUp;

    // On créé le héro
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Hero = new Player(contentManager.imgPlayer, screen_width);
    Hero.x = 400;
    Hero.y = randomY;

    // Bloc sur lequel notre héro et éventuellement quelques ennemies pourront marcher
    bmpSeqTile = new BitmapSequence(new SpriteSheet(contentManager.imgTile, 40, 32));
    bmpSeqTile.regX = bmpSeqTile.frameWidth / 2 | 0;
    bmpSeqTile.regY = bmpSeqTile.frameHeight / 2 | 0;

    // On prends le même motif que l'on duplique sur toute la largeur de l'écran
    for (var i = 0; i < 20; i++) {
        // On clone le motif original
        var bmpSeqTileCloned = bmpSeqTile.clone();

        // On positionne ses propriétés d’affichage
        bmpSeqTileCloned.x = 0 + (i * 40);
        bmpSeqTileCloned.y = randomY + 32;

        // puis on l'ajoute dans les objets à afficher
        stage.addChild(bmpSeqTileCloned);
    }

    // Notre collection personnelle de monstres
    Monsters = new Array();

    // Création du 1er type de monstres
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Monsters[0] = new Monster("MonsterA", contentManager.imgMonsterA, screen_width);
    Monsters[0].x = 20;
    Monsters[0].y = randomY;

    // Création du 2nd type de monstres
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Monsters[1] = new Monster("MonsterB", contentManager.imgMonsterB, screen_width);
    Monsters[1].x = 750;
    Monsters[1].y = randomY;

    // Création du 3eme type de monstres
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Monsters[2] = new Monster("MonsterC", contentManager.imgMonsterC, screen_width);
    Monsters[2].x = 100;
    Monsters[2].y = randomY;

    // Alors d'après vous, on fait quoi là ? :)
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Monsters[3] = new Monster("MonsterD", contentManager.imgMonsterD, screen_width);
    Monsters[3].x = 650;
    Monsters[3].y = randomY;

    // On ajoute tous les monstres à l'écran
    for (var i=0; i<Monsters.length;i++){
        stage.addChild(Monsters[i]);
    }
    // Puis on ajoute la compagnie  
    stage.addChild(Hero);
        
    Ticker.addListener(window);
    // On vise le meilleur taux possible (60 FPS)
    Ticker.setInterval(17);
}

A la fin de la page, vous trouverez 2 gestionnaires de clavier évident qui s’occupe de jouer les animations walk_left ou walk_right de notre héro en fonction des touches sur lesquelles vous presserez. Pour finir, la logique principale de notre jeu n’est finalement contenue que dans les quelques lignes de code présentes au sein de la méthode tick() :

function tick() {
    // on parcourt notre collection de monstres 
    for (monster in Monsters) {
        var m = Monsters[monster];

        // Si notre héro est toujours vivant mais s'il est trop proche
        // de l'un des monstres...
        if (Hero.alive && m.hitRadius(Hero.x, Hero.y, Hero.hit)) {
            //...il doit mourir malheureusement! (la morale des jeux est ignoble)
            Hero.alive = false;

            // On joue alors l'animation de mort en fonction de
            // la direction dans laquelle le héro courait 
            if (Hero.direction == 1) {
                Hero.gotoAndPlay("die_right");
            }
            else {
                Hero.gotoAndPlay("die_left");
            }

            continue;
        }
    }

    // Et on met le tout à jour
    stage.update();
}

Ainsi, on vérifie à chaque tick (donc potentiellement toutes les 17 ms) si l’un des monstres ne serait pas en train de toucher notre héro à partir des paramètres de collisions que nous avons vu plus tôt. Si l’un des monstres est trop proche, notre malheureux héro doit alors mourir.

Jouez avec l’exemple complet !

Si vous avez tout lu jusque ici, je pense que vous avez amplement mérité de pouvoir jouer avec l’exemple qui est juste en dessous. A chaque fois que vous presserez le bouton “Start”, un nouvel arrière-plan sera généré et chacun des personnages (ennemies comme héro) seront placés à des positions différentes de manière aléatoire. Vous pouvez également faire bouger le héro avec les flèches gauche et droite de votre clavier.

Au fait, ne vous inquiétez pas. Comme vous ne pouvez pas sauter, il y a actuellement aucun moyen de gagner dans ce jeu. C’est donc un jeu 100% looser (le premier du genre ? ). Ce jeu est donc vivement déconseillé aux mauvais perdants.

Note : comme je vous l’ai indiqué plus haut, il n’y a pas de barre de progression sur l’état du téléchargement. Vous devrez donc attendre un “certain temps” avant de pouvoir jouer après avoir appuyé sur le bouton “Start”. C’est ce que l’on appelle communément une EUP (expérience utilisateur pourrie). Mais cela sera ensuite immédiat une fois le tout présent dans le cache du navigateur.

Vous pouvez également y jouer via ce lien : easelJSCoreObjectsAndCollision

Pour finir le jeu, il nous reste à gérer la séquence de saut du héro en utilisant un moteur physique assez simple et des collisions un peu plus poussées, à charger la musique et les effets sonores et finalement à charger les niveaux. Mais la base est bien là si vous souhaitez écrire votre propre petit jeu. Vous avez désormais toutes les cartes en main !

David

HTML5 Gaming: building the core objects & handling collisions with EaselJS

David Rousset — Fri, 29 Jul 2011 16:28:01 GMT

We’ve seen in the previous article how to animate our sprites using EaselJS: HTML5 Gaming: animating sprites in Canvas with EaselJS

We’re now going to see how to create some of our game objects like ennemies and our platformer hero. We will also see how to implement a simple collision mechanism between them. This time, these tutorials will be mainly based on this sample: EaselJS Game sample

You’ll find a live working sample at the end of this article. It’s the base of a simple game.

Pour ceux qui pratiquent la langue de Molière, vous trouverez une version française ici : Jeux HTML5: construction des objets principaux & gestion des collisions avec EaselJS

This article is the 2nd of a serie of 3:

- HTML5 Gaming: animating sprites in Canvas with EaselJS
- HTML5 Gaming: building the core objects & handling collisions with EaselJS
- HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS

Building the Monster object

A monster object has 2 states:

1 - Running along all the width of the screen
2 – Being idle once one of the side is reached during a certain amount of time before running again

It’s very stupid. But if you touch it, you’re dead. This time I’ve merged the sprites coming from the XNA Platformer sample defining the running & the idle sequence inside a unique PNG file. For instance, here is the PNG file for MonsterC:

Our Monster object is defined inside Monster.js and takes the BitmapSequence object as its prototype which has to be used indeed for such scenarios. It contains everything we need: a tick() method, some hit testing mechanism for our collisions and a way to handle our sprites into several animations.

We just need to add some specific logic of our monster like the timing part to handle the idle state and we’re done. Here is the code of our Monster.js file defining our enemies object:

(function (window) {
    function Monster(monsterName, imgMonster, x_end) {
        this.initialize(monsterName, imgMonster, x_end);
    }
    Monster.prototype = new BitmapSequence();

    // public properties:
    Monster.prototype.IDLEWAITTIME = 40;
    Monster.prototype.bounds = 0; //visual radial size
    Monster.prototype.hit = 0;     //average radial disparity

    // constructor:
    //unique to avoid overriding base class 
    Monster.prototype.BitmapSequence_initialize = Monster.prototype.initialize; 
    Monster.prototype.BitmapSequence_tick = Monster.prototype.tick; 

    // variable members to handle the idle state
    // and the time to wait before walking again
    this.isInIdleMode = false;
    this.idleWaitTicker = 0;

    var quaterFrameSize;

    Monster.prototype.initialize = function (monsterName, imgMonster, x_end) {
        var localSpriteSheet = new SpriteSheet(
                    imgMonster, //image to use
            64, //width of each sprite
            64, //height of each sprite
            {
            walk_left: [0, 9],
            idle: [10, 20]
        });

        localSpriteSheet = SpriteSheetUtils.flip(
        localSpriteSheet,
        {
            walk_right: ["walk_left", true, false]
        });

        this.BitmapSequence_initialize(localSpriteSheet);
        this.x_end = x_end;

        this.regX = this.spriteSheet.frameWidth / 2 | 0;
        this.regY = this.spriteSheet.frameHeight / 2 | 0;

        quaterFrameSize = this.spriteSheet.frameWidth / 4;

        // start playing the first sequence:
        this.gotoAndPlay("walk_right");     //animate

        // set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
        // of animated monster if you disabled the shadow.
        this.shadow = new Shadow("#000", 3, 2, 2);

        this.name = monsterName;
        this.speed = 1;
        // 1 = right & -1 = left
        this.direction = 1;
        // velocity
        this.vX = 1 | 0.5;
        this.vY = 0;
        // starting directly at the first frame of the walk_right sequence
        this.currentFrame = 21;
    }

    Monster.prototype.tick = function () {
        // To slow down the animation loop of the sprite, we're not redrawing during each tick
        // With a Modulo 4, we're dividing the speed by 4
        var speedControl = Ticker.getTicks() % 4;

        if (speedControl == 0) {
            this.BitmapSequence_tick();
        }

        if (!this.isInIdleMode) {
            // Moving the sprite based on the direction & the speed
            this.x += this.vX * this.direction;
            this.y += this.vY * this.direction;

            // Hit testing the screen width, otherwise our sprite would disappear
            if (this.x >= this.x_end - (quaterFrameSize + 1) || this.x < (quaterFrameSize + 1)) {
                this.gotoAndPlay("idle");
                this.idleWaitTicker = this.IDLEWAITTIME;
                this.isInIdleMode = true;
            }
        }
        else {
            this.idleWaitTicker--;

            if (this.idleWaitTicker == 0) {
                this.isInIdleMode = false;

                // Hit testing the screen width, otherwise our sprite would disappear
                if (this.x >= this.x_end - (quaterFrameSize + 1)) {
                    // We've reached the right side of our screen
                    // We need to walk left now to go back to our initial position
                    this.direction = -1;
                    this.gotoAndPlay("walk_left");
                }

                if (this.x < (quaterFrameSize + 1)) {
                    // We've reached the left side of our screen
                    // We need to walk right now
                    this.direction = 1;
                    this.gotoAndPlay("walk_right");
                }
            }
        }
    }

    Monster.prototype.hitPoint = function (tX, tY) {
        return this.hitRadius(tX, tY, 0);
    }

    Monster.prototype.hitRadius = function (tX, tY, tHit) {
        //early returns speed it up
        if (tX - tHit > this.x + this.hit) { return; }
        if (tX + tHit < this.x - this.hit) { return; }
        if (tY - tHit > this.y + this.hit) { return; }
        if (tY + tHit < this.y - this.hit) { return; }

        //now do the circle distance test
        return this.hit + tHit > Math.sqrt(Math.pow(Math.abs(this.x - tX), 2) 
                        + Math.pow(Math.abs(this.y - tY), 2));
    }

    window.Monster = Monster;
} (window));

The collision part is handled via the hitPoint() and hitRadius() functions. The hit testing is done via circle which is a bit less accurate than a boxing mode.

Note: there is a bug in the SpriteSheetUtils object on the flip() method. It has been logged here: SpriteSheetUtils working canvas cache . The bug behavior is a bit weird. If you’re instantiating several monsters with different sprite sequences, it may appears that all monsters will have the same look as if they were sharing the exact same PNG file defining their sprites. This is apparently a cache issue simply solved by recreating the working canvas in the flip() method every time.

Building the Player object

The logic of the player object is a bit different than the monsters. The x & y position are normally controlled by the user moving the character with the keyboard. Our hero has more animations than the monsters as he can die, jump, move, celebrate and be in the idle mode.

Here is the PNG associated to him:

In this tutorial, we’ll keep it simple. We will only handle the walk, idle & die sequence. Still, let’s load all the animations for a futur potential usage. Here is the code available in the Player.js file. Reading the code and its comments should provide enough details:

(function (window) {
    function Player(imgPlayer, x_end) {
        this.initialize(imgPlayer, x_end);
    }
    Player.prototype = new BitmapSequence();

    // public properties:
    Player.prototype.bounds = 0;
    Player.prototype.hit = 0;
    Player.prototype.alive = true;

    // constructor:
    //unique to avoid overiding base class    
    Player.prototype.BitmapSequence_initialize = Player.prototype.initialize;     
    Player.prototype.BitmapSequence_tick = Player.prototype.tick; 

    var quaterFrameSize;

    Player.prototype.initialize = function (imgPlayer, x_end) {
        var localSpriteSheet = new SpriteSheet(
                    imgPlayer, //image to use
            64, //width of each sprite
            64, //height of each sprite
            {
            walk_left: [0, 9],
            die_left: [10, 21, false],
            jump_left: [22, 32],
            celebrate_left: [33, 43],
            idle: [44, 44]
        });

        localSpriteSheet = SpriteSheetUtils.flip(
        localSpriteSheet,
        {
            walk_right: ["walk_left", true, false],
            jump_right: ["jump_left", true, false],
            die_right: ["die_left", true, false, false],
            celebrate_right: ["celebrate_left", true, false]
        });

        this.BitmapSequence_initialize(localSpriteSheet);
        this.x_end = x_end;

        this.regX = this.spriteSheet.frameWidth / 2 | 0;
        this.regY = this.spriteSheet.frameHeight / 2 | 0;

        quaterFrameSize = this.spriteSheet.frameWidth / 4;

        // start playing the first sequence:
        this.gotoAndPlay("idle");     //animate
        this.isInIdleMode = true;

        // set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
        // of animated monster if you disabled the shadow.
        this.shadow = new Shadow("#000", 3, 2, 2);
        this.name = "Hero";
        this.speed = 1;
        // 1 = right & -1 = left
        this.direction = 1;

        // velocity
        this.vX = 4 | 0.5;
        this.vY = 0;
        // starting directly at the first frame of the walk_right sequence
        this.currentFrame = 66;

        //Size of the Bounds for the collision's tests
        this.bounds = 28;
        this.hit = this.bounds;
    }

    Player.prototype.tick = function () {
        // To slow down the animation loop of the sprite, we're not redrawing during each tick
        // With a Modulo 4, we're dividing the speed by 4
        var speedControl = Ticker.getTicks() % 4;

        if (speedControl == 0) {
            this.BitmapSequence_tick();
        }

        if (this.alive && !this.isInIdleMode) {
            // Hit testing the screen width, otherwise our sprite would disappear
            // The player is blocked at each side but we keep the walk_right or walk_animation running
            if ((this.x + this.direction > quaterFrameSize) && 
                (this.x + (this.direction * 2) < this.x_end - quaterFrameSize + 1)) {
                // Moving the sprite based on the direction & the speed
                this.x += this.vX * this.direction;
                this.y += this.vY * this.direction;
            }
        }
    }

    window.Player = Player;
} (window));

The player will be remotely controlled into the main page.

Building the Content Manager object

Usually, the first step of a HTML5 game is to download all the needed resources before starting the game. In my case, you’ll find a very basic ContentManager available in the ContentManager.js file.

Here is the code:

// Used to download all needed resources from our
// webserver
function ContentManager() {
    // Method called back once all elements
    // have been downloaded
    var ondownloadcompleted;
    // Number of elements to download
    var NUM_ELEMENTS_TO_DOWNLOAD = 15;

    // setting the callback method
    this.SetDownloadCompleted = function (callbackMethod) {
        ondownloadcompleted = callbackMethod;
    };

    // We have 4 type of enemies, 1 hero & 1 type of tile
    this.imgMonsterA = new Image();
    this.imgMonsterB = new Image(); 
    this.imgMonsterC = new Image(); 
    this.imgMonsterD = new Image();
    this.imgTile = new Image();
    this.imgPlayer = new Image();

    // the background can be created with 3 different layers
    // those 3 layers exist in 3 versions
    this.imgBackgroundLayers = new Array();
    var numImagesLoaded = 0;

    // public method to launch the download process
    this.StartDownload = function () {
        SetDownloadParameters(this.imgPlayer, "img/Player.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgMonsterA, "img/MonsterA.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgMonsterB, "img/MonsterB.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgMonsterC, "img/MonsterC.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgMonsterD, "img/MonsterD.png", handleImageLoad, handleImageError);
        SetDownloadParameters(this.imgTile, "img/Tiles/BlockA0.png", handleImageLoad, handleImageError);

        // download the 3 layers * 3 versions
        for (var i = 0; i < 3; i++) {
            this.imgBackgroundLayers[i] = new Array();
            for (var j = 0; j < 3; j++) {
                this.imgBackgroundLayers[i][j] = new Image();
                SetDownloadParameters(this.imgBackgroundLayers[i][j], "img/Backgrounds/Layer" + i 
                                      + "_" + j + ".png", handleImageLoad, handleImageError);
            }
        }
    }

    function SetDownloadParameters(imgElement, url, loadedHandler, errorHandler) {
        imgElement.src = url;
        imgElement.onload = loadedHandler;
        imgElement.onerror = errorHandler;
    }

    // our global handler 
    function handleImageLoad(e) {
        numImagesLoaded++

        // If all elements have been downloaded
        if (numImagesLoaded == NUM_ELEMENTS_TO_DOWNLOAD) {
            numImagesLoaded = 0;
            // we're calling back the method set by SetDownloadCompleted
            ondownloadcompleted();
        }
    }

    //called if there is an error loading the image (usually due to a 404)
    function handleImageError(e) {
        console.log("Error Loading Image : " + e.target.src);
    }
}

It lacks several things to be a good content manager: a download progress indicator, a better error handler, localStorage usage, a more generic code, etc. But I’ve tried to build a basic & easy to understand game.

Setting up all the pieces inside the main page

Now that we have the core parts of our game, we can start to use them to build a very basic platformer game. Let’s review each part of our main page hosting our game. In the init() method, we’re creating the stage and we’re using the ContentManager object to download our PNG files:

function init() {
    //find canvas and load images, wait for last image to load
    canvas = document.getElementById("testCanvas");

    // create a new stage and point it at our canvas:
    stage = new Stage(canvas);
    // grab canvas width and height for later calculations:
    screen_width = canvas.width;
    screen_height = canvas.height;

    contentManager = new ContentManager();
    contentManager.SetDownloadCompleted(startGame);
    contentManager.StartDownload();
}

Once done, the startGame() function is called. It first uses the CreateAndAddRandomBackground() function which create a random background based on 3 different layers. Then, it creates our Hero and set its Y position in a random place. Just under the hero, we’re building a very basic platform where our hero will be able to walk on to. Finally, we’re building 4 Monster() objects inside the Monsters array and we add them also to the stage.

function startGame() {
    // Random number to set the Y position
    // of our Hero & Enemies
    var randomY;
    
    CreateAndAddRandomBackground();

    // Our hero can be moved with the arrow keys (left, right)
    document.onkeydown = handleKeyDown;
    document.onkeyup = handleKeyUp;

    // Creating the Hero
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Hero = new Player(contentManager.imgPlayer, screen_width);
    Hero.x = 400;
    Hero.y = randomY;

    //Tile where the hero & the ennemies will be able to walk on to
    bmpSeqTile = new BitmapSequence(new SpriteSheet(contentManager.imgTile, 40, 32));
    bmpSeqTile.regX = bmpSeqTile.frameWidth / 2 | 0;
    bmpSeqTile.regY = bmpSeqTile.frameHeight / 2 | 0;

    // Taking the same tile all over the width of the game
    for (var i = 0; i < 20; i++) {
        // clone the original tile, so we don't need to set shared properties:
        var bmpSeqTileCloned = bmpSeqTile.clone();

        // set display properties:
        bmpSeqTileCloned.x = 0 + (i * 40);
        bmpSeqTileCloned.y = randomY + 32;

        // add to the display list:
        stage.addChild(bmpSeqTileCloned);
    }

    // Our Monsters collection
    Monsters = new Array();

    // Creating the first type of monster
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Monsters[0] = new Monster("MonsterA", contentManager.imgMonsterA, screen_width);
    Monsters[0].x = 20;
    Monsters[0].y = randomY;

    // Creating the second type of monster
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Monsters[1] = new Monster("MonsterB", contentManager.imgMonsterB, screen_width);
    Monsters[1].x = 750;
    Monsters[1].y = randomY;

    // Creating the third type of monster
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Monsters[2] = new Monster("MonsterC", contentManager.imgMonsterC, screen_width);
    Monsters[2].x = 100;
    Monsters[2].y = randomY;

    // Creating the forth type of monster
    randomY = 32 + (Math.floor(Math.random() * 7) * 64);
    Monsters[3] = new Monster("MonsterD", contentManager.imgMonsterD, screen_width);
    Monsters[3].x = 650;
    Monsters[3].y = randomY;

    // Adding all the monsters to the stage
    for (var i=0; i<Monsters.length;i++){
        stage.addChild(Monsters[i]);
    }
    stage.addChild(Hero);
        
    // we want to do some work before we update the canvas,
    // otherwise we could use Ticker.addListener(stage);
    Ticker.addListener(window);
    // Best Framerate targeted (60 FPS)
    Ticker.setInterval(17);
}

And the end, there are 2 obvious keyboard handler that simply play the walk_left or walk_right animation of our hero based on the arrows keys. And finally, the core logic of our game is contained in a few line of code inside the tick() method of course:

function tick() {
    // looping inside the Monsters collection
    for (monster in Monsters) {
        var m = Monsters[monster];

        // If the Hero is still alive and if he's too near
        // from one of the monster...
        if (Hero.alive && m.hitRadius(Hero.x, Hero.y, Hero.hit)) {
            //...he must die unfortunately!
            Hero.alive = false;

            // Playing the proper animation based on
            // the current direction of our hero
            if (Hero.direction == 1) {
                Hero.gotoAndPlay("die_right");
            }
            else {
                Hero.gotoAndPlay("die_left");
            }

            continue;
        }
    }

    // update the stage:
    stage.update();
}

We’re just checking during each tick if one of the monsters is not currently hitting our hero based on their collision parameters. If one monster is too near of our hero, our poor hero must die.

Play with the live sample

You can now play with the live sample just below. Every time you’ll press the start button a new background will be generated and each character (enemies & hero) will be placed at a different position. You can also move right or left using the keyboard. By the way, don’t panic. As you can’t jump, there is currently no way to win in this game. This is a 100% looser game (first of genre?).

Note: as there is no progress bar, you need to wait a bit before playing after pressing the “Start” button.

You can play it also via this link: easelJSCoreObjectsAndCollision

Next part will be to handle the jump sequence using a simple physics engine, loading the music & sound effects and finally loading the levels. But the core is here if you’d like to create your own simple game, you now have all the cards in your hand!

David

Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS

David Rousset — Fri, 22 Jul 2011 08:29:04 GMT

Si vous souhaitez écrire un petit jeu dit “casual” en utilisant l’élément Canvas d’HTML5, vous devrez trouver un moyen de gérer vos sprites. Il existe plusieurs librairies susceptibles de vous aider pour écrire des jeux en “HTML5” comme ImpactJS ou CraftyJS par exemple. De mon côté, j’ai décidé de me pencher sur la librairie EaselJS qui a été utilisée pour écrire PiratesLoveDaisies : un jeu en HTML5 de “Tower Defense”. Nous allons donc voir dans cet article à travers 3 petits tutoriels comment utiliser vos sprites existants et comment les animer.

Cette article est le 1er d’une série de 3 articles :

Introduction

Sur le site officiel EaselJS, vous pouvez parcourir quelques exemples intéressants à décortiquer et une documentation assez sommaire. Nous allons prendre l’exemple nommé sprites comme base de travail. Nous allons également utiliser les ressources disponibles dans l’exemple XNA 4.0 Platformer. Pour ceux qui suivent régulièrement mon blog, vous savez peut-être que j’affectionne particulièrement ce petit jeu et que j’aime jouer avec son code pour apprendre. Voici quelques articles que j’ai déjà écrit à ce sujet :

- Portage du Platformer Starter Kit XNA 3.1 vers XNA 4.0 pour Windows Phone 7
- Silverlight 4 XNA Platformer Level Editor pour Windows Phone 7

Entre temps, cet exemple de code a été mis à jour par nos équipes XNA et est désormais disponible pour les plateformes Xbox 360, PC & Windows Phone 7 ici: App Hub – platformer . Vous pouvez le télécharger pour jouer avec le jeu et surtout pour extraire les sprites afin de les utiliser avec EaselJS.

Dans cet article, nous allons ainsi utiliser ces 2 images PNG comme source de nos séquences de sprites:

Notre ennemi/monstre en train de courir:

qui contient 10 images/sprites différents.

Notre monstre au repos:

qui contient une séquence de 11 sprites différents.

Note : ces exemples ne fonctionnent pas correctement dans Firefox 5.0 du apparemment à un bug dans leur implémentation de canvas. Ils ont été testés avec succès par votre serviteur dans IE9/IE10/Chrome 12/Opera 11 & Firefox Aurora 7.0.

Tutoriel 1 : construction des objets SpriteSheet et BitmapSequence

Nous allons commencer par faire bouger notre monstre en train de courir sur toute la largeur du canvas.

La 1ère étape consiste donc à charger la séquence complète contenue dans l’image PNG via ce code:

var imgMonsterARun = new Image();

function init() {
    //récupère le canvas et charge les images, attention à bien attendre la fin de tous les téléchargements
    canvas = document.getElementById("testCanvas");

    imgMonsterARun.onload = handleImageLoad;
    imgMonsterARun.onerror = handleImageError;
    imgMonsterARun.src = "img/MonsterARun.png";
}

Ce code sera donc appelé en premier pour initialiser le contenu de notre jeu. Une fois chargé, nous pouvons démarrer le jeu. EaselJS expose un objet de type SpriteSheet pour gérer nos sprites. Ainsi en utilisant ce code :

var spriteSheet  = new SpriteSheet(
        imgMonsterARun, //image à utiliser
        64, //largeur de chaque sprite
        64, //hauteur de chaque sprite
        {    
            walk_left: [0, 9]
        });

Nous indiquons que nous souhaitons créer une nouvelle séquence appelée “walk_left” qui sera fabriquée à partir de l’image appelée imgMonsterARun. Cette image sera divisée en 10 sous-images ayant une taille de 64x64 pixels chacune. Il constitue notre objet de base pour charger nos sprites et en créer des séquences. A noter que vous pouvez créer plusieurs séquences à partir de même fichier PNG si vous le souhaitez. C’est le cas de l’exemple avec les rats sur le site officiel d’EaselJS.

Maintenant, il nous faut utiliser l’objet BitmapSequence. Cet objet va nous aider à animer notre séquence et à la positionner à l’écran. Revoyons ensemble le code d’initialisation de cette BitmapSequence :

// crée une instance de BitmapSequence pour afficher et animer une instance de SpriteSheet:
bmpSeq = new BitmapSequence(spriteSheet);
    
// on fixe un point de registration (le point où l’objet sera positionné et autour duquel il tournera)
// au centre des dimensions d’une frame/sous-image
bmpSeq.regX = bmpSeq.spriteSheet.frameWidth/2|0;
bmpSeq.regY = bmpSeq.spriteSheet.frameHeight / 2 | 0;

// On lance la séquence d’animation
bmpSeq.gotoAndPlay("walk_left");     //animation
    
// mise en place d’une ombre portée. Cela peut couter cher en FPS en fonction du navigateur.
bmpSeq.shadow = new Shadow("#454", 0, 5, 4);

bmpSeq.name = "monster1";
bmpSeq.speed = 1;
bmpSeq.direction = 90;
bmpSeq.vX = 3|0.5;
bmpSeq.vY = 0;
bmpSeq.x = 16;
bmpSeq.y = 32;
        
// On peut choisir exactement à quelle frame démarrer l’animation
bmpSeq.currentFrame = 0;
stage.addChild(bmpSeq);

Le constructeur de l’objet BitmapSequence a simplement besoin d’un élément de type SpriteSheet comme paramètre. Ensuite, on donne un nom à la séquence, positionne quelques paramètres comme la vitesse et la position initiale de notre 1ère étape d’animation. Pour finir, on ajoute cette séquence aux éléments affichables à l’écran avec l’objet Stage et sa méthode addChild().

La dernière étape consiste maintenant à décider ce que l’on souhaite faire dans la boucle d’animation. Cette boucle est appelée toutes les xxx millisecondes et vous permet de mettre à jour la position de vos sprites. Pour cela, EaselJS expose un objet Ticker qui nous fournit une horloge centralisée diffusée à un intervalle précis à tous les éléments souhaitant l’écouter. Tout ce que vous avez à faire, c’est de vous abonner à l’évènement tick et d’implémenter une méthode .tick() qui sera rappelée pour vous. Ce code s’abonne par exemple à cet évènement:

Ticker.addListener(window);
// Nous visons ici le meilleur taux d’images par secondes (60 FPS)
Ticker.setInterval(17);

Et voici le code qui sera rappelé toutes les 17 ms (lorsque cela sera possible) pour mettre à jour la position de notre monstre:

function tick() {
    // On teste si le personnage n’arrive pas en bout d’écran à droite avant qu’il ne disparaisse à jamais!
    if (bmpSeq.x >= screen_width - 16) {
        // Nous avons atteint le côté droit de notre écran
        // Nous devons maintenant marcher vers la gauche pour retourner à la positon initiale
        bmpSeq.direction = -90;
    }

    if (bmpSeq.x < 16) {
        // Nous avons atteint le côté gauche de notre écran
        // Nous devons maintenant marcher vers la droite
        bmpSeq.direction = 90;
    }

    // On bouge le sprite en fonction de la direction et de la vitesse demandée
    if (bmpSeq.direction == 90) {
        bmpSeq.x += bmpSeq.vX;
        bmpSeq.y += bmpSeq.vY;
    }
    else {
        bmpSeq.x -= bmpSeq.vX;
        bmpSeq.y -= bmpSeq.vY;
    }

    // mise à jour de la scène de jeu
    stage.update();
}

Vous pouvez tester le résultat final ici :

Vous pouvez aussi naviguer vers cette URL : easelJSSpritesTutorial01 si vous souhaitez voir l’exemple de code complet.

Eh, mais elle est bizarre cette animation non ? Effectivement, il y a 2 problèmes :

1 – les étapes d’animation sont un peu étrange car le personnage semble boucler trop vite au sein de sa séquence de sprites.
2 – le personnage ne peut marcher normalement que de la droite vers la gauche. On a l’impression sinon qu’il se la raconte un peu en effectuant un Moonwalk dans l’autre sens.

Regardons comment le calmer un petit peu et fixer tout cela dans le 2ème tutoriel. .

Tutorial 2: contrôle de la vitesse d’animation et inversion des sprites

Pour corriger la vitesse de l’animation, la méthode la plus simple que j’ai trouvée consiste à utiliser l’opérateur modulo afin d’éviter de dessiner ma séquence à chaque appel de l’horloge. Il y a d’ailleurs une discussion actuellement ouverte en version 0.3.2 pour savoir comment éventuellement intégrer le principe dans la librairie même: https://github.com/gskinner/EaselJS/issues/60

Pour ajouter de nouvelles frames afin de permettre au personnage de marcher normalement de la gauche vers la droite, nous devons inverser horizontalement chacune des frames du sprite. Cela tombe bien, EaselJS expose un objet SpriteSheetUtils qui contient une méthode flip(). Voici le code permettant de les utiliser :

// {nomDeLaSequenceInversée:["sequenceOrigine", flipHorizontal, flipVertical, optionnelNomDeLaProchaineSequence]}
spriteSheet = SpriteSheetUtils.flip(
spriteSheet,
{
    walk_right: ["walk_left", true, false, null]
});

Nous créons ainsi une nouvelle séquence nommée “walk_right” basée sur la séquence “walk_left” que nous avons inversée horizontalement. Pour finir, voici le code qui ralentit l’animation et qui s’occupe de savoir quelle séquence jouer en fonction de la position actuelle du personnage :

function tick() {
    // Pour ralentir l'animation du sprite, il suffit de ne pas le redessiner à chaque fois
    // Avec un modulo 4, on divise la vitesse par 4 puisque l’on ne dessine plus qu’1 fois sur 4
    var speedControl = Ticker.getTicks() % 4;

    if (speedControl == 0) {
        // On teste si le personnage n’arrive pas en bout d’écran à droite avant qu’il ne disparaisse
        if (bmpSeq.x >= screen_width - 16) {
            // Nous avons atteint le côté droit de notre écran
            // Nous devons maintenant marcher vers la gauche pour retourner à la positon initiale
            bmpSeq.direction = -90;
            bmpSeq.gotoAndPlay("walk_left")
        }

        if (bmpSeq.x < 16) {
            // Nous avons atteint le côté gauche de notre écran
            // Nous devons maintenant marcher vers la droite 
            bmpSeq.direction = 90;
            bmpSeq.gotoAndPlay("walk_right");
        }

        // On bouge le sprite en fonction de la direction et de la vitesse demandée
        if (bmpSeq.direction == 90) {
            bmpSeq.x += bmpSeq.vX;
            bmpSeq.y += bmpSeq.vY;
        }
        else {
            bmpSeq.x -= bmpSeq.vX;
            bmpSeq.y -= bmpSeq.vY;
        }

        // mise à jour de la scène de jeu
        stage.update();
    }
}

Vous pouvez tester le résultat final ici :

Vous pouvez aussi naviguer vers cette URL : easelJSSpritesTutorial02 si vous souhaitez voir l’exemple de code complet.

Tutoriel 3 : chargement de plusieurs sprites et utilisation de plusieurs animations

Il est temps désormais de charger l’état “au repos” de notre monstre préféré. L’idée est donc de jouer l’animation où il court sur un aller/retour complet. Ensuite, fatigué, le monstre passera à l’état “au repos” à jamais.

Nous allons donc devoir charger plusieurs images PNG depuis le serveur web. Il est d’ailleurs très important d’attendre que toutes les ressources soient totalement téléchargées afin de commencer les opérations de dessin. Voici une manière très simple de s’en assurer :

var numberOfImagesLoaded = 0;

var imgMonsterARun = new Image();
var imgMonsterAIdle = new Image();

function init() {
    //récupère le canvas et charge les images, attention à bien attendre la fin de tous les téléchargements 
    canvas = document.getElementById("testCanvas");

    imgMonsterARun.onload = handleImageLoad;
    imgMonsterARun.onerror = handleImageError;
    imgMonsterARun.src = "img/MonsterARun.png";

    imgMonsterAIdle.onload = handleImageLoad;
    imgMonsterAIdle.onerror = handleImageError;
    imgMonsterAIdle.src = "img/MonsterAIdle.png";
}

function handleImageLoad(e) {
    numberOfImagesLoaded++;

    // Nous ne démarrons pas le jeu tant que toutes les images ne sont pas téléchargées
    // Sinon vous risquez de commencer à dessiner sans la bonne ressource et de lever 
    // cet exception du DOM: INVALID_STATE_ERR (11) sur l’appel de la méthode drawImage
    if (numberOfImagesLoaded == 2) {
        numberOfImagesLoaded = 0;
        startGame();
    }
}

Ce code est très basique. Par exemple, il ne gère pas les erreurs correctement en tentant de télécharger à nouveau l’image problématique en cas de 1er échec. Si vous fabriquez un jeu, vous aurez besoin d’écrire votre propre gestionnaire de téléchargements de contenus si la librairie JavaScript que vous utilisez de l’implémente pas encore.

Pour ajouter la séquence “au repos” et positionner ses différents paramètres, il nous suffit d’utiliser le même type de code vu précédemment :

var spriteSheetIdle = new SpriteSheet(
        imgMonsterAIdle, //image à utiliser
        64, //largeur du sprite
        64, //hauteur du sprite
        {    
            idle: [0, 10]
        });

bmpSeqIdle = new BitmapSequence(spriteSheetIdle);

bmpSeqIdle.name = "monsteridle1";
bmpSeqIdle.speed = 1;
bmpSeqIdle.direction = 0;
bmpSeqIdle.x = 16;
bmpSeqIdle.y = 32;

Ensuite, au sein de la méthode tick(), nous devons stopper l’animation où le monstre court une fois que ce dernier atteint à nouveau le côté gauche de l’écran. Puis ensuite, il suffit de jouer l’animation “au repos” à la place. Voici le code qui fait exactement cela :

if (bmpSeq.x < 16) {
    // Nous avons atteint le côté gauche de notre écran, il est temps de se reposer 
    bmpSeq.direction = 90;
    bmpSeq.gotoAndStop("walk_left");
    stage.removeChild(bmpSeq);
    bmpSeqIdle.gotoAndPlay("idle");
    stage.addChild(bmpSeqIdle);
}

Vous pouvez tester le résultat final ici :

Vous pouvez aussi naviguer vers cette URL : easelJSSpritesTutorial03 si vous souhaitez voir l’exemple de code complet.

Voilà, c’est tout pour aujourd’hui ! Vous pouvez reprendre une activité normale. Mais si l’envie vous en prend, n’hésitez pas à jeter un œil à la suite ici : Jeux HTML5: construction des objets principaux & gestion des collisions avec EaselJS

David

HTML5 Gaming: animating sprites in Canvas with EaselJS

David Rousset — Thu, 21 Jul 2011 15:12:19 GMT

When you want to write casual games using the HTML5 Canvas element, you’ll need to find a way to handle your sprites. There are several libraries available to help you writing games such as ImpactJS, CraftyJS and so on. On my side, I’ve decided to use EaselJS which has been used to write PiratesLoveDaisies: an HTML5 Tower Defense game. We’re going to see in this tutorial how to use your existing sprite elements and animate them.

Pour ceux qui pratiquent la langue de Molière, vous trouverez une version française ici : Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS

This article is the first of a serie of 3:

Introduction

On the official EaselJS site, you’ll find some interesting samples and some basic documentation. We will use the sprites sample as a base. We will use also the resources available in the XNA 4.0 Platformer sample. For those of you who are following my blog, you may remember that I love playing with this sample. Here are the previous attached articles:

- Windows Phone 7 Platformer Starter Kit for XNA Studio 4.0
- Silverlight 4 XNA Platformer Level Editor for Windows Phone 7

The platformer sample have been updated in the meantime by our XNA team and is available here for Xbox 360, PC & Windows Phone 7: App Hub – platformer . You can download it to play with it and extract the sprites to use them with EaselJS.

In this article, we’re going to use these 2 PNG files as source of our sprite sequences:

Our monster running:

which contains 10 different sprites.

Our monster in idle mode:

which contains 11 different sprites.

Note: these samples don’t work properly in Firefox 5.0 due apparently to a bug in their canvas implementation. It has been tested ok in IE9/IE10/Chrome 12/Opera 11 & Firefox Aurora 7.0.

Tutorial 1: building the SpriteSheet and the BitmapSequence

We’ll start by moving the running monster between the beginning and the end of the width of our canvas.

First step is to load the complete sequence contained in the PNG file via this code:

var imgMonsterARun = new Image();

function init() {
    //find canvas and load images, wait for last image to load
    canvas = document.getElementById("testCanvas");

    imgMonsterARun.onload = handleImageLoad;
    imgMonsterARun.onerror = handleImageError;
    imgMonsterARun.src = "img/MonsterARun.png";
}

This code will be called first to initialize our game’s content. Once loaded, we can start the game. EaselJS expose a SpriteSheet object to handle the sprite. Thus, by using this code:

var spriteSheet  = new SpriteSheet(
        imgMonsterARun, //image to use
        64, //width of each sprite
        64, //height of each sprite
        {    
            walk_left: [0, 9]
        });

We’re indicating that we’d like to create a new sequence named “walk_left” that will be made of the imgMonsterARun image. This image will be split into 10 frames with a size of 64x64 pixels. This is the core object to load our sprite and create our sequences. There could be several sequences created from the same PNG file if you want to, like in the rats sprite sample of the EaselJS site.

After that, we need to use the BitmapSequence object. It helps us animating our sequence and positioning our sprites on the screen. Let’s review the initializing code of this BitmapSequence:

// create a BitmapSequence instance to display and play back the sprite sheet:
bmpSeq = new BitmapSequence(spriteSheet);
    
// set the registration point (the point it will be positioned and rotated around)
// to the center of the frame dimensions:
bmpSeq.regX = bmpSeq.spriteSheet.frameWidth/2|0;
bmpSeq.regY = bmpSeq.spriteSheet.frameHeight / 2 | 0;

// start playing the first sequence:
bmpSeq.gotoAndPlay("walk_left");     //animate
    
// set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
// of animated rats if you disabled the shadow.
bmpSeq.shadow = new Shadow("#454", 0, 5, 4);

bmpSeq.name = "monster1";
bmpSeq.speed = 1;
bmpSeq.direction = 90;
bmpSeq.vX = 3|0.5;
bmpSeq.vY = 0;
bmpSeq.x = 16;
bmpSeq.y = 32;
        
// have each monster start at a specific frame
bmpSeq.currentFrame = 0;
stage.addChild(bmpSeq);

The constructor of the BitmapSequence object simply needs the SpriteSheet element as a parameter. We’re then giving a name to the sequence, setting some parameters like the speed and the initial position of our first frame. Finally, we add this sequence to the display list by using the Stage object and its addChild() method.

Next step is now to decide what we’d like to do in our animation loop. This animation loop is called every xxx milliseconds and let you update the position of your sprites. For that, EaselJS exposes a Ticker object which provides a centralized tick or heartbeat broadcast at a set interval. All you’ve got to do is to subscribe to the tick event and implement a .tick() method that will be called back. This code is for instance registering the event:

Ticker.addListener(window);
// Best Framerate targeted (60 FPS)
Ticker.setInterval(17);

And here is the code that will be called every 17ms (when possible) to update the position of our monster:

function tick() {
    // Hit testing the screen width, otherwise our sprite would disappear
    if (bmpSeq.x >= screen_width - 16) {
        // We've reached the right side of our screen
        // We need to walk left now to go back to our initial position
        bmpSeq.direction = -90;
    }

    if (bmpSeq.x < 16) {
        // We've reached the left side of our screen
        // We need to walk right now
        bmpSeq.direction = 90;
    }

    // Moving the sprite based on the direction & the speed
    if (bmpSeq.direction == 90) {
        bmpSeq.x += bmpSeq.vX;
        bmpSeq.y += bmpSeq.vY;
    }
    else {
        bmpSeq.x -= bmpSeq.vX;
        bmpSeq.y -= bmpSeq.vY;
    }

    // update the stage:
    stage.update();
}

You can test the final result here:

You can also browse this sample here: easelJSSpritesTutorial01 if you’d like to view the complete source code.

But wait! There are 2 problems in this animation:

1 – the animation steps are weird as the character seems to loop through its different sprites sequence too fast
2 – the character can only walk normally from right to left otherwise it looks like it tries to achieve a kind of Moonwalk dance.

Let’s see how to fix that in the second tutorial.

Tutorial 2: controlling the animation speed and flipping the sprites

To fix the animation’s speed, the simplest way I’ve found is to use a modulus operator to avoid drawing/updating my sequence during each tick. There is currently an opened issue on this topic: https://github.com/gskinner/EaselJS/issues/60 with EaselJS 0.3.2.

To add new animation frames to let the character walking normally from left to right, we need to flip each frame. EaselJS exposes a SpriteSheetUtils object for that and a flip() method. Here is the code that uses them:

// {nameOfFlippedSequence:["derivativeSequence", flipHorizontally, flipVertically, optionNameOfNextSequence]}
spriteSheet = SpriteSheetUtils.flip(
spriteSheet,
{
    walk_right: ["walk_left", true, false, null]
});

We’re creating a derivative sequence named “walk_right” based on the “walk_left” sequence that we flip horizontally. At last, here is the code that slows down the speed animation and which handles which sequence to play based on the character position:

function tick() {
    // To slow down the animation loop of the sprite, we're not redrawing during each tick
    // With a Modulo 4, we're dividing the speed by 4
    var speedControl = Ticker.getTicks() % 4;

    if (speedControl == 0) {
        // Hit testing the screen width, otherwise our sprite would disappear
        if (bmpSeq.x >= screen_width - 16) {
            // We've reached the right side of our screen
            // We need to walk left now to go back to our initial position
            bmpSeq.direction = -90;
            bmpSeq.gotoAndPlay("walk_left")
        }

        if (bmpSeq.x < 16) {
            // We've reached the left side of our screen
            // We need to walk right now
            bmpSeq.direction = 90;
            bmpSeq.gotoAndPlay("walk_right");
        }

        // Moving the sprite based on the direction & the speed
        if (bmpSeq.direction == 90) {
            bmpSeq.x += bmpSeq.vX;
            bmpSeq.y += bmpSeq.vY;
        }
        else {
            bmpSeq.x -= bmpSeq.vX;
            bmpSeq.y -= bmpSeq.vY;
        }

        // update the stage:
        stage.update();
    }
}

You can test the final result here:

You can also browse this sample here: easelJSSpritesTutorial02 if you’d like to view the complete source code.

Tutorial 3: loading multiple sprites and playing with multiple animations

It’s time now to load the idle state of the monster. The idea here is to play the animation state to achieve a single round-trip. Once achieved, we will play the idle state.

We will then now load multiple PNG files from the web server. It’s then very important to wait until all resources are loaded otherwise you may try to draw non-yet downloaded resources. Here is a very simple way to do it:

var numberOfImagesLoaded = 0;

var imgMonsterARun = new Image();
var imgMonsterAIdle = new Image();

function init() {
    //find canvas and load images, wait for last image to load
    canvas = document.getElementById("testCanvas");

    imgMonsterARun.onload = handleImageLoad;
    imgMonsterARun.onerror = handleImageError;
    imgMonsterARun.src = "img/MonsterARun.png";

    imgMonsterAIdle.onload = handleImageLoad;
    imgMonsterAIdle.onerror = handleImageError;
    imgMonsterAIdle.src = "img/MonsterAIdle.png";
}

function handleImageLoad(e) {
    numberOfImagesLoaded++;

    // We're not starting the game until all images are loaded
    // Otherwise, you may start to draw without the resource and raise 
    // this DOM Exception: INVALID_STATE_ERR (11) on the drawImage method
    if (numberOfImagesLoaded == 2) {
        numberOfImagesLoaded = 0;
        startGame();
    }
}

This code is very simple. For instance, it doesn’t handle the errors properly by trying to re-download the image in case of a first failure. If you’re building a game, you will need to write your own content download manager if the JS library you’re using doesn’t implement it.

To add the idle sequence and setting the position parameters, we just need to use the same kind of code previously seen:

var spriteSheetIdle = new SpriteSheet(
        imgMonsterAIdle, //image to use
        64, //width of each sprite
        64, //height of each sprite
        {    
            idle: [0, 10]
        });

bmpSeqIdle = new BitmapSequence(spriteSheetIdle);

bmpSeqIdle.name = "monsteridle1";
bmpSeqIdle.speed = 1;
bmpSeqIdle.direction = 0;
bmpSeqIdle.x = 16;
bmpSeqIdle.y = 32;

Now, in the tick() method, we need to stop the walking animation once we’ve reached back the left side of the screen and to play the idle animation instead. Here is the code which does that:

if (bmpSeq.x < 16) {
    // We've reached the left side of our screen
    // We need to walk right now
    bmpSeq.direction = 90;
    bmpSeq.gotoAndStop("walk_left");
    stage.removeChild(bmpSeq);
    bmpSeqIdle.gotoAndPlay("idle");
    stage.addChild(bmpSeqIdle);
}

You can test the final result here:

You can also browse this sample here: easelJSSpritesTutorial03 if you’d like to view the complete source code.

That’s all folks! But if you want to go further, you can read the next part here: HTML5 Gaming: building the core objects & handling collisions with EaselJS

David

Introduction to the HTML5 Web Workers: the JavaScript multithreading approach

David Rousset — Fri, 15 Jul 2011 13:56:04 GMT

An HTML5 application is obviously written using JavaScript. But compared to other kind of development environments (like native one), JavaScript historically suffers from an important limitation: all its execution process remains inside a unique thread. This could be pretty annoying with today multi-cores processors like the i5/i7 containing up to 8 logical CPUs and even with the latest ARM mobile processors being dual or even quad-cores. Hopefully, we’re going to see that HTML5 offers to the web a way to better handle these new marvelous processors to help you embrace a new generation of web applications.

Before the workers…
Web Workers or how to be executed out of the UI Thread
- My 1st Web Worker
- Posting messages using JSON
Browsers support
Non accessible elements from a worker
Errors handling & debugging
- The F12 development bar for a better debugging experience
- An interesting solution to mimic console.log()
Use cases and how to identify potential candidates
- Web Workers for which scenarios?
- How to identity hot spots in your code
  - Case 1: canvas animation with the Speed Reading demo
  - Case 2: Raytracers inside canvas
Conclusion

Pour ceux qui pratiquent la langue de Molière, vous trouverez une version française ici : Introduction aux Web Workers d’HTML5 : le multithreading version JavaScript

Before the workers…

This JavaScript limitation implies that a long running processing will freeze the main window. We often say in our developers’ words that we’re blocking the “UI Thread”. This is the main thread in charge of handling all the visual elements and associated tasks: drawing, refreshing, animating, user inputs events, etc. We all know the bad consequences of overloading this thread: the page freezes and the user can’t interact anymore with your application. The user experience is then of course very bad and the user will probably decide to kill the tab or the browser instance. This is probably not something you’d like to see while using your application!

To avoid that, the browsers have implemented a protection mechanism which alerts the user when a long-running suspect script occurs. Unfortunately, this protection mechanism can’t make the difference between a script not written correctly and a script which really needs more time to accomplish its work. Still, as it blocks the UI thread, it’s better to tell you that something wrong is maybe currently occurring. Here are some messages examples (from Firefox 5 & IE9):

Hopefully, up to now, those problems were rarely occuring for 2 main reasons:

1 – HTML and JavaScript weren’t used in the same way and for the same goals as other technologies able to achieve multithreaded tasks. The Websites were offering richless experiences to the users than native applications.
2 – There were some other ways to more or less solve this concurrency problem.

Those ways are well known from all web developers. We were indeed trying to simulate parallel tasks thanks to the setTimeout() and setInterval() methods for instance. HTTP requests can also be done in asynchronous manner thanks to the XMLHttpRequest object which avoids freezing the UI while loading some resources from some remote servers. At last, the DOM Events allow us to write application making the illusion that several things occurs at the same time. Illusion, really? Yes!

To better understand why, let’s have a look to a fake piece of code and let’s then see what happens inside the browser:

<script type="text/javascript">
    function init(){
        { piece of code taking 5ms to be executed } 
        A mouseClickEvent is raised
        { piece of code taking 5ms to be executed }
        setInterval(timerTask,"10");
        { piece of code taking 5ms to be executed }
    }

    function handleMouseClick(){
          piece of code taking 8ms to be executed 
    }

    function timerTask(){
          piece of code taking 2ms to be executed 
    }
</script>

Let’s take this code to project it on a model. This diagram then shows us what’s happening in the browser on a time scale:

This diagram well illustrates the non-parallel nature of our tasks. Indeed, the browser is only enqueuing the various execution requests:

- from 0 to 5ms: the init() function starts by a 5ms task. After 5ms, the user raises a mouse click event. However, this event can’t be handled right now as we’re still executing the init() function which currently monopolize the main thread. The click event is saved and will be handled later on.

- from 5 to 10ms: the init() function continues its processing during 5ms and then asks to schedule the call to the timerTask() in 10ms. This function should then logically be executed at the 20ms timeframe.

- from 10 to 15ms: 5 new milliseconds are needed to finish the complete run of the init() function. This is then corresponding to the 15ms yellow block. As we’re freeing the main thread, it can now start to dequeue the saved requests.

- from 15 to 23ms: the browser starts by running the handleMouseClock() event which runs during 8ms (the blue block).

- from 23 to 25 ms: as a side effect, the timerTask() function which was scheduled to be run on the 20ms timeframe is slightly shifted of 3ms. The other scheduled frames (30ms, 40ms, etc.) are respected as there is no more code taking some CPU.

Note: this sample and the above diagram (in SVG or PNG via a feature detection mechanism) were inspired by the following article: HTML5 Web Workers Multithreading in JavaScript

In conclusion, all these tips don’t really solve our initial problem: everything keeps being executed inside the main UI thread.

Moreover, even if JavaScript weren’t used in the past for the same kind of applications like the so-called “high level languages”, it starts to change lastly thanks to the new possibilities offered by HTML5 and its friends. It was then more than important to provide to JavaScript some new powers to make it ready building a new generation of applications being able to leverage parallel tasks. This is exactly what the Web Workers were made for.

Web Workers or how to be executed out of the UI Thread

The Web Workers APIs define a way to run script in the background. We will then be able to execute some tasks in threads living outside the main page and thus non-impacting the drawing performance. However, in the same way that we know that not all algorithms can be parallelized, not all JavaScript code can take advantage of workers. Ok, enough blah blah, let’s have a look to those famous workers.

My 1st Web Worker

As Web Workers will be executed on separated threads, you need to host their code into separated files from the main page. Once done, you need to instantiate a Worker object to call them:

var myHelloWorker = new Worker('helloworkers.js');

You’ll then start the worker (and thus a thread under Windows) by sending it a first message:

myHelloWorker.postMessage();

Indeed, the Web Workers and the main page are communicating via messages. Those messages can be formed with normal strings or JSON objects. To illustrate simple messages posting, we're going to start by reviewing a very basic sample. It will post a string to a worker that will simply concatenate it with something else. To do that, add the following code into the “helloworker.js” file:

function messageHandler(event) {
    // Accessing to the message data sent by the main page
    var messageSent = event.data;
    // Preparing the message that we will send back
    var messageReturned = "Hello " + messageSent + " from a separate thread!";
    // Posting back the message to the main page
    this.postMessage(messageReturned);
}

// Defining the callback function raised when the main page will call us
this.addEventListener('message', messageHandler, false);

We’ve just defined inside “helloworkers.js” a piece of code that will be executed on another thread. It can receive messages from your main page, do some tasks on it and send a message back to your page in return. We then need to write the receiver in the main page. Here is the page that will handle that:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Web Workers</title>
</head>
<body>
    <div id="output"></div>

    <script type="text/javascript">
        // Instantiating the Worker
        var myHelloWorker = new Worker('helloworkers.js');
        // Getting ready to handle the message sent back
        // by the worker
        myHelloWorker.addEventListener("message", function (event) {
            document.getElementById("output").textContent = event.data;
        }, false);

        // Starting the worker by sending a first message
        myHelloWorker.postMessage("David");

        // Stopping the worker via the terminate() command
        myHelloWorker.terminate();
    </script>
</body>
</html>

The result will the be: “Hello David from a separate thread!”. You’re now impressed, aren’t you?

The worker will live until you kill it. Beware of that. As they are not automatically garbage collected, it’s up to you to control their states. Moreover, keep in mind that instantiating a worker will have some memory cost and don’t negligate the cold start time neither. To stop a worker, there are 2 possible solutions:

1 – from the main calling page by calling the terminate() command.
2 – from the worker itself via the close() command.

DEMO: You can test this slightly enhanced sample in your browser here -> http://david.blob.core.windows.net/html5/HelloWebWorkers_EN.htm <-

Posting messages using JSON

Of course, most of the time we will send some more structurated data to the workers. By the way, Web Workers can also communicate between each others using Message channels.

But the only way to send some structurated messages to a worker is to use the JSON format. Hopefully, browsers that currently support Web Workers are nice enough to also natively support JSON. How kind they are!

Let’s then take our previous code sample. We’re going to add an object of type WorkerMessage. This type will be used to send some commands with parameters to our Web Workers.

Let’s use now the following simplified HelloWebWorkersJSON_EN.htm web page:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Web Workers JSON</title>
</head>
<body>
    <input id=inputForWorker /><button id=btnSubmit>Send to the worker</button><button id=killWorker>Stop the worker</button>
    <div id="output"></div>

    <script src="HelloWebWorkersJSON.js" type="text/javascript"></script>
</body>
</html>

We’re using here the Unobtrusive JavaScript approach which helps us dissociating the view from the attached logic. The attached logic is then living inside this HelloWebWorkersJSON_EN.js file:

// HelloWebWorkersJSON_EN.js associated to HelloWebWorkersJSON_EN.htm

// Our WorkerMessage object will be automatically
// serialized and de-serialized by the native JSON parser
function WorkerMessage(cmd, parameter) {
    this.cmd = cmd;
    this.parameter = parameter;
}

// Output div where the messages sent back by the worker will be displayed
var _output = document.getElementById("output");

/* Checking if Web Workers are supported by the browser */
if (window.Worker) {
    // Getting references to the 3 other HTML elements
    var _btnSubmit = document.getElementById("btnSubmit");
    var _inputForWorker = document.getElementById("inputForWorker");
    var _killWorker = document.getElementById("killWorker");

    // Instantiating the Worker
    var myHelloWorker = new Worker('helloworkersJSON_EN.js');
    // Getting ready to handle the message sent back
    // by the worker
    myHelloWorker.addEventListener("message", function (event) {
        _output.textContent = event.data;
    }, false);

    // Starting the worker by sending it the 'init' command
    myHelloWorker.postMessage(new WorkerMessage('init', null));

    // Adding the OnClick event to the Submit button
    // which will send some messages to the worker
    _btnSubmit.addEventListener("click", function (event) {
        // We're now sending messages via the 'hello' command 
        myHelloWorker.postMessage(new WorkerMessage('hello', _inputForWorker.value));
    }, false);

    // Adding the OnClick event to the Kill button
    // which will stop the worker. It won't be usable anymore after that.
    _killWorker.addEventListener("click", function (event) {
        // Stopping the worker via the terminate() command
        myHelloWorker.terminate();
        _output.textContent = "The worker has been stopped.";
    }, false);
}
else {
    _output.innerHTML = "Web Workers are not supported by your browser. Try with IE10: <a href=\"http://ie.microsoft.com/testdrive\">download the latest IE10 Platform Preview</a>";
}

At last, here is the code for the web worker contained in helloworkerJSON_EN.js the file:

function messageHandler(event) {
    // Accessing to the message data sent by the main page
    var messageSent = event.data;

    // Testing the command sent by the main page
    switch (messageSent.cmd) {
        case 'init':
            // You can initialize here some of your models/objects
            // that will be used later on in the worker (but pay attention to the scope!)
            break;
        case 'hello':
            // Preparing the message that we will send back
            var messageReturned = "Hello " + messageSent.parameter + " from a separate thread!";
            // Posting back the message to the main page
            this.postMessage(messageReturned);
            break;
    }
}

// Defining the callback function raised when the main page will call us
this.addEventListener('message', messageHandler, false);

Once again, this sample is very basic. Still, it should help you to understand the underlying logic. For instance, nothing prevents you to use the same approach to send to a worker some gaming elements that will be handled by an AI or physics engine.

DEMO: You can test this JSON sample here: -> http://david.blob.core.windows.net/html5/HelloWebWorkersJSON_EN.htm <-

Browsers support

Web Workers have just arrived in the IE10 PP2 (Platform Preview). This is also supported by Firefox (since 3.6), Safari (since 4.0), Chrome & Opera 11. However, this is not supported by the mobile versions of these browsers. If you’d like to have a more detailed support matrix, have a look here: http://caniuse.com/#search=worker

In order to dynamically know in your code that this feature is supported, please use the a feature detection mechanism. You shouldn’t use anymore some user-agent sniffing!

To help you, there are 2 available solutions. The first one is to simply test the feature yourself using this very simple piece of code:

/* Checking if Web Workers are supported by the browser */
if (window.Worker) {
    // Code using the Web Workers
}

The second one is to use the famous Modernizr library (now natively shipped with the ASP.NET MVC3 project templates). Then, simply use a code like that:

<script type="text/javascript">
    var divWebWorker = document.getElementById("webWorkers");
    if (Modernizr.webworkers) {
        divWebWorker.innerHTML = "Web Workers ARE supported";
    }
    else {
        divWebWorker.innerHTML = "Web Workers ARE NOT supported";
    }
</script>

Here is for instance the current support in your browser:

This will allow you to expose 2 versions of your application. If Web Workers are not supported, you will simply execute your JavaScript code as usual. If Web Workers are supported, you will be able to push some of the JavaScript code to the workers to enhance the performance of your applications for the most recent browsers. You won’t then break anything or build a specific version only for the very latest browsers. It will work for all browsers with some performance differences.

Non accessible elements from a worker

Rather than looking to what you don’t have access from workers, let’s rather take a look to what you’ve only have access to. For that, please have check the table from our MSDN Documentation: HTML5 Web Worker

But the short version is: you don’t have access to the DOM.

The Web Workers in IE10: Background JavaScript Makes Web Apps Faster article from our IE Blog has a very good diagram summarizing that:

For instance, as you don’t have access to the window object from a worker, you won’t be able to access to the Local Storage (which any way doesn’t seem to be thread-safe). Those limitations may look too constraint for developers used to multithreaded operations in other environments. However, the big advantage is not to fall into the same problems we usually encounter: lock, races conditions, etc. We won’t have to think about that with web workers. This then makes the web workers something very accessible while allowing some interesting performance boosts in specific scenarios.

Errors handling & debugging

It is very easy to handle errors raised from your Web Workers. You simply have to subscribe to the OnError event in the same way we’ve done it with the OnMessage event:

myWorker.addEventListener("error", function (event) {
    _output.textContent = event.data;
}, false);

This is the best Web Workers can give you natively to help you debugging their code… This is very limited, isn’t it?

The F12 development bar for a better debugging experience

To go beyond that, IE10 offers you to directly debug the code of your Web Workers inside its script debugger like any other script.

For that, you need to launch the development bar via the F12 key and navigate to the “Script” tab. You shouldn’t see the JS file associated to your worker yet. But right after pressing the “Start debugging” button, it should magically be displayed:

Next step is then to simply debug your worker like you’re used to debug your classic JavaScript code!

IE10 is currently the only browser offering you that. If you want to know more about this feature, you can read this detailed article: Debugging Web Workers in IE10

An interesting solution to mimic console.log()

At last, you need to know that the console object is not available within a worker. Thus, if you need to trace what’s going on inside the worker via the .log() method, it won’t work as the console object won’t be defined. Hopefully, I’ve found an interesting sample that mimic the console.log() behavior by using the MessageChannel: console.log() for Web Workers. This works well inside IE10, Chrome & Opera but not in Firefox as it doesn’t support the MessageChannel yet.

Note: in order to make the sample from this link working fine in IE10, you need to change this line of code:

console.log.apply(console, args); // Pass the args to the real log

By this one:

console.log(args); // Pass the args to the real log

Then, you should be able to obtain such results:

DEMO: If you want to try this console.log() simulation: -> http://david.blob.core.windows.net/html5/HelloWebWorkersJSONdebug_EN.htm <-

Use cases and how to identify potential candidates

Web Workers for which scenarios?

When you browse the web looking for sample usages of the Web Workers, you always find the same kind of demos: intensive mathematical/scientific computation. You’ll then find some JavaScript raytracers, fractals, prime numbers, and stuff like that. Nice demos to understand the way workers works but this gives us few concrete perspectives on how to use them in “real world” applications.

It’s true that the limitations we’ve seen above on the resources available inside web workers narrow down the number of interesting scenarios. Still, if you just take some time to think about it, you’ll start to see new interesting usages:

- image processing by using the data extracted from the <canvas> or the <video> elements. You can divide the image into several zones and push them to the different workers that will work in parallel. You’ll then benefit from the new generation of multi-cores CPUs. The more you have, the fastest you’ll go.
- big amount of data retrieved that you need to parse after an XMLHTTPRequest call. If the time needed to process this data is important, you’d better do it in background inside a web worker to avoid freezing the UI Thread. You’ll then keep a reactive application.
- background text analysis: as we have potentially more CPU time available when using the web workers, we can now think about new scenarios in JavaScript. For instance, we could imagine parsing in real-time what the user is currently typing without impacting the UI experience. Think about an application like Word (of our Office Web Apps suite) leveraging such possibility: background search in dictionaries to help the user while typing, automatic correction, etc.
- concurrent requests against a local database. IndexDB will allow what the Local Storage can’t offer us: a thread-safe storage environment for our Web Workers.

Moreover, if you switch to the video game world, you can think about pushing the AI or physics engines to the Web Workers. For instance, I’ve found this experimentation: On Web Workers, GWT, and a New Physics Demo which use the Box2D physic engine with workers. For your Artificial Intelligence engine, this means also that you will be able in the same timeframe to process more data (anticipate more moves in a chess game for instance).

Some of my colleagues may now argue that the only limit is your imagination!

But in a general manner, as long as you don’t need the DOM, any time consuming JavaScript code that may impact the user experience is a good candidate for the web workers. However, you need to pay attention to 3 points while using the workers:

1 – The initializing time and the communication time with the worker shouldn’t be superiors to the processing itself
2 – The memory cost of using several workers
3 – The dependency of the code blocks between them as you may then need some synchronization logic. Parallelization is not something easy my friends!

On our side, we’ve recently published the demo named Web Workers Fountains:

This demo displays some particles effects (the fountains) and uses 1 web worker per fountain to try to compute the particles in the fastest way possible. Each worker result is then aggregated to be displayed inside the <canvas> element. Web Workers can also exchange messages between them via the Message Channels. In this demo, this is used to ask to each of the workers when to change the color of the fountains. We’re then looping through this array of colors: red, orange, yellow, green, blue, purple and pink thanks to the Message Channels. If you’re interesting into the details, jump into the LightManager() function of the Demo3.js file.

Feel free also to launch this demo inside Internet Explorer 10, it’s funny to play with!

How to identity hot spots in your code

To track the bottlenecks and identity which parts of your code you could send to the web workers, you can use the script profiler available with the F12 bar of IE9/10. It will then help you to identify your hot spots. However, identifying a hot spot doesn’t mean you’ve identified a good candidate for web workers. To better understand that, let’s review together 2 different interesting cases.

Case 1: <canvas> animation with the Speed Reading demo

This demo comes from our IE Test Drive center and can be browsed directly here: Speed Reading. It tries to display as fast as possible some characters using the <canvas> element. The goal is to stress the quality of the implementation of the hardware acceleration layer of your browser. But going beyond that, would it be possible to obtain more performance by splitting some operations on threads? We need to achieve some analysis to check that.

If you run this demo inside IE9/10, you can also start the profiler during a couple of seconds. Here is the kind of results you’ll obtain:

If you’re sorting the time consuming functions in decreasing order, you’ll clearly see those functions coming first: DrawLoop(), Draw() and drawImage(). If you’re double-clicking on the Draw line, you’ll jump into the code of this method. You’ll then observe several calls of this type:

surface.drawImage(imgTile, 0, 0, 70, 100, this.left, this.top, this.width, this.height);

Where the surface object is referencing a <canvas> element.

A quick conclusion of this brief analysis is that this demo spends most of its time drawing inside the Canvas through the drawImage() method. As the <canvas> element is not accessible from a web worker, we won’t be able to offload this time consuming task to different threads (we could have imagined some ways of handling the <canvas> element in a concurrency manner for instance). This demo is then not a good candidate for the parallelization possibilities offered by the web workers.

But it’s well illustrating the process you need to put in place. If, after some profiling job, you’re discovering that the major part of the time consuming scripts are deeply linked to DOM objects, the web workers won’t be able to help you boosting the performance of your web app.

Case 2: Raytracers inside <canvas>

Let’s now take another easy example to understand. Let’s take a raytracer like this one: Flog.RayTracer Canvas Demo. A raytracer uses some very CPU intensive mathematical computations in order to simulate the path of light. The idea is to simulate some effects like reflection, refraction, materials, etc.

Let’s render a scene while launching the script profiler, you should obtain something like that:

Again, if we sort the functions in a decreasing order, 2 functions clearly seem to take most of the time: renderScene() and getPixelColor().

The goal of the getPixelColor() method is to compute the current pixel. Indeed, ray-tracing is rendering a scene pixel per pixel. This getPixelColor() method is then calling the rayTrace() method in charge of rendering the shadows, ambient light, etc. This is the core of our application. And if you’re reviewing the code of the rayTrace() function, you’ll see that it’s 100% pure JavaScript juice. This code has no DOM dependency. Well, I think you’ll get it: this sample is a very good candidate to parallelization. Moreover, we can easily split the image rendering on several threads (and thus potentially on several CPUs) as there’s no synchronization needed between each pixel computation. Each pixel operation is independent from its neighborhood as no anti-aliasing is used in this demo.

This is not then a surprise if we can find some raytracers samples using some web workers like this one: http://nerget.com/rayjs-mt/rayjs.html

After profiling this raytracer using IE10, we can see the important differences between using no worker and using 4 workers:

In the first screenshot, the processRenderCommand() method is using almost all of the CPU available and the scene is rendered in 2.854s.

With 4 web workers, the processRenderCommand() method is executed in parallel on 4 different threads. We can even see their Worker Id on the right column. The scene is rendered this time in 1.473s. The benefits were real: the scene has been rendered 2 times faster.

Conclusion

There is no magical or new concepts linked to the web workers in the way to review/architect your JavaScript code for parallel execution. You need to isolate the intensive part of your code. It needs to be relatively independent of the rest of your page’s logic to avoid waiting for synchronization tasks. And the most important part: the code shouldn’t be linked to the DOM. If all these conditions are met, think about the web workers. They could definitely help you boosting the general performance of your web app!

David

PS : All the samples of this article are available in this ZIP file: https://david.blob.core.windows.net/html5/WebWorkersSamples.zip .

Introduction aux Web Workers d’HTML5 : le multithreading version JavaScript

David Rousset — Fri, 08 Jul 2011 09:55:22 GMT

Une application HTML5 s’écrit bien entendu en JavaScript. Or, par rapport aux autres modèles de développements connus (clients lourds avec .NET/C++ ou même avec Silverlight), JavaScript dispose historiquement d’une limitation importante : toute son exécution s’effectue dans un seul et même thread. C’est plutôt ballot à l’heure des processeurs multi-cœurs comme les Core i5/i7 proposant jusqu’à 8 cœurs logiques voire même les derniers processeurs mobiles ARM double voire quadri-cœurs. Heureusement, nous allons voir qu’HTML5 nous propose une solution pour mieux exploiter ces nouvelles petites puces.

Exposé du problème
Web Workers ou comment sortir de l'UI Thread
- Mon 1er Web Worker
- Echanges à travers JSON
Support dans les navigateurs
Les éléments non accessibles depuis un worker
Gérer les erreurs et le debugging
- La barre de développement F12 pour le debug
- Une solution pour avoir console.log()
Scénarios d’usages et comment identifier le code candidat
- Web Workers pour quels usages ?
- Comment identifier les points chauds dans son code
  - Exemple 1 : animation dans canvas avec Speed Reading
  - Exemple 2 : Raytracer dans canvas
Ressources complémentaires

Exposé du problème

Cette limitation historique de JavaScript implique qu’un traitement important va bloquer la fenêtre principale d’affichage (la page web en cours d’utilisation). On dit souvent dans le jargon des développeurs que l’on bloque ainsi le “UI Thread”, le thread qui est dédié à l’affichage et au rafraichissement de celui-ci. Nous connaissons tous les conséquences d’une telle mauvaise pratique : la page se fige et l’utilisateur ne peut plus interagir avec l’application. Conséquence : l’expérience utilisateur est bien entendue très mauvaise et ce dernier finit naturellement par tuer l’onglet ou l’instance du navigateur en cours. Cela n’était surement pas le résultat que vous souhaitiez obtenir !

Par ailleurs, les navigateurs disposent d'un système de protection pour avertir l’utilisateur qu’un script prends trop de temps à s’exécuter. Malheureusement, ce dernier ne différentie pas les cas où le script est effectivement mal écrit des cas où le script a réellement besoin de temps pour finir son traitement. Sauf que comme il bloque le thread d’affichage, on préfère vous prévenir avec ce genre de messages (issus de Firefox 5 et IE9) :

Cependant, jusqu’à présent, rares étaient les cas où cela nous posait vraiment problème pour 2 raisons :

1 – HTML et JavaScript n’étaient pas utilisés de la même manière et dans le même but que les technologies capables d’effectuer des traitements multi-threadés. Les sites Web proposaient une expérience beaucoup moins riches que les applications de bureau.
2 – Il existait des techniques permettant plus ou moins de s’en sortir autrement.

Ces techniques sont connues de tous les développeurs Web qui se débrouillent ainsi pour simuler des traitements parallèles grâce aux fonctions setTimeout() ou setInterval() par exemple. De la même manière, les appels HTTP se font de manières asynchrones via l’objet XMLHttpRequest, ce qui évite ainsi de bloquer l’UI pendant le téléchargement de certaines ressources. Pour finir, l’utilisation des évènements du DOM permet d’écrire des applications donnant l’illusion que plusieurs choses se passent en même temps. Illusion ? Oui, pour le comprendre regardons un exemple de code scolaire et tentons de comprendre ce qu’il se passe dans le navigateur :

<script type="text/javascript">
    function init(){
        { un code qui prends 5 ms à être exécuté } 
        un évènement de type mouseClickEvent est levé
        { un code qui prends 5 ms à être exécuté }
        setInterval(timerTask,"10");
        { un code qui prends 5 ms à être exécuté }
    }

    function handleMouseClick(){
          un code qui prends 8 ms à être exécuté 
    }

    function timerTask(){
          un code qui prends 2 ms à être exécuté 
    }
</script>

Prenons ce code et projetons le sur un diagramme chargé de modéliser l’exécution dans le temps :

On voit bien sur ce diagramme la nature non-parallèle des traitements. En fait, le navigateur se contente d’enfiler dans une queue les différentes demandes d’exécution de code :

- de 0 à 5 ms : la fonction init() démarre en effet à 0 ms et commence par un traitement de 5 ms. Au bout de 5 ms, l’utilisateur déclenche un clic de souris. Cependant, la gestion de cet évènement ne peut être gérée car nous sommes toujours dans le bloc de la fonction init() en train d’accaparer le thread principal. La demande de clic de souris est conservée mais sera gérée plus tard.

- de 5 à 10 ms : la fonction init() continue son traitement pendant 5 ms puis on demande à exécuter la fonction timerTask() dans 10 ms. Cette fonction devrait donc logiquement être exécutée au à 20 ms sur l’échelle du temps.

- de 10 à 15 ms : s’en suivent 5 nouvelles millisecondes de traitement pour terminer init() ce qui constitue alors le 1er bloc jaune ininterrompu de 15 ms. Comme on libère le thread, ce dernier dépile alors les demandes.

- de 15 à 23 ms : il commence par exécuter la fonction handleMouseClick() qui dure 8 ms (le bloc bleu).

- de 23 à 25 ms : du coup, la fonction timerTask(), qui était programmée pour être exécutée sur la fenêtre des 20 ms sur l’échelle du temps, est légèrement décalée de 3 ms pour ensuite reprendre la programmation initiale (30 ms, 40 ms, etc.) puisqu’il n’y a pas de code qui reprend du CPU.

Note : cet exemple et le graphique ci-dessus (en SVG ou PNG par “feature detection”) a été inspiré de l’article suivant : HTML5 Web Workers Multithreading in JavaScript

Donc au final, toutes ces techniques ne répondent pas réellement au problème initial : tout s’exécute malgré tout dans le thread principal.

Par ailleurs, même si JavaScript n’était pas utilisé dans le même but que les technologies à base de langages dit de “haut niveau”, cela est entrain de changer ces derniers temps par les possibilités offertes par HTML5 et ses amis. Il a fallut donc doter JavaScript de nouvelles capacités pour le préparer à la réalisation d’applications plus riches et réellement parallèles. C’est justement le but des Web Workers.

Web Workers ou comment sortir de l’UI Thread

Les APIs des Web Workers définissent justement un moyen d’exécuter des scripts en tâche de fond. Cela va donc vous permettre d’exécuter des traitements sur des threads séparés vivant donc à côté de la page principale et n’ayant pas d’impact sur ses performances d’affichage. Cependant, de la même manière que tous les algorithmes ne sont pas forcément parallèlisables, nous verrons que tout ne se prête pas à l’exécution via des workers. Allez, trêves de blabla. Regardons comment marche tout ça.

Mon 1er Web Worker

Comme les Web Workers vont être exécutés sur des threads séparés, il faut que leur code soit hébergé dans un fichier séparé de la page principale. Ensuite, pour les appeler, on instancie un objet de type Worker :

var monWorker = new Worker('lesuperworker.js');

Puis, on démarre le worker (et donc un thread sous Windows), en lui envoyant un premier message :

monWorker.postMessage();

En effet, la manière de communiquer entre le Worker et la page principale se fait via l’utilisation de messages. Ces messages doivent être formés par des chaines de caractères classiques ou via des objets JSON. Pour illustrer le passage de messages, on va commencer par faire simple en envoyant une chaine au worker qui va simplement la concaténer avec autre chose. Pour cela, insérez ce code dans “helloworkers.js” :

function messageHandler(event) {
    // On récupère le message envoyé par la page principale
    var messageSent = event.data;
    // On prépare le message de retour
    var messageReturned = "Bonjour " + messageSent + " depuis un thread séparé !";
    // On renvoit le tout à la page principale
    this.postMessage(messageReturned);
}

// On définit la fonction à appeler lorsque la page principale nous sollicite
// équivalent à this.onmessage = messageHandler;
this.addEventListener('message', messageHandler, false);

Nous avons donc défini dans “helloworkers.js” un code qui doit s’exécuter dans un autre thread. Il est capable de recevoir un message depuis notre page principale, de le traiter puis d’en renvoyer un autre en retour. Il faut maintenant écrire son pendant dans la page principale justement. Voici la page en question :

<!DOCTYPE html>
<html>
<head>
    <title>Hello Web Workers</title>
</head>
<body>
    <div id="output"></div>

    <script type="text/javascript">
        // On instantie le Worker
        var monWorker = new Worker('helloworkers.js');
        // On se prépare à traiter le message de retour qui sera
        // renvoyé par le worker
        monWorker.addEventListener("message", function (event) {
            document.getElementById("output").textContent = event.data;
        }, false);

        // On démarre le worker en lui envoyant un 1er message
        monWorker.postMessage("David");

        // On stoppe le worker via la commande terminate()
        monWorker.terminate();
    </script>
</body>
</html>

Le résultat sera bien : “Bonjour David depuis un thread séparé !”. Ca vous épate hein ?

Le worker va ensuite vivre sa vie tant que vous ne l’aurez pas tué. Par ailleurs, l’instanciation d’un worker a un cout non négligeable en temps de démarrage puis ensuite en consommation mémoire. Ils ne sont pas non plus automatiquement “garbage collectés”, c’est donc à vous de contrôler leurs états. Pour stopper le worker, il y a 2 façons de faire :

1 – depuis la page principale en appelant la commande terminate().
2 – depuis le worker lui-même en appelant la commande close().

DEMO : Vous pouvez tester ce même exemple légèrement plus étoffé ici -> http://david.blob.core.windows.net/html5/HelloWebWorkers.htm <-

Echanges à travers JSON

Bien entendu, nous allons la plupart du temps envoyer des données à faire traiter par le worker. Les Web Workers peuvent également discuter entre eux à travers les Message channels. L’unique manière pour structurer les échanges consiste alors à utiliser le format JSON. Heureusement, les navigateurs supportant actuellement les Web Workers ont le bon gout également de supporter JSON de manière native.

Reprenons ainsi notre exemple précédent. Nous allons construire un objet de type WorkerMessage qui va nous servir à envoyer des commandes à notre Web Worker accompagnées d’un paramètre. Prenons ainsi la page web suivante simplifiée HelloWebWorkersJSON.htm :

<!DOCTYPE html>
<html>
<head>
    <title>Hello Web Workers JSON</title>
</head>
<body>
    <input id=inputForWorker /><button id=btnSubmit>Envoyer au worker</button><button id=killWorker>Stopper le worker</button>
    <div id="output"></div>

    <script src="HelloWebWorkersJSON.js" type="text/javascript"></script>
</body>
</html>

On utilise ici la méthode dite d’Unobtrusive JavaScript permettant de séparer notre vue de la logique associée derrière. Voici alors le script HelloWebWorkersJSON.js :

// HelloWebWorkerJSON.js associé à HelloWebWorkersJSON.htm

// Notre objet WorkerMessage sera automatiquement
// sérialisé puis désérialisé via le parseur JSON natif
function WorkerMessage(cmd, parameter) {
    this.cmd = cmd;
    this.parameter = parameter;
}

// Le div où sera affiché les messages en retour du worker
var _output = document.getElementById("output");

/* Vérifie si les Web Workers sont supportés */
if (window.Worker) {
    // On récupère les instances de nos 3 éléments HTML restant
    var _btnSubmit = document.getElementById("btnSubmit");
    var _inputForWorker = document.getElementById("inputForWorker");
    var _killWorker = document.getElementById("killWorker");

    // On instantie le Worker
    var monWorker = new Worker('helloworkersJSON.js');
    // On se prépare à traiter le message de retour qui sera
    // renvoyé par le worker
    monWorker.addEventListener("message", function (event) {
        _output.textContent = event.data;
    }, false);

    // On démarre le worker en lui envoyant la commande 'init'
    monWorker.postMessage(new WorkerMessage('init', null));

    // On branche l'évènement click sur le bouton Submit
    // pour envoyer le contenu de l'input au worker
    _btnSubmit.addEventListener("click", function (event) {
        // On envoit désormais les messages via la commande 'hello'
        monWorker.postMessage(new WorkerMessage('hello', _inputForWorker.value));
    }, false);

    // On branche l'évènement click sur le bouton Kill
    // pour stopper le worker. Il ne sera plus utilisable après
    _killWorker.addEventListener("click", function (event) {
        // On aurait pu créer une commande 'stop' qui aurait été traitée
        // au sein du worker qui se serait fait hara-kiri via .close()
        monWorker.terminate();
        _output.textContent = "Le worker a été stoppé.";
    }, false);
}
else {
    _output.innerHTML = "Les Web Workers ne sont pas supportés par votre navigateur. 
    Réessayez avec IE10 : <a href=\"http://ie.microsoft.com/testdrive\">téléchargez la dernière Platform Preview d'IE10 </a>";
}

Pour finir voici le nouveau code du worker contenu dans helloworkerJSON.js :

function messageHandler(event) {
    // On récupère le message envoyé par la page principale
    var messageSent = event.data;

    // On teste la commande envoyée
    switch (messageSent.cmd) {
        case 'init':
            // On peut initialiser certaines parties de nos objets qui serviront
            // dans ce worker (attention au scope cependant !)
            break;
        case 'hello':
            // On prépare le message de retour
            var messageReturned = "Bonjour " + messageSent.parameter + " depuis un thread séparé !";
            // On renvoit le tout à la page principale
            this.postMessage(messageReturned);
            break;
    }
}

// On définit la fonction à appeler lorsque la page principale nous sollicite
this.addEventListener('message', messageHandler, false);

A nouveau cet exemple est extrêmement simple. Mais je pense que vous avez désormais compris le principe. Par exemple, rien ne vous empêche désormais d’envoyer à un worker des éléments d’un jeu qui devront être mis à jour par un moteur d’IA ou physique fonctionnant au sein d’un Web Worker.

DEMO : Vous pouvez tester ce même exemple ici -> http://david.blob.core.windows.net/html5/HelloWebWorkersJSON.htm <-

Support dans les navigateurs

Le support des Web Workers vient d’arriver dans la PP2 (Platform Preview) d’IE10 et cela fonctionne également sous Firefox (depuis la 3.6), Safari (depuis la 4.0), Chrome et Opera 11. Attention : cela n’est pas encore supporté par les versions mobiles de ces mêmes navigateurs. Si vous voulez un tableau plus précis, rendez-vous sur CanIUse : http://caniuse.com/#search=worker

Pour savoir dynamiquement dans votre code si cette fonctionnalité est supportée par le navigateur, je vous rappelle que désormais la bonne pratique consiste à faire du “feature detection”. Ne faites plus de tests sur le user-agent, c’est le mal !

Pour cela, 2 techniques. Soit vous utilisez la très célèbre librairie Modernizr (que l’on trouve nativement dans les projets ASP.NET MVC3) via un code similaire à celui-ci :

<script type="text/javascript">
    var leDivWebWorker = document.getElementById("webWorkers");
    if (Modernizr.webworkers) {
        leDivWebWorker.innerHTML = "Les Web Workers sont supportés";
    }
    else {
        leDivWebWorker.innerHTML = "Les Web Workers ne sont PAS supportés";
    }
</script>

Et le résultat avec votre navigateur actuel est le suivant :

Soit vous testez vous-même la feature en utilisant en testant simplement ce booléen :

/* Vérifie si les Web Workers sont supportés */
if (window.Worker) {

  // Code utilisant les Web Workers

Cela vous permettra par détection d’offrir une version plus performante aux navigateurs les plus récents tout en conservant l’application fonctionnelle pour ceux ne supportant pas encore cette fonctionnalité.

Les éléments non accessibles depuis un worker

Plutôt de voir à quoi vous n’avez pas accès depuis un worker, regardons plutôt à quoi vous avez uniquement accès :

Méthode

Description

void close();

Stop le worker thread.

void importScripts(urls);

Une liste de fichiers JavaScript additionnels à importer séparés par des virgules.

void postMessage(data);

Envoies un message depuis et vers un worker thread.

Attributs

Type

Description

location

WorkerLocation

Représente une URL absolue, incluant les composants protocol, host, port, hostname, pathname, search, and hash.

navigator

WorkerNavigator

Représente l'identité et l'état onLine du navigateur actuel.

self

WorkerGlobalScope

La portée totale du worker, ce qui inclus donc les objets WorkerLocation et WorkerNavigator.

Evènement

Description

onerror

Une erreur s'est produite pendant l'exécution.

onmessage

Un message contenant des données a été reçu.

Méthode

Description

void clearInterval(handle);

Annule un traitement programmé identifié par le handle fournit en paramètre.

void clearTimeout(handle);

Annule un traitement programmé identifié par le handle fournit en paramètre.

long setInterval(handler, valeur de timeout, arguments);

Programme un traitement devant être exécuté de manière répétitive après le nombre indiqué de millisecondes. Retourne un handle. Vous pouvez alors l'annuler avec clearInterval.

long setTimeout(handler, valeur de timeout, arguments);

Programme un traitement devant être exécuté après le nombre indiqué de millisecondes. Retourne un handle. Vous pouvez alors l'annuler avec clearInterval.

Vous n’avez ainsi pas du tout accès au DOM. Cela est également résumé à travers ces 2 diagrammes :

Ainsi, si vous vous posiez la question, comme l’objet window n’est pas accessible, vous n’avez pas accès au Local Storage depuis un worker. Ce fonctionnement limité peut paraitre parfois trop contraignant pour ceux qui ont l’habitude des opérations multithréadées dans d’autres environnements. Cependant, il a l’immense avantage du coup de ne pas récupérer tous les problèmes inhérents aux partages de ressources : lock, races conditions, etc. Cela rend ainsi les web workers particulièrement accessibles à tous tout en permettant une augmentation des performances dans certains scénarios plus ciblés.

Gérer les erreurs et le debugging

Pour gérer les erreurs levées depuis votre Web Worker, rien de plus simple. Il suffit de s’abonner à l’évènement OnError de la même manière que nous l’avons fait avec OnMessage :

monWorker.addEventListener("error", function (event) {
    _output.textContent = event.data;
}, false);

Ensuite, à vous de vous débrouiller… Bon, avouons le, cela n’est pas super comme pratique comme moyen de debug non? On est d’accord.

La barre de développement F12 pour le debug

Justement, IE10 vous propose la possibilité de débugger directement le code de vos Web Workers comme avec n’importe lequel de vos scripts.

Pour cela, lancez la barre de développement avec la touche F12 et rendez-vous sur l’onglet “Script”. Au début, vous ne verrez pas votre fichier JS correspondant à votre worker apparaitre. Il suffit alors de presser le bouton “Start debugging” pour le voir apparaitre :

Ensuite, débuggez votre worker comme vous avez l’habitude de le faire !

Une solution pour avoir console.log()

Pour finir, il faut savoir que l’objet console n’est pas disponible au sein d’un worker. Ainsi, si vous souhaitez écrire ce qu’il se passe dans votre worker via la méthode .log() , cela ne va pas fonctionner car l’objet console ne sera pas définit. Pour palier à cela, j’ai trouvé cet excellent exemple qui se propose de simuler console.log() en faisant appel aux MessageChannel : console.log() for Web Workers . Cela ne fonctionne donc que dans IE10, Chrome et Opera 11.50. Firefox ne supportant pas encore les MessageChannel.

Note : pour que cela fonctionne bien dans IE10, il faut changer cette ligne de code :

console.log.apply(console, args); // Pass the args to the real log

Par celle-ci :

console.log(args); // Pass the args to the real log

Ensuite, voici un exemple de résultat en action :

DEMO : Vous pouvez tester ce même exemple ici -> http://david.blob.core.windows.net/html5/HelloWebWorkersJSONdebug.htm <-

Scénarios d’usages et comment identifier le code candidat

Web Workers pour quels usages ?

Lorsque l’on parcours la toile à la recherche d’exemples pertinents sur l’utilisation des Web Workers, on tombe toujours sur la même chose : des démonstrations de calculs mathématiques réellement intensifs gérés par les web workers. On retrouve ainsi des raytracers, des calculs de fractales, de nombres premiers, de l’âge de chacun des capitaines de chacune des étoiles de l’univers, etc. Bref, de belles démos technologiques mais peu de perspectives concrètes sur les applications dites du “monde réel”.

Il est vrai que les limitations que fixent les Web Workers sur les ressources disponibles amenuisent potentiellement d’autant les scénarios. Cependant, il suffit juste de se creuser un peu la tête pour rapidement voir émerger des choses intéressantes :

- traitement d’image en utilisant les données issues de l’élément <canvas> ou <video> : on peut alors diviser les zones de traitement pour les fournir à différents workers qui bosseront en parallèle. On bénéficie ici des processeurs multi-cœurs. Plus nous aurons de cœurs, plus le traitement sera rapide.
- traitement de gros lot de données ramenées par un appel via XMLHTTPRequest : cela alors évite tout simplement de le faire dans le thread principal et donc permet à l’application d’être réactive au près de l’utilisateur.
- analyse de texte en arrière-plan : le fait d’avoir davantage de CPU disponible permet d’envisager de nouveaux scénarios comme le traitement temps réel de ce que tape l’utilisateur sans pénaliser à nouveau l’interface principale. Imaginez alors une version Word (comme celle issue des Office Web Apps) en ligne pouvant bénéficier de ce scénario : recherche dynamique dans un dictionnaire en arrière-plan pour une aide à la saisie, correction automatique, etc.
- requêtes multiples et concurrentes vers une base de données locale : IndexDB permettra ce que le local storage ne peut nous fournir : un environnement thread-safe pour les web workers.

Par ailleurs, dans le domaine du jeu vidéo, on peut envisager de basculer le moteur d’IA ou le moteur physique vers des web workers. Il y a par exemple cette expérimentation qui a été faite : On Web Workers, GWT, and a New Physics Demo qui propose un basculement du moteur Box2D vers les workers. Dans le cas de l’IA, cela veut aussi dire que le même laps de temps, on peut envisager d’anticiper davantage de choses (des coups dans le cas d’un jeu d’échecs par exemple).

Ensuite certains diront que les seules limites se résument à votre propre imagination !

Mais d’une manière générale, dès l’instant que le DOM n’est pas touché, tout traitement JavaScript relativement long et pouvant pénaliser la fluidité et l’expérience utilisateur méritera d’être un candidat aux web workers. Il faudra cependant être prudent à 3 choses :

1 – A ce que le temps d’initialisation et de communication vers le worker ne soit pas supérieur au temps de traitement en lui-même
2 – A bien faire attention également à la mémoire prise supplémentaire
3 – A la dépendance des morceaux de code entre eux et donc des besoins de synchro. La parallelisation n’est pas une science simple mes amis !

De notre côté, nous avons publié récemment la démo nommée Web Workers Fontains :

Cette dernière calcule des effets de particules (les fontaines) et utilise 1 web worker par fontaine pour tenter de calculer le plus rapidement possible les effets de particules. Le résultat de chacun des workers est ensuite agrégé pour être affiché par le canvas. Les Web Workers peuvent ensuite éventuellement communiquer entre eux via les Message Channels pour se synchroniser sur la couleur actuellement retenue pour peintre chacune des fontaines. N’hésitez pas à aller jouer avec sous Internet Explorer 10, c’est rigolo !

Comment identifier les points chauds dans son code

Pour détecter les goulots d’étranglement et savoir éventuellement quelles parties de votre code envoyer aux web workers, vous pouvez utiliser le profileur de script intégré à IE9/10 avec la barre de développement accessible via la touche F12. Cela va vous permettre d’identifier les points chauds. Mais cela ne veut pas dire pour autant que les zones identifiées seront de bons candidats. Pour mieux le comprendre, faisons le test à travers 2 exemples.

Exemple 1 : animation dans <canvas> avec Speed Reading

Cette démo est issue de notre centre IE Test Drive qui peut être vue ici : Speed Reading. Elle s’occupe d’essayer d’afficher le plus rapidement possible des lettres en utilisant <canvas>. Cette démo a pour but de mettre en valeur la qualité de l’accélération matérielle de votre navigateur. Mais est-il possible de gratter encore un peu plus de performance en splittant certains traitements sur des threads? Cela mérite analyse.

Justement, si on la lance dans IE9/10, on peut utiliser le profileur de script pendant quelques secondes. Voici ce que l’on obtient :

Si l’on trie les fonctions consommant le plus de temps de manière décroissante, on voit clairement ressortir les fonctions suivantes : DrawLoop(), Draw() et drawImage(). Si on double-clique sur Draw, on saute dans le code de la méthode et on observe alors de nombreux appels de ce type :

surface.drawImage(imgTile, 0, 0, 70, 100, this.left, this.top, this.width, this.height);

Sachant que l’objet surface référence un élément de type <canvas>.

Au final, la conclusion de cette analyse rapide est que cette démo passe son temps à faire du dessin via la méthode drawImage() de l’élément Canvas. Or, cet élément n’est pas accessible depuis un web worker donc on ne va pas pouvoir sous-traiter ces opérations à différents threads. On aurait pu imaginer en effet gérer l’élément Canvas de manière concurrente. Cette démo n’apparait donc pas comme un bon candidat à la parrallélisation.

Mais elle illustre bien la démarche à mettre en place. Si après un profiling, vous découvrez que la partie la plus consommatrice de temps CPU utilise des éléments du DOM, les web workers ne pourront pas vous aider à augmenter les performances.

Exemple 2 : Raytracer dans <canvas>

Prenons maintenant l’exemple typique facile à comprendre, un raytracer comme celui-ci : Flog.RayTracer Canvas Demo . Un raytracer met en place des calculs mathématiques consommant énormément de CPU dans le but de simuler le trajet effectué par des rayons dont on simule le lancé. On calcule ainsi les effets de réflexions, diffraction, de matière, etc.

Lançons le calcul d’une scène tout en lançant en parallèle le profileur de script et observons le résultat :

A nouveau si l’on trie les fonctions appelées de manière décroissante, on voit clairement 2 choses ressortir : renderScene() et getPixelColor().

getPixelColor() a pour but de calculer la couleur du pixel courant. En effet, par ray-tracing , une scène est dessinée pixel par pixel. Cette méthode appelle ensuite la méthode rayTrace() chargée de calculer les ombres, la lumière ambiante, etc. C’est le cœur même de notre application. Et justement en analysant le code de cette méthode rayTrace(), on s’aperçoit que c’est du JavaScript 100% pur jus. Aucune dépendance vers le DOM n’y est présente. Bref, vous l’aurez compris, c’est un excellent candidat à la parallélisation. D’autant plus que l’on peut facilement répartir le calcul de l’image sur différents threads (et donc potentiellement différents processeurs) car il n’y pas de phénomène de synchronisation entre le calcul de chacun des pixels. Chaque opération est indépendante du résultat du voisin (il n’y pas d’anti-aliasing dans cette démo).

D’ailleurs, ce n’est ainsi pas un hasard si l’on retrouve des exemples de ray-tracers mettant en œuvre les web workers comme ici par exemple : http://nerget.com/rayjs-mt/rayjs.html

Si on analyse ce dernier exemple au sein d’IE10 avec le profileur, on observe très bien la différence entre l’utilisation d’aucun web worker et de 4 web workers :

On voit ainsi sur le résultat du profiling que dans le 1er cas, la méthode processRenderCommand() sature à elle seul l’ensemble du CPU et l’on obtient alors le résultat en 2,854s.

Avec 4 web workers, on voit très bien la méthode processRenderCommand() s’exécuter en parallèle sur 4 différents threads (dont on peut même voir les Worker Id dans la colonne de droite). On obtient alors le même résultat en 1,473s. Le bénéfice a donc été réel : un traitement 2 fois plus rapide.

Conclusion

Il n’y a pas de magie ou de nouveautés supplémentaires introduites par les web workers dans la démarche à entreprendre pour tenter de paralléliser un code. Il faut isoler un traitement long, indépendant du reste de la vie de notre page pour éviter d’avoir à attendre le résultat pour continuer et surtout n’ayant aucun besoin d’accès au DOM. Si vous tombez dans ce cas, pensez aux web workers, ils pourraient vous aider à augmenter les performances générales de votre application !

Ressources complémentaires

Si vous lisez l’anglais, voici des liens qui m’ont paru intéressants à lire et que je vous conseille donc :

- La spécification officielle du W3C : http://www.w3.org/TR/workers/
- Web Workers in IE10: Background JavaScript Makes Web Apps Faster : http://blogs.msdn.com/b/ie/archive/2011/07/01/web-workers-in-ie10-background-javascript-makes-web-apps-faster.aspx
- The Basics of Web Workers : http://www.html5rocks.com/en/tutorials/workers/basics/
- La documentation issue du MDN : https://developer.mozilla.org/En/Using_web_workers
- An Introduction to HTML 5 Web Workers : http://cggallant.blogspot.com/2010/08/introduction-to-html-5-web-workers.html
- A Deeper Look at HTML 5 Web Workers : http://cggallant.blogspot.com/2010/08/deeper-look-at-html-5-web-workers.html
- Une très belle illustration des Web Workers : http://wearehugh.com/public/2010/08/html5-web-workers/ (j’adore le concept !)

Au boulot travailleurs du web !

David

Une application HTML5 pour afficher les vidéos 5 minutes pour comprendre IE9

David Rousset — Thu, 16 Jun 2011 16:25:55 GMT

Avec Stanislas Quastana, nous avons créé une série de vidéos appelée “5 min pour comprendre” permettant d’illustrer assez rapidement quelques nouveautés autour d’Internet Explorer 9. Nous les avons publiées ici sur le blog IE France : La série 5 minutes pour comprendre IE9: la liste complète . Ces vidéos sont visibles au format Silverlight Smooth Streaming et/ou avec la balise vidéo HTML5 au format h264.

Certains d’entre vous m’ont indiqué qu’ils auraient aimé avoir également une version WebM. Je me suis donc amusé à ré-encoder les vidéos au format WebM en utilisant l’utilitaire gratuit Miro Video Converter.

Ensuite, je voulais afficher l’ensemble de manière plus sympathique donc je suis reparti de la démo IMDb Video Panorama de notre site IE Test Drive.

Cette démo met en avant les capacités de votre navigateur à afficher de manière fluide les animations et à afficher une vidéo en utilisant la balise HTML5 <video>. Par contre, comme la démo n’utilisait et ne testait que le support du codec h264, j’ai légèrement modifié le code pour également supporter le format WebM. En effet, pour rappel, h264 est supporté via HTML5 par IE9, Safari et Chrome même si Google a annoncé l’abandon de son support à terme dans son navigateur. WebM de son côté est supporté nativement par Chrome, Firefox, Opera et par IE9 via l’installation du codec par Google. Vous pouvez d’ailleurs le voir en démonstration dans IE9 ici : Video Format Support

En résumé donc, si vous souhaitez pouvoir afficher de la vidéo nativement via HTML5 sur l’ensemble des navigateurs actuels, il faut au moins faire du double encodage en h264 et en WebM.

Au final, cela donne le résultat suivant :

Vous pouvez également afficher l’ensemble en plein écran à part depuis ce lien : 5min IE9 Video Panorama

David

How to add the 3D animated HTML5 logo into your webpages thanks to

David Rousset — Fri, 27 May 2011 20:49:50 GMT

To change my mind tonight, I was looking into a way to use the <canvas> element to do something you’ll find probably useless: displaying the HTML5 logo in 3D on the top left of my blog. It’s sometimes so much fun to play with code just for your own pleasure.

Well, it was very straightforward and simple to put in place. Luckily, I’ve found the excellent Kevin Roast website who has written a simple 3D engine based on the HTML5 <canvas> element. He has also built an animated 3D version of the HTML5 logo here: http://www.kevs3d.co.uk/dev/html5logo/

After doing some little modifications and merging some of his sample code, I’ve obtained what you’re currently seeing on this page. If your browser doesn’t support <canvas>, here is a screenshot of the output under IE9:

I’ve also inserted it inside my 2 first articles on SVG & Canvas (in French):

- Introduction aux APIs graphiques d’HTML5: SVG & Canvas (1/4)
- Introduction aux APIs graphiques d’HTML5: SVG & Canvas (2/4)

If you’re navigating into the page, you’ll see also that the little logo is following the vertical scrolling.

If you’d like also to disturb your readers by displaying this little 3D useless thing, you simply have to copy/paste these 3 lines at the end of your page to import the needed scripts:

<script src="http://david.blob.core.windows.net/html5/mathlib-min.js"></script>
<script src="http://david.blob.core.windows.net/html5/k3d-min.js"></script>
<script src="http://david.blob.core.windows.net/html5/html5logo.js"></script>

And you’re done!

If you’re curious and if you’d like to quickly analyze how these scripts work, you just have to press the F12 key which will display the integrated IE9 development bar. In the Script section, select the k3d-min.js file in which you’ll find the main logic that handle the 3D engine with Canvas. You’ll notice by the way that the file is completely unreadable as it has been minified. IE9 offers you an interesting option to reformat the code:

The second interesting script is included inside the html5logo.js file which executes some code at the end of the loading of your page. It creates the <canvas> element by code, add it at the end of the document tree and display it at the top left corner using in-line CSS. The code then instantiates the k3d engine and asks it to display the 3D HTML5 logo thanks to 5 faces.

For instance, here is the code for the first face:

var obj1 = new K3D.K3DObject();
with (obj1)
{
   drawmode = "solid";
   shademode = "lightsource";
   sortmode = "unsorted";
   addphi = -0.5;
   abouty = OBJMOVEY;
   scale = OBJSCALE;
   perslevel = 1000;
   init(
      [{x:-80,y:180,z:0},{x:0,y:180,z:-80},{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:-50,y:150,z:-30},
       {x:0,y:150,z:-80},{x:0,y:130,z:-80},{x:-30,y:130,z:-50},{x:-28,y:110,z:-52},{x:0,y:110,z:-80},
       {x:0,y:90,z:-80},{x:-45,y:90,z:-35},{x:-44,y:80,z:-36},{x:-25,y:80,z:-55},{x:-22,y:66,z:-58},
       {x:0,y:60,z:-80},{x:0,y:40,z:-80},{x:-40,y:50,z:-40}],
      [],
      [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[235,235,235],vertices:[4,5,6,7,8,9,10,11,4]},
       {color:[235,235,235],vertices:[12,13,14,15,16,17,12]}]
   );
}
k3dmain.addK3DObject(obj1);

This will output this face:

And voilà! Have fun and have a nice HTML5 week-end!

David

Comment ajouter le logo HTML5 animé en 3D à vos pages web grâce à

David Rousset — Fri, 27 May 2011 19:47:47 GMT

Ce soir, j’avais envie de jouer avec la balise <canvas> pour faire un truc qui ne sert à rien : afficher le logo 3D animé d’HTML5 en haut à gauche d’une page de mon blog. C’est vrai quoi. Pourquoi n’aurais-je pas le droit de me changer un peu les idées en codant des trucs qui ne servent à rien ?!?

Figurez-vous que ce fut extrêmement simple. Je suis en effet tombé sur le site de Kevin Roast qui s’est amusé à faire un petit moteur 3D basé sur HTML5 <canvas>. Il s’est également amusé à générer et animer le logo HTML5 ici : http://www.kevs3d.co.uk/dev/html5logo/

Il ne m’a donc plus que fallu bidouiller tout ça pour obtenir le résultat que vous voyez sur cette page. Si vous navigateur ne supporte pas <canvas> voici ce que cela donne :

Je l’ai également inséré sur mes 2 premiers articles consacrés à SVG et Canvas :

- Introduction aux APIs graphiques d’HTML5: SVG & Canvas (1/4)
- Introduction aux APIs graphiques d’HTML5: SVG & Canvas (2/4)

Si vous naviguez dans la page, vous verrez que le petit logo suit votre niveau de scrolling vertical.

Si vous aussi vous voulez perturber le lecteur en affichant un machin qui tourne en 3D et qui ne sert à rien, copiez simplement ces 3 lignes de déclaration d’import de scripts à la fin de votre page :

<script src="http://david.blob.core.windows.net/html5/mathlib-min.js"></script>
<script src="http://david.blob.core.windows.net/html5/k3d-min.js"></script>
<script src="http://david.blob.core.windows.net/html5/html5logo.js"></script>

Et le tour est joué !

Si vous souhaitez analyser un peu comment tout cela fonctionne, il vous suffit de presser la touche F12 pour faire apparaitre la barre de développement d’IE9. Ensuite, sélectionnez le fichier k3d-min.js dans lequel se trouve toute la logique principale pour gérer le moteur 3D avec Canvas. Vous constaterez que ce fichier est difficilement lisible car il a été réduit ou “minimisé”. IE9 propose une option pour reformater le code :

Ensuite, le fichier html5logo.js permet de brancher du code à la fin du chargement de votre page. Il créé un élément canvas par code qu’il ajoute à la fin du document et qu’il positionne ensuite via CSS in-line en haut à gauche de la page. Le code instancie ensuite le moteur k3d puis constitue le logo 3D d’HTML5 à l’aide 5 différentes faces.

Par exemple, le code de cette 1ère face :

var obj1 = new K3D.K3DObject();
with (obj1)
{
   drawmode = "solid";
   shademode = "lightsource";
   sortmode = "unsorted";
   addphi = -0.5;
   abouty = OBJMOVEY;
   scale = OBJSCALE;
   perslevel = 1000;
   init(
      [{x:-80,y:180,z:0},{x:0,y:180,z:-80},{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:-50,y:150,z:-30},
       {x:0,y:150,z:-80},{x:0,y:130,z:-80},{x:-30,y:130,z:-50},{x:-28,y:110,z:-52},{x:0,y:110,z:-80},
       {x:0,y:90,z:-80},{x:-45,y:90,z:-35},{x:-44,y:80,z:-36},{x:-25,y:80,z:-55},{x:-22,y:66,z:-58},
       {x:0,y:60,z:-80},{x:0,y:40,z:-80},{x:-40,y:50,z:-40}],
      [],
      [{color:[227,76,38],vertices:[0,1,2,3,0]},{color:[235,235,235],vertices:[4,5,6,7,8,9,10,11,4]},
       {color:[235,235,235],vertices:[12,13,14,15,16,17,12]}]
   );
}
k3dmain.addK3DObject(obj1);

Donne le résultat suivant :

Voilà, vous savez tout maintenant. Allez, bon week-end !

David

Hands-On Lab: Making Silverlight Applications Accessible

David Rousset — Thu, 26 May 2011 12:31:27 GMT

We have delivered a 2 days training in France around Accessibility. One slot of these 2 days was dedicated to Silverlight. As accessibility is something really important in building RIA applications, here is the complete lab to follow if you’d like to better understand how to build accessible Silverlight applications.

You can download the very same instructions in a Word Document format as well as the Visual Studio solutions to work with during this lab here :

Estimated time to complete this lab : 60 minutes

Objectives

The objective of this lab is to learn about how you can build accessible UI with Silverlight.

After completing this lab, you will be able to:
· Understand how Silverlight offer ready to use accessible controls.
· Take care of basic accessibility principles like high contrast or zooming with Silverlight applications

Important Note: The exercises in this lab are intended to provide an overview of the technology presented. They are not intended to, and may not follow, Microsoft best practices or guidance on the technologies presented.

Prerequisites

You’ll need Visual Studio 2010 or Visual Web Developer Express 2010 with the Silverlight Tools installed to follow this lab. You can use Web Platform Installer to setup your machine: http://www.microsoft.com/web/downloads/platform.aspx

Getting Started

The Hands-On Lab files available in the above ZIP archive to download contains a number of additional resources.

This lab includes the following additional resources:

The Lab Manual	HOL – Making Silverlight Applications Accessible.docx	Equivalent of this blog post
Source CodeDC01	Before\ Exercice1.Task1 After\ Exercice1.Task1DC01	Lab exercise 1 source code Completed lab exercise 1 source code

This lab is mainly based on this excellent article: http://www.silverlight.net/learn/quickstarts/accessibility/ .

Exercise 1 – Keyboard Support

Estimated time to complete this exercise: 30 minutes

To provide good keyboard support, you must ensure that every part of your application can be used with a keyboard. If your application makes heavy use of the standard controls, you are most of the way there already. The Silverlight control library provides built-in keyboard support including tab navigation, text input, and control-specific support such as arrow key navigation among ListBox items and DataGrid cells.

In this exercise, you will:

1. Add Tab Navigation
2. Add Keyboard Alternatives to Mouse Events
3. Handle Shortcut Keys and set the focus to the Silverlight Plug-in

Task 1 – Adding Tab Navigation support

To use the keyboard with a control, it must have input focus, and to receive input focus (without using the mouse), it must be accessible via tab navigation. By default, the tab order of controls is the same as the order in which they are added to a design surface, listed in XAML, or programmatically added to a container.

In most cases, the default order is the best order, especially because that is the order in which the controls are read by screen readers. However, the default order does not necessarily correspond to the visual order. The actual display position depends on the containing Panel and the values of properties such as Margin, Canvas.Top and Canvas.Left, or Grid.Row and Grid.Column.

You can ensure that the tab order matches the visual order by adjusting the XAML, or you can override the default tab order by setting the TabIndex property, as shown in the following example of a Grid layout that uses column-first tab navigation.

Perform the following tasks:

1. Open the initial VS2010 project named “Exercice1.Task1” available in the “Before” folder. Launch it and see how you can navigate into the controls using the Tab key.

2. Using the TabIndex property on each TextBox control, change the default way to navigate to match this order :

Tab navigation cycles through all controls in both the browser host and the application, and then repeats the cycle from the beginning. Users can navigate backward through the tab order by pressing SHIFT+TAB.

If you want to exclude a control from the tab order, you can set the IsTabStop property to false. However, you will typically do this only if you make a control non-interactive, for example by setting its IsEnabled property to false, which automatically excludes it from the tab order.

3. Solution is available in the “After” folder

Task 2 – Adding Keyboard alternatives to mouse events

If you implement any mouse-specific interactions, you should implement keyboard equivalents. However, in order to use the keyboard with a UI element, the element must have input focus. Only classes that derive from Control support input focus and tab navigation.

You could create your own custom control, in which case you must set the IsTabStop property to true to enable input focus and provide a visual indication of the focused state using the VisualStateManager class. However, it is often easier to make use of Silverlight control composition.

Perform the following tasks:

1. Open the initial VS2010 project named “Exercice1.Task2” available in the “Before” folder. Launch it and see that you can only throw the click event with the mouse. Moreover, you can’t navigate via the Tab key through the controls.

2. Instead of handling a mouse event on an Image, you could wrap it in a Button to get mouse, keyboard, and focus support automatically. Modify the 2 elements to do so. For instance, modify the following piece of XAML:

<StackPanel>
    <Image x:Name="btn1" Source="Images/datagrid.png" Width="29" Height="32"  />
    <TextBlock Style="{StaticResource MenuLabel}" Text="Table"/>
    <ToolTipService.ToolTip>
        <ToolTip FontSize="16" Content="Insert table"/>
    </ToolTipService.ToolTip>
</StackPanel>

By :

<Button x:Name="btn1" Grid.Column="2" Grid.RowSpan="1" Margin="20,10,10,10" 
        HorizontalAlignment="Left" Grid.Row="1" Click="TableClick">
    <StackPanel>
        <Image  Source="Images/datagrid.png" Width="29" Height="32" />
        <TextBlock Style="{StaticResource MenuLabel}" Text="Table"/>
        <ToolTipService.ToolTip>
            <ToolTip FontSize="16" Content="Insert table"/>
        </ToolTipService.ToolTip>
    </StackPanel>
</Button>

3. Do the same modification on the second StackPanel to embed it inside another button.

4. Launch the project. You should now be able to navigate on the controls using the Tab key and call the click event using the Space key :

Your Silverlight application is now accessible with the keyboard.

5. To go a step further, you can emphasis where the user has clicked by adding specific contrast to the element. For instance, add to the following style to both buttons :

Style="{StaticResource ToolBarButtons}"

6. Relaunch your Silverlight application and notice the difference when you’re clicking on one of the buttons :

7. Have a look to the App.xaml file to find where this style is defined. The change states are handled by the VisualStateManager. This is very important to work with it while building Accessible Silverlight applications. That’s why you should always try to start from core Silverlight controls already providing the default states to use.

8. Try changing the red rectangle by a green rectangle when the button is pressed.

9. You’ll find the final solution on the “After” folder.

Task 3 – Adding Shortcut Keys

Tab navigation provides a good, basic level of keyboard support, but with complex forms, you might want to add support for shortcut keys as well. This can make your application more efficient to use, even for people who use both a keyboard and a mouse.

Silverlight does not provide the kind of built-in shortcut key support that you find in Windows Presentation Foundation (WPF) or Windows Forms. One issue with shortcut keys in Silverlight is that many key combinations are intercepted by the browser host or operating system. Additionally, browser updates can add new shortcut keys at any time, creating unanticipated future conflicts.

It is possible to implement your own shortcut key support, but you should test shortcut keys in all supported browsers. To avoid conflicts, you should not use modifier keys such as CTRL, SHIFT, and ALT. However, in some cases, such as data-entry applications, this is not practical.

If you require modifier keys, one option is to require out-of-browser installation, although even in this case, you cannot use the ALT key. Another option is to use keystrokes that are less likely to cause conflict, such as number keys in combination with CTRL+SHIFT. Using number keys is also beneficial to avoid potential issues with language-dependent letter keys in localized applications.

It is important to document the shortcut keys in your application so that users are aware of them. For example, you can provide a ToolTip on a button that has a shortcut key. You can also use the convention of underlining a letter in a control label. This kind of shortcut key is called an access key or mnemonic. Of course, ToolTips are not useful without a mouse, and neither ToolTips nor underlined letters are reported by screen readers.

You can document access keys through screen readers by setting the AutomationProperties.AccessKey attached property to a string that describes the shortcut key. There is also an AutomationProperties.AcceleratorKey attached property for documenting non-mnemonic shortcut keys, although screen readers generally treat both properties the same way. In general, you should document shortcut keys in multiple ways, using ToolTips, automation properties, and written help documentation.

Perform the following tasks:

1. Open the initial VS2010 project named “Exercice1.Task3” available in the “Before” folder or continue on your project built during the Task2.

2. We’re going to map to T key to the insert table action and the O key to the open file action. For that, set the following property :

AutomationProperties.AccessKey

On both buttons.

3. You need to tell to the user also which key is used for each action. There are 2 good things to do for that: adding an underline on the appropriate character and document it inside the tooltip. Use this piece of XAML to reflect these changes in your application :

<TextBlock Style="{StaticResource MenuLabel}"><Underline>T</Underline>able</TextBlock>
<ToolTipService.ToolTip>
    <ToolTip FontSize="16" Content="Insert table - Shortcut Key: T"/>
</ToolTipService.ToolTip>

4. Do the same for the second button and launch your application. You will then be able to simulate the click by pressing the ‘T’ and ‘O’ keys. However, you have maybe seen that you need to provide the focus to the Silverlight application first.

5. Indeed, another issue with shortcut keys in Silverlight is that Silverlight cannot receive any keystrokes unless the Silverlight plug-in itself has input focus. If the Silverlight plug-in is only part of a web page that has other content, users will need to tab to or click the plug-in before they can use the keyboard with it. If the plug-in occupies the entire page, however, you can add the following code to ensure that the plug-in receives focus as soon as the page finishes loading :

LayoutRoot.Loaded += (sender, e) => System.Windows.Browser.HtmlPage.Plugin.Focus();

6. If you launch your application after adding this code, you’ll see that you will be able to immediately use the shortcut keys as now the Silverlight application get the focus by default.

7. You’ll find the solution in the “After” folder as usual.

Exercise 2 – Screen Reader Support

Estimated time to complete this exercise: 10 minutes

Screen readers provide access to the text in an application by rendering it some other format, such as spoken language or Braille output. The exact behavior of a screen reader depends on the software and on the user configuration of the software.

For example, some screen readers read the entire application UI when the user launches or switches to the application, enabling the user to receive all of the available informational content before using tab navigation. Some screen readers also read the text associated with an individual control when it receives input focus during tab navigation. This enables users to orient themselves as they navigate among the input controls of an application. Narrator is an example of a screen reader that uses both behaviors.

On the other hand, some screen readers read the text of an application only during tab navigation. For this reason, you should ensure that all important information in your UI is part of a focusable control. For example, instead of using a TextBlock to convey application instructions in your UI, you might use a TextBox or RichTextBox with an IsReadOnly property value of true. This enables the control to receive focus while preventing user input.

In this exercise, you will:

1. Add support for screen reader

Task 1 – Adding support for screen reader

To support screen readers, you must provide text alternatives to non-textual information in the UI, such as images and charts, excluding any purely decorative or structural elements. You can do this by setting the AutomationProperties.Name attached property

Perform the following tasks:

1. Open the initial VS2010 project named “Exercice2.Task1” available in the “Before” folder. Launch it the application.

2. Launch the narrator by clicking on the Start button of Windows 7 and search for the “Narrator” application.

3. Set the focus on the buttons and listen to what the narrator says. It will say “Tabulation, Button under Silverlight control”. The user has no way to know what the purpose of the button is. He just knows this is a Silverlight button.

4. Switch back to the code and set the value of AutomationProperties.Name attached property to each button with “Insert Table” and “Open File”.

5. Launch the application and use the narrator again. Now, it should say “Insert Table Button” and “Open File Button” when you navigate on the 2 buttons using the keyboard.

6. You’ll find the solution in the “After” folder as usual.

Exercise 3 – User Display Settings

Estimated time to complete this exercise: 20 minutes

Users can adjust some display settings at the operating system level or in the host browser. Some of these settings automatically affect Silverlight, while others require some additional work or separate implementation.

Users prefer to configure their display settings at a global level rather than figuring out how to adjust each individual application, so it is a good idea to take advantage of global settings whenever possible. In some cases, however, you will want to provide additional support, and Silverlight enables you to implement arbitrary display customizability that has no relationship to operating system or browser settings.

In this exercise, you will:

1. Know how to dynamically change the size of elements and of the fonts
2. Know how to handle the high contrast mode

Task 1 – Size Settings

Adjusting display sizes at the operating system level affects everything displayed on the monitor, including all Silverlight-based applications both inside and outside the browser.

Outside the browser, increased size settings result in fuzziness and pixelization. Inside the browser, display size settings affect the browser zoom setting (for browsers that support zoom settings), which results a smooth, vector-based scaling of browser-hosted Silverlight applications. The following illustration shows the difference between browser zoom and out-of-browser zoom.

In browsers that support zoom settings, users can set the browser zoom level independently of the operating system display settings. In this case, however, out-of-browser applications are not affected.

For Silverlight-based applications hosted in the browser, you can customize the effect of the browser zoom setting by using the Settings.EnableAutoZoom and Content.ZoomFactor properties and the Content.Zoomed event. This is useful for making dynamic layout adjustments.

You can also implement your own display size settings that works regardless of operating system and browser settings. Browser text size settings have no effect on Silverlight, so implementing your own approach is necessary if you want to scale text independently of other UI elements.

Perform the following tasks:

1. Open the initial VS2010 project named “Exercice3.Task1” available in the “Before” folder. Launch the application to see what it does.

2. The aim of this exercise is to change dynamically the size of the user control and the size of the font by using the 2 sliders available. Let’s start by changing the size of the font using the 2^nd slider. We’re going to use the element to element binding of Silverlight to do that. Add this property on the UserControl :

FontSize="{Binding Value, ElementName=FontZoomSlider}"

3. Thanks to this code, the FontSize property will be automatically updated based on the value of the FontZoomSlider element. This shows you how to let the user choosing the proper size for him.

4. We’re now going to see how to zoom the complete user control by using a simple transform operation. For that, add this XAML part inside the UserControl:

<UserControl.RenderTransform>
    <ScaleTransform x:Name="transform" CenterX="200" 
        ScaleX="{Binding Value, ElementName=UIZoomSlider}" 
        ScaleY="{Binding Value, ElementName=UIZoomSlider}"/>
</UserControl.RenderTransform>

5. We’re simply scaling the element using a RenderTransform, playing with the ScaleX & ScaleY properties binded to the UIZoomSlider value.

Task 2 – Color and High Contrast Settings

Many users have difficulty distinguishing certain colors or experience discomfort when viewing UIs with bright colors or insufficient contrast. It is therefore useful to provide the option to change the default colors, or at least to switch to a high contrast mode.

If users select a high contrast setting at the operating system level, your application should respond to it and switch to high contrast mode automatically. You can do this by checking the SystemParameters.HighContrast property when your UI loads. Note, however, that your application cannot automatically detect changes to this property, so it is helpful to provide your own UI in addition to checking the operating system setting.

Another option is to use the System Colors theme provided by the Silverlight Toolkit. This theme automatically applies the current system colors (including high contrast colors) to all of the controls provided by Silverlight and the toolkit. For more information, see the Silverlight Toolkit.

The following example demonstrates how to use the Style class and the SystemParameters.HighContrast property to implement a high contrast mode.

Perform the following tasks:

1. Open the initial VS2010 project named “Exercice3.Task2” available in the “Before” folder. Launch the application to see what it does.

2. The idea here is to change the color and contrast of the controls if the user has set the high contrast mode of Windows or if he’s enabling the checkbox. You’ll notice by looking at the XAML that there are 2 styles currently available. We then need a method that will apply these styles based on the current mode chosen by the user.

Here is the based method for that:

private void SetHighContrast(Boolean highContrast)
{
    if (highContrast)
    {
        ContentBlock.Style =
            this.Resources["ContentBlockHighContrastStyle"] as Style;
        ContentBorder.Style =
            this.Resources["ContentBorderHighContrastStyle"] as Style;
    }
    else
    {
        ContentBlock.Style =
            this.Resources["ContentBlockDefaultStyle"] as Style;
        ContentBorder.Style =
            this.Resources["ContentBorderDefaultStyle"] as Style;
    }
}

3. We now need to call this method during the initialization process of the Silverlight application checking the current contrast mode of Windows. Add this code into the constructor of the MainPage:

if (SystemParameters.HighContrast)
{
    SetHighContrast(true);
    HighContrastCheckBox.IsChecked = true;
}

4. Enable the high contrast mode of Windows (Left Alt + Left Shift + Print Screen) and launch your Silverlight application. The checkbox should be checked and the High Contrast Style should be applied.

5. Last step is to change the style by checking/unchecking the checkbox. You can use this piece of code for that:

private void HighContrastCheckBox_Click(object sender, RoutedEventArgs e)
{
    SetHighContrast(HighContrastCheckBox.IsChecked.Value);
}

6. If you want to see how far you can go on this topic, open the solution in the “After” folder named “Exercice3.Task2.SLToolkit” and check out the available “Basic Theme” that works well with the high contrast mode of Windows.

Others ressources

- MIX09 & MIX10 Sessions :
- Building Accessible RIAs in Microsoft Silverlight
- CL51- Building an Accessible Microsoft Silverlight Experience and you can download the presentation here.
- Silverlight Accessibility Issues and Proposed Guidelines by Hitachi : http://www.hitachi.co.jp/universaldesign/silverlight/en/guideline.html
- Making Silverlight Applications Accessible : http://www.silverlight.net/learn/quickstarts/accessibility/

David

Slides, vidéo et exemples de ma présentation des Microsoft Days et du ReMix11 sur HTML5

David Rousset — Fri, 20 May 2011 14:31:50 GMT

Vous êtes nombreux à m’avoir réclamé la présentation que j’ai initialement jouée lors du ReMix11 et intitulée : “HTML5: Etat des lieux et projection vers l’avenir”. J’ai ensuite joué la même présentation au cours de certaines dates de l’évènement Microsoft Days comme à Rennes par exemple.

Mise à jour le 01/07/2011 : ajout de la vidéo enregistrée en mai à Microsoft France au format Silverlight Smooth Streaming et HTML5 (h264/WebM).

Présentation

A noter que j’ai fait une petite boulette (qui malheureusement a été reprise en boucle sur Twitter après le ReMix11) sur les parts de marché des “navigateurs HTML5”. J’avais oublié d’ajouter la part de marché du navigateur Safari 5… (hum, hum). Cela fait donc passer le chiffre de 33% à environ 38% au niveau mondial. Mea Culpa ! Mon approche a été d’ajouter les parts cumulées d’IE9 + FF 4.0 + FF 3.6 + Chrome 8/9/10/11/12 + Opera 10/11 depuis le site Netmarketshare.com. Sachant que chacun de ces navigateurs dispose de support disparate de “HTML5”. Mais cela donne déjà une idée.

Vidéo

Exemples

Par ailleurs, voici l’ensemble des démonstrations que j’ai jouées pendant cette petite heure :

Bonnes pratiques

- Exemple de l’utilisation de Modernizr pour les éléments sémantiques d’HTML5 pour IE < 9 via ASP.NET MVC 3

Internet Explorer 9

- SVG Theme Park : démonstration d’une scène SVG sur laquelle vous pouvez faire CTRL-F pour chercher le texte par exemple
- Canvas Pad : petite application sympathique pour apprendre les bases de canvas
- Site Microsoft Office OneNote 2010 : la dernière version du site officiel de OneNote 2010 est entièrement réalisée en HTML5 à base de canvas. Preuve s’il en est que HTML5 est déjà en parti prêt pour la production.
- World's Biggest PAC-MAN : utilisation de canvas pour créer le plus grand PacMan de tous les temps ! L’application destinée à tuer la productivité en entreprise.
- Your Director's Cut † Bon Jovi : une application permettant de faire son propre montage vidéo à partir de clips issus de concerts de Bon Jovi (le rêve non ?). Au programme : <canvas>, <video> et <svg>.
- Un exemple ultrasimple de CSS3 Media Queries : redimensionnez la fenêtre et cela affichera plus ou moins de doigts dans l’image de fond grâce à CSS.
- Un exemple plus complet de CSS3 Media Queries : à nouveau jouez avec les dimensions de votre fenêtre sur cet exemple plus réaliste.

Intérêts de l’accélération matérielle

- Dailymotion Stream : affichage de vidéos h264 en plein écran sans plug-ins grâce à l’accélération matérielle via GPU d’IE9. J’en ai déjà parlé ici : Vivez de belles expériences avec IE9 grâce à l’accélération matérielle et l’intégration à Windows 7 où vous pouvez notamment voir la différence de consommation GPU entre Chrome et IE9 sur ce site.
- Lancome : qui a entièrement refait son site web à l’identique en HTML5 par rapport à Flash. Cela leur a couté 2 fois plus cher à rendu identique. Vous pouvez lire le communiqué de presse ici : Lancôme et Internet Explorer 9 explorent ensemble la beauté du Web
- SVG Girl : un manga expérimental spécialement conçu pour mettre en avant IE9 et qui montre surtout ce que SVG a dans le ventre lorsqu’on le pousse un peu.
- Galactic : une démonstration utilisant la balise <canvas> pour afficher une animation de la terre qui tourne autour du soleil grâce à un moteur 3D en JavaScript. A tester sous IE9 et sous Firefox 4.0 par exemple pour se rendre compte des différences de performances potentielles entre les navigateurs sur ce sujet.
- Paintball : utilisation à nouveau du Canvas mais via l’opération de globalCompositeOperation. Outre à nouveau les différences importantes de performances entre IE9 et ses concurrents, on voit également un problème/bug de rendu de Chrome sur cette opération <canvas>.

A ce sujet, vous pouvez trouver la suite des tests unitaires officiels du W3C sur <canvas> ici : W3C approved canvas tests . Je vous ai par exemple montré celui-ci : 2d.drawImage.image.incomplete.omitted aujourd’hui mal rendu par Chrome mais apparemment bien géré par IE9 et Firefox 4.0.

Pour la performance de l’accélération matériele, j’avais travaillé à faire des comparaisons détaillées et complètes entre les différents navigateurs le proposant par défaut ou non ici : Navigateurs web modernes : tous vers l’accélération matérielle ! Mais pas à la même vitesse…

Internet Explorer 10

Ces exemples ont pour but de montrer les orientations sur lesquelles Microsoft travaille pour l’avenir. A tester donc avec IE10 PP1 téléchargeable ici.

- CSS Gradient Background Maker : permettant de montrer les gradients CSS3. On peut voir ici qu’il est important d’utiliser les préfixes des éditeurs pour les fonctionnalités non encore figées. Sur cet exemple, pas moins de 5 versions différentes en plus de la future version standard !
- Un exemple ultrasimple de CSS3 Grid : montrant un positionnement des éléments via CSS3 Grid couplé à la puissance de CSS3 Media Queries. A ma connaissance, cette démonstration ne fonctionne que sous IE10 aujourd’hui.
- Un exemple simple de CSS3 Multicolumns : montrant l’usage du formatage du texte par CSS en plusieurs colonnes. Si vous redimensionnez la fenêtre, vous verrez le nombre de colonnes s’adapter automatiquement à la largeur. Bien que CSS3 Multi-column soit supporté par Chrome et Firefox, cette démo ne fonctionne que sous IE10 et Opera 11 car le recalcul de la largeur se fait via l’opération suivante disponible en CSS3: “calc(100% - 20px);” non supportée par les 2 navigateurs de chez Google et Mozilla pour l’instant.
- Griddle : si vous mélangez les différentes démonstrations précédentes (MediaQueries, Grid, Flexbox, Multicolumns), vous obtenez cette démo. Testez là sous IE10 et amusez vous à nouveau à redimensionner la fenêtre plus simuler les différents périphériques : PC, Tablette et téléphone.

HTML5Labs.com

- Jigsaw Game demo : disponible sur notre laboratoire d’expérimentations HTML5Labs et montrant un jeu entre 2 joueurs connectés utilisant canvas mais surtout WebSockets.

Voilà, c’est tout ! A bientôt pour d’autres aventures.

David

Introduction aux APIs graphiques d’HTML5: SVG & Canvas (2/2)

David Rousset — Fri, 20 May 2011 07:25:28 GMT

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

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 :

	<canvas>	SVG
Niveau d’abstraction	Basé sur les pixels (PNG dynamique)	Basé sur des formes & vecteurs
Eléments	Un unique élément HTML similaire à <img> dans son comportement	De nombreux éléments graphiques qui font alors partis du Document Object Model (DOM)
Interaction	Modifiable uniquement par Script	Modifiable par Script et CSS
Modèle évènementiel	Interaction utilisateur très granulaire (x,y de la souris)	Interaction utilisateur abstraite et gérée par le DOM
Performance	Les performances sont meilleures avec des petites surfaces et/ou un nombre important d’objets à l’écran (>10k)	Les performances sont meilleures avec un nombre inférieur d’objets (<10k) et/ou sur de plus larges surface de dessin

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). Le parallèle pour moi est assez évident, XNA de part son mode “fire & forget” ressemble à Canvas et Silverlight par son côté vectoriel basé sur XAML à SVG. Les 2 ont donc bien évidement des avantages et des inconvénients.

Quand utiliser <canvas> et quand utiliser SVG: les scénarios évidents

Nous allons maintenant voir les bénéfices et les limitations techniques de chacune des technologies en tentant d’y inclure une forme de bon sens lorsque l’une est plus appropriée que l’autre. Tout d’abord, vous devez comprendre que <canvas> ou SVG peuvent réaliser des choses très similaires la plupart du temps. Nous allons donc tenter de mettre en exergue les scénarios ou <canvas> est particulièrement meilleur que SVG et vice-versa. Pour d’autres cas, nous verrons que le recouvrement rend difficile la prise d’un choix tranché. Alors, qu’allez-vous prendre, la pilule bleue ou la pilule verte ? (Ou les 2 ! )

Les documents vectoriels de haute qualité

Les documents nécessitant une très haute qualité graphique ont toujours été l’un des points fort de SVG qu’ils soient très détaillés pour une visualisation ou impression, seul ou embarqué au sein d’une page Web. Par ailleurs, la nature déclarative de SVG se prête bien à sa génération depuis des outils disposant d’interface riche ou depuis des données provenant d’une base de données. La génération du XML pouvant alors se faire soit coté serveur soit côté client via JavaScript.

Le type de documents que l’on voit souvent produits ensuit au format SVG peuvent être:

- Des plans de construction de bâtiments
- Des schémas électriques ou aéronautiques
- Des diagrammes d’organisations hiérarchiques
- De la cartographie
- Des diagrammes biologiques

Bref, vous voyez l’idée. Le fait de pouvoir zoomer dans ce type de document sans perte de définition rend naturellement SVG attractif. Etudions ensemble 2 exemples d’applications de cette liste.

Si vous lancez dans un navigateur récent la démo Real-world Diagrams issue de notre site Internet Explorer Test Drive, vous tomberez sur une page combinant 3 diagrammes SVG. Si l’on zoom sur l’équivalent du rectangle noir ci-dessous :

On obtient le résultat suivant :

Cela nous permet tout simplement d’extraire davantage d’informations grâce au côté vectoriel de SVG. Par ailleurs, le S de SVG veut dire Scalable. Dans un contexte d’impression, on pourrait tenter de le traduire en français par “pouvant s’étirer”. Du coup, les scénarios d’impression prennent vraiment tout leur sens et vous pouvez imaginer sortir de très grands formats de tirage tout en conservant une parfaite qualité. J’en veux pour exemple ce magnifique diagramme : Microsoft Dynamics Customer Model qui combine SVG et les fonts WOFF sur lequel vous pouvez vous amuser à zoomer et avec lequel vous pouvez imaginer de très belles impressions.

Note : cet exemple semble faire planter Firefox 4.0 pour une raison que j’ignore. A tester de préférence sous IE9, Chrome, Safari ou Opera donc.

Le 2ème exemple est sur la cartographie. Vous ne le savez peut-être pas mais Bing Maps et Google Maps utilisent déjà SVG.

Lancez dans votre navigateur cette recherche dans Bing Maps : Itinéraire de Microsoft France à la tour Eiffel . Vous remarquez que lorsque vous zoomez sur la carte pour suivre le tracé, il n’y a pas de perte de définition du tracé en lui-même.

Si vous lancez la barre de développement d’IE9 avec la touche F12 et que vous visez le rectangle contenant le tracé, vous obtiendrez le résultat suivant :

Et surprise! On découvre la présence du tag SVG déclarant le path qui va bien pour suivre l’itinéraire qui vous intéresse :

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <path fill="none" fill-opacity="1" stroke="#ffffff" stroke-dasharray="solid" stroke-linecap="butt" stroke-opacity="0" stroke-width="30" d="M 291 303 L 306 286 L 316 263 L 324 252 L 331 250 L 354 209 L 360 207 L 360 202 L 363 196 L 433 117 L 449 116 L 465 95" />
    <path fill="none" fill-opacity="1" stroke="#3333ff" stroke-dasharray="solid" stroke-linecap="butt" stroke-opacity="0.713726" stroke-width="4" d="M 291 303 L 306 286 L 316 263 L 324 252 L 331 250 L 354 209 L 360 207 L 360 202 L 363 196 L 433 117 L 449 116 L 465 95" />
</svg>

Bref, pour toutes ces raisons, on peut sereinement placer ces usages à droite de notre cadran :

SVG comme format d’image

Un autre scénario d’utilisation classique du format SVG est pour le rendu d’image simple que ce soit au sein d’application ou de pages web. Cependant, comme SVG est chargé en mémoire dans le DOM et son XML analysé avant d’en créer une image, les performances peuvent être légèrement dégradées par rapport à une image classique PNG ou JPG. Malgré tout, cela reste infinitésimal comparé au cout total du rendu complet d’une page Web. Par ailleurs, l’intérêt du côté vectoriel et de la qualité du rendu associé compense plus que largement cette légère perte de performance.

Prenons l’exemple ci-dessous. Ces 2 images représentent potentiellement des pastilles associées via CSS à des éléments de type <li>. Ces 2 images sont identiques en rendu et ne diffèrent que de 1 Ko (SVG étant légèrement inférieur en taille bien que non compressé) :

Le SVG est à gauche et le format PNG à droite. Visuellement, on note donc que peu de différences. Par contre, imaginons que l’on décide de réutiliser le même élément sur des écrans plus larges ou disposant d’un DPI plus élevé (ou PPP pour points par pouce en français), cela va potentiellement poser problème côté PNG. En effet, lorsque l’on va zoomer sur une image PNG, on va rapidement obtenir un résultat pixélisé :

C’est toujours le même élément SVG de dessiné à gauche, le fait de zoomer ne change en rien sa taille ou sa consommation mémoire. Par contre, il va falloir envisager de générer une image PNG à une plus haute résolution si l’on veut désormais obtenir un résultat comparable à droite. Cela va donc augmenter la taille de l’élément PNG à télécharger. SVG apparait alors dans ce scénario comme un bon candidat au remplacement des éléments de type image même pour des éléments extrêmement simplistes comme cette puce de liste.

Canvas pour la manipulation de pixels

Allons maintenant voir de l’autre côté du cadran avec Canvas. Comme Canvas nous permet de dessiner et manipuler une surface basée sur des pixels, plusieurs expérimentations mettant en œuvre des algorithmes plus ou moins complexes ont vu le jour sur le web. Vous pouvez par exemple trouver des exemples impressionnants de Ray tracers ou de génération de fractales. Cela me rappelle donc ma jeunesse où je passais des heures (des nuits que dis-je !) à calculer des scènes sous POV-Ray ou avec Fractint. On peut également imaginer traiter des pixels existant pour effectuer des filtres dessus.

Générer des pixels depuis 0

La première approche consiste à générer une image complètement depuis 0 par code au sein du canvas. C’est ce que l’on peut faire par exemple avec un lanceur de rayons. L’exemple ci-dessous a été écrit par Adam Burmister. Le but du jeu étant donc de simuler le trajet effectué par la lumière par pixel pour obtenir de jolis effets de réfraction, réflexion, etc.

L’auteur lui-même vous averti cependant avec la phrase suivante : “This is very CPU intensive. Your browser may appear to stop responding” qui pourrait être traduite par “Cela consomme beaucoup de ressource CPU. Votre navigateur pourrait sembler ne plus répondre”.

Ainsi, alors que les APIs de Canvas permettent effectivement de générer de telles images, cela n’apparait pas pour autant être une très bonne idée. L’auteur résume d’ailleurs ses expérimentations par la phrase suivante : “Ray-Tracing [is] The Worst Application of JavaScript Ever” ou “le lancer de rayons [est] la pire des applications JavaScript imaginable”.

Dans le même genre d’idées, on retrouve la génération des fameuses fractales de Mandelbrot en Canvas/JS comme cet exemple : Mandelbrot Set in HTML 5 Canvas et comme vous pouvez le voir sur la copie d’écran de droite. Vous pouvez jouer à zoomer dans les zones en traçant de nouveaux rectangles à la souris au sein du canvas.

Cependant, aussi bons soient devenus les moteurs JavaScript des derniers navigateurs, il n’y a vraiment aucun intérêt à faire de la génération d’images artificielles en ray-tracing en JavaScript/canvas plutôt qu’en C++/C#. Mieux vaut en effet être le plus bas possible et le plus rapide possible lorsqu’il s’agit de générer des séquences d’images virtuelles. C’est pour cela que je me pose souvent l’intérêt de la présence de mini ray-tracers dans les benchmarks JavaScript. L’application concrète de ces expérimentations dans un projet réel est proche de 0. Malgré tout, je trouve l’exemple particulièrement parlant sur les possibilités de canvas versus SVG. Il en est peut-être autrement des fractales où il peut y avoir un intérêt dans le milieu scientifique ou de l’éduction de pouvoir générer des fractales et de jouer avec dynamiquement au sein d’un navigateur ou d’une plateforme supportant HTML5.

Retoucher des pixels existants

Autre intérêt de pouvoir manipuler les pixels, outre de pouvoir les créer depuis 0, c’est de pouvoir retoucher ou jouer avec des pixels existants. 2 scénarios me viennent en tête : un amusant ne servant à rien et un autre pouvant servir concrètement aux applications de demain.

Le 1er amusant consiste à simuler les effets d’écran bleus/verts inaugurées par le film à qui nous devons tout aujourd’hui. Je veux bien entendu parler de Star Wars ! L’idée est donc d’identifier une couleur d’arrière-plan (un fond vert ou bleu habituellement) et de remplacer cette couleur par un pixel venant d’autre part. Cela permet ainsi assez simplement d’afficher un fond fictif derrière un personnage.

Or, comme on peut peintre le canvas avec des images venant d’une vidéo HTML5, on peut imaginer combiner 2 vidéos en temps réel en utilisant cette technique de remplacement de pixels. Le code suivant permet ainsi de remplacer les pixels vert d’un des canvas avec les pixels de l’autre canvas faisant exactement la même taille :

function GreenScreenAtoB(a, b) {
    var aImageData = a.getImageData(0, 0, a.canvas.width, a.canvas.height);
    var bImageData = b.getImageData(0, 0, b.canvas.width, b.canvas.height);
    var aPixels = aImageData.data;
    var bPixels = bImageData.data;

    if (aPixels.length != bPixels.length) {
        window.alert("Vos Canvas n'ont pas exactement le même nombre de pixels!");
        return bImageData;
    }

    var pixelCount = bPixels.length;
    for (var pixelIndex = 0; pixelIndex < pixelcount; pixelIndex += 4) {
        // On récupère les composantes RGBA de chacun des pixels de b
        var r = bPixels[pixelIndex + 0];
        var g = bPixels[pixelIndex + 1];
        var b = bPixels[pixelIndex + 2];
        var a = bPixels[pixelIndex + 3];

        // Et si le pixel de b est vert, on le remplace avec le pixel venant de a
        if (r == 0 && g == 255 && b == 0 && a == 255) {
            bPixels[pixelIndex + 0] = aPixels[pixelIndex + 0];
            bPixels[pixelIndex + 1] = aPixels[pixelIndex + 1];
            bPixels[pixelIndex + 2] = aPixels[pixelIndex + 2];
            bPixels[pixelIndex + 3] = aPixels[pixelIndex + 3];
        }
    }

    return bImageData;
}

Vous pouvez jouer avec un exemple utilisant 2 vidéos h264 ici : Star Wars Green Effect . Il vous faudra donc un navigateur comme IE9 ou Safari pour le jouer et cela vous donnera ce genre de résultat :

Cependant, comme pour les ray-tracers, la limitation que nous avons aujourd’hui avec les performances de JavaScript font qu’il n’est pas envisageable de partir en production sur cette technologie. Les outils “client lourd” de post-production vivant sur nos PC ou nos Mac ont encore de beaux jours devant eux.

Le 2ème scénario qui me vient en tête est bien plus intéressant dans ses applications : c’est la retouche d’image. On peut ainsi imaginer faire un effet anti-yeux rouges par exemple. Vous pouvez tester cette démonstration écrite par Daniel Glazman ici : Exemple anti-yeux rouges qui met en œuvre ce principe.

Mais on peut aller encore plus loin sur la manipulation d’images comme le montre l’exemple ci-dessous :

Note : cet exemple semble ne bien entièrement fonctionner que sous IE9, Chrome, Opera et Safari. Apparemment, le code pose problème avec Firefox 4.0 sur l’affichage de la position de la souris au survol. Mais le reste fonctionne bien.

Ce dernier est adapté de l’article suivant : Canvas Direct Pixel Manipulation et ouvre de belles perspectives je pense. On peut imaginer récupérer l’histogramme d’une image, faire des effets de reflet dynamiquement sur un élément… voir même créer un éditeur en ligne d’images comme celui de DeviantArt Muro. A vous maintenant de laisser libre court à votre imagination !

Bref, vous aurez compris que la grande force de <canvas> sur SVG est sa capacité à manipuler les pixels. Lorsque cela fait sens et que les performances ne sont pas trop bridées par le moteur JavaScript, <canvas> est clairement la solution qu’il vous faut :

Les scénarios qui se recoupent et les scénarios hybrides

La plupart des scénarios intéressants ne montrent pas souvent un gagnant évident entre canvas et SVG. J’ai par exemple en tête 2 scénario qui pourraient vous intéresser en HTML5 : la génération de cartes/graphiques interactifs ou les jeux en 2D.

Cartes et diagrammes interactifs : plutôt SVG

Comme nous l’avons déjà dit plus haut, SVG se montre particulièrement intéressant pour l’affichage d’organigrammes, de cartes ou de courbes en haute résolution. D’autant plus qu’il existe, comme nous le verrons dans l’article suivant, de nombreux outils permettant sa génération.

Par ailleurs, par rapport à Canvas, SVG est plus adapté à une interaction utilisateur grâce à l’usage du DOM et de CSS derrière comme nous l’avons vu dans l’article précédent. SVG est également plus adapté aux scénarios d’accessibilité.

Comme nous l’avons déjà fait précédemment, le mieux pour comprendre est d’illustrer les différences à travers un exemple concret. Prenons ainsi une carte détaillée de l’Alaska disponible dans le domaine publique grâce à Wikimedia Commons :

En SVG, l’état d’Alaska est représenté par un élément de type <path> constitué d’environ 162 500 caractères de données géométriques :

<path id="AK" fill="#cdc3cc" d="M 777.5514,1536.1543 C 776.4904,1535.0933 776.7795,1530.0041 777.9416,
1529.2859 C 781.3258,1527.1943 787.2657,1532.4522 784.8317,1535.3849 …" />

Pour Canvas, la même forme pourrait être dessinée à travers la suite d’instructions JavaScript suivante :

function drawAlaska() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(777.5514, 1536.1543);
    ctx.bezierCurveTo(776.4904, 1535.0933, 776.7795, 1530.0041, 777.9416, 1529.2859);
    ctx.bezierCurveTo(781.3258, 1527.1943, 787.2657, 1532.4522, 784.8317, 1535.3849);
    //
    // Imaginez ici 2 875 directives supplémentaires...
    //
    ctx.bezierCurveTo(1689.8261, 12.13753, 1689.1395, 12.17333, 1685.8848, 10.52683);
    ctx.closePath();
    ctx.fillStyle = "#cdc3cc";
    ctx.fill();
}

Cela représente en fait 2 878 directives de dessins (moveTo, lineTo et bezierCurveTo) pour fabriquer cette carte détaillée de l’Alaska à une résolution fixe. Il y a donc de fortes chances que la version Canvas soit plus lourdes en poids. Bien sûr, si l’on dessine la carte dans une résolution inférieure, il faudrait moins de lignes de code et donc un fichier plus petit.

Les applications de cartes basées sur SVG proposent en général des expériences interactives comme des changements levés sur le survol de la souris, la sélection d’un élément, le passage d’un élément à l’autre et la mise à l’échelle. Ces opérations sont très simples à mettre en œuvre comme nous l’avions déjà vu. Par exemple, pour réagir sur un click de souris, voici l’unique chose à faire :

 <path id="AK" fill="#cdc3cc" onmousedown="window.alert('Alaska');" d="M 777.5514,1536.1543 …" />

Ou pour réagir au survol :

path#AK:hover { fill: yellow; }

Allez pour définitivement comprendre la différence sur les 2 modes, n’hésitez pas à jouer avec l’exemple ci-dessous qui montre, à travers cette carte des Etats-Unis, la différence entre la taille du code JavaScript à produire pour Canvas et la taille du path SVG pour chacun des états. Je me suis amusé à prendre une partie des spécifications des paths SVG du W3C pour analyser dynamiquement le contenu SVG et le transformer dans l’équivalent Canvas :

Note : vous noterez que si vous testez cet exemple sous IE9 et ensuite sous Chrome/Firefox que le contenu des données affichées ici sous Path Data n’est pas le même (faites le test avec le même état sélectionné entre 2 navigateurs). Le code JS de parsing n’est donc pas tout à fait le même pour IE et FF pour générer le pseudo-code Canvas.

Un exemple plus intéressant de ce type d’interaction avec une carte peut être vu sur notre site Test Drive ici : Atlas zur Europawahl 2004 in Deutschland . C’est une visualisation des résultats des élections Européenne de 2004 en Allemagne.

Faire la même chose en Canvas vous obligerait à coder vous-même le “hit detection” en utilisant les coordonnées de position de la souris au moment du click ou du survol. En effet, vous n’avez alors plus le contexte lié à la forme que vous avez dessiné. Il existe bien sûr des librairies permettant de vous fournir de ce genre de services mais elles existent aussi pour SVG et disposent en général de bien meilleures performances.

Affichage de données en temps réel : plutôt Canvas

Nous avons déjà vu qu’il était plus complexes de gérer les interactions avec les éléments dessinés au sein du <canvas> versus SVG. Mais si aucune interaction n’est nécessaire, Canvas apparait souvent comme un meilleur candidat pour l’affichage de données en temps réel.

Prenons par exemple le cas d’affichage de données météo. Les techniques que l’on connait aujourd’hui consistent souvent à générer des images depuis le serveur sur un intervalle particulier puis de pousser l’image vers le client ou alors générer aussi rapidement que possible l’image côté client via l’utilisation de plug-ins. Bien que SVG pourrait permettre une alternative intéressante à la génération d’image rasterisée côté serveur pour économiser de la bande passante, <canvas> apparait malgré tout comme une option évidente pour ce scénario (tout comme pour les autres scénarios nécessitant l’affichage de données temps réel). En effet, comme vous pouvez le voir sur la copie d’écran de gauche affichant une carte météo, il n’y a pas forcément une très grande surface sur laquelle nous allons dessiner et le nombre d’objets (ou points) à dessiner peut être particulièrement élevé. Avec les APIs de <canvas>, cela peut être affiché (puis rafraichit) à une très grande vitesse sans aucune incidence sur le DOM. On pourrait de l’autre côté imaginer le même rendu en SVG en utilisant de nombreuses ellipses. Mais le cout de chargement de toutes ces formes dans le DOM ainsi que leurs modifications pour les animations serait particulièrement élevé en comparaison du <canvas>.

Ainsi s’il vous faut dessiner un nombre important de formes, spécialement des formes très différentes et non géométriques, afin de générer des images destinées à une analyse de données, cela devraient vous faire pencher la balance du côté de l’utilisation de Canvas. Outre la météo, on peut ainsi imaginer des scénarios autour de l’astronomie, la biologie moléculaire ou l’affichage des modulations de fréquences d’un son comme on a pu le voir récemment avec l’application basée sur des sons de Daft Punk Anatomy of a Mashup.

Les jeux vidéo 2D : léger avantage à canvas

HTML5 se prête bien également à ce que l’on appelle communément le “casual gaming”. Des petits jeux vidéo souvent relativement “simples” techniquement mais diablement efficaces et visant un public le plus large possible. Dernier exemple en date étant la publication par Google d’Angry Birds basé entre autre sur <canvas>. Vous pouvez d’ailleurs le tester dans IE9, il marche parfaitement bien grâce à son moteur d’accélération matérielle efficace.

Mais alors, comment faire son choix entre canvas et SVG lors de la conception d’un jeu vidéo ?

Tout d’abord, historiquement, les librairies de jeux ont souvent été basées sur des APIs graphiques de bas niveau. Les développeurs de jeux vidéo vont donc être tentés par <canvas> pour y adapter leur savoir faire. Cependant, d’autres composants désormais également très importants comme les moteurs physiques travaillent à des niveaux d’abstraction plus élevés et n’ont finalement que faire des détails d’implémentations techniques du mode de dessin. De leur côté, ils attendent ainsi certaines informations sur les géométries comme leurs bords, vitesses, tailles et positions et renvoient en échange des informations permettant d’adapter la vitesse (gestion de la gravité par exemple), de gérer les collisions et de mettre à jour les positions. Cela vous donne alors l’impression de “réalisme” sur les mouvements des objets et leurs interactions.

Si vous souhaitez jeter un œil sur des logiques de jeux démontrant qu’il est parfois difficile de choisir entre SVG et canvas, vous pouvez tester les 2 exemples suivant : SVG-oids et canvas-pinball. Ces 2 petits jeux ont été écrits par le même auteur. Il avait commencé par écrire le 1er jeu d’astéroïdes en SVG et il était parfaitement content du résultat. Lorsqu’il s’est ensuite attaqué au petit jeu de jeu de flipper, il avait également commencé par utiliser SVG du coup. Puis, finalement, il a changé son fusil d’épaule pour partir sur du <canvas> (pour des raisons que j’ignore). Cela veut simplement dire que pour ce genre de jeu, l’un ou l’autre fera parfaitement l’affaire.

Un exemple peut-être plus parlant est l’analyse de 2 jeux utilisant le même moteur physique (Box2D) mais utilisant 2 modes différents de dessin. Ce sont canvas-pinball et SVG-Dice. Bien que ces deux jeux n’ont strictement rien à voir sur leur logique, ils utilisent le même moteur pour gérer les positions, collisions, vitesses et autre aspects physiques liés à nos composants de jeu.

Pour le jeu de flipper, le gestionnaire d’animation de haut niveau redessine la scène en utilisant les APIs JavaScript du Canvas :

if (animationsInProgress) {
     ctx.save();
     ctx.lineWidth = 2.0;
     ctx.beginPath();
     ctx.moveTo(89, 322);
     ctx.lineTo(101, 295);
     ….
     ctx.stroke();
     ctx.restore();
     ctx.moveTo(tVp.x, tVp.y);
}

Pour le jeu de dés en SVG, le gestionnaire d’animation utilise des transformations sur des groupes pour repositionner des éléments graphiques existant à travers le DOM :

if (animationsInProgress) {
     this.rotation += (this.circleBody.m_linearVelocity.x/20);
     var transFormString = "translate(" + 
        Math.round(this.circleBody.m_position.x) + "," + 
        Math.round(this.circleBody.m_position.y) + ") scale (" + 
        this.scale.toString() + ") rotate(" +
        Math.round(this.rotation).toString() + "," +
        Math.round(this.xTrans).toString() + "," +
        Math.round(this.yTrans).toString() + ")";
        this.die2.setAttribute("transform", transFormString);
}

Ainsi, alors que le 1er redessine en permanence et repositionne les différentes géométries, l’autre se contente uniquement de les repositionner mais les maintient pour cela en mémoire. Cela a forcément un coup. Ce coup est néanmoins relativement faible pour des jeux de type “casual gaming”. Malgré tout, l’idée du mode immédiat fournit par <canvas> avec son jeu d’APIs bas niveau est souvent trop tentant pour les développeurs habitués à créer des jeux vidéos.

Par contre, je tiens à noter un avantage intéressant pour SVG : son côté vectoriel à nouveau et donc sa possibilité de s’adapter dynamiquement à une résolution précise. Prenez par exemple ce petit jeu Pacman écrit en SVG : Browser Hunt. Si vous vous amusez à redimensionner la fenêtre de jeu, vous verrez que le contenu s’adapte automatiquement grâce à utilisation du viewbox. Ceux d’entre vous qui sont développeurs WPF ou Silverlight connaissent ce mécanisme de viewbox. Et bah, c’est tout simplement la même logique appliquée ici à notre scène SVG.

Autre facteur : les compétences existantes et le niveau de performance intrinsèque

Pour continuer autour du jeu, il y existe aussi des éléments extérieurs qui vont influencer le choix de la technologie qui sont souvent indépendants des fonctionnalités. Entre SVG et Canvas, il y a 2 de ces éléments que je vois ressortir : vos connaissances actuelles et vos attentes sur la performance.

En effet, les connaissances et jeux de compétences des développeurs jouent un rôle important dans le choix d’une nouvelle technologie. Comme nous l’avons déjà dit, pour la création d’un jeu, si vos développeurs ont une connaissance profonde des APIs graphiques de bas niveau (DirectX, OpenGL ou XNA) et disposent d’une connaissance limitée des technologies Web, Canvas va certainement s’imposer de lui-même.

La performance dispose d’un rôle clé également. Nous en reparlerons ainsi dans le dernier article car l’arrivée de technologies permettant “l’accélération matérielle” via le GPU changent également la donne. Il faut alors prendre le temps de comparer les caractéristiques des 2 technologies en matière de performance pure. Regardons par exemple ce graphique basée sur quelques études internes à Microsoft :

En général, plus la taille/résolution d’écran augmente, plus les performances de Canvas vont se dégrader puisque la quantité de pixels à rafraichir augmente. De son côté, SVG a tendance à dégrader les performances au fur et à mesure que l’on augmente le nombre d’objets à l’écran car cela a une incidence directe sur le DOM qui prend le relais derrière. Alors bien sûr, ces mesures sont relativement grossières et non représentatives de tous les scénarios. Par ailleurs, il y a des variations énormes en fonction des plateformes (PC, Tablet, Téléphone), de la qualité de l’accélération matérielle (et du GPU) ainsi que de la vitesse du moteur JavaScript. Bref, le choix d’une des 2 technologies pour sa performance devra forcément passer par une étape de prototypage pour pouvoir évaluer la techno en fonction du scénario que vous avez en tête. Malgré tout, je trouve que ce graphique donne déjà une bonne idée des performances inhérentes au fonctionnement même de chacune des 2 technologies. Par ailleurs, ces informations sont valides pour toute application devant animer des informations graphiques en dehors de l’écriture de jeux vidéo.

Au fait : rien ne vous empêche d’utiliser les 2 !

Nous avons vu tout le long de cet article comment positionner l’une ou l’autre des technologies en fonction de nos besoins. Cependant, rien n’empêche de combiner ces 2 approches ! L’usage hybride dispose en effet de nombreux bénéfices puisque nous allons profiter des avantages de chacun. Ainsi, pour bénéficier d’un “hit detection” et d’une interaction utilisateur simplifiés, vous pouvez mettre en place un calque constitué de géométries SVG avec en dessous un élément <canvas> permettant de fournir des animations temps réel plus adaptées.

Il y a ainsi un nombre grandissant d’expériences voyant le jour où cette combinaison est efficace. Quand vous vous retrouvez dans un scénario nécessitant à la fois des animations graphiques dynamiques (Canvas) et une interaction utilisateur riche (SVG), chacune des 2 technologies peut être utilisée et doit être utilisée.

Cela est illustré par le site Brain Power réalisé par l’un de nos partenaires et présent sur notre galerie The Beauty of the Web. Ce site particulier, ainsi que d’autres présents dans la galerie, ont réussi à mettre en œuvre cette délicate balance.

Ainsi pour l’interaction utilisateur et l’affichage des portions du cerveau, le site utilise des géométries SVG :

<polygon id="SensoryCortex" points="253,80,266,93,…" style="fill: rgba(0,0,0,0)" />

Et pour réaliser les animations temps réel et les “effets spéciaux”, canvas est utilisé pour ce qu’il sait bien faire :

<canvas id="cnvDisplay" width="1920" height="1099" style="position:absolute;" />

Par contre, petit regret pour part, on ne peut pas afficher une forme SVG au sein d’un canvas sans en perdre sa nature intrinsèque : interaction via CSS ou remontée des events via le DOM. On peut utiliser un élément de type <img> alimenté par du SVG comme source de la méthode drawImage() de <canvas> mais cela a pour unique but de “rasteriser” le contenu SVG. Dommage, cela aurait offert de beaux scénarios également !

Cela conclue notre tour d’horizon des possibilités offertes par SVG et <canvas>. Vous noterez que je n’ai pas abordé dans mes différents scénarios l’idée d’utiliser SVG pour produire entièrement une interface utilisateur. En effet, vu que j’ai fait un parallèle avec Silverlight et XAML en début d’article, il serait légitime de se demander si on ne pourrait pas réaliser une interface purement basée sur SVG comme on le fait en XAML. En tout cas, je me suis moi-même posé cette question. Il y a quelques années d’ailleurs, certains annonçaient que SVG était LA technologie à retenir pour nos UIs. Par exemple, il me semble qu’il existe au moins un frontal pour une version de Linux entièrement basé sur SVG. Des contrôles tels que les sliders, checkbox, bouton avec coins arrondis et toute autre forme de contrôles non rectangulaires sont possibles grâce à la nature vectorielle de SVG.

Bah alors ? Pourquoi ne pas y aller ? Tout simplement parce qu’entre temps, HTML et CSS ont très bien évolués et offrent une palette riche de possibilités : coins arrondis, gradients, transitions, formulaires, etc. Ainsi une grande majorité des nouveaux contrôles peuvent être réalisés avec le modèle de boite standard HTML ce qui, à mon sens, est préférable à l’alternative SVG. Par ailleurs, le positionnement de nos éléments s’est vu grandement améliorés dans CSS3 comme le modèle Flexbox ou notre proposition récente de positionnement par grille avec CSS3 Grid inauguré dans Internet Explorer 10.

Voilà. Je pense avoir fait un tour assez vaste des scénarios d’usage des 2 technologies. J’espère que tout cela vous aidera à mieux les positionner et à mieux vous guider dans votre choix. Si vous avez une expérience différente sur l’utilisation de ces modes graphiques, n’hésitez pas à venir la partager en commentaire de cet article. Je suis bien entendu preneur de vos retours.

Pour ma part, je tenais à remercier Patrick Dengler de Microsoft Corp, membre du groupe de travail SVG au W3C, qui m’a bien aidé dans l’écriture de cet article.

David

Introduction aux APIs graphiques d’HTML5: SVG & Canvas (1/2)

David Rousset — Mon, 09 May 2011 15:09:47 GMT

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. SVG (pour Scalable Vector Graphics) permet comme son nom l’indique d’afficher des objets graphiques vectoriels. Les objets sont décrits dans un langage XML qui vont enrichir le DOM comme les autres éléments HTML. Ainsi, l’interaction avec les éléments créés dans le DOM par SVG se fait de la même façon qu’avec les autres éléments HTML: évènements, application de CSS, accessibilité via ARIA, etc. Par ailleurs, le fait d’avoir cette persistance en mémoire des objets fait que l’on considère cette technologie comme “retained mode”.

Vous avez un ensemble de primitives pour dessiner (rectangle, cercle, ellipse, etc.) ou alors via des Paths. Vous pouvez également effectuer des transformations, translations, afficher du texte. Bref, il y a de quoi faire vous allez voir.

Si vous êtes développeur Silverlight, SVG vous rappellera furieusement XAML si nous devions faire un parallèle. Le moteur XAML de Silverlight étant quand même bien plus riche et plus orienté contrôle utilisateur/scénario data (moteur de binding, templating, visual state manager, etc.).

Regardons un des exemples les plus simples qui soit utilisant la méthode de fragments SVG intégrés dans le code HTML5 (ou SVG in-line). Ce markup :

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css" media="screen">

        </style>
   
        <script type="text/javascript">
        </script>          
    </head>
    <body>
        <svg height="110px" width="110px">    
            <rect id="myRect" height="100px" width="100px" fill="blue"/>
        </svg>
    </body>
</html>

Nous donne le résultat suivant (si votre navigateur supporte SVG) :

Ou vous pouvez tester cet exemple avec cette page : Exemple 1 SVG. La 1ère ligne de markup SVG demande à réserver une zone de dessin de 110 pixels par 110 pixels et de dessiner un rectangle bleu de 100x100. Bon, pour l’instant, vous me suivez toujours j’imagine.

Il y a différentes façon d’intégrer du SVG dans sa page Web :

Les fragments SVG intégrés dans le code HTML5, sans utiliser d'objet étranger (c'est-à-dire, intégrer une balise <svg> dans votre code HTML). C’est l’exemple que nous venons de voir ensemble juste au-dessus.
Le format SVG en tant que type de document complet (avec une extension de fichier .svg)
Le format SVG dans le code XML ou XHTML (similaire à la méthode HTML5, uniquement avec les fichiers XML ou XHTML)
Le format SVG en tant qu'image CSS. Vous pouvez par exemple utiliser cet exemple : SVG Gradient Background Maker si vous souhaitez ajouter un gradient SVG en tant qu’image de fond à un élément par CSS.
Le format SVG utilisant l'élément object, comme dans l'exemple suivant (remarquez les attributs type, height et width) :

<object data="rect2.svg" width="100%" height="400px" type="image/svg+xml"></object>

Le format SVG utilisant les éléments img, embed, iframe, ou frame, comme dans l'exemple suivant :

<embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Internet Explorer 9 prend en charge l’ensemble de ces méthodes.

Alors bien sûr on peut aller bien plus loin que l’exemple que nous venons de voir comme le montre cette page: Exemple 2 SVG. Dans IE9, cela donne ce résultat:

1ère chose intéressante à noter sur cette copie d’écran, si vous faites “CTRL+F” pour chercher dans la page sur “tex”, vous voyez bien le texte dessiné sur un path (le rail du train) correctement sélectionné. Cela veut également dire qu’un moteur de recherche est susceptible de pouvoir indexer votre contenu malgré son côté vectoriel (chose plus difficile avec du Flash ou Silverlight). Par exemple, si vous tapez ces mots clé dans Google : “The Past, Present,and Future of Vector Graphics for the Web ARCADE Funhouse”, vous allez tomber sur cette page: SVG Theme Park qui est la source de mon exemple 2.

Ensuite, si vous lancez la barre de développement d’IE9 avec la touche F12 (ou si vous utilisez un outil équivalent comme FireBug), vous pourrez bien vérifier que chacun des éléments actuellement dessiné à l’écran est bien présent dans le DOM. Voici un exemple avec IE9 :

Sur cette copie d’écran, on voit que j’ai ciblé l’élément qui correspond à une sorte de piscine et que je suis tombé sur le path correspondant avec l’ID “pool_water_1_”. Amusez vous à balader la souris en mode ciblage et vous verrez alors des petits rectangles bleus au dessus de chacune des zones du dessin.

Par ailleurs, si vous zoomez dans la scène, vous observerez que vous n’avez aucune perte de définition grâce au côté vectoriel de SVG. Par exemple, si je reprends l’exemple précédent, je peux zoomer sur la piscine en conservant une excellente qualité graphique :

A ce stade, vous allez surement vous dire aussi: “mais comment on fait pour générer une telle scène? On se tape quand même pas tout le SVG à la main ?”. Non, rassurez-vous ! Il existe des outils pour vous aider, on en parlera plus tard.

Ajout de l’interactivité

Il y a plusieurs façons d’ajouter de l’interactivité à des éléments SVG. Commençons par la plus simple: le branchement de code sur des évènements du DOM. Regardez le code de la page suivante (que vous pouvez tester ici : Exemple 3 SVG) :

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
        // This function is called when the circle is clicked.
        function clickMe() {
            // Display the alert.
            alert("You clicked the SVG UI element.");
        }
    </script>
  </head>
  <body>
    <h1>
      SVG User Interface
    </h1>
    <!-- Create the SVG pane. -->
    <svg height="200" width="200">
      <!-- Create the circle. -->
      <circle cx="100" cy="100" r="50" fill="gold" id="uIElement" onclick="clickMe();"
      />
    </svg>
    <p>
      Click on the gold circular user interface element.
    </p>
  </body>
</html>

Cela donne le résultat suivant (si votre navigateur supporte SVG). Cliquez sur le cercle jaune pour lever l’évènement de click :

On dessine simplement un cercle jaune d’un rayon de 50 dont le centre est décalé de 100 pixels à gauche et 100 pixels vers le bas par rapport au coin supérieur gauche de la zone de dessin. Ensuite, on s’abonne à l’évènement onclick() sur lequel on branche la fonction “clickMe()”. Le “hit testing” sera fait pour vous par le navigateur et ne sera déclenché uniquement lorsque vous cliquerez bien sur le cercle et pas à côté dans le reste de la surface de dessin SVG. Nous verrons que le fonctionnement de <canvas> est bien différent de ce côté.

Il y a un truc chouette avec SVG, on peut le coupler avec CSS. Observons par exemple le code source suivant (que vous pouvez tester ici : Exemple 4 SVG) :

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9"/>
        <style type="text/css" media="screen">
            rect.greenrect {fill:green;}
            rect:hover {fill:yellow;} 
        </style>
    </head>
    <body>
        <svg height="75px" width="75px">    
            <!--No fill (defaults the color to #000000)-->
            <rect id="myRect1" height="100%" width="100%" >
        </svg>
        <svg height="75px" width="75px">    
            <!--using the class="greenrect"-->
            <rect id="myRect2" height="100%" width="100%" class="greenrect"/>
        </svg>
        <svg height="75px" width="75px">
            <!--using the style="fill:pink"-->    
            <rect id="myRect3" height="100%" width="100%" style="fill:pink"/> 
        </svg>
        <svg height="75px" width="75px">
            <!--using the attribute fill="red"-->    
            <rect id="myRect4" height="100%" width="100%" fill="red"/>
        </svg>
    </body>
</html>

On dessine 4 rectangles les uns derrière les autres. Le 1er est noir car nous ne précisons par la couleur donc il prend celle par défaut. Le 2ème est régit par la classe “greenrect” qui va, via CSS, le peindre en vert. Le 3ème est rose à travers le style in-line qui lui est fixé et enfin le dernier est simplement rouge. On observe alors une autre chose intéressante dans le style définit en haut de page. L’utilisation de la pseudo classe “hover” nous permet de dynamiquement changer la couleur en jaune au survol de la souris sur un des rectangles (sauf le 3ème qui écrase la règle avec son style in-line).

Si votre navigateur le supporte, vous pouvez jouer avec directement an sein de cet article :

Avouez que c’est sympa non? J’ai creusé un peu plus loin. Je me suis dit qu’il serait alors sympa de combiner les nouveaux jouets arrivant avec CSS3 avec SVG. Cela est possible uniquement avec l’élément racine de votre description SVG (le tag <svg> donc) et pas au niveau des sous-éléments. J’y reviendrais plus tard dans le 4ème billet dans les expérimentations que j’ai faites avec les différents navigateurs.

Pour finir, rien ne vous empêche bien évidemment de mélanger les 2 comme le montre cet exemple-ci : Exemple 5 SVG.

Niveau de support dans IE9

On retrouve la spécification SVG aujourd’hui sous 2 formes : la version complète SVG 1.1 2nd Edition aujourd’hui en “Working Draft” depuis le 22 juin 2010 implémentée par IE9 et les autres navigateurs modernes et la version SVG Tiny 1.2 logiquement prévue pour les périphériques mobiles et elle en version “Recommendation” depuis le 22 décembre 2008.

Dans IE9, voici les éléments que nous avons choisis de supporter dans SVG 1.1 2nd Edition :

Vous aurez davantage de détails sur notre support de SVG dans IE9 dans le Guide du développeur Internet Explorer 9.

L’absence du support des “Declarative Animation” (basée sur les animations SMIL) et des fonts SVG nous coute des points dans le très médiatique test ACID3 ce qui explique que nous sommes à 95 au lieu du score maximum de 100. Nous avons déjà parlé du manque de pertinence selon nous de ce genre de tests dans ce billet : HTML5 : respect des standards, tests et marketing

Mozilla de son côté avec Firefox 4.0 va également en partie dans notre sens : Mythbusting: Why Firefox 4 won’t score 100 on Acid3...and why that’s a good thing

IE9 comme Firefox 4.0 ont en effet fait le choix d’implémenter le format WOFF pour les fonts plutôt que de partir sur les fonts SVG qui, de l’aveu même du working group SVG, dispose d’un avenir incertain. WOFF semble donc un choix plus judicieux et pragmatique plutôt que de partir sur un support disparate des fonts SVG juste pour augmenter artificiellement le score au test ACID3.

Par ailleurs, pour ma part, je considère que les animations SVG rentre en conflit avec les possibilités offertes par CSS3 Animations (non encore supportées par IE à l’heure actuelle). Il existe en effet souvent des collisions dans les possibilités offertes par chacun des modèles (HTML5, CSS3 ou SVG). D’après ce que j’en sais, les groupes de travail au W3C n’ont pas encore tranchés sur l’intérêt des animations SVG vs les animations CSS3 qui pourraient être appliquées aux éléments SVG. Cela explique peut-être pourquoi nous ne nous sommes pas pour l’instant intéressés à cette partie de SVG. J’ai l’impression que les équipes WebKit partent dans la même direction. Aujourd’hui, il semblerait que le navigateur qui supporte au mieux les animations SVG soit Opera, suivi ensuite par Firefox et pour finir les navigateurs WebKit semblent les moins bon (mais ce sont eux qui ont inventé CSS3 Animations). Pour notre part, nous ne supportons pas du tout les animations SVG.

Les bases de Canvas

Les scènes statiques

Il faut voir <canvas> comme une image PNG dynamique. Vous disposez d’une surface de dessin (une bitmap) dans laquelle vous allez dessiner à l’aide de primitive accessibles via JavaScript. Ces primitives sont grosso-modo les mêmes qu’avec SVG : rectangles, lignes, remplissage de formes, courbes de Bézier, etc.

Par contre, la balise canvas est radicalement différente de SVG sur plusieurs points. Tout d’abord, c’est un mode dit “Fire and Forget”. Il n’y a donc pas de maintien en mémoire de ce que vous avez déjà dessiné. C’est à vous de savoir ce que vous avez dessiné et où. Ainsi, au niveau du DOM, canvas est vu comme une boite noire et peut donc poser potentiellement des problèmes d’accessibilité. J’en ai déjà parlé ici: Techdays 2011 - slides et ressources de la session Accessibilité d’HTML5 et Silverlight . Par ailleurs, contrairement à SVG, vous pouvez manipuler chacun des pixels de votre zone de dessin si vous le souhaitez. Si vous êtes développeur Silverlight, on pourrait ainsi un peu comparer cet élément HTML5 à l’objet WriteableBitmap quelque part. Mais heureusement l’élément canvas est bien plus riche que cela.

Reprenons un exemple simple pour commencer. On va dessiner la même chose qu’avec le 1er exemple SVG vu plus haut. Regardez le code de cette page :

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css" media="screen">
        </style>
        <script type="text/javascript">
            function init() {
                var canvas = document.getElementById("monCanvas");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "rgb(0,0,255)";
                ctx.fillRect(10, 10, 100, 100);
            }
        </script>
    </head>
    <body onload="init();">
      <canvas id="monCanvas" width="100px" height="100px" />
    </body>
</html>

Vous pouvez le tester ici : Exemple 1 Canvas

L’élément canvas est déclaré avec une taille de 100 pixels de large par 100 pixels de haut. C’est tout ce qu’il faut faire du côté du markup HTML. Tout le reste se fait ensuite par JavaScript.

En JavaScript, on exécute la function init() au chargement du document. Cette fonction s’occupe alors de récupérer mon élément canvas à partir de son ID puis ensuite récupère le contexte 2D (la surface de dessin). Une fois que vous avez votre contexte en main, vous pouvez appeler dessus les primitives du canvas.

Si votre navigateur supporte cet élément, vous devriez avoir un magnifique carré bleu de dessiné juste en-dessous de ce texte :

Ajout de l’interactivité

L’interactivité avec les éléments dessinés au sein du Canvas va se faire uniquement via JavaScript. Vous n’avez en effet pas d’évènements qui seront propagés par le navigateur vu que le DOM n’est pas rempli par les éléments du Canvas. Pour bien comprendre la différence avec SVG, nous allons reprendre le même exemple que l’exemple 3 SVG (avec un cercle jaune) mais en canvas. Vous pouvez le tester sur cette page Exemple 2 Canvas. Cela correspond à ce code :

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
        // This function is called on page load.
        function drawOnCanvas() {
            // Get the canvas element.
            var canvas = document.getElementById("uIElement");

            // Make sure you got it.
            if (canvas.getContext)
            // If you have it, create a canvas user inteface element.
            {
                // Specify 2d canvas type.
                var ctx = canvas.getContext("2d");
                // Draw gold UI element.
                // Start the path.
                ctx.beginPath();
                // Define the fill color in RGB for gold.
                ctx.fillStyle = "rgb(255 ,215 ,0)";
                // Draw the circle using an arc.
                ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
                // Fill the circle.
                ctx.fill();
            }
        }

        // This function is called when you click the canvas.
        function clickOnUI() {
            alert("You clicked the canvas UI element.");
        }
    </script>
  </head>
  
  <body onload="drawOnCanvas()">
    <h1>Canvas User Interface</h1>
    <!-- Create the Canvas element. -->
    <canvas id="uIElement" width="200" height="200" onclick="clickOnUI()" />
    <p>Click on the gold circular user interface element.</p>
  </body>
</html>

Si votre navigateur le supporte, vous devriez voir juste en-dessous le même cercle jaune que précédemment :

Vous remarquerez ainsi que l’évènement de click est levé indifféremment du fait que vous ayez cliqué sur le cercle jaune ou pas. En effet, c’est logique, nous nous sommes abonnés à l’évènement onclick() de l’élément canvas lui-même. Il sera donc levé quelque soit l’endroit sur lequel nous cliquerons. Si l’on souhaitait obtenir le même comportement qu’avec l’exemple SVG où l’évènement était uniquement levé sur le click sur le cercle, il faudrait procéder autrement. Il faudrait tout d’abord repérer où se trouvait le curseur de la souris au moment où l’utilisateur a cliqué pour obtenir les coordonnées X et Y. Une fois les coordonnées récupérées, il faudrait ensuite vérifier ce que nous avions dessiné à cet endroit précis et si ce pixel particulier faisait alors parti du cercle jaune (il suffit de faire un peu de math ). C’est donc à vous de vous occuper de tout cela et je pense que vous devriez maintenant mieux comprendre la différence entre le mode “retained mode” de SVG et le mode “fire & forget” de Canvas.

CanvasPad : une application pour apprendre Canvas en tout simplicité

Si vous souhaitez vous familiariser avec les bases de canvas, je ne serais que trop vous recommander d’aller jouer avec notre application CanvasPad présente sur notre site IE Test Drive ici : Canvas Pad.

Il y a un petit éditeur de script intégré avec des exemples simples vous permettant de faire vos premières armes dessus.

On y retrouve les formes de bases, la possibilité de gérer des ombres portées, d’afficher du texte, des images et des vidéos au sein même du canvas, des transformations et des animations.

Revue du même jeu écrit en Canvas et SVG

Il m’a paru intéressant pour finir cette introduction aux bases de ces 2 jeux d’APIs de comparer exactement le même jeu écrit à base de Canvas puis à base de SVG. Le principe est simple : on a une barre (un paddle) en bas, une petite balle rouge qui rebondit sur les murs et l’on doit simplement éviter que la petite balle rouge touche le sol. Voilà les règles extrêmement complexes du jeu.

Visuellement, les 2 jeux sont identiques :

Vous pouvez tester la version canvas ici : Canvas Racquetball et la version SVG ici : SVG Racketball. Ils sont issus de ces 2 tutoriaux MSDN : Programmation de jeux simples avec Canvas ou SVG

Je vous invite à lire ce tutorial qui explique bien les différences entre les 2 modes sur ce jeu particulier. Nous verrons dans le prochain article une tentative de positionnement de chacun des 2 modes par scénario d’utilisation.

A bientôt pour la suite !

David

Mix11: retour sur la partie HTML5 du 1er keynote avec IE9/10, HTML5Labs et ASP.NET MVC3

David Rousset — Wed, 13 Apr 2011 02:31:30 GMT

Nous sommes plusieurs à avoir à nouveau la chance d’être présents à Las Vegas pour couvrir le MIX annuel. Cette année sera orientée HTML5, IE9/10, Windows Phone 7.5 et Silverlight 5. Bref, plein de bonnes et belles choses à découvrir. Je vais me concentrer pour ma part dans ce billet à ce qui touche à HTML5.

Commençons par découvrir cette première plénière présentée par Dean Hachamovitch & Scott Guthrie que vous pouvez revoir ici : http://live.visitmix.com/Keynotes

Internet Explorer

Tout d’abord, Dean est revenu sur notre stratégie de développement du navigateur et la manière que nous avons choisis d’implémenter de nouvelles fonctionnalités au travers des Platform Preview. IE9 comporte ainsi un certain nombre de fonctionnalités d’HTML5 et CSS3 que nous considérons comme “Site Ready” ou autrement dit, prêts à être utilisés en production. Vous n’êtes pas sans savoir en effet que de nombreuses spécifications de CSS3 par exemple sont encore à l’état de brouillon (Working Draft).

Nous avons ensuite fait de belles démonstrations d’applications purement HTML5 dans IE9 grâce à notre excellent support de l’accélération matérielle :

- une façon unique de découvrir Foursquare en 3D isométrique avec Foursquare Playground : http://foursquareplayground.com/
- une très impressionnante démo d’un manga animé entièrement réalisée en SVG : http://jsdo.it/event/svggirl (ceci n’est pas une vidéo !).
- la possibilité de faire un montage vidéo des clips de Bon Jovi : http://director.bonjovi.com/ avec l’utilisation de canvas, SVG et bien sûr la balise vidéo.
- le plus grand PacMan au monde : http://worldsbiggestpacman.com/ ! Merci à <canvas> à nouveau.

Nous avons ensuite annoncé la disponibilité de la 1ère Platform Preview d’IE10 ! Vous pouvez la télécharger ici : http://ie.microsoft.com/testdrive

Au programme, des nouveautés très intéressantes :

- CSS3 Flexbox
- CSS3 Grid Alignment
- CSS3 Multi-column
- CSS3 Gradients
- ECMAScript5 Strict Mode

Vous trouverez toutes ces nouveautés détaillées ici : Internet Explorer Platform Preview Guide for Developers

Pour les développeurs Silverlight, CSS3 Flexbox ressemble tout simplement au container <StackPanel> et CSS3 Grid au container <Grid>. Je peux vous dire que ces nouveautés, combinées à CSS3 Media Queries, vont permettre la réalisation de sites ou d’applications HTML5 pouvant facilement s’adapter à des téléphones, des tablettes ou des PC. Une session était d’ailleurs dédiée à ce thème : IE 10 Platform Preview 1: The Future of Adaptive Web Design. Elle est particulièrement intéressante et donne un aperçu du futur je pense. A regarder !

Pendant le keynote, il y a eu également de belles démonstrations de CSS3 Transitions et CSS3 3D Transform qui arriveront dans une PP suivante. Le rythme des Platform Preview sera de 8 à 12 semaines (alors qu’IE9 avait un rythme de 6 à 8 semaines).

Pour finir sur IE, Steven Sinofsky himself est venu nous faire les démos d’IE10 le tout sur… une machine disposant d’un CPU 1 Ghz à architecture ARM (un Tegra 2 de nVidia) ! La grosse surprise du keynote sans aucun doute !

Stanislas a fait également un très beau billet sur cette partie du keynote sur notre blog IE France : Internet Explorer 10 Platform Preview 1 présenté à MIX 2011

HTML5Labs

Notre stratégie est différente de celle des concurrents sur le travail autour des spécifications expérimentales. Nous ne les mettons pas directement dans le navigateur comme le font par exemple Google ou Mozilla avec le risque de devoir mettre à jour le navigateur puis ensuite son code pour avoir par exemple la dernière version du protocole WebSockets. Notre travail s’effectue autour d’une méthode différente proposée par notre groupe d’interopérabilité et nommée HTML5Labs : http://html5labs.com

Une nouvelle version du site a été annoncée au keynote. On trouve désormais 4 spécifications présentes sur le site :

- WebSockets
- IndexDB
- FileAPI
- Media Capture API

J’ai pu assister à une session très intéressante Hot from the Labs: HTML5 WebSockets sur laquelle je reviendrais dans un billet séparé.

ASP.NET MVC3, WebMatrix et Entity Framework 4.1

Pour finir sur les annonces autour d’HTML5, ASP.NET MVC3 a été mis à jour : http://asp.net/mvc et supporte désormais des templates HTML5. Au programme : nouveaux tags sémantiques (comme header, section, footer) et utilisation de quelques parties de CSS3 comme les border-radius. Bonne nouvelle : ASP.NET MVC3 livre désormais par défaut la très célèbre librairie JS Modernizr. Cela permet (entre autres) d’utiliser ces nouveaux tags sémantiques HTML5 sans perdre pour autant le fonctionnement du site avec IE8 et inférieurs.

Scott Hanselman a alors fait une superbe prestation de 8 min où il a utilisé ces nouveaux templates, Entity Framework 4.1 Code First, jQuery pour créer un back office puis ensuite un frontal en WebMatrix. Très belle démonstration de la maturité de ces produits et des cibles différentes de chacun d’entre eux. Scott est aussi un excellent speaker !

D’autres comptes rendus en Français :

- Nicolas Clerc : http://nicolasclerc.wordpress.com/2011/04/13/mix-2011-cest-parti-keynote-du-11-avril/
- David Catuhe : http://www.catuhe.com/post/Mix2011–Keynote–Day-1.aspx
- Christophe Lauer : Mix11 Las Vegas : Les choses à retenir du premier keynote . Un très beau billet de Christophe à lire ! (même s’il se moque un peu de moi quelque part… )

A demain pour la suite !

David

David Rousset

Venez découvrir le parcours Web aux Techdays 2012 avec du Windows 8 dedans !

HTML5

Parcours Web

Autres parcours

Du côté du serveur Web

En résumé…

AMDEV JavaScript: vidéos, slides et exemples de code des 4 sessions

JavaScript

Outils de debug

jQuery

Canvas & SVG

Tutorial: how to create HTML5 applications on Windows Phone thanks to PhoneGap

Introduction

PhoneGap: a framework filling the gap

Let’s create our first PhoneGap project

Prerequisites

File->New project

Getting the accelerometer’s values from JavaScript

Issues with phones using French locale

Review of a complete sample with the HTML5 Platformer game

Forcing the landscape orientation

Handling various resolutions

Loading the levels with calls to the file system instead of using XHR

Modification of the gameplay to use the accelerometer

Screenshots of the result and FPS on some phones

Complete Visual Studio Solution to download

Other useful resources

Conclusion

Tutorial: créez des applications avec HTML5 sur Windows Phone grâce à PhoneGap

Introduction

PhoneGap : un framework qui comble les manques

Création de son 1er projet PhoneGap sur Windows Phone

Pré-requis

Nouveau projet

Récupération des valeurs de l’accéléromètre

Petit problème sur les téléphones configurés en français

Exemple complet avec le jeu HTML5 Platformer

Forcer le mode paysage

Adapter le code pour gérer plusieurs résolutions

Chargement des niveaux via l’appel au système de fichiers plutôt que XHR

Modification du gameplay pour gérer l’accéléromètre

Le résultat en images avec quelques FPS sur les téléphones

Solution complète à télécharger

Ressources complémentaires

Conclusion

Testez et débuggez vos sites HTML5 sous Windows Phone 7 avec l’émulateur gratuit

L’émulateur Windows Phone

Différences entre IE9 desktop et mobile

Débugger le code JavaScript avec jsConsole

Débugger le trafic réseau avec Fiddler

Introduction aux animations CSS3

CSS3 Animations

Introduction

SVG

Déclarations

Animations non linéaires

Délais

Evènements

D’autres choses à propos des animations CSS3

Support dans les navigateurs

Librairie JavaScript pour simuler les animations CSS3

Conclusion

Pour aller plus loin

Introduction to CSS3 Animations

CSS3 Animations

Introduction

SVG

Declarations

Non-linear animations

Delay

Events

More about CSS3 animations

Browsers Support

CSS3 Animations JavaScript fallback library

Conclusion

Going further

Vidéo, slides et ressources de ma session sur le développement d’un jeu de plateforme en HTML5

HTML5 Platformer: portage complet du jeu XNA vers grâce à EaselJS

Construction du gestionnaire de téléchargements

HTML5 Platformer: portage complet du jeu XNA vers

HTML5 Platformer: the complete port of the XNA game to