Intel Devs

Make HTML5 for Windows 8

HTML5 Canvas ! (ce qu'est un canvas)


<\canvas id="supercanvas" width="1280" height="720">Your browser don't support canvas<\/canvas>

Initialisation


var canvas = document.getElementById("supercanvas");
var context = canvas.getContext('2d');

context.fillStyle = "red";
context.fillRect( 100,100,200,200 );

Animations, The good way


if (!window.requestAnimationFrame) 
{
  window.requestAnimationFrame = ( function()
  {
    return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(/*function FrameRequestCallback*/callback,/*DOMElement Element*/element)
    {
      window.setTimeout( callback, 1000 / 40 );
    };
  })();
}

function animationLoop()
{
  // call firstly the next frame
  requestAnimationFrame(animationLoop);
  
  // some function to animate some things
  animate();
  move();
  update();
}

Importer WinJS


<\script src="//Microsoft.WinJS.1.0/js/base.js"><\/script>
<\script src="//Microsoft.WinJS.1.0/js/ui.js"><\/script>

Sauvegardez quand on quitte l'application


WinJS.Application.onunload = function(e){
  MyApplication.save();
}

Détecter la Snapped View

Windows.UI.ViewManagement.ApplicationView.value 2 = snapped view

Type de Pointeur (touch ou souris)


function onMSPointerDown( e )
{
  switch ( e.pointerType )
  {
    case e.MSPOINTER_TYPE_MOUSE:
      pad.display( false );
      break;
    default:
      pad.display( true );
      break;
  }
}

Configuration clavier pour la langue


LANG=Windows.Globalization.Language.currentInputMethodLanguageTag;

No scroll (propriété CSS)


html {
  -ms-touch-action: none;
}

Accélération graphique window 8

- pas de webGL :(
- canvas 2D calculé dans la carte graphique :)
(démo time)

Merci à vous :) - Questions ?

- More HTML5 stuff ?
Beginner HTML5 tutorial
Advanced HTML5 game tutorial

--> Good stuff !

David Rousset Blog - David Catuhe Blog

About me :) - Freelancer HTML5 - Inateno / @inateno
Le slide ici !