Dossier : Le HTML 5

Pour une fois, ce n'est pas moi qui a rédigé la news. Il s'agit de Magic (qui l'a aussi rédigée pour le site www.rpg-maker.fr). Vous pouvez le retrouver sur son twitter à cette adresse : https://twitter.com/#!/Magicflottant


Le HTML 5, on en parle partout, tout le monde en parle. On dit que c'est une révolution, que c'est le futur du web, le futur du jeu vidéo, qu'il signe l’arrêt de mort du flash... et plein d'autres choses dans le même genre...
Mais c'est quoi réellement le HTML 5 ? Que peut-on faire avec ? Des jeux ? Des sites ? Le café ? Un petit tour du propriétaire semble s'imposer.
C'est par là.




I. Un peu d’histoire

Le HTML, ou HyperText Markup Language inventé en 1991 par Tim Berners-Lee, est l'un des trois piliers fondateurs du web, avec l'HyperText Transfer Protocol (HTTP) et les adresses web. C'est le langage qui permet de faire des pages web ("Mais c'est naze les sites, ici on veut des jeux ! "), c'est un langage balistique: à base de balises comme celle-là:
 
<!DOCTYPE html>

<html>

    <head>

        <title>html5 et canvastitle>

        <script src="canvas.js">script>

    head>

    <body>

       <canvas id="mon_canvas" width="500" height="500">

            Ce message est pour les navigateurs ne supportant
            pas encore canvas.

       canvas>

    body>

html> 
 
Le code HTML est téléchargé et interprété par les navigateurs qui vont transformer ces lignes de code
en magnifiques sites web.

Tim Berners-Lee a créé World Wide Web Consortium (ou W3C) qui a ensuite développé le html 2
en 1994 et toute les versions qui ont suivis, jusqu'au HTML 5. En 1996 a lieu une révolution
avec l'arrivé du HTML3 et du CSS 1. Car le HTML ne permet pas tout, il sert lui à définir le contenu
des pages web de mettre des images, des liens, du texte. Mais pas la mise en page. Pour cela on passe
par le CSS ou Cascading Style Sheets, à qui on dit comment placer les textes, images, les couleurs à
utiliser, les polices...etc Voilà un petit exemple de code CSS:
 
a /* Liens par défaut (non survolés) */

{

   text-decoration: none;

   color: red;

   font-style: italic;

}

 

a:hover /* Apparence au survol des liens */

{

   text-decoration: underline;

   color: green;

}


Et le HTML 5 arrive justement avec le CSS 3... On ne parlera presque plus de ce dernier
ensuite mais il faut savoir que le CSS 3 apporte pas mal de trucs qui envoient du petit
bois: ombres, dégradés, amélioration des animations...etc Allez ici pour avoir quelques exemples.
Et il peut servir dans les jeux, d’une certaine façon.
 
 
II. HTML 5, quoi de neuf docteur ?

Le HTML 5 débarque avec de nombreuses nouveautés qui vont, et là on entre enfin dans
le sujet qui nous intéresse, permettre de faire des jeux vidéo !

Mais d'abord, levons un abus de langage: on dit et je l'ai volontairement dit moi-même
"grâce au HTML 5 on peut faire des jeux"... 
C'est vrai et faux à la fois. Le HTML 5 nous apporte de nouvelles technologies, mais seul
il ne peut rien faire. Il lui faut un partenaire, un second langage: le javascript.
 C'est un langage développé à l'origine en 1995 par Brendan Eich pour Netscape Navigator,
concurrent direct d'Internet Explorer à l'époque. Le javascript est un langage interprété par le 
navigateur, placé directement dans une page HTML, il permet  de dynamiser et d'augmenter
les interactions dans une page web. Voilà un exemple de code javascript dans une page HTML: 
 
<!DOCTYPE html>

<html>

  <head>

    <title>Hello World!title>

  head>

  <body>

    <script>

      alert('Hello world!');

    script>

  body>

html>
 
  
Alors qu'apporte HTML 5 avec javascript ?

Les canvas: C'est une zone dans la page web que l'on peut rafraîchir périodiquement
(comme une application) etdans laquelle on peut dessiner des formes géométriques
mais également des images, on peut manipuler le tout (déplacer, faire des rotations...etc),
appliquer des filtres graphiques...etc Pour faire simple: cela permet de réaliser de
véritable jeux vidéo dans la page web ! On fait un canvas dans la page (j'ai justement plus haut
posté un code HTML où je crée un canvas) et ensuite on code le jeu en javascript.

Voici par exemple 8-bit runner fait par Naked-Snake et il y en a pleins d'autres partout sur le net.

WebGL: WebGL se base sur OpenGL la célèbre API graphique multiplateforme et permet d'afficher de la 3D directement dans la page web ! Et ce n'est pas de "la petite 3D bridée", il est possible de faire exactement la même chose qu'avec une application, le tout étant directement géré par la carte graphique.
Voici par exemple une simulation d'eau en 3D impressionnante, Rome une jeu de création et de partage en 3D impressionnant par sa réalisation et son univers ou encore une pluie de pâtes


Je pourrais également vous parler des autres nouveautés : Drag & Drop, Web Sockets
(qui permet une utilisation poussée du réseau dans une page web et par extension des mmo
par navigateur plus poussés) ou encore des autres mais je n'en vois pas l'utilité pour nous maintenant. 
On peut aussi jouer avec plusieurs fenêtres  et voila aussi un petit jeu expérimental multi-joueurs .
 
 
 
 
 
 
 
 
 
 
 
 
 
Vous pouvez aller sur Chrome Expériments pour avoir d'autres exemples et en explorant le web.





Il y a encore peu de jeux complets, la technologie étant très jeune et même pas encore finie,
même si elle commence déjà à être prise en charge par les navigateurs.

Pourquoi le HTML 5 ? Car contrairement à d'autres technologies proches comme le flash par exemple,  le HTML 5 et le javascript
 ne nécessitent pas de programmes ou d’autres plugins (comme flash ou Unity) il est directement 
pris en charge par le navigateur web. Qu'est-ce que ça change ? HTML 5 est disponible sur TOUS
les supports ! 
Autrement dit, votre jeu HTML 5 peut être joué sur windows, mac, linux, téléphones portables et
tous les autres appareils ayant un navigateur web digne de ce nom sans changement majeur
(avec bien sûr des adaptations de résolution et de maniabilité) !

Car oui tous les navigateurs ne gèrent pas parfaitement le HTML 5 (et le CSS 3), Internet Explorer
est encore et toujours à la traîne, les navigateurs Iphones et Android étant même plus avancés.

Vous pouvez voir ici la liste des fonctionnalités prises ou non en chargent par chaque navigateur.





Le HTML 5 commence à manger progressivement les concourent, flash ne sera bientôt plus suivi
sur la distribution Linux, la version téléphone de flash annulée en cours de route... Adobe préparant un 
logiciel de création de contenue et jeu en HTML 5. Youtube abandonne le flash pour son lecteur
et passe au HTML 5, comme de nombreux autres lecteurs . Tout le monde prépare le passage au 
HTML 5 et de nombreux logiciels fleurissent.







III. Moi aussi je veux faire du HTML 5 et des jeux de la mort 

Deux solutions: la première c'est la meilleure, elle est gratuite et c'est celle qui vous donnera
le plus de maîtrise sur votre travail: Apprendre le HTML5 et le javascript! !

Quoi déjà que je n’arrive pas à apprendre que le ruby pour rpg maker et là je dois en apprendre deux ! 
Alors oui, vous allez dire que c'est long, difficile...etc Ce n'est pas vrai, ce ne sont pas des langages 
particulièrement difficiles et ils sont assez rapides à apprendre. Il existe en plus déjà de nombreuses
bibliothèques pour vous mâcher le travail: 

-RPG JV permettant 
de faire facilement des rpg dans la même veine que rpg maker XP avec 
possibilité d'importer les projets de rpg Maker XP.

-Box2D pour gérer la physique.

En cherchant vous en trouverez pleins d'autres ! Dans des genres variés, bibliothèques réseaux, pour fps…etc



Pour apprendre il y a de nombreux tutoriels:

-Apprendre le HTML 5 et le CSS 3, sur le site du zéro, plus orienté site web, il faut quand même avoir les bases.

-Apprendre le javascript, sur le site du zéro.

-Faire un mini rpg avec Canvas, sur le site du zéro.

-Les bases de Canvas, sur le site du zéro.

-Les bases de WebGL (en anglais).

Vous trouverez plein d'autres tutoriels sur le web, mais beaucoup en anglais.







Et si j'ai peur d'apprendre à programmer c'est mort ? Et bien non ! 
Il existe pour le moment deux logiciels qui propose de réaliser des jeux
 en HTML 5, et bien d'autres arriveront (Multimedia Fusion 2 et son futur module HTML5,
le logiciel d'Adobe, Stencyl et son futur module HTML5, surement Unity, l'UDK 4...etc).



Les deux grands disponibles actuellement sont Construct 2 et Game maker pour HTML5.
Il y a également Game Salad (qui exporte également sous ios et android) mais étant
uniquement sur mac je ne peux vous en parler.



Alors lequel des deux ?

Construct 2 existe en trois version une gratuite limitée mais intéressante pour découvrir, une version 
à 79$ complète mais utilisable à but lucratif avec des limites et une à 365$ permettant de s'en foutre 
plein les poches.

En face GameMaker HTML5 coûte 99$ et ne possède pas de version de test.

Les Deux permettent de faire des jeux sans aucune notion de programmation, tout passe par
une interface graphique, avec drag and drop, évènement etc... Avec des systèmes tout prêts pour la 
physique...etc Permettant de faire des jeux très rapidement.

Malheureusement Construct 2 ne fait pas le poids face à GameMaker, ce dernier possédant de
gros arguments: alors que construct 2 se limite à la 2D, GameMaker va bientôt permettre la 3D
et l'accélération matérielle et permet de scripter avec le GameMaker Language qui permet 
des choses impressionnantes, faciles à utiliser et ultra complet, on peut également importer des
bibliothèques javascript et coder des morceaux du jeu en javascript, dans le cas où il n'y ai rien
de prêt fait qui nous convienne. De plus, grâce à la communauté très active, de nombreux scripts
GameMaker Language et modules vont émerger permettant de grandes choses. Je rappelle qu'avec
ce langage de scripts de petits débrouillards avaient importé (partiellement) dans Game Maker 8,
le moteur Ogre ou réalisé des systèmes de particules,de physique, de 3D, de lumières et j'en passe,
pour tous les goûts.

Pour moi, GameMaker est donc le grand gagnant, je vous le recommande grandement. 
 
Voilà, c'en est donc pour ce tour d'horizon de cette technologie novatrice.
 
 
 

1 commentaire:

All your comments are belong to us