David Rousset

Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 2/2)

David Rousset — Mon, 14 May 2012 13:42:30 GMT

We’re now going to see how to display the details of each article. We will use for that a transition animation, we will play with the simulator and we will continue to discover Blend to use CSS3 Multi-columns for instance.

Like in the previous article, you’ll find a video as well as the source code to download at the end of the article.

This article is the second part of this one: Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 1/2)

During this article, we’ll see:

- Step 1: using the simulator
- Step 2: displaying the articles’ details
- Step 3: finishing the design of the detail view with Blend
- Step 4: video and source code to download

Step 1: using the simulator

It’s important to know how your application behaves with touch devices and with the various resolutions of future Windows 8 tablets & PC.

We’re providing a cool tool that could help you doing your first tests: the simulator.

For instance, if you’re opening the project as it was at the end of the previous article, we can simulate some touch interactions by launching the simulator via this button:

The simulator will then be launched. It is more or less simulating a RDP session on yourself. Here is the output you should have:

You can now click on this icon:

It will simulate touch. Try to slide the virtual finger on the virtual display. You’ll then see that some inertia and bouncing effects are already implemented for you. In the same manner, if you touch an element and slide it down, you will select it. It’s the same action as doing a right-click on it with your mouse. You see here the benefits of using native WinJS controls that implement all this kind of logic for you.

Another useful button is the one handling the various resolutions:

Try for instance to simulate a 23’’ monitor having a 1920x1080 resolution. You should now see this kind of layout:

You may have noticed that we’re switching from 2 lines of elements to 3 lines in 1080p and from 5 visible columns to 7. The ListView control handles also the various form factors for you.

So even if WinJS is not mandatory inside HTML5 Metro projects, don’t underestimate all the benefits it may bring you for free!

Step 2: displaying the articles’ details

In order to display the articles’ content, we need another piece of HTML. Navigate to the “default.html” page and insert this one:

<div id="articlecontent"></div>

We will insert the article’s content by code. Open “default.js”. Just above the Binding.List instantiation, insert this code:

var articlelistElement = document.getElementById("articlelist");
articlelistElement.addEventListener("iteminvoked", itemInvoked);
backbutton.addEventListener("click", backButtonClick);

We’re targeting our “articlelist” element from the DOM that now must be a WinJS ListView control thanks to the execution of the processAll function. This one is then now exposing an event named “iteminvoked”. It’s raised when you will click/touch one of the elements of the list. Moreover, we’re subscribing to the “click” event of the “back” button to be able to simply go back to the welcome screen.

We now need to create the associated event handlers. Here they are:

function backButtonClick(e) {
    articlecontent.style.display = "none";
    articlelist.style.display = "";
}

function itemInvoked(e) {
    var currentArticle = articlesList.getAt(e.detail.itemIndex);
    setInnerHTMLUnsafe(articlecontent, currentArticle.content);
    articlelist.style.display = "none";
    articlecontent.style.display = "";
}

The concept is really simple here. When the user will click on one of the elements, we will retrieve in the collection the appropriate object with its index (e.detail.itemIndex). We’re injecting the HTML content into the innerHTML property of the div node just inserted in the main page via the setInnerHTMLUnsage() function. But why do we need to use this special function for that?

Some quick notes about the Metro Style Apps security context

The security context of an HTML5 Metro application is different from a classical web page. In our case, trying to access directly to the innerHTML property is protected/scanned.

For instance, if you try to insert some HTML downloaded from the « public web » space, a security exception will be raised by default to protect you. I’m sure you don’t want to have some script injection taking control of your application. So by default, we’re preventing that.

But if you really know what you’re doing, you have the choice to “by-pass” this automatic check by calling the setInnerHTMLUnsafe() function.

Linked to the security context also, inserting an <iframe> in your application is slightly different for instance. If you’re interested in the details, here are some articles to read:

- HTML, CSS, and JavaScript features and differences
- Features and restrictions by context
- Making HTML safer: details for toStaticHTML

Ok, let’s go back to our main topic.

The way we’re displaying the content of the article is really simple. We’re hiding the list of our elements by switching its “display” to “none” and we’re displaying the “articlecontent” div. When pressing the “back” button, we’re doing the exact opposite.

Ok, press F5 and you should have something like that after clicking on one of the items:

You’ll notice that the layout is far from being cool but we’re going to work on that in a few moments with Blend.

In the meantime, I’d like to focus on something really annoying in the current version. The navigation inside an article and back to the welcome screen works fine. But the user experience is not optimal. The detail of the article arrives without any transition.

We’re then coming to an important point of the Metro Style Apps: the “Fast & Fluid” experience. You need to suggest performance to your user and tell them that your application is really alive. To do that, simply adding some slight transitions animations can totally change the perception. Technically, you can implement them in 2 manners.

You can implement them using pure CSS3 Transitions/Animations to display the content you’re interested in. It is then up to you to find the appropriate animations. If you’d like to discover how these new CSS3 features work, we’ve made some introduction articles David Catuhe and I here:

- Introduction to CSS3 Transitions
- Introduction to CSS3 Animations

Or you can use the WinJS library which exposes prebuilt animations to help following the Metro guidelines. Under the hood, you’ll find the usage of CSS Transform & transitions. But for us developers, we just have a simple line of JavaScript to call.

For instance, in the itemInvoked() handler, insert this line of code at the end of the function:

WinJS.UI.Animation.enterPage(articlecontent);

And please insert this one at the end of the second event handler:

WinJS.UI.Animation.enterPage(articlelist);

Pressing F5, you should now have some subtle transitions while you’re navigating inside the application. Trust us, they will really make the difference in the user experience!

Step 3: finishing the design of the detail view with Blend

Switch back to Blend. It will ask you again to reload all the changes you’ve done inside Visual Studio.

Question of the day: how will you be able to design the detail view as we need to simulate a navigation action via an item selection?

Well, you already had the answer in the previous article. Blend 5 is live running your HTML5 Metro application. But you’re maybe lacking an additional detail. You can switch into an “interactive” mode by clicking on this button:

It should be named “Turn on Interactive Mode”. Once done, you should be able to interact with your application, navigate to the article content you’d like to review and switch back to the design surface by clicking on the same button. It my case, I’ve decided to use this article as a base:

In the style section, under the appropriate Media Query, add a new rule targeting “#articlecontent” and select it immediately.

In the “Sizing“ section, fix the width & height to 100%.

In the “Layout” part, put a left padding of 120px to align the content with the title.

This raises a new problem. The layout our “articlecontent” div doesn’t fit anymore in the width of our screen.

To fix that, modify the “width” property and click to select a “custom expression”:

We’re going to use the CSS Calc() operator. Enter the following expression “calc(100%-120px)”.

We’re better following the Metro guidelines this way. We’ve got an ultimate task to do it in an even better way: allowing the user to slide horizontally the content and make it more readable.

Let’s start by readability. There is a very useful CSS3 feature for that easy to put in place: CSS3 Multicolumns.

Jump into the “Multicolumn” section of the “CSS Properties” panel. Modify the layout to create 480px columns width with gaps of 80px between them.

It starts to look fine, isn’t it?

To conclude, we need to implement horizontal sliding. Go into the “Search Properties” textbox and type “over”. Blend will then filter all the properties containing the “over” keyword.

Set the “overflow-x” property to “auto” and “overflow-y” to “hidden”.

You can switch back to Visual Studio, accept the changes and press F5 to play with the final result.

Special additional bonus level for warriors

Well, as I feel you still want to play with Blend, let’s add another feature. What is the most important thing for us while we’re reading a technical article? The source code of course!

Once you know that, don’t hesitate to put some emphasis on the code in a way or in another to catch the eye of the developers.

In the Channel9 case, they had the excellent idea to insert the code parts into <pre> tags. It will simplify our life to style this part.

Add a new CSS rule “#articlecontent pre”.

Switch into the interactive mode and navigate into an article where some source code is visible enough.

Select the last rule you’ve just added and go into the “Background” section of the CSSS properties. Click to set a color:

You will then be able to use this wonderful color editor to make your choice:

But if you’re a poor developer like myself, you will probably have a natural tendency to choose the worst color ever. So, click on the color picked icon and choose the nearest Blend grey. It’s obviously a good grey.

To definitely conclude, on the <pre>, set the “overflow-x” property to auto and the “overflow-y” to “hidden”.

Pressing F5 will bring you this kind of experience:

Step 4: video and source code to download

Well, I hope you’re now convinced I wasn’t lying. If you were focused enough, you should have spent 30 minutes to build this little application.

Here is the video to watch following these steps:

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

And here is the source code to download: Simple Channel9 Reader Article2

Thanks for reading! If you’d like to go further, here are some good articles to read:

- An excellent series done by David Catuhe: How to cook a complete Windows 8 application with HTML5, CSS3 and JavaScript in a week. You will discover how to support the snapped view, the search contract, the navigation framework and a lot of other cool Windows 8 features.
- Create your first Metro style app using JavaScript covering the same topic and complementary to these 2 articles.

David

Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 1/2)

David Rousset — Fri, 11 May 2012 17:55:16 GMT

Starting from scratch, we’re going to learn through these 2 tutorials how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8 Metro Style Apps. We’ll try also to follow the Metro design guidelines by using Expression Blend 5. If everything goes fine, you should be able to follow these 2 articles in 30 minutes.

This first article will help you to create the welcome screen that will use a WinJS ListView control. This control will display all the blog posts recently published via nice thumbnails. The 2nd one will work on the detail view displayed when you’ll click on one of the items. At last, you’ll find a video at the end of this article playing in real-time the following steps as well as the final solution to download. See them as useful complementary resources if you need to clarify some parts of this article.

Pre-requisites: to follow these tutorials, you need first to:

1 – Download & install Windows 8 Consumer Preview on your machine: http://preview.windows.com
2 – Download & install Visual Studio 11 Express for Windows 8: http://msdn.microsoft.com/en-us/windows/apps/br229516

Note: If you’ve got a Mac, it works perfectly fine thanks to BootCamp or inside a virtual machine handled by Parallels for instance

Here is a brief summary of what we’re going to see in this article:

- Step 1: creating a blank application
- Step 2: creating the HTML & CSS base of our main page
- Step 3: first contact with Blend
- Step 4: loading the data with XHR and bind them to the ListView control
- Step 5: using a template and modifying the design with Blend
- Step 6: video demonstrating all the steps & source code to download

Note: these tutorials are based on the Tools for building Metro style apps session of the BUILD delivered by Chris Sell & Kieran Mockford. I’ve simply updated it for Windows 8 CP.

Step 1: creating a blank application

First thing you need to do is to launch Visual Studio 11 and create a new JavaScript Windows Metro Style project via “File –> New Project”:

Name it “SimpleChannel9Reader ” as we’re going to download the RSS stream of the Coding4Fun section of Channel9 available here: http://channel9.msdn.com/coding4fun/articles/RSS

Step 2: creating the HTML & CSS base of our main page

Open the “default.html” file which describes the first page that will be displayed when you’ll launch the application. Instead of the following HTML part:

<p>Content goes here</p>

Insert this one:

<div id="main">
    <header id="banner">
        <button id="backbutton" class="win-backbutton">
        </button>
        <h1 id="maintitle" class="win-title">
            Welcome to Channel 9!</h1>
    </header>
    <section id="content">
    </section>
</div>

We now have a global div container with the “main” id embedding 2 sub-containers named “banner” and “content”. The header will be obviously displayed at the top of the page and the content section will be displayed just below.

Let’s add a bit of CSS to that by opening the “default.css” file stored in the “css” directory. You’ll see that there is already some predefined CSS to handle the various available Windows 8 views thanks to Media Queries.

In these 2 articles, we will concentrate our efforts only on the “fullscreen-landscape“ state. So jump into this section and insert the following piece of CSS:

#main
{
    width: 100%;
    height: 100%;
}

#banner
{
    width: 100%;
    height: 100%;
}

#backbutton
{
}

#maintitle
{
}

#content
{
    width: 100%;
    height: 100%;
}

This simply indicates that we’d like to take all the available space for our 3 main containers.

Run your application by pressing the F5 key or by clicking on the following button:

Logically, you should now see this screen:

And you should also see an obvious design problem: the back button and the title are not aligned. Let’s resolve this by using Blend 5!

Step 3: first contact with Blend

Launch Blend and navigate to the folder where your SimpleChannel9Reader project is. Blend will then show that:

The goal here is to create 2 grids. The first one will be for the main container. It will be defined by 1 column that will take all the available width & by 2 lines. The 2^nd one will be defined by 1 line & 2 columns for the back button and the title.

Let’s start by the select the “main” element by using the “Live DOM” window:

Jump to the “Layout” window and switch the display to “-ms-grid”:

We’re going to use the CSS Grid Layout specification currently only supported by IE10 but that should soon land in other browser. If you’d like to know more about the type of layout supported in the Metro mode, you can read this article: Choosing a CSS3 layout for your app.

If you simply want to discover the CSS3 Grid specification, feel free to play with this IE Test Drive demo: Hands On: CSS3 Grid Layout

Ok, now that the display is properly switched into grid, we need to define our grid. For that, jump to the “Grid” part and declare the following properties:

We will have a unique column spanning through the complete width of the screen (whatever the resolution will be) and 2 lines. The first line will have a “fixed” height size of 132px and the other one will take the remaining space. You can see this inside the Blend designer surface:

Now, we’re going to move the “content” element into the 2^nd line. Select it into the “Live DOM” and move to its “Grid” properties. Change the “-ms-grid-row” value to 2. You can also move the “banner” element to the row 1 but it will be there by default otherwise.

We’re now going to split our first line into 2 columns in order to move each element in the right places. Select the “banner” element, switch its display property to “-ms-grid” and define 1fr line & 2 columns of 120px and 1fr:

Move the “maintitle” element into column 2 and center it vertically thanks to the “-ms-grid-row-align” property changed to “center”:

Select the “backbutton” and jump to the “Layout” part. Set a 54px top margin and a 40px left margin. If you haven’t missed something, you should now see that on the design surface:

Save all changes via “File” à “Save All” and go back to Visual Studio. Open “default.css” and you’ll see that Blend has generated some “clean” CSS in the right rules:

@media screen and (-ms-view-state: fullscreen-landscape)
{

    #main
    {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 132px 1fr;
    }

    #banner
    {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
    }

    #backbutton
    {
        margin-top: 54px;
        margin-left: 40px;
    }

    #maintitle
    {
        -ms-grid-column: 2;
        -ms-grid-row-align: center;
    }

    #content
    {
        width: 100%;
        height: 100%;
        -ms-grid-row: 2;
    }
}

Simply check that the application works fine by pressing F5.

Step 4: loading the data with XHR and bind them to the ListView control

Ok, let’s now dig a little bit into the code.

First thing to do is to insert the control that will be in charge of displaying our articles’ thumbnails on the welcome screen. We’re going to use WinJS for that.

The WinJS library or “Microsoft Window Library for JavaScript SDK” is made to help the JavaScript developers implementing the Windows 8 Metro experience in an easy way. It provides a set of Metro controls, a templating engine, a binding engine, Promises to handle the asynchronous calls, helpers to handle Namespaces, etc.

For instance, if you’d like to learn more about the controls part, you can read this article: Quickstart: adding WinJS controls and styles

In Windows 8 Metro projects, you’ll find this library in the references section of the “Solution Explorer”:

Inside, you’ll find the default style sheets with the 2 dark & light themes provided as well as the JavaScript code. Feel free to have a look to it. It could be interesting to learn by reading the code.

In our case, we’re going to use the ListView control which creates a grid layout to display the list of elements.

Open “default.html” and inside the section tag, type this piece of HTML:

<div id="articlelist" data-win-control="WinJS.UI.ListView"></div>

Currently, it’s only a simple classical div. However, it’s annotated with the data-win-control attribute which indicates that we’d like to use the WinJS library to transform this simple div into a JavaScript ListView control.

This operation is done thanks to a magical line of JavaScript code you’ll find into “default.js”. Here it is:

WinJS.UI.processAll();

This asynchronous operation will parse the DOM to find all the elements tagged with “data-win-control” attributes to transform them into real WinJS controls implementing the Metro experience for you. If you remove this line by mistake, all your div will become again some simple div.

We now need to feed this ListView with some data grabbed from the RSS feed. In the function bind to the “onactivated” event, add this piece of code just above the processAll() line:

articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("C9Data", publicMembers);

You’ll need then to declare the “articlesList” variable at the top of the function just below the “app” one for instance.

We’re declaring here a Binding.List() type. It’s the type to use to bind your data to the WinJS controls. It contains for instance some methods that will help you to add some data in background and thanks to the binding mechanism; it will be reflected into the view automatically.

Moreover, you may have noticed that we’re using some clean JavaScript code by using modern patterns like the “module pattern” for instance. For that, we have an anonymous self-executed JS function into “default.js”. We then need to find a way to expose some public data to external functions. That’s why we’re implementing the Namespace concept into the associated WinJS helper. It helps us to easily define what we’d like to expose. In our case, we will have a public “C9Data” object that will have an “ItemList” property containing our future elements to display.

We now need a function that’ll grad the data from the RSS feed, parse them and create some JS objects on the fly to push them into the famous binding list. Here is mine:

function downloadC9BlogFeed() {
    WinJS.xhr({ url: "http://channel9.msdn.com/coding4fun/articles/RSS" }).then(function (rss) {

    });
}

This function starts by running an asynchronous XmlHttpRequest to the specified URL. The code defined into the Promise (into the .then() if you want) will then be executed only once the request will be finished and the data received. It’s then here that we need to filter the data via this piece of code you have to insert into the anonymous function:

var items = rss.responseXML.selectNodes("//item");

for (var n = 0; n < items.length; n++) {
    var article = {};
    article.title = items[n].selectSingleNode("title").text;
    var thumbs = items[n].selectNodes("media:thumbnail");
    if (thumbs.length > 1) {
        article.thumbnail = thumbs[1].attributes.getNamedItem("url").text;
        article.content = items[n].text;
        articlesList.push(article);
    }
}

I hope that this code will be self-explicit. It selects the “item” nodes, access to their interesting properties to map them to an “article” object created on the fly on the “title”, “thumbs” & “content” properties. Please keep in mind the name of those properties; we will use them later on. At last, this function finishes by adding this new object to the binding collection.

We now need to run this function during the starting phase of our application. This code should run once the DOM parsing will be done to build the WinJS controls. So, to do that, use this line of code:

WinJS.UI.processAll().then(downloadC9BlogFeed);

We have to specify to the control its data source. Jump back into the HTML code and modify the div associated to the ListView to change its options:

<div id="articlelist" data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource: C9Data.ItemList.dataSource }"></div>

At last, we need some basic CSS to help the control to know how to draw each of its items. Jump to the “default.css” file and add these 2 rules:

#articlelist
{
    width: 100%;
    height: 100%;
}

#articlelist .win-item
{
    width: 150px;
    height: 150px;
}

This CSS indicates that our ListView control should take all the available space of its container and that each of its items (via the “.win-item” class”) should take 150 by 150 pixels.

Run the solution by pressing F5. You’ll have something as ugly as that:

But don’t panic, this ugly output is the expected behavior! We still have a bit of design to work on. But you can already see that the binding works correctly and that the control works fine with touch’ & mouse experiences. Moreover, the control automatically scales to the various resolutions. You’ll then not have the exact layout (number of columns & lines displayed) that the above screen in your case.

Step 5: using a template and modifying the design with Blend

We now need to change the way each element is drawn. This is exactly the purpose of the templating engine. A template is only a piece of HTML marked with WinJS attributes.

Navigate to the “default.html” page and add this piece of HTML just above the “main” part:

<div id="C9ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
    <div class="listItemTemplate">
        <div class="listItemImage">
            <img data-win-bind="src: thumbnail" />
        </div>
        <div class="listItemTitle" data-win-bind="innerText: title">
        </div>
    </div>
</div>

It’s an HTML template marked with the “WinJS.Binding.Template” value. This will help WinJS to know what to do with this special piece of HTML after the processAll() execution. You’ll find also the usage of “data-win-bind” to define binding expressions. It will help the binding engine to know which JavaScript properties from the data source to map to the appropriate HTML nodes. Except that, you can use some classic HTML.

We now need to configure the WinJS control to not use the default template anymore but to use the new one above instead. It’s done by simply changing the options:

<div id="articlelist" data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource: C9Data.ItemList.dataSource, itemTemplate: C9ItemTemplate }">
</div>

If you now run the application, you should have this screen:

It’s better but we’re not done yet. To go further in the design review, we need the help of our friend Blend.

So, let’s go back into Blend. It will ask you to reload all the modifications you’ve done inside Visual Studio. Once done, you’ll have that:

Aren’t you surprised? You should! Indeed, we see here the same visual output you will have when you’ll press F5 in Visual Studio. This means that Blend 5 is dynamically executing the JavaScript part of your application directly inside the designer! This is an awesome feature.

Thanks to that, you will be able to directly work on real data without being forced to put in place what we call “mocking”. It’s the cool part of JavaScript. Blend was able to execute the JS code that launch the XHR request and build the WinJS objects.

Under “default.css”, let’s add 2 new CSS rules. Click on the “+” button on the main media query:

And add these new selectors:

.listItemTemplate and .listItemTemplate img

Select the #articlelist .win-item rule that will highlight each element of the ListView control with the “articlelist” ID.

Change the size of these elements to go from 150px by 150px to 250px by 250px. You simply need to jump into the “Sizing” part of the right panel.

Force a refresh of the design surface by clicking on the dedicated button:

And here is the result you should have:

We’re now going to resize the template’s images. For that, select the “Direct Selection” pointer and click on one of the images:

You can see the current applied CSS rules in the “Applied Rules” section. Click on “.listItemTemplate img” and resize with your mouse the image you’ve just selected. All the other images matching the same selector will then dynamically reflect the changes in real time.

Rather than searching the appropriate size, I’m going to help you. Jump into the “Sizing” section and fix the following size: 234px width and 165px height.

To enhance a bit more our design, we need some more space between each element and to align our ListView control with the title.

Click on the “.listItemTemplate” selector, navigate to the “Layout” section and click on the “Lock” icon at the right of the “Margin” area. Select any margin and type 8px.

At last, to align the grid of the ListView control with the title, we need to move it from the left by 120px – 8px of the element margin we’ve just set.

Add a new selector by pressing on the “+” button and name it “.win-surface”. Fix a left margin of 112px.

Go back to Visual Studio, accept the changes done and press F5. You should now have this kind of layout:

Step 6: video demonstrating all the steps & source code to download

Here are 2 HTML5 videos where I’m playing all these steps for you:

The first one will show you the steps 1, 2 & 3:

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

The 2nd one will do the steps 4 and 5:

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

We’ve made good progress so far. We now need to display the detail of each article, to continue discovering the power of Blend as well as a couple of new cool CSS3 features. You can download the solution associated to this first article here: Simple Channel9 Reader Article1

See you in the next article for that.

David

Comment créer un petit lecteur RSS pour Windows 8 Metro en HTML5 en 30 min (partie 2/2)

David Rousset — Fri, 20 Apr 2012 18:50:13 GMT

Nous allons maintenant voir comment afficher le détail des articles de blogs. Pour cela, nous allons utiliser une animation de transition, jouer avec le simulateur et continuer à utiliser Blend pour mettre en place du CSS3 Multi-columns.

Comme toujours, vous trouverez à la fin une vidéo déroulant les étapes que vous pouvez suivre en lisant cet article ainsi que le code source de la solution.

Cet article fait suite au précédent : Comment créer un petit lecteur de flux RSS pour Windows 8 Metro en HTML5 et en 30 min (partie 1/2)

Au menu pour ce deuxième article :

- Etape 1 : utiliser le simulateur
- Etape 2 : afficher le détail de l’article
- Etape 3 : finaliser le design de la vue détail sous Blend
- Etape 4 : vidéo et code source à télécharger

Etape 1 : utiliser le simulateur

Il est important de savoir comment son application se comporte au touch et avec les différentes résolutions des futurs PC et tablettes Windows 8.

Avant de vous ruer sur l’achat d’une tablette, étape malgré tout indispensable pour bien tester son application, il existe un outil qui peut être pratique pour dégrossir le sujet : le simulateur.

Par exemple, si l’on reprend notre projet tel que fini à l’étape précédente, on peut observer le comportement au touch en lançant le simulateur via ce bouton :

Le simulateur se lance alors. Ce dernier consiste en fait à faire une session RDP (de type Terminal Server si vous voulez) sur vous-même. Voici le résultat que vous devriez avoir :

Vous pouvez commencer par cliquer sur cet icône :

Pour simuler le touch.

Jouer à « glisser » le doigt virtuel sur l’affichage. Vous verrez alors que l’inertie et le rebond sur les côtés sont déjà bien gérés. De la même manière, si vous touchez un élément et que vous maintenez en descendant légèrement vers le bas, vous sélectionnerez un élément de la liste. C’est la même action que le bouton droit de la souris et c’est la même action que vous pouvez faire sur l’écran de démarrage de Windows 8. Cette gesture est donc commune à l’expérience Metro que nous construisons avec Windows 8.

Un autre bouton qui peut être bien pratique est celui permettant de simuler les différentes résolutions :

Essayez par exemple de simuler un 23’’ de 1920x1080 en cliquant sur ce modèle. Vous devriez maintenant avoir ce type de répartition de vos éléments :

Vous observerez que l’on passe de 2 lignes d’éléments à 3 lignes en 1080p. De la même manière, on passe de 5 colonnes visibles en largeur à 7. C’est le contrôle ListView qui s’occupe de gérer les différents facteurs de forme pour vous.

Donc même si WinJS n’est pas obligatoire dans un projet HTML5 Metro, ne sous-estimez pas l’intérêt de son utilisation. Surtout lorsque l’on voit le type de service qu’elle peut facilement rendre !

Etape 2 : afficher le détail de l’article

Pour afficher le contenu de l’article, il nous faut un morceau d’HTML supplémentaire. Pour cela, rendez-vous dans la page « default.html » et insérez cette partie :

<div id="articlecontent"></div>

On va insérer le contenu de l’article sélectionné par code. Rendez-vous donc dans « default.js ». Juste au-dessus de l’instanciation de la Binding.List, insérez ce code :

var articlelistElement = document.getElementById("articlelist");
articlelistElement.addEventListener("iteminvoked", itemInvoked);
backbutton.addEventListener("click", backButtonClick);

On récupère notre élément « articlelist » du DOM qui se trouvera être un contrôle WinJS de type ListView juste après le passage du processAll. Ce dernier exposera donc un évènement nommé « iteminvoked » levé lorsque vous cliquerez/toucherez un des éléments de la liste. Par ailleurs, on s’abonne à l’évènement « click » du bouton « back » pour revenir simplement sur la page d’accueil.

Il nous faut maintenant les gestionnaires d’évènements associés. Les voici :

function backButtonClick(e) {
    articlecontent.style.display = "none";
    articlelist.style.display = "";
}

function itemInvoked(e) {
    var currentArticle = articlesList.getAt(e.detail.itemIndex);
    setInnerHTMLUnsafe(articlecontent, currentArticle.content);
    articlelist.style.display = "none";
    articlecontent.style.display = "";
}

L’idée est extrêmement simple. Lorsque l’utilisateur va cliquer sur un des éléments, on va récupérer dans la collection l’objet qui nous intéresse via son index (e.detail.itemIndex). On injecte ensuite le contenu HTML de l’article dans la propriété innerHTML de la div que nous venons juste d’insérer dans la page HTML principale. Par contre, cela se fait via l’appel à setInnerHTMLUnsafe(). Pourquoi d’ailleurs l’appel à cette méthode étrange venue d’ailleurs ?

Petite aparté sur le contexte de sécurité des applications Metro

Le contexte de sécurité dans lequel vous vous trouvez dans une application HTML5 Metro est bien évidemment différent d’une application web classique. Toute tentative de manipulation directe de la propriété innerHTML est ainsi par exemple protégée.

Si vous tentez par exemple d’y insérer du HTML venant du « web public », une exception de sécurité sera levée par défaut pour vous protéger. Imaginez en effet que quelqu’un y injecte un morceau de script prenant le contrôle de votre application ? Cela ne vous ferait pas plaisir.

On préfère ainsi que vous ayez conscience de cela mais on vous laisse la possibilité de « by-passer » cette vérification via l’appel de la fonction setInnerHTMLUnsafe() qui porte bien son nom.

De la même manière, la technique pour insérer un <iframe> est légèrement différente. Si tout cela vous intéresse, voici quelques articles à lire :

- HTML, CSS, and JavaScript features and differences
- Features and restrictions by context
- Making HTML safer: details for toStaticHTML

Bon revenons à nos moutons.

La technique que nous utilisons pour faire apparaitre le contenu est donc toute simple. On cache la liste des éléments en basculant son « display » à « none » et on fait apparaitre le div « articlecontent ». Lorsque l’on clique que le bouton « back », on fait exactement l’inverse.

Si vous lancez l’ensemble en faisant F5, vous aurez ce type de résultat en cliquant sur un des éléments :

On observe que la mise en page n’est pas super sympa. Nous allons y remédier dans un instant avec l’ami Blend.

Mais en attendant, j’aimerais attirer votre attention sur un point gênant. La navigation vers un article puis le retour en arrière fonctionnent bien. Mais tout cela est un peu brut de fonderie en terme d’expérience utilisateur.

La philosophie derrière le concept Metro introduit également la notion de « Fast & Fluid ». Il faut donner l’impression à l’utilisateur que votre application est toujours bien vivante et performante. Pour cela, il se trouve que mettre en place de légères animations de transitions permet d’influer sur cette impression de fluidité. Pour cela, vous avez 2 options.

Soit vous utilisez CSS3 Transitions/Animations pour faire afficher/disparaitre les contenus qui vous intéressent. Charge alors à vous de trouver les bonnes animations et le bon dosage. Si vous souhaitez d’ailleurs vous initier à cette nouvelle partie de CSS3, je vous conseille la lecture d’articles que nous avons écrit mon collègue David Catuhe et moi-même sur ce sujet précis :

- Introduction aux transitions CSS3
- Introduction aux animations CSS3

Soit vous utilisez la librairie WinJS qui expose un moteur d’animations préconçues pour vous aider à respecter la philosophie Metro. Derrière, ce sont finalement bien des transitions/animations CSS utilisées. Mais pour vous développeur, ce n’est qu’une simple ligne de JavaScript à appeler.

Par exemple, dans le gestionnaire itemInvoked(), insérez cette ligne à la fin de la fonction :

WinJS.UI.Animation.enterPage(articlecontent);

Et insérez celle-ci dans l’autre gestionnaire d’évènement :

WinJS.UI.Animation.enterPage(articlelist);

Si vous relancez l’ensemble en pressant F5, vous devriez maintenant voir de subtiles transitions pendant votre navigation. C’est celles-ci qui vont faire toute la différence croyez-moi !

Etape 3 : finaliser le design de la vue détail sous Blend

Retournez sous Blend. Ce dernier devrait à nouveau vous demander de recharger l’ensemble suite à vos modifications sous Visual Studio.

Alors la question du jour sera : comment réussir à designer la page détail de l’article vu qu’il faut simuler le fait que l’on sélectionne un des articles pour cela ?

La réponse, vous l’avez déjà eu dans l’article précédent. Blend 5 exécute en live votre application HTML5 Metro ! Mais il vous manque une information supplémentaire pour vous en sortir. Voici la solution. Vous pouvez passer en mode « interactif » en cliquant sur ce bouton-là :

qui devrait s’appeler « Turn on Interactive Mode ». En cliquant dessus, vous pouvez alors ensuite interagir avec votre application, naviguez vers la page que vous souhaitez travailler et revenir dans l’interface de design en cliquant sur le même bouton. Dans mon cas, j’ai choisi de partir sur cet article :

Dans les styles, sous la bonne Media Query, ajoutez une règle sur le sélecteur « #artictecontent » puis sélectionnez là immédiatement.

Dans la partie « Sizing », fixez la largeur et la hauteur à 100%.

Dans la partie « Layout », fixez un padding à gauche de 120px afin d’aligner le contenu avec le titre principal.

Oops… cela génère un problème du coup. Le layout dans notre div « articlecontent » a tendance à trop déborder sur la largeur.

Pour régler ce problème, modifiez la propriété « width » et indiquez sur vous souhaitez utiliser une « custom expression » :

Nous allons utiliser l’opérateur CSS Calc(). Entrez l’expression suivante : « calc(100%-120px) ».

Le design Metro commence alors à prendre forme. Il reste une ultime étape pour bien faire : mettre en place une expérience de défilement horizontal et mettre en forme le texte de manière plus lisible.

Commençons par rendre plus lisible le texte. Une nouvelle fonctionnalité de CSS3 est extrêmement pratique et se trouve être simple à mettre en œuvre : CSS3 Multi-columns.

Pour cela, rendez-vous dans la section « Multicolumn » du panneau « CSS Properties » et demandez à découper le layout en colonnes de 480px de large séparées par au moins 80px chacune.

Cela commence à être chouette non ?

Pour finir, il reste à permettre un défilement horizontal pour faire glisser l’ensemble du contenu de gauche à droite et vice-versa. Pour cela, rendez-vous dans la zone de saisie « Search Properties » et tapez « over ». Blend vous filtre alors toutes les propriétés contenant le mot clé « over ».

Fixez « overflow-x » à « auto » et « overflow-y » à « hidden ».

Vous pouvez vous rendre dans Visual Studio, accepter les changements et faire F5 pour jouer avec le résultat.

Niveau bonus de fin pour les guerriers

Allez, on va se faire encore un peu plaisir pour les plus courageux. Au final, qu’est ce qui nous intéresse le plus nous les développeurs lorsque l’on lit un article technique ? Le code bien évidemment !

Donc une fois que l’on sait ça, il ne faut pas hésiter à mettre en avant son code d’une manière ou d’une autre pour attirer davantage l’œil du développeur curieux et pressé de copier/coller le précieux sésame.

Dans le cas de Channel 9, ils ont eu l’excellente idée de mettre le code dans des balises <pre>. Cela va donc nous faciliter la tâche pour styler les morceaux de code.

Ajoutez une règle CSS « #articlecontent pre »

Passez en mode interactif et naviguez vers un article où l’on voit bien un morceau de code.

Sélectionnez la règle fraichement créée et rendez-vous dans la section « Background » des propriétés CSS. Cliquez pour affecter une couleur :

Vous aurez alors cette merveilleuse palette pour faire votre choix :

Mais si comme moi vous avez une tendance naturelle à vous diriger vers une couleur immonde, cliquez sur la petite pipette et choisissez une des couleurs de Blend. C’est forcément une bonne couleur vu que cela a été conçu par des personnes brillantes comme mon collègue Designer Michel Rousseau.

Pour finir, sur les <pre>, mettez dans les champs « overflow-x » la valeur « auto » et « overflow-y » la valeur « hidden » comme tout à l’heure.

Voici le résultat final que vous devriez obtenir :

Etape 4 : vidéo et code source à télécharger

Voilà, je pense que je ne vous avais pas menti. Si vous étiez bien réveillé et concentré, vous avez dû passer environ 30 minutes pour fabriquer cette petite application.

Voici la vidéo réalisant les étapes de ce 2^ème article :

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

Et voici le code source à télécharger : Simple Channel9 Reader Article2

Merci d’avoir suivi l’aventure. Si vous souhaitez aller plus loin, voici les articles que je vous recommande chaudement :

- L’excellente série d’articles en français de David Catuhe : Comment “cuisiner” une application Windows 8 avec HTML 5, CSS3 et JavaScript en une semaine . Ils vous feront découvrir comment réaliser une application qui supporte le « search », la vue « snapped » que nous n’avons pas vu ensemble, le framework de navigation de pages et pleins d’autres joyeusetés ! “A must read” comme disent nos amis américains.
- Create your first Metro style app using JavaScript dont le sujet tourne aussi autour de la récupération de données depuis des blogs en RSS et couvrant des sujets complémentaires à mes 2 articles.

Je vous rappelle pour finir, pour ceux qui ne le savent pas encore, que nous avons un programme spécial pour vous aider à être les 1ers dans le Windows Store de Windows 8. Ce programme s’appelle l’accélérateur et vous pouvez vous inscrire ici: http://bit.ly/accelerateurw8 . Donc si vous vous sentez capable de développer une application rapidement, on peut vous aider à être parmi les 1ers dans notre Store ! Et qui sait, vous deviendrez peut-être riche grâce à nous. ;-)

En tout cas, c’est tout le mal que je vous souhaite. Sur ce, bonnes vacances !

David

Comment créer un petit lecteur RSS pour Windows 8 Metro en HTML5 en 30 min (partie 1/2)

David Rousset — Fri, 20 Apr 2012 14:02:59 GMT

Nous allons voir à travers ces 2 tutoriaux comment, en partant de zéro, réaliser un petit lecteur de flux RSS avec HTML5, CSS3 et WinJS, le framework JavaScript de Microsoft pour Windows 8 Metro. Nous essaierons également de suivre au mieux les règles de design Metro en faisant appel à l’outil Expression Blend 5. Si vous vous débrouillez bien, vous devriez pouvoir jouer ces 2 articles en 30 minutes.

Ce 1er article vous permettra de créer la page d’accueil utilisant un contrôle de type liste affichant l’ensemble des derniers articles de blog publiés. Le 2ème s’occupera de créer la vue de détail affichée lorsque vous cliquerez sur l’un des éléments de la liste. Vous trouverez à la fin 2 petites vidéos déroulant les étapes que vous pouvez suivre en lisant cet article ainsi que le code source de solution. Voyez-les comme un complément pratique pour éventuellement éclaircir certaines zones d’ombres.

Prérequis : pour pouvoir suivre ces tutoriaux, vous devez au préalable :

1 – Avoir téléchargé et installé la version Consumer Preview de Windows 8 sur votre machine : http://preview.windows.com
2 – Avoir téléchargé et installé les outils Visual Studio 11 Express pour Windows 8 : http://msdn.microsoft.com/en-us/windows/apps/br229516

Note : Si vous avez un Mac, Windows 8 s’installe très bien via BootCamp ou dans une machine virtuelle gérée par Parallels par exemple

Au menu de cet 1er article :

- Etape 1 : création du projet vide
- Etape 2 : création du squelette HTML et CSS de notre page principale
- Etape 3 : premier contact avec Blend
- Etape 4 : charger les données via XHR et les associer au contrôle ListView
- Etape 5 : mise en place d’un template et revue du design sous Blend
- Etape 6 : vidéos déroulant toutes les étapes précédentes

Etape 1 : création du projet vide

La première chose à faire est de lancer Visual Studio 11 et de créer un nouveau projet de type JavaScript Metro en faisant « File -> New Project » :

Nommez-le « SimpleChannel9Reader » car nous allons récupérer le flux RSS de la section Coding4Fun de Channel 9 disponible ici : http://channel9.msdn.com/coding4fun/articles/RSS

Etape 2 : création du squelette HTML et CSS de notre page principale

Rendez-vous dans le fichier « default.html » qui représente la page qui sera affichée au démarrage de notre application. A la place du morceau HTML suivant :

<p>Content goes here</p>

Insérez celui-là :

<div id="main">
    <header id="banner">
        <button id="backbutton" class="win-backbutton">
        </button>
        <h1 id="maintitle" class="win-title">
            Welcome to Channel 9!</h1>
    </header>
    <section id="content">
    </section>
</div>

Nous avons un conteneur global avec l’id « main » contenant 2 sous-conteneurs nommés « banner » et « content ». Le header sera affiché en haut de page et le contenu présent dans la section sera affiché juste en dessous.

Ajoutons un peu de CSS à tout cela en nous rendant dans le fichier « default.css » présent dans le répertoire « css ». Vous verrez qu’il y a déjà un peu de CSS fournit par défaut pour vous indiquer les différentes vues disponibles dans une application Windows 8 gérées via des Media Queries.

Nous nous intéresserons dans ces 2 articles qu’à la vue plein écran donc l’état « fullscreen-landscape ». Insérez dans cette partie le CSS suivant :

#main
{
    width: 100%;
    height: 100%;
}

#banner
{
    width: 100%;
    height: 100%;
}

#backbutton
{
}

#maintitle
{
}

#content
{
    width: 100%;
    height: 100%;
}

Indiquant tout simplement que l’on souhaite prendre l’ensemble de la taille disponible pour nos 3 conteneurs principaux.

Exécutez votre application en appuyant sur la touche F5 ou en cliquant sur la touche suivante :

Logiquement, vous devriez avoir quelque chose comme :

On voit ici un problème évident de design : le bouton de retour et le texte ne sont pas du tout alignés. Résolvons cela à l’aide de Blend 5.

Etape 3 : premier contact avec Blend

Lancez Blend et allez chercher votre projet SimpleChannel9Reader sur votre système de fichiers pour obtenir cela :

L’idée ici est de créer 2 grilles. Une 1^ère qui va contenir 1 colonne sur toute la largeur et 2 lignes pour le conteneur global et une 2^ème qui va contenir 1 ligne et 2 colonnes pour le bouton back et le titre.

Commençons par sélectionner dans la section « Live DOM » l’élément « main » :

Rendez-vous dans la partie « Layout » et basculez le display en « -ms-grid » :

Nous allons utiliser ici la spécification CSS Grid Layout actuellement uniquement supportée par IE10 mais arrivant bientôt dans les autres navigateurs. Si vous souhaitez en savoir davantage sur le type de layout supporté en mode Metro, vous pouvez lire cet article : Choosing a CSS3 layout for your app.

Si vous souhaitez simplement en savoir davantage sur CSS3 Grid, n’hésitez pas à lire l’article de Raphael Goetter d’Alsacréations ici : CSS3 Grid Layout.

Maintenant que nous avons basculé le mode d’affichage en grille, il faut définir la structure de la grille. Pour cela, rendez-vous naturellement dans la partie « Grid » et déclarer la grille suivante :

Nous aurons donc 1 seule colonne qui prendra toute la largeur de l’écran disponible (quelle que soit la résolution) et 2 lignes. La 1^ère ligne aura une taille en « dur » de 132px de haut et la suivante prendra tout le reste de l’espace disponible. Cela est alors reflété dans le designer de Blend :

Maintenant, nous allons placer l’élément « content » dans la 2^ème ligne. Sélectionnez-le dans le « Live DOM » et rendez-vous dans sa partie « Grid ». Mettez la propriété –ms-grid-row à 2. Vous pouvez éventuellement positionner l’élément « banner » à la ligne 1 mais sinon cela est fait par défaut si vous ne précisez rien.

Nous allons maintenant découper notre 1^ère ligne en 2 colonnes de manières à mettre les choses à leur place. Sélectionnez l’élément « banner » et basculer son display en « -ms-grid » puis définissez 1 ligne en 1fr et 2 colonnes de 120px et 1fr :

Placez l’élément « maintitle » en colonne 2 et centrez le verticalement grâce à la propriété « -ms-grid-row-align » à « center » :

Sélectionnez l’élément « backbutton » et dans sa partie « Layout », mettez 54px de marge en haut et 40px de marge vers la gauche. Si vous ne vous êtes pas planté, vous devriez avoir maintenant cela sur la surface de design :

Sauvegardez l’ensemble via “File -> Save All” puis retournez sous Visual Studio. Rendez-vous dans « default.css » et vous observerez que Blend a généré du CSS « propre » :

@media screen and (-ms-view-state: fullscreen-landscape)
{

    #main
    {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 1fr;
        -ms-grid-rows: 132px 1fr;
    }

    #banner
    {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
    }

    #backbutton
    {
        margin-top: 54px;
        margin-left: 40px;
    }

    #maintitle
    {
        -ms-grid-column: 2;
        -ms-grid-row-align: center;
    }

    #content
    {
        width: 100%;
        height: 100%;
        -ms-grid-row: 2;
    }
}

Vérifiez que l’application fonctionne bien en faisant F5.

Etape 4 : charger les données via XHR et les associer au contrôle ListView

Bon pour l’instant, vous vous dîtes que c’est bien gentil mais que vous aimeriez rentrer dans le vif du sujet.

La 1^ère chose à faire est d’insérer un contrôle qui va être chargé d’afficher de petites vignettes sur la page d’accueil contenant les images des articles de blogs qui vont être remontés. Pour cela, nous allons utiliser WinJS.

La librairie WinJS ou “Microsoft Windows Library for JavaScript SDK” est un framework conçu pour aider les développeurs JavaScript à intégrer plus simplement l’expérience Windows 8 Metro. Elle fournit ainsi un ensemble de contrôles Metro, un moteur de templating, un moteur de binding, une gestion de l’asynchronisme via l’implémentation du Promise, des helpers pour gérer des Namespaces, etc.

Par exemple, si vous souhaitez en savoir davantage sur la partie contrôles, rendez-vous ici : Quickstart: adding WinJS controls and styles

Dans les projets Windows 8 Metro, vous retrouverez cette librairie dans les références du projet dans le “Solution Explorer” :

Vous y retrouverez donc les feuilles de styles par défaut avec les 2 thèmes dark et light fournis ainsi que le code JavaScript. N’hésitez pas à aller y jeter un œil pour voir comment nous avons fabriqué l’ensemble. Cela peut toujours être utile en complément de la documentation MSDN.

Dans notre cas, nous allons utilisé le contrôle ListView qui utilise une structure en grille pour afficher une liste d’éléments.

Pour cela, rendez-vous dans le fichier « default.html » et dans la partie section, tapez ce morceau d’HTML :

<div id="articlelist" data-win-control="WinJS.UI.ListView"></div>

Pour l’instant, cela n’est qu’un « bête » div comme un autre. Par contre, il est marqué d’un attribut data-win-control qui indique que l’on souhaite utiliser la librairie WinJS pour transformer ce div en contrôle de type ListView.

La magie ne s’opère uniquement que grâce à une ligne de JavaScript particulière que l’on retrouve dans « default.js » et se trouve être celle-ci :

WinJS.UI.processAll();

Cette opération, traitée de manière asynchrone, s’occupe de parcourir tout le DOM à la recherche de div marqués des attributs data-win-control pour les transformer en réel contrôle WinJS implémentant l’expérience Metro. Si vous supprimez par mégarde cette ligne, vous rendrez à nouveau « bête » tous vos div.

Ok, maintenant il faut l’alimenter en données cette ListView. Pour cela, dans la fonction associée à l’évènement « onactivated », ajoutez ce code au-dessus de la ligne processAll() :

articlesList = new WinJS.Binding.List();
var publicMembers = { ItemList: articlesList };
WinJS.Namespace.define("C9Data", publicMembers);

Du coup, déclarez en haut de la fonction la variable « articlesList », juste en dessous de la variable « app » par exemple.

Nous déclarons ici un type Binding.List() à utiliser pour binder des données aux contrôles WinJS. Ce type a le bon goût de disposer de méthodes qui vous permettront d’ajouter des données au fil de l’eau et de laisser la magie du binding s’opérer pour rafraîchir la vue associée.

Par ailleurs, comme nous codons proprement en JavaScript, nous utilisons le « module pattern » avec une fonction JS anonyme auto-exécutée dans « default.js ». Il nous donc un moyen d’exposer des données publiques vers l’extérieur. Pour cela, nous utilisons le concept de Namespace avec un helper issu de WinJS nous permettant de facilement définir ce que nous souhaitons exposer. Dans le cas ci-dessus, nous aurons donc un objet nommé « C9Data » qui sera visible avec une propriété « ItemList » contenant nos futurs éléments à afficher.

Il nous faut maintenant une fonction pour aller chercher les données du flux RSS, les analyser, créer des objets JS à la volée et les pousser dans cette fameuse liste de binding. Voici la fonction que je vous propose pour cela :

function downloadC9BlogFeed() {
    WinJS.xhr({ url: "http://channel9.msdn.com/coding4fun/articles/RSS" }).then(function (rss) {

    });
}

Ce code effectue une requête XmlHttpRequest vers l’url spécifiée de manière asynchrone. Le code indiqué dans la Promise (via le .then()) sera donc exécuté uniquement qu’une fois que la requête aura reçu les données. C’est à ce moment-là que l’on peut les filtrer via ce code à insérer dans la fonction anonyme :

var items = rss.responseXML.selectNodes("//item");

for (var n = 0; n < items.length; n++) {
    var article = {};
    article.title = items[n].selectSingleNode("title").text;
    var thumbs = items[n].selectNodes("media:thumbnail");
    if (thumbs.length > 1) {
        article.thumbnail = thumbs[1].attributes.getNamedItem("url").text;
        article.content = items[n].text;
        articlesList.push(article);
    }
}

Ce code est je pense auto-explicite. Il sélectionne les nœuds « item » et récupère les propriétés qui l’intéressent pour les mapper sur un objet « article » instancié à la volée sur ses propriétés « title », « thumbs » & « content ». Notez bien le nom de ces propriétés, on les retrouvera plus tard. Le code finit par ajouter ce nouvel objet à la collection de binding.

Il faut maintenant indiquer que l’on souhaite exécuter le code au démarrage de l’application. Nous allons le faire une fois que l’analyse du DOM aura été faite pour fabriquer les contrôles WinJS. Du coup, utilisez cette ligne de code :

WinJS.UI.processAll().then(downloadC9BlogFeed);

Il ne reste plus qu’une chose à faire : c’est d’indiquer au contrôle quelle est sa source de données. Pour cela, rendez-vous dans le HTML et modifiez le div associé à la ListView pour changer ses options. Vous obtiendrez alors cela :

<div id="articlelist" data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource: C9Data.ItemList.dataSource }"></div>

Pour finir, il faut indiquer un minimum la manière dont on souhaite afficher notre contrôle. Pour cela, rendez-vous bien sûr dans « default.css » et ajoutez ces 2 règles :

#articlelist
{
    width: 100%;
    height: 100%;
}

#articlelist .win-item
{
    width: 150px;
    height: 150px;
}

On indique que notre contrôle ListView devra prendre toute la place disponible et que chacun de ses éléments (via la classe .win-item) devront faire 150 par 150 pixels.

Exécutez l’ensemble en faisant F5. Vous devriez avoir quelque chose d’aussi moche que cela :

C’est normal, ne vous inquiétez pas !

Bon, il nous reste encore un peu de boulot. Mais on peut déjà voir que le binding fonctionne et que le contrôle fonctionne bien à la souris et au touch. Par ailleurs, le contrôle s’adapte déjà à la résolution actuelle de votre écran. Vous n’aurez donc pas forcément la même disposition que la copie d’écran précédente.

Etape 5 : mise en place d’un template et revue du design sous Blend

Il faut maintenant préciser au contrôle la manière de dessiner chacun de ses éléments. Cela se fait via un mécanisme dit de templating. Un template n’est à nouveau qu’un morceau de HTML décoré par les attributs WinJS.

Rendez-vous dans « default.html » et ajoutez ce morceau d’HTML tout en haut juste au-dessus du « main » :

<div id="C9ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">
    <div class="listItemTemplate">
        <div class="listItemImage">
            <img data-win-bind="src: thumbnail" />
        </div>
        <div class="listItemTitle" data-win-bind="innerText: title">
        </div>
    </div>
</div>

On voit bien que c’est un template car il est décoré de la valeur « WinJS.Binding.Template » ce qui permettra à WinJS de savoir quoi en faire suite à l’exécution du processAll(). Ensuite, le reste n’est que du HTML standard avec malgré tout une autre particularité : les expressions de binding. Pour savoir comment mapper les propriétés des objets JS actuellement en mémoire aux contrôles HTML, on passe par l’attribut « data-win-bind » puis on précise une expression de binding de la manière suivante : « nom_de_l’attribut_html : nom_de_la_propriété_objet_JS ».

Il nous faut maintenant dire au contrôle WinJS de ne plus de dessiner avec son template par défaut mais avec celui que nous venons juste de définir en changeant simplement ses options :

<div id="articlelist" data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource: C9Data.ItemList.dataSource, itemTemplate: C9ItemTemplate }">
</div>

Si vous exécutez pour voir le résultat à ce moment, vous devriez avoir cela :

C’est mieux mais ce n’est pas encore cela. Il va falloir revoir le design sous Blend.

Bah allez, c’est parti. Retournez sous Blend qui va vous demander de recharger les fichiers suite aux modifications que vous avez effectuées sous Visual Studio pour obtenir cela :

Rien ne vous choque ? On voit ici le même résultat que si vous faîtes F5 depuis Visual Studio. Cela signifie que Blend 5 exécute en « live » votre application au sein du designer ! En voilà une bonne nouvelle.

Du coup, on va pouvoir travailler sur le vrai jeu de données finales sans être obligé de faire ce que l’on appelle communément du « mocking ». C’est un des avantages de JavaScript et de son côté interprété et dynamique. Blend a exécuté le code qui fait la requête XHR et construit les objets WinJS.

Sous « default.css », on va commencer par ajouter 2 règles CSS. Pour cela, cliquer sur le bouton + sur la media query principale :

Et ajoutez les sélecteurs suivants :

.listItemTemplate et .listItemTemplate img

Sélectionnez la règle #articlelist .win-item qui sélectionne chacun des éléments de la ListView disposant de l’ID « articlelist ».

Changez la taille de ces éléments pour les faire passer de 150px par 150px à 250px par 250px en vous rendant dans la partie « Sizing » sur le panneau de droite.

Il faut ensuite forcer un rafraichissement de la zone de design en cliquant sur le bouton adéquat :

Et voici le résultat :

On va redimensionner les images du template. Pour cela, sélectionnez le pointeur « Direction Selection » et cliquez sur une des images :

Vous pouvez alors voir la liste des règles actuellement appliquées dans la section « Applied Rules ». Cliquez sur « .listItemTemplate img » puis redimensionnez à la souris l’image que vous aviez à l’origine sélectionnée. Vous voyez alors que toutes les autres images répondant au même sélecteur sont naturellement impactées en temps réel.

Finalement, rendez-vous dans la section « Sizing » et fixez la taille suivante : 234px de large par 165px de haut.

Pour améliorer un peu plus le design, il nous reste à aérer un peu l’espace entre les éléments et aligner correctement notre ListView avec le titre.

Cliquez sur le sélecteur « .listItemTemplate » puis dans la section « Layout », commencez par cliquez sur l’icône « Lock » tout à droite de la zone « Margin ». Prenez ensuite n’importe quelle marge et entrez 8px.

Pour finir, pour décaler la grille de la ListView et l’aligner avec le titre, il faut la bouger de 120px – 8px de marge des éléments que l’on vient de mettre en place.

Ajoutez donc un nouveau sélecteur en cliquant sur + et nommez le « .win-surface » puis mettez une marge à gauche de 112px.

Revenez sous Visual Studio, acceptez les changements puis faîtes F5. Voici ce que vous devriez désormais obtenir :

Etape 6 : vidéos déroulant toutes les étapes précédentes

Voici 2 petites vidéos vous montrant comment suivre toutes les étapes décrites précédemment.

La 1ère correspond aux étapes 1, 2 et 3 :

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

La 2ème correspond aux étapes 4 et 5 :

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

Vous pouvez télécharger le code source de la solution associée à ce 1er article ici : Simple Channel9 Reader Article1

Voilà, on a déjà bien avancé. Il nous reste maintenant à afficher le détail de l’article, à continuer de découvrir la puissance de l’outil Blend ainsi que de nouvelles choses apportées par CSS3.

Rendez-vous dans le second article pour cela !

David

Modernisez vos jeux HTML5 canvas partie 2: Offline API, Drag’n’drop & File API

David Rousset — Wed, 18 Apr 2012 07:27:06 GMT

Nous avons vu dans l’article précédent Modernisez vos jeux HTML5 canvas partie 1: mise à l’échelle matérielle & CSS3 comment utiliser CSS3 3D Transform, les transitions & Grid Layout pour améliorer un jeu de plateforme HTML5. Nous allons maintenant voir comment utiliser Offline API, Drag’n’drop et File API pour mettre en place de nouvelles idées que j’ai eu pendant que je développais mon jeu.

Si vous n’avez pas lu le premier article, laissez moi vous rappelez quels étaient mes objectifs. Je souhaitais voir comment jouer avec les dernières spécifications pour moderniser mon jeu HTML5 nommé HTML5 Platformer. Voici ce qui nous attend au menu de ce 2ème article.

Agenda

Rendre le jeu jouable en mode déconnecté
- Etape 1: choisir les ressources que vous souhaitez mettre en cache
- Etape 2: modifier la logique du jeu pour le chargement des niveaux
- Etape 3: vérifier le statut en ligne/hors ligne & afficher un logo en mode déconnecté
- Etape 4: chargement conditionnel des fichiers mp3 ou ogg et stockage en blob dans IndexedDB
Glisser/Déposer des niveaux depuis votre bureau
Vidéo, URL pour jouer avec la démo & code source à télécharger

Rendre le jeu jouable en mode déconnecté

La version initiale du jeu ne fonctionne uniquement que si votre périphérique dispose d’un accès à Internet. Ainsi, imaginons qu’il vous prend la subite envie de jouer à mon superbe jeu pendant que vous êtes dans le train, dans le taxi ou dans n’importe quel endroit où l’accès au réseau est inexistant et bah… vous êtes fichu. C’est quand même dommage dans la mesure où finalement mon jeu n’a pas réellement besoin d’une connexion permanente vers le serveur web une fois que toutes les ressources ont été téléchargées. Heureusement, HTML5 peut désormais adresser ce scénario grâce aux APIs gérant la déconnection.

Etape 1: choisir les ressources que vous souhaitez mettre en cache

C’est assez simple d’indiquer au navigateur quelles sont les ressources que vous souhaitez mettre en cache pour un usage hors connexion. Mais avant d’aller plus loin, je vous invite à lire ces 2 articles décrivant le fonctionnement de cette spécification :

- Building Offline Experiences with HTML5 AppCache and IndexedDB sur le site du blog officiel IE
- Application Cache API ("AppCache") présent dans la documentation MSDN

Dans mon cas, j’ai construit un fichier manifeste appelé platformer.cache avec ce type d’entrées :

CACHE MANIFEST
 
# Version 1.5

CACHE: 
index.html
modernplatformer.css
img/MonsterA.png
.. jusqu’à ..
img/MonsterD.png
img/Player.png
img/offlinelogoblack.png
img/Backgrounds/Layer0_0.png
.. jusqu’à ..
img/Backgrounds/Layer2_2.png 
img/Tiles/BlockA0.png 
.. jusqu’à ..
img/Tiles/BlockA6.png
img/Tiles/BlockB0.png
img/Tiles/BlockB1.png
img/Tiles/Gem.png
img/Tiles/Exit.png
img/Tiles/Platform.png
overlays/you_died.png
overlays/you_lose.png
overlays/you_win.png
src/dragDropLogic.js
src/main.js
src/ModernizrCSS3.js
src/easeljs/utils/UID.js
src/easeljs/geom/Matrix2D.js
src/easeljs/events/MouseEvent.js
src/easeljs/utils/SpriteSheetUtils.js
src/easeljs/display/SpriteSheet.js
src/easeljs/display/Shadow.js
src/easeljs/display/DisplayObject.js
src/easeljs/display/Container.js
src/easeljs/display/Stage.js
src/easeljs/display/Bitmap.js
src/easeljs/display/BitmapAnimation.js
src/easeljs/display/Text.js
src/easeljs/utils/Ticker.js
src/easeljs/geom/Rectangle.js
src/easeljs/geom/Point.js
src/easeljs/XNARectangle.js
src/easeljs/PlatformerHelper.js
src/easeljs/ContentManager.js
src/easeljs/Tile.js
src/easeljs/Gem.js
src/easeljs/Enemy.js
src/easeljs/Player.js
src/easeljs/Level.js
src/easeljs/PlatformerGame.js

NETWORK:
*

J’y ai inséré l’ensemble de mes fichiers PNG contenant mes sprites, mes différents calques d’arrière plan, les fichiers JavaScript du framework EaselJS ainsi que ma propre logique de jeu et pour finir les fichiers HTML & CSS principaux. Une fois cela spécifié, il ne vous reste plus qu’à indiquer que ce fichier de manifeste sera la source de mise en cache au sein de la page HTML principale. C’est la page “index.html” dans mon cas :

<!DOCTYPE html>
<html manifest="platformer.cache">
<head>
    <title>HTML5 Platformer Game</title>
    // ... 
</head>
</html>

Il faut également faire attention à servir le fichier avec le type “text/cache-manifest”. Dans mon cas, comme le fichier est stocké dans le blob storage de Windows Azure, j’a ajouté un nouveau “content type” nommé “.cache" mappé sur le type “text/cache-manifest” donc.

Par ailleurs, vous devez savoir que la spécification ne permet pas des mises à jours partielles. Ainsi, même si un seul de vos fichiers a changé et que vous souhaitez que le navigateur télécharge la nouvelle version, vous êtes obligé de forcer un nouveau téléchargement complet. Pour cela, il suffit d’effectuer un simple changement au fichier manifest lui-même. La plupart du temps, on ajoute ainsi un numéro de version, une date, un GUID – peu importe finalement – au début du fichier via un commentaire (“Version 1.5” dans l’exemple précédent). En changeant simplement cette valeur, le navigateur va voir qu’un changement a été effectué au fichier et va alors procéder au téléchargement complet de toutes les ressources spécifiées au sein du même fichier.

Etape 2: modifier la logique du jeu pour le chargement des niveaux

La version initiale de mon code s’occupait de télécharger chacun des niveaux via un appel XHR vers le serveur web. Comme mon jeu doit maintenant fonctionner hors connexion, il me faut changer cette partie là. Par ailleurs, j’aimerais indiquer à l’utilisateur qu’il joue en mode déconnecté en ajoutant le logo “officiel” HTML5 au sein du canvas de jeu.

Commençons par analyser les changements effectuées pour le chargement des niveaux. La première fois que vous lancerez mon jeu, mon code s’occupera de télécharger tous les niveaux (décrit au sein des fichiers {x}.txt) vers le local storage. Cette spécification est largement supporté depuis IE8 et facile à utiliser. Encore plus important dans notre cas, cela fonctionne même en mode déconnecté.

Voici le code que j’ai ajouté au sein du fichier “PlatformerGame.js” :

PlatformerGame.prototype.DownloadAllLevels = function () {
    // Searching where we are currently hosted
    var levelsUrl = window.location.href.replace('index.html', '') + "levels/";
    var that = this;

    for (var i = 0; i < numberOfLevels; i++) {
        try {
            var request = new XMLHttpRequest();
            request.open('GET', levelsUrl + i + ".txt", true);
            request.onreadystatechange = makeStoreCallback(i, request, that);
            request.send(null);
        }
        catch (e) {
            // Loading the hard coded error level to have at least something to play with
            //console.log("Error in XHR. Are you offline?"); 
            if (!window.localStorage["platformer_level_0"]) {
                window.localStorage["platformer_level_0"] = hardcodedErrorTextLevel;
            }
        }
    }
};

// Closure of the index 
function makeStoreCallback(index, request, that) {
    return function () {
        storeLevel(index, request, that);
    }
}

function storeLevel(index, request, that) {
    if (request.readyState == 4) {
        // If everything was OK
        if (request.status == 200) {
            // storing the level in the local storage
            // with the key "platformer_level_{index}
            window.localStorage["platformer_level_" + index] = request.responseText.replace(/[\n\r\t]/g, '');
            numberOfLevelDownloaded++;
        }
        else {
            // Loading a hard coded level in case of error
            window.localStorage["platformer_level_" + index] = hardcodedErrorTextLevel;
        }

        if (numberOfLevelDownloaded === numberOfLevels) {
            that.LoadNextLevel();
        }
    }
}

On télécharge tous les niveaux pendant la phase de construction de l’objet PlateformerGame de manière asynchrone. Lorsque tous les niveaux sont téléchargés (numberOfLevelDownloaded === numberOfLevels), on charge le premier niveau. Voici le code de la nouvelle fonction s’occupant de charger le prochain niveau :

// Loading the next level contained into the localStorage in platformer_level_{index}
PlatformerGame.prototype.LoadNextLevel = function () {
    this.loadNextLevel = false;
    // Setting back the initialRotation class will trigger the transition
    this.platformerGameStage.canvas.className = "initialRotation";
    this.levelIndex = (this.levelIndex + 1) % numberOfLevels;
    var newTextLevel = window.localStorage["platformer_level_" + this.levelIndex];
    this.LoadThisTextLevel(newTextLevel);
};

Le début du code s’occupe de gérer les transitions CSS3 comme déjà vu dans l’article précédent. Ensuite, on accède simplement au “local storage” via la bonne clé pour retrouver un niveau téléchargé précédemment.

Etape 3: vérifier le statut en ligne/hors ligne & afficher un logo en mode déconnecté

Il y a 2 choses que vous devez savoir et vérifier pour être sûr d’être en mode déconnecté. Tout d’abord, les navigateurs les plus récents implémentent les évènements offline/online. C’est la 1ère chose à vérifier. Si votre navigateur vous dit qu’il est hors ligne, faites lui confiance et n’allez pas plus loin en vous rendant directement dans votre logique de code gérant la déconnection. Cependant, la plupart du temps, cette simple vérification n’est pas suffisante. En effet, votre navigateur indique qu’il est en ligne ou non en vérifiant simplement l’état de votre carte réseau. Il ne sait pas si votre serveur web est toujours en ligne ou simplement accessible depuis là où vous êtes. Vous devez alors effectuer une 2ème vérification en essayant plus ou moins de toquer votre serveur pour vérifier qu’il est toujours en vie via une petite requête XHR par exemple.

Voici le code que j’ai utilisé pour vérifier ces 2 points dans mon cas :

PlatformerGame.prototype.CheckIfOnline = function () {
    if (!navigator.onLine) return false;

    var levelsUrl = window.location.href.replace('index.html', '') + "levels/";

    try {
        var request = new XMLHttpRequest();
        request.open('GET', levelsUrl + "0.txt", false);
        request.send(null);
    }
    catch (e) {
        return false;
    }

    if (request.status !== 200)
        return false;
    else
        return true;
};

J’essaie simplement de télécharger le premier niveau. Si cela échoue, je bascule sur la partie “offline” de mon code. Pour finir, voici le code exécuté pendant la phase de construction de PlateformerGame.js :

PlatformerGame.IsOnline = this.CheckIfOnline();

// If we're online, we're downloading/updating all the levels
// from the webserver
if (PlatformerGame.IsOnline) {
    this.DownloadAllLevels();
}
// If we're offline, we're loading the first level
// from the cache handled by the local storage
else {
    this.LoadNextLevel();
}

Et voici le code s’occupant d’afficher le logo “offline” dans la fonction CreateAndAddRandomBackground du fichier Level.js :

if (!PlatformerGame.IsOnline) {
    offlineLogo.x = 710;
    offlineLogo.y = -1;
    offlineLogo.scaleX = 0.5;
    offlineLogo.scaleY = 0.5;
    this.levelStage.addChild(offlineLogo);
}

Vous devriez avoir ce résultat en lançant mon jeu sans connexion réseau :

Le logo de déconnection sera affiché juste à côté du taux de rafraichissement. Cela vous indiquera que le jeu fonctionne actuellement entièrement en mode hors ligne.

Etape 4: chargement conditionnel des fichiers mp3 ou ogg et stockage en blob dans IndexedDB

C’est une partie que je n’ai pas implémentée dans cette version mais je voulais en partager avec vous le concept. Voyez donc cette section comme une section bonus. Ce sera à votre charge de l’implémenter !

Peut-être aurez-vous noté que je n’ai pas inclus les effets sonores et la musique de mon jeu dans le fichier de manifeste de l’étape 1.

Lorsque j’ai écrit ce jeu HTML5, mon but premier était d’être compatible avec le plus grand nombre de navigateurs pour être le plus portable possible. J’ai ainsi 2 versions des fichiers sons: MP3 pour IE et Safari, OGG pour Chrome, Firefox & Opera. Dans mon gestionnaire de téléchargement, je télécharge ainsi uniquement le type de codec supporté par le navigateur lançant actuellement mon jeu. En effet, nul besoin de télécharger les versions OGG des fichiers lorsque je joue au jeu dans IE et, de la même manière, aucun intérêt à télécharger les versions MP3 pour Firefox.

Le problème avec le fichier de manifeste est que vous ne pouvez pas indiquer de manière conditionnelle quelles ressources vous souhaitez charger en fonction du support du navigateur. J’ai donc réfléchi à plusieurs types de solutions pouvant contourner cette limitation :

1 – Télécharger chacune des versions en insérant toutes les références vers les fichiers .mp3 et .ogg dans le fichier de manifeste. C’est très simple à implémenter et marche bien mais vous téléchargez certains fichiers qui ne seront jamais utilisés par certains navigateurs…
2 – Fabriquer un fichier manifeste de manière dynamique côté serveur en analysant le “user agent” envoyé et en essayant de deviner le codec supporté. Nous savons tous que c’est une mauvaise pratique !
3 – Détecter côté client le codec supporté dans le gestionnaire de téléchargement pour ensuite ne télécharger uniquement que le bon format de fichier dans IndexedDB ou dans le local storage pour un usage hors ligne.

Selon moi, la 3ème solution est de loin la meilleure mais il y a plusieurs choses à avoir en tête pour l’implémenter :

1 – Si vous utilisez le “local storage”, vous aurez besoin d’encoder en base64 les fichiers et vous serez potentiellement limité par le quota du navigateur si vous avez des fichiers trop gros ou trop nombreux
2 – Si vous utilisez IndexedDB, vous pouvez soit stocker la version base64 soit les stocker sous la forme de blob

L’approche du stockage blob est définitivement la plus performante mais elle nécessite un navigateur très récent comme IE10 (PP5) ou Firefox (11). Mais si ce sujet vous rend curieux (et c’est bien naturel !), vous pouvez jeter un oeil à notre démo Facebook Companion hébergée sur notre site IE Test Drive ici :

Vous trouverez d’ailleurs davantage de détails sur cette démo au sein de cet article : IndexedDB Updates for IE10 and Metro style apps

Pour la version disponible au sein de cet article, j’ai fait mon faignant. J’ai finalement décidé de mettre en cache tous les formats (solution 1). J’améliorais peut-être cela dans un futur article en implémentant un cache basé sur IndexedDB.

Glisser/Déposer des niveaux depuis votre bureau

Mon idée ici était de bénéficier des nouvelles API de Drag’n’drop et de manipulation de fichiers pour tester des scénarios amusants. L’utilisateur sera ainsi capable de créer/éditer ses propres niveaux via son éditeur de texte préféré. Ensuite, il glissera/déposera ses fichiers depuis l’explorateur de fichiers directement dans le jeu HTML5 pour jouer avec.

Je ne rentrerais pas plus en détails sur le fonctionnement du drag’n’drop puisqu’il a été très bien décrit dans cet article : HTML5 Drag and Drop in IE10 expliquant comment la démo Magnetic Poetry a été réalisée. Assurez vous d’avoir lu cet article avant si vous souhaitez comprendre le code ci-dessous.

Dans mon cas, j’ai créé le fichier dragDropLogic.js contenant le code suivant :

(function () {
    "use strict";

    var DragDropLogic = DragDropLogic || {};

    var _elementToMonitor;
    var _platformerGameInstance;

    // We need the canvas to monitor its drag&drop events
    // and the platformer game instance to trigger the loadnextlevel function
    DragDropLogic.monitorElement = function (elementToMonitor, platformerGameInstance) {
        _elementToMonitor = elementToMonitor;
        _platformerGameInstance = platformerGameInstance;

          _elementToMonitor.addEventListener("dragenter", DragDropLogic.drag, false);
          _elementToMonitor.addEventListener("dragover", DragDropLogic.drag, false);
          _elementToMonitor.addEventListener("drop", DragDropLogic.drop, false);
    };

    // We don't need to do specific actions
    // enter & over, we're only interested in drop
    DragDropLogic.drag = function (e) {
        e.stopPropagation();
        e.preventDefault();
    };

    DragDropLogic.drop = function (e) {
        e.stopPropagation();
        e.preventDefault();

        var dt = e.dataTransfer;
        var files = dt.files;

        // Taking only the first dropped file
        var firstFileDropped = files[0];

        // Basic check of the type of file dropped
        if (firstFileDropped.type.indexOf("text") == 0) {
            var reader = new FileReader();
            // Callback function
            reader.onload = function (e) {
                // get file content
                var text = e.target.result;
                var textLevel = text.replace(/[\s\n\r\t]/g, '');
                // Warning, there is no real check on the consistency
                // of the file. 
                _platformerGameInstance.LoadThisTextLevel(textLevel);
            }
            // Asynchronous read
            reader.readAsText(firstFileDropped);
        }
    };

    window.DragDropLogic = DragDropLogic;
})();

Ce code est appelé au sein de main.js dans la fonction startGame :

// Callback function once everything has been downloaded
function startGame() {
    platformerGame = new PlatformerGame(stage, contentManager, 800, 480, window.innerWidth, window.innerHeight);
    window.addEventListener("resize", OnResizeCalled, false);
    OnResizeCalled();
    DragDropLogic.monitorElement(canvas, platformerGame);
    platformerGame.StartGame();
}

Et c’est tout ! Par exemple, copiez/collez ce bloc de texte dans un nouveau fichier “.txt” :

....................
....................
....................
.1..................
######.........#####
....................
.........###........
....................
.G.G.GGG.G.G.G......
.GGG..G..GGG.G......
.G.G..G..G.G.GGG....
....................
....................
.X................C.
####################

Puis glissez/déposez le dans mon jeu. Un nouveau niveau devrait alors être magiquement chargé :

Vidéo, URL pour jouer avec la démo & code source à télécharger

Voici une courte vidéo illustrant le résultat de cet article dans IE10 :

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

Vous pouvez aussi jouer avec cette démo dans IE10 ou dans votre navigateur préféré ici : Modern HTML5 Platformer

Pour finir, comme vous avez été suffisamment patient et concentré pour me lire jusqu’au bout, je vous offre la possibilité de télécharger le code source complet ici : HTML5 Modern Platformer Source Code

David

Modernizing your HTML5 Canvas games Part 2: Offline API, Drag’n’drop & File API

David Rousset — Tue, 17 Apr 2012 14:04:53 GMT

We’ve seen in the previous article Modernizing your HTML5 Canvas games Part 1: hardware scaling & CSS3 how to use CSS3 3D Transform, Transitions & Grid Layout for a HTML5 Platformer game. We’re now going to see how to use the Offline API, Drag’n’drop & File API to leverage new ideas I had while coding my game.

If you haven’t read the first article, let me remind you that my objectives were to see how to use these new features to modernize my previous HTML5 game named HTML5 Platformer.

Agenda

Playing to the game in offline mode
- Step 1: choosing the resources you’d like to cache
- Step 2: modifying the logic for the levels
- Step 3: checking online/offline & displaying a logo when launched in offline mode
- Step 4: conditionally downloading the mp3 or ogg files and store them as blob in IndexedDB
Drag’n’dropping the levels from your desktop
Video, URL to play this demo & source code

Playing to the game in offline mode

The original version of the game only works if your device has access to Internet. For instance, let’s imagine you’d like to play to my awesome game while you’re in the train, in a taxi or in any other scenarios where your machine can’t access to the network, you’re stuck. It’s really sad as finally nothing in my game really needs a “live” connection to the webserver once all the resources have been downloaded. Hopefully, HTML5 can now address this scenario thanks to the offline APIs.

Step 1: choosing the resources you’d like to cache

It’s pretty simple to indicate to the browser which resources you’d like to cache for an offline use. But before going further, you should first read those 2 articles:

- Building Offline Experiences with HTML5 AppCache and IndexedDB from our IE blog
- Application Cache API ("AppCache") from the MSDN Documentation

In my case, I’ve built a file named platformer.cache with this kind of entries:

CACHE MANIFEST
 
# Version 1.5

CACHE: 
index.html
modernplatformer.css
img/MonsterA.png
.. up to ..
img/MonsterD.png
img/Player.png
img/offlinelogoblack.png
img/Backgrounds/Layer0_0.png
.. up to ..
img/Backgrounds/Layer2_2.png 
img/Tiles/BlockA0.png 
.. up to ..
img/Tiles/BlockA6.png
img/Tiles/BlockB0.png
img/Tiles/BlockB1.png
img/Tiles/Gem.png
img/Tiles/Exit.png
img/Tiles/Platform.png
overlays/you_died.png
overlays/you_lose.png
overlays/you_win.png
src/dragDropLogic.js
src/main.js
src/ModernizrCSS3.js
src/easeljs/utils/UID.js
src/easeljs/geom/Matrix2D.js
src/easeljs/events/MouseEvent.js
src/easeljs/utils/SpriteSheetUtils.js
src/easeljs/display/SpriteSheet.js
src/easeljs/display/Shadow.js
src/easeljs/display/DisplayObject.js
src/easeljs/display/Container.js
src/easeljs/display/Stage.js
src/easeljs/display/Bitmap.js
src/easeljs/display/BitmapAnimation.js
src/easeljs/display/Text.js
src/easeljs/utils/Ticker.js
src/easeljs/geom/Rectangle.js
src/easeljs/geom/Point.js
src/easeljs/XNARectangle.js
src/easeljs/PlatformerHelper.js
src/easeljs/ContentManager.js
src/easeljs/Tile.js
src/easeljs/Gem.js
src/easeljs/Enemy.js
src/easeljs/Player.js
src/easeljs/Level.js
src/easeljs/PlatformerGame.js

NETWORK:
*

I’ve inserted all my PNG files containing my sprites, background layers & overlays, the needed JS files from the EaselJS framework as well as my own gaming logic and the main HTML & CSS files. Once done, you just have to indicate you’d like to use this manifest file in your main HTML page. It’s “index.html” in my case:

<!DOCTYPE html>
<html manifest="platformer.cache">
<head>
    <title>HTML5 Platformer Game</title>
    // ... 
</head>
</html>

Please note also that your manifest file should be served as “text/cache-manifest”. As it’s stored in the blob storage of Windows Azure in my case, I’ve added a new “.cache” content type mapped to “text/cache-manifest” then.

Moreover, you need to understand that the specification doesn’t allow delta changes. This means that if only one of your files has changed and you’d like the browser to download the new version, you need to force a complete re-download. For that, add a simple change to your manifest file. Most of the time, we’re adding a version number, a date, a GUID - you named it - at the beginning of the file via a comment (“Version 1.5” in the above example). By simply changing its value, the browser will see that a change have been done to the file and will re-download all resources specified inside it.

Step 2: modifying the logic for loading the levels

The original version of my code was downloading each level via a XHR call to the webserver. As my game now needs to run in offline mode, I need to change that. Moreover, I’d like to indicate to the user that he’s currently playing in offline mode by adding the “official” HTML5 associated logo inside the gaming canvas.

Let’s first review the changes done for the levels. First time you’ll launch my game, I’ll download all the levels (described into {x}.txt files) into the local storage. This is widely supported since IE8 and very easy to use. Even more important, it’s available in offline mode.

Here is the code I’ve added inside the “PlatformerGame.js”:

PlatformerGame.prototype.DownloadAllLevels = function () {
    // Searching where we are currently hosted
    var levelsUrl = window.location.href.replace('index.html', '') + "levels/";
    var that = this;

    for (var i = 0; i < numberOfLevels; i++) {
        try {
            var request = new XMLHttpRequest();
            request.open('GET', levelsUrl + i + ".txt", true);
            request.onreadystatechange = makeStoreCallback(i, request, that);
            request.send(null);
        }
        catch (e) {
            // Loading the hard coded error level to have at least something to play with
            //console.log("Error in XHR. Are you offline?"); 
            if (!window.localStorage["platformer_level_0"]) {
                window.localStorage["platformer_level_0"] = hardcodedErrorTextLevel;
            }
        }
    }
};

// Closure of the index 
function makeStoreCallback(index, request, that) {
    return function () {
        storeLevel(index, request, that);
    }
}

function storeLevel(index, request, that) {
    if (request.readyState == 4) {
        // If everything was OK
        if (request.status == 200) {
            // storing the level in the local storage
            // with the key "platformer_level_{index}
            window.localStorage["platformer_level_" + index] = request.responseText.replace(/[\n\r\t]/g, '');
            numberOfLevelDownloaded++;
        }
        else {
            // Loading a hard coded level in case of error
            window.localStorage["platformer_level_" + index] = hardcodedErrorTextLevel;
        }

        if (numberOfLevelDownloaded === numberOfLevels) {
            that.LoadNextLevel();
        }
    }
}

We’re downloading all the levels in the PlateformerGame constructor in an asynchronous way. When all the levels have been downloaded (numberOfLevelDownloaded === numberOfLevels), we’re loading the first level. Here is the code of the new function:

// Loading the next level contained into the localStorage in platformer_level_{index}
PlatformerGame.prototype.LoadNextLevel = function () {
    this.loadNextLevel = false;
    // Setting back the initialRotation class will trigger the transition
    this.platformerGameStage.canvas.className = "initialRotation";
    this.levelIndex = (this.levelIndex + 1) % numberOfLevels;
    var newTextLevel = window.localStorage["platformer_level_" + this.levelIndex];
    this.LoadThisTextLevel(newTextLevel);
};

The beginning of the code handles the CSS3 transitions like described in the previous article. Then, we’re simply accessing to the local storage via the appropriate key to retrieve the previously downloaded content.

Step 3: checking online/offline & displaying a logo when launched in offline mode

There are 2 things you need to check to know & confirm you’re in offline mode. First of all, the most recent browsers implement the offline/online events. This is the first thing to check. If your browser says he’s offline, no need to go further and you should immediately switch to your offline logic. But most of the time, this simple check is not enough. Your browser says it’s online or not by simply checking the connectivity state of your network card. It doesn’t know if your webserver is still online or simply available from where you are. You then need to do a second check by trying to more or less ping your server with a simple XHR for instance.

Here my code checking those 2 points in my case:

PlatformerGame.prototype.CheckIfOnline = function () {
    if (!navigator.onLine) return false;

    var levelsUrl = window.location.href.replace('index.html', '') + "levels/";

    try {
        var request = new XMLHttpRequest();
        request.open('GET', levelsUrl + "0.txt", false);
        request.send(null);
    }
    catch (e) {
        return false;
    }

    if (request.status !== 200)
        return false;
    else
        return true;
};

I’m just trying to download the first level. If it fails, I’m switching to the offline part of my code. Finally, here is the code launched in the constructor part of the PlateformerGame.js:

PlatformerGame.IsOnline = this.CheckIfOnline();

// If we're online, we're downloading/updating all the levels
// from the webserver
if (PlatformerGame.IsOnline) {
    this.DownloadAllLevels();
}
// If we're offline, we're loading the first level
// from the cache handled by the local storage
else {
    this.LoadNextLevel();
}

and here is the code displaying the offline logo in Level.js in the CreateAndAddRandomBackground function:

if (!PlatformerGame.IsOnline) {
    offlineLogo.x = 710;
    offlineLogo.y = -1;
    offlineLogo.scaleX = 0.5;
    offlineLogo.scaleY = 0.5;
    this.levelStage.addChild(offlineLogo);
}

Once done, here is the result you’ll have in your browser when launching my game without network connection:

The offline logo will be displayed just before the frame rate. This tells you that the game is currently working purely offline.

Step 4: conditionally downloading the mp3 or ogg files and store them as blob in IndexedDB

This is something I’ve not implemented in this version but I’d like to share the concept with you. See this section as a bonus you’ll need to implement yourself!

Maybe you’ll have noticed that I’ve not included the sound effects & the music of my game in the manifest file of step 1.

When writing this HTML5 game, my first goal was to be compatible with the biggest number of browsers (when possible). I have then 2 versions of the sounds: MP3 for IE and Safari, OGG for Chrome, Firefox & Opera. In my content download manager, I’m downloading only the type of codec supported by the current browser launching my game. Indeed, no need to download the OGG version of the files if I’m playing it inside IE as well as there is no need to download the MP3 version for Firefox.

The problem with the manifest file is that you can’t conditionally indicate which resource to load based on the current browser’s support. I’ve then imagined several solutions to work-around this limitation:

1 – Download both versions by putting all files references inside the manifest file. This is very simple to implement and works fine but you’re downloading some files that will be never used by some browsers…
2 – Build a server-side dynamic manifest file by sniffing the browser agent to guess the codec supported. This is definitely a very bad practice!
3 - Client-side feature detect the codec support in the content manager object and then download the appropriate file format in IndexedDB or in the local storage for offline use.

To my point of view, the 3rd solution is the best one but there are several things to keep in mind to do that:

1 – If you’re using local storage, you’ll need to encode in base64 the files and you’ll be potentially limited by the quota if you have too big/many files
2 – If you’re using IndexedDB, you can either store the base64 encoded version of the files or store them as a blob.

The blob approach is definitely the most efficient & smart approach but needs a very up-to-date browser like the last version of IE10 (PP5) or Firefox (11). But if you’re curious about this one, check out our Facebook Companion demo from our IE Test Drive site here:

You’ll find more details about this demo in this article: IndexedDB Updates for IE10 and Metro style apps

In the version available with this article, I’ve been lazy. I’ve finally decided to cache all formats (solution 1). I’ll maybe enhance that in a future article by implementing an IndexedDB caching.

Drag’n’dropping the levels from your desktop

My idea here was to take advantage of the new Drag’n’drop & File APIs to implement a funny scenario. The user will be able to create/edit a level using his favorite text editor. Then, he will drag’n’drop it from his file explorer directly into the HTML5 game to play with it!

I won’t go into much details about drag’n’drop as it has been very well covered in this article: HTML5 Drag and Drop in IE10 explaining how the Magnetic Poetry demo was built. Be sure to read this article first if you’d like to understand the above code.

In my case, I’ve created the dragDropLogic.js file containing this code:

(function () {
    "use strict";

    var DragDropLogic = DragDropLogic || {};

    var _elementToMonitor;
    var _platformerGameInstance;

    // We need the canvas to monitor its drag&drop events
    // and the platformer game instance to trigger the loadnextlevel function
    DragDropLogic.monitorElement = function (elementToMonitor, platformerGameInstance) {
        _elementToMonitor = elementToMonitor;
        _platformerGameInstance = platformerGameInstance;

          _elementToMonitor.addEventListener("dragenter", DragDropLogic.drag, false);
          _elementToMonitor.addEventListener("dragover", DragDropLogic.drag, false);
          _elementToMonitor.addEventListener("drop", DragDropLogic.drop, false);
    };

    // We don't need to do specific actions
    // enter & over, we're only interested in drop
    DragDropLogic.drag = function (e) {
        e.stopPropagation();
        e.preventDefault();
    };

    DragDropLogic.drop = function (e) {
        e.stopPropagation();
        e.preventDefault();

        var dt = e.dataTransfer;
        var files = dt.files;

        // Taking only the first dropped file
        var firstFileDropped = files[0];

        // Basic check of the type of file dropped
        if (firstFileDropped.type.indexOf("text") == 0) {
            var reader = new FileReader();
            // Callback function
            reader.onload = function (e) {
                // get file content
                var text = e.target.result;
                var textLevel = text.replace(/[\s\n\r\t]/g, '');
                // Warning, there is no real check on the consistency
                // of the file. 
                _platformerGameInstance.LoadThisTextLevel(textLevel);
            }
            // Asynchronous read
            reader.readAsText(firstFileDropped);
        }
    };

    window.DragDropLogic = DragDropLogic;
})();

This code is called inside main.js in the startGame function:

// Callback function once everything has been downloaded
function startGame() {
    platformerGame = new PlatformerGame(stage, contentManager, 800, 480, window.innerWidth, window.innerHeight);
    window.addEventListener("resize", OnResizeCalled, false);
    OnResizeCalled();
    DragDropLogic.monitorElement(canvas, platformerGame);
    platformerGame.StartGame();
}

And you’re done! For instance, copy/paste this text block into a new “.txt” file:

And drag’n’drop it in my game. The new level will be normally loaded magically :

Video, URL to play this demo & source code

Here is a short video of IE10 demonstrating the features implemented in this article:

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

You can also play with this demo in IE10 or your favorite browser here: Modern HTML5 Platformer

At last, as you’ve been kind enough to read until the end, you can download the complete source code here: HTML5 Modern Platformer Source Code

David

Modernisez vos jeux HTML5 canvas partie 1: mise à l’échelle matérielle & CSS3

David Rousset — Tue, 10 Apr 2012 18:11:54 GMT

Les dernières versions des navigateurs commencent à implémenter des versions stables de certaines spécifications HTML5 particulièrement intéressantes comme Offline APIs, Drag’n’drop & File APIs. Ces nouvelles fonctionnalités offrent aux développeurs web de nouveaux scénarios de jeux et nous mène vers une nouvelle ère d’applications web. De notre côté, IE10 les implémente toutes et les mêmes fonctionnalités sont présentes également au sein des applications Windows 8 HTML5 au style Metro. D’un point de vue graphique, le moteur d’IE10 offre une couche d’accélération matérielle pouvant être bien utile pour gérer la mise à l’échelle vers différentes résolutions ainsi que pour jouer des animations de manière fluide. Nous nous concentrerons d’ailleurs en premier lieu sur la partie graphique dans cet article en utilisant CSS3 Grid, CSS3 Transition, CSS3 3D Transform.

Dans ces 2 articles, nous allons voir comment j’ai utilisé ces nouvelles spécifications pour moderniser mon jeu HTML5 précédent que j’ai nommé HTML5 Platformer. J’espère que ces 2 tutoriaux vous aideront à imaginer de nouvelles choses pour vos propres jeux :

- Modernisez vos jeux HTML5 canvas partie 1: mise à l’échelle matérielle & CSS3 (cet article)
- Modernisez vos jeux HTML5 canvas partie 2: Offline APIs, File APIs & Drag’n’drop APIs (prochain article)

Note : vous trouverez l’URL de la démo complète pour la jouer au sein de votre navigateur préféré à la fin de cet article ainsi qu’une vidéo du résultat dans IE10. Le code source sera disponible au téléchargement à la fin du prochain article. Le jeu a été testé avec succès sous IE10, Firefox 11, Chrome 18 et Opera 12.

Gérer la mise à l’échelle sur tous les périphériques

Si vous développez un jeu en HTML5, c’est probablement parce que vous êtes intéressé par la nature cross-plateformes de ce standard. Mais faire tourner du code sur une grande variété de périphériques soulève rapidement la question de la gestion de leurs multiples résolutions. Or, comparé à SVG, Canvas peut apparaitre rapidement comme mal préparé à ce scénario.

Heureusement, avec des jeux dit “casuals” basés sur des sprites, il y a une solution simple que vous pouvez implémenter qui apporte un niveau de qualité graphique souvent satisfaisant. Cela a d’ailleurs été très bien décrit par mon ami David Catuhe sur son blog ici: Libérez la puissance du canvas de HTML5 pour vos jeux dans la section “utilisation du redimensionnement matériel”.

L’idée est plutôt simple et efficace. Vous travaillez dans un canvas de taille fixe avec une résolution prédictible et vous l’étirez à la résolution courante en jouant sur les propriétés de canvas.style.

Etape 1: étirer

Dans mon cas, avec mon petit jeu de plateforme HTML5, les ressources graphiques et la logique du jeu ont été pensées pour une résolution de 800x480. Donc si je veux remplir un écran 1080p ou une tablette de 1366x768, j’aurais besoin de fabriquer des sprites d’une résolution plus haute. Sinon, on peut mettre en place une opération de mise à l’échelle qui, combinée à un bon anti-crénelage, peut apporter suffisamment de qualité. Ok, testons cette solution !

Cette opération peut être simplement réalisée grâce à ce code :

window.addEventListener("resize", OnResizeCalled, false);

function OnResizeCalled() {
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
}

Ou de manière encore plus simple via cette règle CSS :

#canvas 
{
    width: 100%;
    height: 100%;
}

Mais vous comprendrez plus tard pourquoi je m’enregistre au près de l’évènement resize.

A part ça, c’est tout ! Grâce aux nouveaux navigateurs utilisant l’accélération matérielle, cette opération est effectuée par votre GPU gratuitement. Vous aurez même un anti-crénelage d’activé. En effet, l’opération de mise à l’échelle est simplement faite par le GPU grâce aux 100% appliqués aux propriétés width & height. Les navigateurs récents s’occuperont également d’appliquer un filtre d’anti-crénelage pour vous lors de cette mise à l’échelle. C’est pourquoi mon collègue David Catuhe en parlait dans son article dédié aux performances de canvas.

D’ailleurs, cela n’est pas spécifique à HTML5 au passage. La plupart des jeux tournant sur les consoles modernes ne sont pas calculés en interne en 720p ou 1080p. La quasi-totalité d’entre eux sont rendus dans des résolutions plus petites (comme 1024x600 par exemple) et ils laissent la puce vidéo faire le processus de mise à l’échelle/anti-crénelage. Cela peut vous aider à augmenter les FPS dans la plupart des cas mais baisse légèrement la qualité graphique en contre partie.

Cependant, se contenter de faire cela pose un problème de ratio. En effet, quand mon canvas avait une résolution fixe de 800x480, son ratio était naturellement fixé et sous contrôle. Mais maintenant, lorsque je redimensionne la fenêtre du navigateur, je peux obtenir ce genre de résultats pour le moins étrange :

Le jeu reste jouable mais l’expérience est loin d’être optimale.

Etape 2: contrôler le ratio

L’idée ici est de contrôler la manière de remplir l’écran lorsque la fenêtre du navigateur sera redimensionnée. Plutôt que d’étirer complètement sur toute la largeur et la hauteur, nous allons ajouter de l’espace à droite si la fenêtre est trop large ou en dessous si la fenêtre est trop haute. Cela est effectué grâce à ce code dans mon cas :

var gameWidth = window.innerWidth;
var gameHeight = window.innerHeight;
var scaleToFitX = gameWidth / 800;
var scaleToFitY = gameHeight / 480;

var currentScreenRatio = gameWidth / gameHeight;
var optimalRatio = Math.min(scaleToFitX, scaleToFitY);

if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) {
    canvas.style.width = gameWidth + "px";
    canvas.style.height = gameHeight + "px";
}
else {
    canvas.style.width = 800 * optimalRatio + "px";
    canvas.style.height = 480 * optimalRatio + "px";
}

J’ai ajouté une exception grâce au “if”. En effet, si vous pressez la touche F11 de votre navigateur pour basculer en plein écran et que vous utilisez un écran 16/9 (comme mon écran 1920x1080 de mon Vaio Z ou 1366x768 d’une tablette Samsung), le jeu sera entièrement étiré. J’ai trouvé que le résultat fournissait une expérience super cool.

A part cette exception, voici le type de résultat que vous devriez avoir:

Remarquez les bandes noires en dessous et sur la droite du jeu. Elles sont ici pour contrôler notre ratio. Mais ça serait encore plus cool si le jeu était centré pour avoir un effet type écran large/cinémascope non?

Etape 3: centrer le jeu avec CSS3 Grid

Centrer un élément HTML peut être une tâche compliquée dans certains scénarios. Il y a plusieurs façons d’opérer et vous trouverez des tas de ressources bien faites sur le web pour vous aider. J’aimerais utiliser ici une nouvelle spécification nommée CSS Grid Layout actuellement uniquement supportée par IE10 et qui représente la base de notre nouvelle mise en page Metro dans Windows 8. Grâce à cette nouvelle spécification, centrer un élément est l’enfance de l’art. Il vous suffit de basculer le display du conteneur de votre élément en display:grid, de définir 1 colonne et 1 ligne puis de centrer l’élément intérieur avec les propriétés column-align et row-align.

Voici le CSS utilisé dans mon cas:

.canvasHolder {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}

#platformerCanvas {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
}

Vous aurez remarqué que c’est actuellement préfixé par “-ms” pour IE10. Mozilla a récemment annoncé qu’ils supporteront également la spécification dans Firefox en 2012. C’est une excellente nouvelle ! En attendant, cette solution ne marche que sous IE10 et voici le type de résultat que vous aurez avec ce navigateur :

Dans IE10, comme avec votre écran large, vous aurez ainsi des barres verticales ou horizontales en fonction de la taille de la fenêtre. Sur les autres navigateurs, vous aurez le même résultat qu’à l’étape 2 car la spécification CSS3 Grid Layout sera simplement ignorée.

Mise en place d’animations fluides

Maintenant que nous gérons de multiples résolutions possibles via une opération de mise à l’échelle, il serait aussi sympa de jouer une transition fluide lorsque l’utilisateur redimensionne la fenêtre. Il serait aussi cool d’avoir une animation sympatôche entre chaque niveau de jeu. Pour cela, nous ferons usage de CSS3 Transitions & CSS3 3D Transforms. Cela a le bon gout d’être à nouveau accéléré matériellement par la plupart des plateformes.

Animation des changements effectués sur chacune des propriétés du canvas

CSS3 Transitions est facile à utiliser et produit des animations efficaces & fluides. Si vous souhaitez découvrir comme les utiliser, vous pouvez lire l’excellente introduction de mon collègue David: Introduction aux transitions CSS3 ou jouez avec directement sur notre site IE Test Drive: Hands On transitions.

Dans mon cas, j’ai mis en place une transition globale sur l’ensemble des propriétés de mon canvas grâce à ces règles:

#platformerCanvas {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;

    -ms-transition-property: all;
    -ms-transition-duration: 1s;
    -ms-transition-timing-function: ease;
}

Le canvas avec l’identifiant “platformerCanvas” s’occupera maintenant automatiquement de prendre en compte chacun des changements effectués à ses propriétés via une animation d’1 seconde via une fonction “d’easing”. Désormais, grâce à nette nouvelle règle, si vous redimensionnez la fenêtre du navigateur, une animation sera jouée pour réduire/agrandir la taille du canvas. J’adore l’effet que cela produit. Et tout cela en n’ajoutant finalement que 3 lignes de CSS! Les transitions CSS sont vraiment épatantes pour cela.

Note: j’ai également ajouté dans mon code les prefixes –moz, –webkit & –o pour Mozilla, Webkit & Opera afin d’être compatible avec le plus grand nombre de navigateurs. N’oubliez jamais de faire la même chose et ne laissez pas un navigateur sur le carreau!

Mise en place d’une animation cool entre chaque niveau

J’aimerais maintenant utiliser CSS3 3D Transform pour faire disparaitre temporairement mon canvas. Cela se fera via une animation d’une rotation de 90 degrés sur l’axe des Y. Ensuite, nous chargerons le niveau suivant une fois que l’animation aura atteinte les 90° pour finalement revenir à l’état initial de 0°. Pour mieux comprendre l’effet que j’essaie péniblement de vous décrire à l’écrit, le mieux est de jouer avec notre démo Hands On 3D Transforms sur notre site IE Test Drive:

Nous allons également jouer avec la propriété “scale” en conjonction de la propriété “rotateY” pour fabriquer notre animation. Pour cela, je vous propose d’ajouter ces 2 règles CSS visant 2 classes particulières:

.moveRotation
{
    -ms-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    -webkit-transform: perspective(500px) scale(0);
    -moz-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    -o-transform: scale(0);
}

.initialRotation
{
    -ms-transform: perspective(500px) rotateY(0deg) scale(1);
    -webkit-transform: perspective(500px) scale(1);
    -moz-transform: perspective(500px) rotateY(0deg) scale(1);
    -o-transform: scale(1);
}

Mon canvas aura alors la classe initialRotation en 1er lieu:

<canvas id="platformerCanvas" width="800" height="480" class="initialRotation"></canvas>

Maintenant l’idée est d’attendre que le joueur ait gagné le niveau courant. Une fois fait, nous allons changer la classe du canvas de initialRotation à moveRotation. Cela aura pour effet de déclencher automatiquement la transition CSS mise en place précédemment et travaillant sur toutes les propriétés.

Afin de savoir si l’animation est terminée, il y a un évènement qui est levé. Il est nommé différemment dans chaque navigateur pour l’instant. Voici mon code s’occupant de s’enregistrer à cet évènement et visant IE10, Firefox, Webkit & Opera:

// Registering to the various browsers vendors transition end event
PlatformerGame.prototype.registerTransitionEndEvents = function () {
    // IE10, Firefox, Chrome & Safari, Opera
    this.platformerGameStage.canvas.addEventListener("MSTransitionEnd", onTransitionEnd(this));
    this.platformerGameStage.canvas.addEventListener("transitionend", onTransitionEnd(this));
    this.platformerGameStage.canvas.addEventListener("webkitTransitionEnd", onTransitionEnd(this));
    this.platformerGameStage.canvas.addEventListener("oTransitionEnd", onTransitionEnd(this));
};

Et voici le morceau de code qui sera rappelé:

// Function called when the transition has ended
// We're then loading the next level
function onTransitionEnd(instance) {
    return function () {
        if (instance.loadNextLevel === true) {
            instance.LoadNextLevel();
        }
    }
};

Pour finir, voici le code de mon jeu qui positionne la classe moveRotation sur le canvas:

// Perform the appropriate action to advance the game and
// to get the player back to playing.
PlatformerGame.prototype.HandleInput = function () {
    if (!this.wasContinuePressed && this.continuePressed) {
        if (!this.level.Hero.IsAlive) {
            this.level.StartNewLife();
        }
        else if (this.level.TimeRemaining == 0) {
            if (this.level.ReachedExit) {
                // If CSS3 Transitions is supported
                // We're using smooth & nice effects between each levels
                if (Modernizr.csstransitions) {
                    this.loadNextLevel = true;
                    // Setting the moveRotation class will trigger the css transition
                    this.platformerGameStage.canvas.className = "moveRotation";
                }
                // If CSS3 Transition is not supported, we're jumping directly
                // to the next level
                else {
                    this.LoadNextLevel();
                }
            }
            else
                this.ReloadCurrentLevel();
        }
        this.platformerGameStage.removeChild(statusBitmap);
        overlayDisplayed = false;
    }

    this.wasContinuePressed = this.continuePressed;
};

Vous remarquerez que j’utilise Modernizr pour faire de la détection de fonctionnalité des transition CSS. Ensuite, nous remettons finalement en place la classe initialRotation dans la fonction LoadNextLevel :

// Loading the next level 
PlatformerGame.prototype.LoadNextLevel = function () {
    this.loadNextLevel = false;
    // Setting back the initialRotation class will trigger the transition
    this.platformerGameStage.canvas.className = "initialRotation";
    // ... loadNextLevel logic stuff...
};

Note: vous aurez peut-être remarqué que je n’utilise pas la même transformation (et donc la même animation) pour WebKit que pour IE10 et Firefox dans le bloc de CSS précédent. C’est dû au fait que Chrome ne se comporte pas de la même manière qu’IE10 et Firefox 11 dans mon cas. J’ai poussé une petite repro sur jsFiddle ici: http://jsfiddle.net/5H8wg/2/ si vous souhaitez y jeter un œil. Opera ne supporte pas CSS3 3D Transform pour le moment.

Vidéo & URL pour jouer avec la démo

Voici une courte vidéo vous démontrant le résultat de toutes ces fonctionnalités au sein d’IE10:

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

Vous pouvez aussi jouer avec cette démo dans IE10 ou votre navigateur préféré ici: Modern HTML5 Platformer

Dans le 2ème article, nous allons voir comment j’ai implémenté les API gérant le mode déconnecté pour faire fonctionner le jeu même en l’absence de connexion réseau. Nous verrons aussi comme j’ai utilisé les API de manipulation de fichiers et de la gestion du glisser/déposer pour implémenter une fonctionnalité amusante.

David

Modernizing your HTML5 Canvas games Part 1: hardware scaling & CSS3

David Rousset — Fri, 06 Apr 2012 16:15:42 GMT

Latest versions of the browsers start to implement stable version of very interesting HTML5 features like Offline APIs, Drag’n’drop & File APIs. Those new features offer new gaming scenarios for the web developers and bring us to a new web application era. On our side, IE10 implements all of them and the same features are also available inside Windows 8 HTML5 Metro Style Apps. On the graphics’ side, the IE10 engine offers also a powerful hardware acceleration graphics layer than could be very useful for handling various resolutions scaling and playing smooth animations. We will concentrate first on this graphics part in this article by using CSS3 Grid, CSS3 Transition, CSS3 3D Transform

In these 2 articles, we’ll see how I’ve used these new features to modernize my previous HTML5 game named HTML5 Platformer. I hope that these 2 tutorials will bring you some new ideas for your own games.

- Modernizing your HTML5 Canvas games Part 1: hardware scaling & CSS3 (this article)
- Modernizing your HTML5 Canvas games Part 2: Offline APIs, File APIs & Drag’n’drop APIs (next article)

Note: You’ll find the URL of the complete demo to play with your favorite browser at the end of this article as well as a video of the result inside IE10. The source code will be available for download at the end of the next article. The game has been tested with success under IE10, Firefox 11, Chrome 18 and Opera 12.

Scaling across devices

If you’re building a HTML5 game, it’s probably because you’re interested in the cross-platform nature of this standard. But running on a huge variety of devices raises the question of the variety of resolutions. Compared to SVG, Canvas could be first seen as not very well prepared for this scenario.

Hopefully, with a casual-like game based on sprites, there is a simple solution to implement. It has been very well described by my friend David Catuhe on his blog here: Unleash the power of HTML 5 Canvas for gaming – Part 1 in the “using the hardware scaling feature” section.

The idea is pretty simple & smart. You’re working inside a canvas at a fix & predictable resolution and you’re stretching it to the current displayed resolution using the canvas.style properties.

Step 1: stretch

In my case with my little HTML5 Platformer game, the assets & level logics have been set with a 800x480 resolution in mind. So, if I’d like to fill a complete 1080p screen or a 1366x768 tablet, I need to build higher resolution assets to match these resolutions. Otherwise, I can use a scaling operation which, combined with proper anti-aliasing, could provide enough quality. Let’s try this.

This scaling operation is simply done by this code:

window.addEventListener("resize", OnResizeCalled, false);

function OnResizeCalled() {
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
}

Or even simpler via a CSS rule like:

#canvas 
{
    width: 100%;
    height: 100%;
}

But you’ll understand later on why I’m registering to the resize event of the window.

And that’s it! With hardware accelerated browsers, this operation will be done by your GPU at no cost! You will even have anti-aliasing enabled. Indeed, the scaling operation is done by the GPU thanks to the 100% applied to the width & height properties. Recent browsers also automatically apply an anti-aliasing algorithm for you. That’s why, David Catuhe was mentioning it in his canvas performance article.

This is not specific to HTML5 by the way. Most of the modern console games are not internally computed in 720p or 1080p. Almost all of them render the game in lower resolutions (such as 1024x600 for instance) and let the GPU doing the scaling/anti-aliasing process. This could help you boosting the FPS in most cases.

But simply doing that raises a ratio problem. Indeed, when the canvas had a fix size of 800x480, the ratio was controlled. Now, I can obtain this strange output while resizing the browser’s window:

The game is still playable but the experience is far from being optimal.

Step 2: control your ratio

The idea here is to control how to fill the screen when the browser’s window is resized. Rather than fully stretching, we’re going to add some empty space on the right if the window is too large or at the bottom if the window is too high. This is done by this code in my case:

var gameWidth = window.innerWidth;
var gameHeight = window.innerHeight;
var scaleToFitX = gameWidth / 800;
var scaleToFitY = gameHeight / 480;

var currentScreenRatio = gameWidth / gameHeight;
var optimalRatio = Math.min(scaleToFitX, scaleToFitY);

if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) {
    canvas.style.width = gameWidth + "px";
    canvas.style.height = gameHeight + "px";
}
else {
    canvas.style.width = 800 * optimalRatio + "px";
    canvas.style.height = 480 * optimalRatio + "px";
}

I’ve added an exception with the if statement. If you’re pressing F11 in your browser to switch in full screen and you’ve got a 16/9 screen (like my 1920x1080 Vaio Z screen or the 1366x768 Samsung BUILD tablet), the game will be completely stretched. I’ve found that this experience was quite awesome.

Otherwise, here is the kind of output you’ll now have:

Notice the black areas below or on the right of the game. It’s here to control our ratio. But it would be better if the game was centered to have a widescreen movie effect, wouldn’t be?

Step 3: center the game with CSS3 Grid

Centering an HTML element could be painful in certain scenarios. There is several ways to do that and you’ll find plenty of resources on the web to help you. I’d like to use a new specification named CSS Grid Layout currently only supported by IE10 and which is the base of our Metro Style layout in Windows 8. Centering an element with CSS Grid is straightforward. You just have to switch the display of the container to display:grid, define 1 column & 1 row and center the inner element with the colum-align & row-align properties.

Here the the CSS used in my case:

.canvasHolder {
    width: 100%;
    height: 100%;
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
}

#platformerCanvas {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;
}

You’ll notice it’s currently prefixed by “-ms” for IE10. Mozilla has recently annonced they will also support the specification in Firefox in 2012 which is excellent news! In the meantime, this solution currently only works with IE10 and here is the kind of output generated:

In IE10, like on your TV screen, you will have vertical or horizontal black bars. On the other browsers, you will have the same result as the step 2 as the CSS3 Grid Layout will be simply ignored by them.

Using Smooth Animations

Now that we’re handling multiple resolutions via an easy scaling operation, it would be nice to play a smooth transition when the user is resizing the window. It would be nice also to play a cool animation during each level loading. For that, we’re going to use CSS3 Transitions & CSS3 3D Transforms. It’s hardware accelerated by the GPU on most platforms.

Animating every change done to the canvas style properties

CSS3 Transitions is easy to use and produce efficient & smooth animations. If you’d like to discover how to use them, you can read my colleague’s excellent introduction article: Introduction to CSS3 Transitions or play with it on our IE Test Drive: Hands On transitions.

In my case, I’ve setup a global transition on all my canvas’ properties thanks to these rules:

#platformerCanvas {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-align: center;
    -ms-grid-row-align: center;

    -ms-transition-property: all;
    -ms-transition-duration: 1s;
    -ms-transition-timing-function: ease;
}

The canvas with the id “platformerCanvas” will now automatically reflect any change done to its style’s properties via a 1s animation using an easing function. Now, thanks to this new rule, if you’re resizing the browser’s window, a smooth animation will be played to reduce/grow the the size of the canvas. I love the effect produced. Just by adding only 3 lines of CSS! CSS3 transition is really awesome for that.

Note: I’ve also added the prefixes versions –moz, –webkit & –o for Mozilla, Webkit & Opera to be compatible with the other browsers. Never forget to do the same!

Building a cool animation between each level

I’d like now to use CSS3 3D Transform to disappear temporally the canvas. This will be done via an animation of a 90 degrees rotation on the Y axis. Then, we will load the next level once the animation will reach the 90 degrees and come back to the initial state of 0 degree. To better understand the effect, you can play with our Hands On 3D Transforms on the IE Test Drive site :

We’re going also to play with the scale property in conjunction with the rotateY property to build a fun animation. For that, I’m adding 2 CSS rules targeting 2 classes:

.moveRotation
{
    -ms-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    -webkit-transform: perspective(500px) scale(0);
    -moz-transform: perspective(500px) rotateY(-90deg) scale(0.1);
    -o-transform: scale(0);
}

.initialRotation
{
    -ms-transform: perspective(500px) rotateY(0deg) scale(1);
    -webkit-transform: perspective(500px) scale(1);
    -moz-transform: perspective(500px) rotateY(0deg) scale(1);
    -o-transform: scale(1);
}

And my canvas has first the initialRotation class set:

<canvas id="platformerCanvas" width="800" height="480" class="initialRotation"></canvas>

Now the idea is to wait until the player has won the current level. Once done, we’re changing the class of the canvas from initialRotation to moveRotation. This will then automatically triggers the CSS3 Transition set before to generate the animation.

In order to know that the animation is finished, there is an event raised. It’s named differently in each browser. Here is my code registering to the event & targeting IE10, Firefox, Webkit & Opera:

// Registering to the various browsers vendors transition end event
PlatformerGame.prototype.registerTransitionEndEvents = function () {
    // IE10, Firefox, Chrome & Safari, Opera
    this.platformerGameStage.canvas.addEventListener("MSTransitionEnd", onTransitionEnd(this));
    this.platformerGameStage.canvas.addEventListener("transitionend", onTransitionEnd(this));
    this.platformerGameStage.canvas.addEventListener("webkitTransitionEnd", onTransitionEnd(this));
    this.platformerGameStage.canvas.addEventListener("oTransitionEnd", onTransitionEnd(this));
};

And here is the code that will be call-backed:

// Function called when the transition has ended
// We're then loading the next level
function onTransitionEnd(instance) {
    return function () {
        if (instance.loadNextLevel === true) {
            instance.LoadNextLevel();
        }
    }
};

At last, here is the code of my game which set the moveRotation class on the canvas:

// Perform the appropriate action to advance the game and
// to get the player back to playing.
PlatformerGame.prototype.HandleInput = function () {
    if (!this.wasContinuePressed && this.continuePressed) {
        if (!this.level.Hero.IsAlive) {
            this.level.StartNewLife();
        }
        else if (this.level.TimeRemaining == 0) {
            if (this.level.ReachedExit) {
                // If CSS3 Transitions is supported
                // We're using smooth & nice effects between each levels
                if (Modernizr.csstransitions) {
                    this.loadNextLevel = true;
                    // Setting the moveRotation class will trigger the css transition
                    this.platformerGameStage.canvas.className = "moveRotation";
                }
                // If CSS3 Transition is not supported, we're jumping directly
                // to the next level
                else {
                    this.LoadNextLevel();
                }
            }
            else
                this.ReloadCurrentLevel();
        }
        this.platformerGameStage.removeChild(statusBitmap);
        overlayDisplayed = false;
    }

    this.wasContinuePressed = this.continuePressed;
};

Notice that I’m using Modernizr to do a feature detection of CSS Transitions. We’re finally setting back the initialRotation class inside the LoadNextLevel function:

// Loading the next level 
PlatformerGame.prototype.LoadNextLevel = function () {
    this.loadNextLevel = false;
    // Setting back the initialRotation class will trigger the transition
    this.platformerGameStage.canvas.className = "initialRotation";
    // ... loadNextLevel logic stuff...
};

Note: you may have noticed that I’m not setting the same transformation (and thus animation) for WebKit as for IE10 & Firefox in my previous CSS block. This is because Chrome is not behaving in the same way as IE10 and Firefox 11 in my case. I’ve setup a simple repro case on jsFiddle here: http://jsfiddle.net/5H8wg/2/ . Opera doesn’t support CSS3 3D Transform yet.

Video & URL to play this demo

Here is a short video of IE10 demonstrating the features implemented in this article:

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

You can also play with this demo in IE10 or your favorite browser here: Modern HTML5 Platformer

In the second article, we’re going to see how I’ve implemented the Offline APIs to make the game works without network connections and how I’ve used File & Drag’n’drop APIs to implement a cool feature in my game.

David

HTML5 Platformer: the complete port of the XNA game to

David Rousset — Wed, 21 Mar 2012 18:30:00 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 1: the game has been first released in September 2011 with EaselJS 0.3.2 and has been updated for EaselJS 0.4. You can now use requestAnimationFrame on the supported browsers to check if it’s boosting your performance or not. You just have to check/unckeck the above case to see in real time the results.

Note 2: this game has been tested with success under IE9/10, Chrome 17, Firefox 11, IE9 on WP7 Mango and iPad 2. The game doesn’t work in Opera 11.61 due to a bug in their native Image implementation apparently: About Issue in latest Opera. 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

I’ve also written 3 others articles going further with this game:

- Tutorial: how to create HTML5 applications on Windows Phone thanks to PhoneGap where I’ll show you how to migrate this code to PhoneGap
- Modernizing your HTML5 Canvas games Part 1: hardware scaling & CSS3 where we’ll use CSS3 3D Transform, Transitions & Grid Layout
- Modernizing your HTML5 Canvas games Part 2: Offline API, Drag’n’drop & File API where we will enable playing to the game in offline mode

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(). This is now supported by Internet Explorer 10 and can be used in EaselJS 0.4. But there are some interesting debates around it on the web. If you’re interested in this topic, I suggest you reading these 3 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.

I let you experiment its usage on my game to check if it’s interesting or not in your case.

Special Kudos for IE9 & IE10

I’ve added 2 Kudos for IE 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!

If you’re ready to go even further, I’ve made a 4th tutorial on how to port the very same HTML5 game on Windows Phone using PhoneGap.

David

HTML5 Platformer: portage complet du jeu XNA vers

David Rousset — Wed, 21 Mar 2012 10:00:00 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 1: ce jeu a d'abord été publié en septembre 2011 avec EaselJS 0.3.2 et a été mis à jour pour EaselJS 0.4. Vous pouvez désormais tester l’usage de requestAnimationFrame avec les navigateurs le supportant pour vérifier si cela augmente vos performances ou non. Il vous suffit de cocher/décocher la case ci-dessus pour voir le résultat en temps réel.

Note 2: ce jeu a été testé avec succès sous IE9/10, Chrome 17, Firefox 11, IE9 sur Windows Phone et sous iPad 2. Le jeu ne fonctionne pas sous Opera 11.61 à cause d’un bug sur leur implémentation native de l’objet Image apparemment: About Issue in latest Opera. Pour finir, pour pouvoir bien jouer au jeu, un navigateur disposant d’une bonne couche d’accélération matérielle est conseillé. J’ai ainsi 60 images/seconde sous IE9/10 sur mon Sony Vaio Z13.

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

Et je suis ensuite allé plus loin avec le même jeu à travers 3 autres articles :

- Tutorial: créez des applications avec HTML5 sur Windows Phone grâce à PhoneGap où je vous montre comment porter ce jeu sous PhoneGap
- Modernisez vos jeux HTML5 canvas partie 1: mise à l’échelle matérielle & CSS3 où j’utilise CSS3 3D Transform, Transition & Grid Layout pour améliorer l’expérience de jeu
- Modernisez vos jeux HTML5 canvas partie 2: Offline API, Drag’n’drop & File API où je rend le jeu fonctionnel même en mode déconnecté

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 ! N’hésitez pas à aller jeter un œil aux 3 autres articles qui ont suivi.

David

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

David Rousset — Mon, 19 Mar 2012 18:30:00 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 BitmapAnimation 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 BitmapAnimation();

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

    // constructor:
    Monster.prototype.BitmapAnimation_initialize = Monster.prototype.initialize; //unique to avoid overiding base class

    // 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({
            images: [imgMonster], //image to use
            frames: {width: 64, height: 64, regX: 32, regY: 32},
            animations: {
                walk: [0, 9, "walk", 4],
                idle: [10, 20, "idle", 4]
            }
        });

        SpriteSheetUtils.addFlippedFrames(localSpriteSheet, true, false, false);

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

        quaterFrameSize = this.spriteSheet.getFrame(0).rect.width / 4;

        // start playing the first sequence:
        this.gotoAndPlay("walk_h");     //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;
        // 1 = right & -1 = left
        this.direction = 1;
        // velocity
        this.vX = 1;
        this.vY = 0;
        // starting directly at the first frame of the walk_h sequence
        this.currentFrame = 21;
    }

    Monster.prototype.tick = function () {
        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");
                }

                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_h");
                }
            }
        }
    }

    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.

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_start, x_end) {
        this.initialize(imgPlayer, x_start, x_end);
    }
    Player.prototype = new BitmapAnimation();

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

    // constructor:
    Player.prototype.BitmapAnimation_initialize = Player.prototype.initialize; //unique to avoid overiding base class

    var quaterFrameSize;
   
    Player.prototype.initialize = function (imgPlayer, x_end) {
        var localSpriteSheet = new SpriteSheet({
            images: [imgPlayer], //image to use
            frames: { width:64, height:64, regX:32, regY: 32 },
            animations: {
                walk: [0, 9, "walk", 4],
                die: [10, 21, false, 4],
                jump: [22, 32],
                celebrate: [33, 43],
                idle: [44, 44]
            }
        });

        SpriteSheetUtils.addFlippedFrames(localSpriteSheet, true, false, false);

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

        quaterFrameSize = this.spriteSheet.getFrame(0).rect.width / 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";
        // 1 = right & -1 = left
        this.direction = 1;

        // velocity
        this.vX = 1;
        this.vY = 0;
        // starting directly at the first frame of the walk_h sequence
        this.currentFrame = 66;

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

    Player.prototype.tick = function () {
        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 Bitmap(contentManager.imgTile);
    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.useRAF = true;
    Ticker.setFPS(60);
}

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];
        // Calling explicitly each tick method 
        // to launch the update logic of each monster
        m.tick();
        
        // 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_h");
            }
            else {
                Hero.gotoAndPlay("die");
            }

            continue;
        }
    }

    // Update logic of the hero
    Hero.tick();

    // 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!

But if you’d like to review the full game with all its source code, jump to the next article : HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS

David

Note : this tutorial has originally been written for EaselJS 0.3.2 in July 2010 and has been updated for EaselJS 0.4. For those of you who read the version 0.3.2, here are the main changes for this tutorial to be aware of:

BitmapSequence is not available anymore in 0.4 and has been replaced by BitmapAnimation
You can now slow down the animation loop of the sprites natively while building the SpriteSheet object
EaselJS 0.4 can now use requestAnimationFrame for more efficient animations on supported browsers (like IE10+, Firefox 4.0+ & Chrome via the appropriate vendors’ prefixes).
You have to explicitly call the tick() method of each object in a global handler rather than having a global Ticker automatically calling your tick implementation.

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

David Rousset — Mon, 19 Mar 2012 17:00:00 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 :

- 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

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 BitmapAnimation 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 BitmapAnimation();

    // 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.BitmapAnimation_initialize = Monster.prototype.initialize;

    // 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({
            images: [imgMonster], //image à utiliser 
            frames: {width: 64, height: 64, regX: 32, regY: 32},
            animations: {
                walk: [0, 9, "walk", 4],
                idle: [10, 20, "idle", 4]
            }
        });

        SpriteSheetUtils.addFlippedFrames(localSpriteSheet, true, false, false);

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

        quaterFrameSize = this.spriteSheet.getFrame(0).rect.width / 4;

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

        // 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;
        // 1 = droite & -1 = gauche 
        this.direction = 1;
        // vitesse 
        this.vX = 1;
        this.vY = 0;
        // on saute directement à la 1ère frame de la séquence walk_h 
        this.currentFrame = 21;
    }

    Monster.prototype.tick = function () {
        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");
                }

                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_h");
                }
            }
        }
    }

    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.

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_start, x_end) {
        this.initialize(imgPlayer, x_start, x_end);
    }
    Player.prototype = new BitmapAnimation();

    // 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.BitmapAnimation_initialize = Player.prototype.initialize;
 
    //unique to avoid overiding base class 
    var quaterFrameSize;
   
    Player.prototype.initialize = function (imgPlayer, x_end) {
        var localSpriteSheet = new SpriteSheet({
            images: [imgPlayer], // image à utiliser 
            frames: { width:64, height:64, regX:32, regY: 32 },
            animations: {
                walk: [0, 9, "walk", 4],
                die: [10, 21, false, 4],
                jump: [22, 32],
                celebrate: [33, 43],
                idle: [44, 44]
            }
        });

        SpriteSheetUtils.addFlippedFrames(localSpriteSheet, true, false, false);

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

        quaterFrameSize = this.spriteSheet.getFrame(0).rect.width / 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";
        // 1 = droite & -1 = gauche 
        this.direction = 1;

        // vitesse 
        this.vX = 4;
        this.vY = 0;
        // on commence directement à la 1ère frame de la séquence walk_h (droite) 
        this.currentFrame = 66;

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

    Player.prototype.tick = function () {
        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 Bitmap(contentManager.imgTile);
    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) 
    // Et on utiliser requestAnimationFrame si disponible 
    Ticker.useRAF = true;
    Ticker.setFPS(60);
}

A la fin de la page, vous trouverez 2 gestionnaires de clavier évident qui s’occupe de jouer les animations walk ou walk_h 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];
        // On appelle explicitement la méthode tick 
        // de chacun des monstres pour appeler leur logique de mise à jour 
        m.tick();

        // 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_h");
            }
            else {
                Hero.gotoAndPlay("die");
            }

            continue;
        }
    }

    // Mise à jour du héro 
    Hero.tick();

    // 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 !

Mais si vous souhaitez analyser le jeu entier avec l’ensemble du code source disponible, rendez-vous dans le prochain article : HTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS

David

Note : ce tutoriel a été écrit à l’origine pour EaselJS 0.3.2 en Juillet 2010 et a été mis à jour pour EaselJS 0.4. Pour ceux d’entre vous qui aviez lu la version 0.3.2, voici les changements principaux de la v0.4 à connaitre ayant un impact sur cet article :

BitmapSequence n’est désormais plus disponible et a été remplacé par BitmapAnimation
Vous pouvez désormais simplement ralentir la boucle d’animation des sprites via la propriété frequency du SpriteSheet
EaselJS 0.4 peut utiliser désormais requestAnimationFrame pour des animations potentiellement plus efficaces sur les navigateurs le supportant (comme IE10+, Firefox 4.0+ & Chrome via les préfixes appropriés)
Vous devez appeler explicitement la méthode tick() de chacun des objets dans un gestionnaire d’évènements global plutôt que de laisser un Ticker global appeler automatiquement chacun des implémentations du tick.

HTML5 Gaming: animating sprites in Canvas with EaselJS

David Rousset — Fri, 16 Mar 2012 18:00:00 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...(read more)

Jeux HTML5: animation de sprites dans l’élément Canvas grâce à EaselJS

David Rousset — Fri, 16 Mar 2012 17:00:00 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”. Cette super librairie fonctionne dans tous les navigateurs HTML5 modernes et pourra même vous aider à écrire des jeux HTML5 pour les nouvelles applications Windows 8 Metro.

Par exemple, si vous avez installé la version Windows 8 Consumer Preview, vous pouvez ainsi installer et jouer au jeu Pirates Love Daisies depuis le Windows Store ici: Pirates Loves Daisies pour Windows 8

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 ont été testés avec succès par votre serviteur dans IE9/IE10 PP5/Chrome 17/Firefox 11 & Opera 11.

Tutoriel 1 : construction des objets SpriteSheet et BitmapAnimation

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({
    // image à utiliser et à découper
    images: [imgMonsterARun], 
    // largeur, hauteur & point central de chacun des sprites
    frames: {width: 64, height: 64, regX: 32, regY: 32}, 
    animations: {    
        walk: [0, 9, "walk"]
    }
});

Nous indiquons que nous souhaitons créer une nouvelle séquence appelée “walk” 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 BitmapAnimation. Cet objet va nous aider à animer notre séquence et à la positionner à l’écran. Revoyons ensemble le code d’initialisation de cette BitmapAnimation :

// crée une instance de BitmapSequence pour afficher et animer une instance de SpriteSheet:
bmpAnimation = new BitmapAnimation(spriteSheet);

// On lance la séquence d’animation
bmpAnimation.gotoAndPlay("walk");

// mise en place d’une ombre portée. Cela peut couter cher en FPS en fonction du navigateur
bmpAnimation.shadow = new Shadow("#454", 0, 5, 4);

bmpAnimation.name = "monster1";
bmpAnimation.direction = 90;
bmpAnimation.vX = 4;
bmpAnimation.x = 16;
bmpAnimation.y = 32;

// On peut choisir exactement à quelle frame démarrer l’animation
bmpAnimation.currentFrame = 0;
stage.addChild(bmpAnimation);

Le constructeur de l’objet BitmapAnimation 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. Si vous jetez un œil au code de Ticker.js, vous verrez que l’objet Ticker d’EaselJS 0.4 supporte désormais requestAnimationFrame() :

var f = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame 
        || window.oRequestAnimationFrame || window.msRequestAnimationFrame;

Grâce à ce code, IE10, Firefox, Chrome et les futures versions d’Opéra sont déjà supportées. Par contre, EaselJS n’utilise pas par défaut requestAnimationFrame. Peut-être pour des raisons de compatibilité j’imagine.

Vous pouvez alors demander à l’utiliser explicitement (afin d’avoir potentiellement des animations plus efficaces) en positionnant la propriété booléen useRAF à vrai. Et si votre navigateur ne le supporte pas, ne vous inquiétez pas, le code basculera alors automatiquement sur setTimeout() universellement reconnu.

Bon, ensuite, tout ce qui vous reste à 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 sur l’objet global window :

Ticker.addListener(window);
Ticker.useRAF = true;
// On vise le taux d’images/seconde optimal (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 (bmpAnimation.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
        bmpAnimation.direction = -90;
    }

    if (bmpAnimation.x < 16) {
        // Nous avons atteint le côté gauche de notre écran
        // Nous devons maintenant marcher vers la droite
        bmpAnimation.direction = 90;
    }

    // On bouge le sprite en fonction de la direction et de la vitesse demandée
    if (bmpAnimation.direction == 90) {
        bmpAnimation.x += bmpAnimation.vX;
    }
    else {
        bmpAnimation.x -= bmpAnimation.vX;
    }

    // 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 consiste à changer le paramètre frequency de l’objet animations contenu dans votre objet SpriteSheet. Cela est plus ou moins précisé dans la documentation: SpriteSheet . Voici le code pour construire ainsi le nouveau SpriteSheet :

var spriteSheet = new SpriteSheet({
    images: [imgMonsterARun], 
    frames: { width: 64, height: 64, regX: 32, regY: 32 }, 
    // Pour ralentir les animations des sprites, on fixe la fréquence de rappel à 4 pour ralentir 4 fois
    animations: {
        walk: [0, 9, "walk", 4]
    }
});

Pour être cohérent, vous avez besoin également de changer la vélocité en changeant la propriété vX de 4 à 1 (logiquement également divisée par 4).

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 addFlippedFrames() comme vous pouvez le voir dans le code source. Voici le code permettant de l’utiliser :

SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);

Nous créons ainsi une nouvelle séquence qui sera nommée automatiquement “walk_h” basée sur la séquence “walk” que nous avons inversée horizontalement. Pour finir, voici le code qui s’occupe de savoir quelle séquence jouer en fonction de la position actuelle du personnage :

function tick() {
    // On teste si le personnage n’arrive pas en bout d’écran à droite avant qu’il ne disparaisse
    if (bmpAnimation.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
        bmpAnimation.direction = -90;
        bmpAnimation.gotoAndPlay("walk")
    }

    if (bmpAnimation.x < 16) {
        // Nous avons atteint le côté gauche de notre écran
        // Nous devons maintenant marcher vers la droite 
        bmpAnimation.direction = 90;
        bmpAnimation.gotoAndPlay("walk_h");
    }

    // On bouge le sprite en fonction de la direction et de la vitesse demandée
    if (bmpAnimation.direction == 90) {
        bmpAnimation.x += bmpAnimation.vX;
    }
    else {
        bmpAnimation.x -= bmpAnimation.vX;
    }

    // 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({
    images: [imgMonsterAIdle],
    frames: { width: 64, height: 64, regX: 32, regY: 32 }, 
    animations: {
        idle: [0, 10, "idle", 4]
    }
});

bmpAnimationIdle = new BitmapAnimation(spriteSheetIdle);

bmpAnimationIdle.name = "monsteridle1";
bmpAnimationIdle.x = 16;
bmpAnimationIdle.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 (bmpAnimation.x < 16) {
    // Nous avons atteint le côté gauche de notre écran, il est temps de se reposer 
    bmpAnimation.direction = 90;
    bmpAnimation.gotoAndStop("walk");
    stage.removeChild(bmpAnimation);
    bmpAnimationIdle.gotoAndPlay("idle");
    stage.addChild(bmpAnimationIdle);
}

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 . C’est une 2ème partie indispensable à comprendre avant de réussir à écrire un jeu de plateforme complet comme nous le verrons dans le 3ème et dernier article.

David

BitmapSequence n’est désormais plus disponible et a été remplacé par BitmapAnimation
Vous pouvez désormais simplement ralentir la boucle d’animation des sprites via la propriété frequency du SpriteSheet
EaselJS 0.4 peut utiliser désormais requestAnimationFrame pour des animations potentiellement plus efficaces sur les navigateurs le supportant (comme IE10+, Firefox 4.0+ & Chrome via les préfixes appropriés)

Techdays 2012: vidéos des sessions HTML5... au format HTML5 h264 et WebM!

David Rousset — Tue, 13 Mar 2012 13:44:44 GMT

Si vous le ne saviez pas encore, nous avons mis en ligne une grande partie des vidéos/webcasts des sessions des Techdays 2012 sur notre site officiel: http://www.mstechdays.fr . Vous pouvez ainsi y retrouver le parcours découverte HTML5. Mais le mieux pour regarder une session parlant de HTML5, c'est quand même d'avoir une expérience HTML5 non? Pour résoudre cela, je me suis amusé à ré-encoder toutes les vidéos au format WebM en plus de h264 pour encapsuler le tout dans le player VideoJS.

Ce billet sera donc un complément de mon précédent où je partageais une partie des slides et démos : Slides, quelques démos et vidéos des sessions IE10/HTML5/CSS3 des Techdays 2012

Voici donc une partie des sessions HTML5 au format HTML5.

Nouveautés HTML5 et CSS3 dans Internet Explorer 10

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

Visionnez la version Silverlight et n’oubliez pas une version HTML5 interactive des slides.

Introduction à JavaScript

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

Visionnez la version Silverlight

Patterns et bonnes pratiques autour de JavaScript

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

Visionnez la version Silverlight

Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations

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

Visionnez la version Silverlight

Développement de jeux 2D avec HTML5

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

Visionnez la version Silverlight

Création d'une application HTML5 utilisant Canvas, SVG et les animations CSS3

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

Visionnez la version Silverlight

Accessibilité du Web 2.0 : HTML5 et WAI-ARIA

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

Visionnez la version Silverlight

HTML5 sur mobile: le bon, la brute et un gros paquet de truands

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

Visionnez la version Silverlight

Bon visionnage !

David

Slides, quelques démos et vidéos des sessions IE10/HTML5/CSS3 des Techdays 2012

David Rousset — Mon, 20 Feb 2012 18:59:47 GMT

La version HTML5 de la session IE10

Plusieurs d’entre vous m’ont demandé s’ils pouvaient avoir accès à l’application HTML5 que j’ai utilisée pendant ma session générale sur les nouveautés d’HTML5 et CSS3 dans Internet Explorer 10 des Techdays 2012. Vous pouvez la jouer depuis cette adresse : version interactive des slides en HTML5 .

L’ensemble complet des démos ne fonctionne que dans la version dite “PP3” (pour Platform Preview 3) d’IE10. Mais si vous avez un autre navigateur récent comme un des derniers Chrome ou Firefox, la quasi-totalité des démos devraient également fonctionner (comme CSS3 3D Transform, Transition, Animation, etc.).

En fait, il n’y a en gros que CSS3 Grid (-ms-grid) ne fonctionnant que sous IE10 pour l’instant.

Les présentations à voir ou à télécharger

Vous pouvez voir les slides de la session “nouveautés HTML5 et CSS3 dans IE10” ici:

Nouveautés html5 et css3 dans internet explorer 10

Mais avec mon ami David Catuhe, nous avons également animé 2 autres sessions autour d’HTML5 et IE10 ayant pour support l’application Snapyx dont voici les slides :

Création d’une application gérant l’offline et le stockage

Création d'une application html5 utilisant canvas, svg et les animations css3

Quelques démonstrations à revoir en ligne

Voici une partie des démos que nous avons jouées dans la session sur Canvas, SVG & animations CSS3 :

Des articles complémentaires à lire

A noter qu’avec David, nous avons écrit une série d’articles tournant autour de ces sujets où vous retrouverez notamment nos “helpers”/librairies de “fallback” pour CSS3 Transitions/Animations. Les voici :

Les vidéos à voir ou à revoir

Vous pouvez dors et déjà revoir la session “Création d’une application HTML5 utilisant Canvas, SVG et les animations CSS3” car elle est déjà en ligne ici: Replay du live Tehdays 2012 du mercredi 8 février et cliquez directement sur le dernier marqueur “Session Technique” pour sauter dans le temps vers 8h54.

Au sujet de l’application Snapyx, nous travaillons actuellement à sa finalisation pour la mettre en ligne publiquement et vous laissez jouer avec. En attendant, vous pouvez la revoir dans la vidéo en ligne de la session précédente ou à la fin de la plénière du 1er jour dédiée aux développeurs (vers 1h02 sur la timeline) sur YouTube ici:

A bientôt pour de nouvelles aventures HTML5 !

David

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 :

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

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

David Rousset

Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 2/2)

Step 1: using the simulator

Step 2: displaying the articles’ details

Some quick notes about the Metro Style Apps security context

Step 3: finishing the design of the detail view with Blend

Special additional bonus level for warriors

Step 4: video and source code to download

Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 1/2)

Step 1: creating a blank application

Step 2: creating the HTML & CSS base of our main page

Step 3: first contact with Blend

Step 4: loading the data with XHR and bind them to the ListView control

Step 5: using a template and modifying the design with Blend

Step 6: video demonstrating all the steps & source code to download

Comment créer un petit lecteur RSS pour Windows 8 Metro en HTML5 en 30 min (partie 2/2)

Etape 1 : utiliser le simulateur

Etape 2 : afficher le détail de l’article

Petite aparté sur le contexte de sécurité des applications Metro

Etape 3 : finaliser le design de la vue détail sous Blend

Niveau bonus de fin pour les guerriers

Etape 4 : vidéo et code source à télécharger

Comment créer un petit lecteur RSS pour Windows 8 Metro en HTML5 en 30 min (partie 1/2)

Etape 1 : création du projet vide

Etape 2 : création du squelette HTML et CSS de notre page principale

Etape 3 : premier contact avec Blend

Etape 4 : charger les données via XHR et les associer au contrôle ListView

Etape 5 : mise en place d’un template et revue du design sous Blend

Etape 6 : vidéos déroulant toutes les étapes précédentes

Modernisez vos jeux HTML5 canvas partie 2: Offline API, Drag’n’drop & File API

Agenda

Rendre le jeu jouable en mode déconnecté

Etape 1: choisir les ressources que vous souhaitez mettre en cache

Etape 2: modifier la logique du jeu pour le chargement des niveaux

Etape 3: vérifier le statut en ligne/hors ligne & afficher un logo en mode déconnecté

Etape 4: chargement conditionnel des fichiers mp3 ou ogg et stockage en blob dans IndexedDB

Glisser/Déposer des niveaux depuis votre bureau

Vidéo, URL pour jouer avec la démo & code source à télécharger

Modernizing your HTML5 Canvas games Part 2: Offline API, Drag’n’drop & File API

Agenda

Playing to the game in offline mode

Step 1: choosing the resources you’d like to cache

Step 2: modifying the logic for loading the levels

Step 3: checking online/offline & displaying a logo when launched in offline mode

Step 4: conditionally downloading the mp3 or ogg files and store them as blob in IndexedDB

Drag’n’dropping the levels from your desktop

Video, URL to play this demo & source code

Modernisez vos jeux HTML5 canvas partie 1: mise à l’échelle matérielle & CSS3

Gérer la mise à l’échelle sur tous les périphériques

Etape 1: étirer

Etape 2: contrôler le ratio

Etape 3: centrer le jeu avec CSS3 Grid

Mise en place d’animations fluides

Animation des changements effectués sur chacune des propriétés du canvas

Mise en place d’une animation cool entre chaque niveau

Vidéo & URL pour jouer avec la démo

Modernizing your HTML5 Canvas games Part 1: hardware scaling & CSS3

Scaling across devices

Step 1: stretch

Step 2: control your ratio

Step 3: center the game with CSS3 Grid

Using Smooth Animations

Animating every change done to the canvas style properties

Building a cool animation between each level

Video & URL to play this demo

HTML5 Platformer: the complete port of the XNA game to with EaselJS

Building the content manager

Working around HTML5 Audio tag limitations

The mono-threaded JavaScript nature

Special Kudos for IE9 & IE10

Adding new levels to the game

Non-minified source code

HTML5 Platformer: portage complet du jeu XNA vers grâce à EaselJS

Construction du gestionnaire de téléchargements

Ruses autour des limitations de la balise audio HTML5

La nature mono-threadée de JavaScript

Bonus spéciaux pour IE9

Ajoutez de nouveaux niveaux au jeu

Code source non compressé à télécharger

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

HTML5 Platformer: the complete port of the XNA game to

HTML5 Platformer: portage complet du jeu XNA vers