Oniromancie: Les News - HTML 5


Comment ça marche?

Aëdemphia
Par Sylvanor

Fighting Robots Quest
Par Boulon

Forstale
Par Ødd Clock

Geex
Par roys

Inexistence
Par Falco

La Légende d'Ibabou
Par Zaitan

Lije
Par Gaetz

LoveMaster
Par Cuddlefox

Sarcia
Par Kaëlar

Super Mario RPG - Lost Souls
Par Omegabowser

Jeux: Monster World RPG / Jeux: Pif et Hercule / News: Mise à jour de RPG Maker 2003 / Tutos: Création de charset / Jeux: FAYLINAWA /

Chat  (14 connectés)

Bienvenue
visiteur !






publicité RPG Maker!

Statistiques

Liste des
membres


Contact

74 connectés actuellement

9259607 visiteurs
depuis l'ouverture

651 visiteurs
aujourd'hui

Groupe Facebook

Barre de séparation

Partenaires




TOP
GAMEMAKING


Les 5 plus
visités

Lunae, le baz'arts d'Emz0

Le studio du chat vert

Pixelandgame

Tashiroworld

HeyMakeGames

Au hasard

Lunarisblog

New RPG Maker

Guelnika - E Magination

Les deux derniers

Lunae, le baz'arts d'Emz0

Le studio du chat vert

Nos autres partenaires

Devenir
partenaire


Barre de séparation

Un site du réseau
War Paradise

Annuaires référenceurs




HTML 5

Le HTML 5




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 balise comme celle-là:






Portion de code : Tout sélectionner

1

2
3
4
5
6
7
8
9
10
11
12
<!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:






Portion de code : Tout sélectionner

1

2
3
4
5
6
7
8
9
10
11
12
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 petits 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éveloppe à 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:






Portion de code : Tout sélectionner

1

2
3
4
5
6
7
8
9
10
11
<!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) et dans 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.

image



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.

imageimageimage



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 .

imageimage



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 majeure (avec bien sur 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 traine, 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 suivit 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 (Baby pourra regarder son hentai sur son téléphone non compatible flash grâce au HTML5). 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 derniers possèdent 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 langages de scripts de petits débrouillards avaient importer (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 gouts.
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.

Posté par Magicflottant le 13/03/2012 à 15:23:52.


Tata Monos - posté le 13/03/2012 à 15:43:25. (56315 messages postés) - admin

Vive le making libre

Citation:

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).


Le module pour MMF2/HTML5 n'est pas vraiment pour tout de suite. Il faut attendre la publication du module XNA qui va se faire bientôt (quand les jeux "démo" seront validé sur XNA donc d'après Roy ça prend du temps) et Androïde qui est toujours en phase de bêta test.

Construct2/GM. J'ai pas testé GM HTML mais la version lite oui. Et avec GM est proche de Rm Xp, si tu ne sais pas "programmé" le logiciel semble quand même hachement limité. Enfin quand on veux compliquer les choses donc faire de grande chose bien sur.

Pixner|Offgame | Le comptoire des clikeurs


Benku - posté le 13/03/2012 à 16:12:27. (2843 messages postés)

Benku, le prince des ténèbres !

Cool sympa toute ses petites nouveautés :youpi

Comme tout ceux qui vivent des heures si sombres mais ce n'est pas à eux de décider, tout ce que vous avez à décider, c'est quoi faire du temps qui vous est imparti.


Tasslehoff - posté le 13/03/2012 à 17:47:29. (4491 messages postés)

Disciple de Pythagolf

Bon article Magic. o/

Citation:

J'ai pas testé GM HTML mais la version lite oui. Et avec GM est proche de Rm Xp, si tu ne sais pas "programmé" le logiciel semble quand même hachement limité. Enfin quand on veux compliquer les choses donc faire de grande chose bien sur.


Je suis pas d'accord. Tu peux déjà faire des tonnes de trucs dessus sans une seule ligne de code. Faut juste comprendre un peu la logique du log, différente de RM ou MMF. Sinon y'a des extensions aussi (pas sur le lite par contre). Et à la limite les bases du GML c'est vraiment très simple à apprendre.

~~


Le Docteur - posté le 13/03/2012 à 18:22:52. (5287 messages postés) - geniesdumal

Le Docteur x Sans = Best character ever

Cool la niouse :D
in b4 invasion de nouveaux qui veulent faire un RPG en HTML5

Doctor Sans to the rescue ! After the break.


Seltton - posté le 13/03/2012 à 23:25:00. (1142 messages postés)

* BLOB *

Euh je doute Docteur, car a mon avis il faut un minimum de connaissance en code etoo...

Dessinateur dans la merdeuhhh !!


sriden - posté le 14/03/2012 à 01:05:27. (15535 messages postés) - roi

On croirait presque un article sur l'histoire d'internet, et là genre en plein milieu il y a le jeu de Naked Snake, trop la classe pour lui. :F

Citation:

WebGL: WebGL se base sur OpenGL la célèbre API graphique multiplateforme

Dommage, jusque-là j'avais tout suivi (alors que je suis au niveau zéro), et là il y a le mot API qui fout tout parterre. :/

Citation:

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.

Je pige pas, je croyais qu'il avait besoin de javascript moi. Et visiblement java-truc c'est un plugin à installer, puisque selon les sites mon navigateur me fait chier tous les 4 matins pour que je l'installe.

Citation:

sur le site du zéro, plus orienté site web, il faut quand même avoir les bases.

Pour un site qui s'appelle comme ça, devoir avoir les bases c'est un peu [insérer l'adjectif approprié ici].

Forum du FAMAS | Escapade | La 7e porte (jeu multimaker complet) | Vader Ou La Fin des Haricots | Polaris 03 | Ma zyk : Diaphanous Horizons


RaZ - posté le 14/03/2012 à 02:15:57. (1829 messages postés)

Je suis toi

Merci pour cette news Magic !

Je fais des lives de dessin. Les gens aiment bien.


Magic - posté le 14/03/2012 à 07:37:13. (3425 messages postés) - honor

D:

sriden a dit:


Dommage, jusque-là j'avais tout suivi (alors que je suis au niveau zéro), et là il y a le mot API qui fout tout parterre. :/


Pour faire simple, OpenGL est une bibliothèque graphique qui apporte de nombreuses fonctions pour les developpeurs en matière de graphisme. Elle est multiplateforme car elle fonctionne sur tout les support (windows, mac, linux, iphone, psp, android, ps3, xboite, wii, 3DS ...etc) contrairement à son concurrent DirectX qui lui ne marche que sous windows et Xboite.
Toutes fois DirectX reste plus puissant et complet que OpenGL


sriden a dit:

Je pige pas, je croyais qu'il avait besoin de javascript moi. Et visiblement java-truc c'est un plugin à installer, puisque selon les sites mon navigateur me fait chier tous les 4 matins pour que je l'installe.


Tu dois confondre. javascript est pris en charge de base par tous les navigateurs, il n'y a besoin de rien installer. Tu dois confondre avec Java. Java et javascript sont deux choses complètement différentes. Ou encore avec autre chose.


Merci à tous : )


dstar - posté le 14/03/2012 à 09:26:34. (226 messages postés)

Merci pour la news (bien que trop technique à mon goût).

Sinon, je continue à ne pas aimer le HTML 5.
Pour en tirer parti, il faut faire du javascript, et ça c'est vraiment un langage qui n'est pas adapté pour faire des programmes complexes.

Bref, moi je continue avec le Flash qui est quand même bien mieux foutu.

dstar - dstar-games - Penguin Bubble v1.20


sriden - posté le 14/03/2012 à 15:40:28. (15535 messages postés) - roi

Ouais je confonds sûrement avec Java. Bref c'était sympa ce récaputi tipupitulatif.

Forum du FAMAS | Escapade | La 7e porte (jeu multimaker complet) | Vader Ou La Fin des Haricots | Polaris 03 | Ma zyk : Diaphanous Horizons


S4suk3 - posté le 14/03/2012 à 16:48:52. (555 messages postés)

-

Citation:

Sinon, je continue à ne pas aimer le HTML 5.
Pour en tirer parti, il faut faire du javascript, et ça c'est vraiment un langage qui n'est pas adapté pour faire des programmes complexes.

Bref, moi je continue avec le Flash qui est quand même bien mieux foutu.


Là je ne suis pas tout a fait d'accord.
AS3 (selon ce que j'en avais exploré) me semblait être un langage qui dérive tout selon un objet "graphique) et qui réclame l'utilisation d'une "machine virtuelle" propriétaire.


Le Docteur - posté le 14/03/2012 à 17:21:14. (5287 messages postés) - geniesdumal

Le Docteur x Sans = Best character ever

Seltton a dit:


Euh je doute Docteur, car a mon avis il faut un minimum de connaissance en code etoo...



Je pourrais dire la même chose pour le making :flaco

Doctor Sans to the rescue ! After the break.


Tata Monos - posté le 14/03/2012 à 19:26:27. (56315 messages postés) - admin

Vive le making libre

Citation:

Je pourrais dire la même chose pour le making


Bof. Pas besoin de connaissance "en code" avec RM.

Pixner|Offgame | Le comptoire des clikeurs


Magic - posté le 14/03/2012 à 19:31:31. (3425 messages postés) - honor

D:

Comme pour le HTML 5, si tu passes par un log comme GameMaker ou autre pas besoin de connaissance en code. Sauf si tu veux un truc pointu, alors tu script comme avec RM.


Berserk - posté le 20/03/2012 à 10:18:29. (1 messages postés)

Bonjour,

Merci pour l'article Magic mais permettez moi de le juger un peu trop excessif dans ses positions, on ne peut pas parler d'"HTML qui va remplacer flash". Flash possède un taux de pénétration de plus de 90 à 95 %, et il demeure toujours le lecteur multimédia le plus présent sur Internet. Donc le problème de plugins et de prise en charge web n'est plus valable pour flash.
Ensuite HTML 5 est toujours en phase de développement, le W3C vise la finalisation de la spécification en 2014. L'éditeur d'HTML 5 lan Hickson aurait d'ailleurs mentionné une date plus lointaine : 2022 (!).

La version téléphone de flash annulée en cours de route mais tu devrais mentionner ce que Michael Chaize a affirmé à ce propos : "Mais, le lecteur Flash pourra néanmoins toujours être porté par les éditeurs de systèmes d'exploitation mobiles. Il est présent dans sa version 11.1 sur plusieurs d'entre eux, notamment Android et RIM Playbook. Par le biais de notre programme Open Screen Project qui donne accès aux sources du player, les éditeurs qui le souhaitent pourront toujours continuer à optimiser le lecteur Flash pour telle ou telle plate-forme mobile. RIM fait notamment partie de ce programme, et va poursuivre cette démarche. Sans doute pour les raisons évoquées plus haut, nous avons aussi constaté que les agences ne choisissez pas le format Flash pour adapter un contenu riche aux terminaux mobiles, mais préféraient s'orienter vers les applications natives. "

De nouvelles possibilitées :


"Nous avons donc décidé de nous centrer sur la possibilité de compiler des applications Flash développées sous Adobe AIR en applications natives pour chaque OS mobile [iOS, Android, Blackberry / Playbook NDLR]. Nous positionnons donc Adobe AIR comme un outil de développement multiplate-forme mobile d'applications. "

Beaucoup de jeux flash ont eu et ont énormément de succès, y compris sur les plateformes mobiles comme le célèbre jeu Machinarium qui s'est retrouvé en tête des applications payantes les lus téléchargées dans l'AppStore dans 14 pays.

Alors évidemment en terme de lecteur internet, comme HTML 5 ne bug pas et qu'il est pris en charge sur navigateur web, bien sûr que youtube va le privilégier. Mais il existe d'autres notions et potentiel dans flash : application jeu (avec l'extension AIR) et animation, qu'HTML 5 est extrêmement loin d'égaliser pour le moment.

Les logiciels de créations HTML5 sont actuellement trop basique, GameFactory 1 et 2 font d'énormes limitations, et d'ailleurs dans la page du site même ils conseillent aux vrais développeur de s'engager dans C++
Vous imaginez le ridicule ? C++ prend énormément de temps, et pour faire des jeux sérieux en C++ il faut être en équipe, ce sont les studios qui sont à la hauteur.

Faire des jeux sans aucune notion de programmation c'est être nécessairement limité car l'interface de création ne peut pas regrouper toutes les classes et méthodes d'un langage et les mettres à disposition ce serait des efforts dispensé pour rien.

Donc oui on constate une évolution HTML 5 qu'Adobe a d'ailleurs pris en compte, déjà en DreamWeaver on peut faire des sites flash et les exporter en extension HTML 5 (!). Il s'agit donc non pas d'une confrontation mais plutôt d'une complémentarité entre HTML 5 et Flash.


arglow - posté le 17/04/2012 à 09:35:03. (5 messages postés)

Je pense également que le html5 avec toutes les nouveautés apporté va surement prendre une grande place au Flash car plus difficile à développer ...

Le html5 a de beaux jour devant lui selon moi.

wait and see ;)

Je suis un passionné de Jeux par navigateur | jeu gratui

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe

Plan du site:

Activité: Accueil | News | Forum | Flash-news | Chat | Commentaires | Galerie | Screen de la semaine | Sorties | Articles perso | Livre d'or | Recherche
Jeux: Index jeux séparés | Top Classiques | Top Originaux | Les autres | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Jeux complets | Proposer
Rubriques: Le Wiki | Collection Oniro | Tutoriaux | Scripts | Guides | Gaming-Live | Tests | Making-of | Interviews | Articles perso | OST | L'Annuaire | Divers | Palmarès
Hébergés: Aëdemphia | Fighting Robots Quest | Forstale | Geex | Inexistence | La Légende d'Ibabou | Lije | LoveMaster | Sarcia | Super Mario RPG - Lost Souls
Ressources: Jeux | Programmes | Packs de ressources | Midis | Eléments séparés | Sprites
RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis