16 Couleurs

16 Couleurs – graphisme & jeu vidéo


2 Commentaires

Micropolis et ses dérivés : SimCity 1 réanimé

Tout le monde ou presque connaît SimCity, le mythique jeu de construction et de gestion de villes signé Will Wright qui marqua tellement les esprits lors de sa sortie que son influence se fait encore sentir 26 ans après. Ce qui est moins connu c’est que, comme rappelé par un commentaire de PulkoMandy sur un précédent billet, SimCity a depuis peu un frère jumeau open source : Micropolis.

Pour la petite histoire, en 2008 le code source de SimCity fut diffusé sous licence GPL, principalement pour pouvoir fournir le jeu avec les ordinateurs du projet OLPC destiné aux enfants des pays en voie de développement. À cette occasion, le code source fut converti du C vers le C++, corrigé de quelques bugs et porté dans la foulée sur Linux sous le nom de Micropolis (nom de code de SimCity durant son développement) pour des raisons de droits. Par la suite le jeu fut converti une nouvelle fois en Java et donc exécutable sur tout ordinateur avec une machine virtuelle Java (JVM) installée : Windows, Mac, Linux…

C’est cette version que j’ai pu essayer. La magie fonctionne encore même si le titre accuse évidemment le poids des ans, surtout d’un point de vue visuel, d’autant plus que SimCity n’a jamais été considéré comme particulièrement esthétique même lors de sa sortie. Néanmoins le plus important reste l’aspect simulation qui reste valide, bien qu’évidemment simpliste comparé aux city-builders récents. Surtout, le jeu est compatible avec les sauvegardes du SimCity d’origine et m’a donc permis de retrouver des villes que j’avais créées il y a plus de 20 ans ! La documentation d’origine est également fournie ; on y trouve en particulier une longue introduction à l’histoire des villes et de l’urbanisme (en anglais), complètement indépendante du jeu et très instructive. Bizarrement alors que j’avais téléchargé la version compilée (.jar) il y a tout juste quelques semaines, je suis incapable de remettre la main dessus dans le Github du projet et je ne peux donc pas vous fournir de lien, c’est ballot.

Pour les réfractaires à Java, il existe aussi une version Javascript et HTML5 de Micropolis jouable en ligne, assez logiquement appelée MicropolisJS. Cette version n’est pas complète mais il ne manque pas grand chose (à première vue, les sons, les scénarios et les statistiques sur la carte), le plus gênant étant l’interface purement textuelle qui demande un certain temps d’adaptation.

Autre projet intéressant qui a éclos sur MicropolisJS : 3D City, une version 3D du jeu qui utilise les même algorithmes pour la simulation et tourne dans n’importe quel navigateur récent grâce à la technologie WebGL. Le projet mérite le coup d’œil même si tout n’est pas terminé là aussi : l’interface utilisateur est basique, il manque beaucoup de fonctionnalités (pas de visualisation des données relatives à la simulation, pas de désastres…) et on aperçoit quelques bugs de temps en temps. Dommage aussi que le jeu ne soit pas pour l’instant compatible avec les sauvegardes de SimCity, un manque hérité de MicropolisJS. Malgré cela, les graphismes en 3D ont un certain charme malgré les contraintes en termes de polygones grâce aux couleurs bien choisies et à l’architecture générale. À vrai dire les bâtiments cubiques et épurés me rappellent un peu certaines versions japonaises de SimCity développées pour les consoles, ce qui n’est pas désagréable. Toujours sympa également : on peut basculer entre différentes ambiances (aube, jour, crépuscule et nuit, plus été ou hiver), une option qui se fait toujours désirer dans Cities: Skylines. L’auteur de 3D City est un Français, Loth, et son site perso est très intéressant à parcourir pour qui s’intéresse à la 3D affichée dans un navigateur. Malgré l’absence de mises à jour récentes, Loth m’a confirmé que le projet était toujours en développement et qu’il avait des updates dans ses cartons. Un projet à suivre de près, donc.

 

 


3 Commentaires

L’animation HTML5/WebGL avec Flash Professional CC 2014 – la méthode officielle !

Flash HTML5 (montage)Il y a 18 mois, j’avais évoqué l’extension Swiffy de Google comme étant une solution efficace pour exporter des animations HTML5 à partir de Flash. Les choses ont un peu évolué depuis : l’extension n’ayant pas été mise à jour, elle n’est plus compatible avec les dernières versions de Flash Pro, et il faut donc garder une vieille version de Flash Pro CS6 sous le coude juste pour pouvoir exporter en HTML5. Peu pratique, sans parler du risque qu’un beau jour, Swiffy finisse par ne plus fonctionner du tout.

Je viens de découvrir la nouvelle version de Flash Pro sortie fin juin (Flash Professional CC 2014, de son petit nom). Adobe s’est apparemment pas mal réveillé et s’est finalement décidé à transformer Flash Pro en un logiciel de création d’animations multiformat : SWF évidemment, mais en y ajoutant un large support du standard HTML5 et un support un peu plus expérimental de WebGL.

Concrètement, lors de la création d’un nouveau projet, on a maintenant le choix entre ActionScript 3 (le format Flash standard), Canvas HTML5 et WebGL. Si on choisit HTML5 ou WebGL, les animations sont ensuite créées nativement dans ces formats, mais avec le workflow et les outils habituels de Flash. Les rares outils qui ne sont pas supportés sont désactivés (par exemple, 3D Rotation Tool pour HTML5 et WebGL, ou toute la partie texte pour WebGL) pour éviter tout problème.

Pour convertir un document Flash existant en HTML5 ou WebGL, il y a deux solutions :

  • soit copier/coller tous les calques du fichier FLA d’origine vers un nouveau document HTML5 Canvas / WebGL
  • soit utiliser les scripts JSFL fournis (Commands > Convert HTML5 Canvas from AS3 document formats ou Commands > Convert WebGL (Preview) Canvas from AS3 document formats).

La conversion semble donner de bons résultats pour des animations pures. Le rendu des éléments textuels est généralement plus problématique : pas d’antialiasing et une seule mise en forme possible par champ. Quelques autres fonctions ne sont pas supportés du tout (Blend mode en overlay, lignes en pointillés, transformations 3D…). Le cas échéant, tout script AS3 est désactivé et devra être converti en Javascript a la main.

Animation SWF

Animation SWF

Animation HTML5 avec Flash Professional CC 2014

Animation HTML5 avec Flash Professional CC 2014

Avec mon exemple habituel, en HTML5 je note juste la perte d’antialiasing sur le masque de l’image du haut, et bizarrement un saut dans l’animation du nuage de poussière (alors que la conversion avec l’ancienne solution Adobe, CreateJS, était nickel). En WebGL, le masque de l’image du haut est complètement absent et le masque de la fumée verte du chaudron est affiché de manière incorrecte par moment. Je ne suis pas en mesure de vous montrer le résultat puisque l’animation a besoin d’un serveur web pour être affiché (intégré à Flash Pro, donc l’animation ne fonctionne plus si l’application est fermée)… « support expérimental », ils avaient prévenu !

Adobe Edge Animate HTML5

A noter aussi qu’Edge Animate, la solution d’animation 100% web d’Adobe que j’avais évoqué à plusieurs reprises par le passé (ici et ici), continue de faire son petit bonhomme de chemin et la version 2014 dispose de fonctionnalités très intéressantes, comme la prise en charge des fichiers vidéo HTML5, l’importation de spritesheets, le copier/coller d’images SVG depuis Illustrator, la mise à l’échelle réactive (responsive), les trajectoires de mouvement (similaires à Flash), etc.


5 Commentaires

Tester des animations Flash sur mobile avec Swiffy et Dropbox

Malgré le désamour souvent bruyamment exprimé pour Flash sur plateformes mobiles, le logiciel reste encore largement utilisé comme outil de création pour de nombreux jeux et applications pour smartphones et tablettes. En effet, il n’existe pas vraiment à l’heure actuelle d’outil dont les possibilités en matière d’animation soient réellement au niveau de Flash Professional.

Lors de la création de contenu pour un jeu mobile, les animations créés avec Flash sont généralement exportées sous forme bitmap en sprite sheets qui sont ensuite affichées par le moteur du jeu selon sa propre tambouille.

Le problème se pose quand un artiste ou animateur veut tester rapidement une animation sur mobile, en particulier pour se faire une idée du résultat sur un petit écran. La lecture du format natif SWF n’étant pas possible sur la grande majorité des smartphones, il n’existe pas vraiment de solution simple. On peut tenter d’exporter l’animation en vidéo ou GIF animé, mais le résultat est généralement médiocre et/ou la lecture sur mobile peut là encore poser problème.

En tâtonnant un peu j’ai réussi à trouver une méthode relativement indolore qui permet de visualiser les animations sur mobile en moins d’une minute :

L'export HTML5 avec Swiffy dans Flash

  • En premier lieu, on va avoir besoin d’un compte Dropbox, avec l’application ad hoc sur le mobile cible (Android, iOS, Blackberry et Kindle Fire sont officiellement supportés).
  • Ensuite, on installera l’extension Flash Swiffy, qui permet de convertir les animations au format HTML5
  • Une fois ces deux étapes réalisées, il suffit d’exporter le contenu Flash en HTML5 via Commands > Export as HTML5 (Swiffy). Swiffy va créer un fichier HTML unique qui contient toutes les données de l’animation, fichier qu’il faudra copier dans le répertoire Dropbox partagé.
  • Il suffit ensuite d’ouvrir ce fichier HTML sur le mobile à l’aide de l’application Dropbox une fois la synchronisation effectuée et d’admirer le résultat.

Animation Flash sur mobile

J’ai pu tester la manipulation sur iOS et Android, et cela fonctionne parfaitement dans les deux cas. La réussite  pour les autres plateformes dépendra surtout de la présence d’un navigateur supportant correctement l’HTML5.

Quelques remarques sur Swiffy : la conversion est généralement fidèle, mais certains effets spéciaux dans Flash (genre filtres ou blending) sont susceptibles de ne pas être exportés correctement, ou du tout. Le framerate est aussi souvent un peu à la rue sur mobile, mais ça ne gène pas outre mesure pour se faire une idée du résultat final.

À noter également que les nested movie clips (les movie clips animés dans des movie clips) posent généralement problème et seront ignorés.  La solution consiste à les afficher comme Graphic dans leurs propriétés (ce qui par contre rend impossible l’utilisation de filtres).


9 Commentaires

Quels logiciels pour l’animation HTML5 ? (3)

J’ai déjà évoqué auparavant les solutions disponibles pour la création d’animations HTML5 comme Adobe Edge Animate, Sencha Animator, Purple, Hype, Radi, A5 HTML5 Animator, Hippo Animator, Mugeda, MotionComposer et même Flash Professional. J’ai récemment pris connaissance de deux nouvelles alternatives sur lesquelles nous allons nous pencher tout de suite :

E-anim (Windows uniquement, version d’essai gratuite, licence à 10 euros) se veut une solution tout-en-un de création et même d’hébergement d’animations. A l’origine utilisant la technologie Flash, il propose également l’export vers l’HTML5 à présent. Avec sa prise en compte de l’interactivité qui permet de réaliser de petits programmes, le logiciel semble très puissant et devrait offrir beaucoup de possibilités à qui saura se plonger dans la documentation et les très nombreux exemples… L’interface n’est en effet pas vraiment intuitive, ou du moins très « personnelle » dans sa manière de faire les choses et de présenter l’information. On note quelques lacunes pour une utilisation purement axée sur l’animation : malgré tous mes efforts je n’ai pas été en mesure de faire boucler une animation (l’option pour cela ne donnant pas l’effet escompté) ni d’ajouter de l’easing aux animations. En outre, il est surprenaent de ne pas pouvoir directement visualiser l’animation dans l’éditeur, mais de devoir chaque fois compiler un SWF qui s’affichera dans une nouvelle fenêtre, avec quelques secondes perdues à la clé. Difficile dans ces conditions de réaliser des animation très léchées.

E-anim

Easy WebContent Presenter (en ligne, gratuit pour l’instant) est quant à lui dans l’esprit de MotionComposer, à savoir plutôt une alternative à PowerPoint (donc orientée « diapo ») qu’un logiciel d’animation classique. On y trouve néanmoins une vraie timeline avec des clés à placer dessus. Comme de plus en plus souvent, il s’agit d’un outil complètement en ligne, utilisable via un navigateur internet et sauvegardant les créations dans le cloud. L’interface est claire et d’apparence très professionnelle. Les fonctionnalités de base sont là, même si on relève quelques manques ou limitations (entre autres : précision limitée au dixième de seconde et impossibilité de dupliquer une clé). Un choix d‘easings assez complet est disponible en double-cliquant sur une clé, malheureusement il faut le faire pour chaque paramètre (coordonnées, dimensions, rotation…), ce qui devient vite fastidieux. J’émettrai les mêmes réserves qu’auparavant au sujet du caractère purement en ligne du logiciel : si cela rend la diffusion des animations plus simple (voir mon animation ici), des problèmes de confidentialité peuvent se poser, et surtout quid du devenir des données en cas de suspension définitive du service ? Il ne semble en effet pas possible de télécharger un fichier d’animation complet, ce qui est plutôt ironique pour un format ouvert comme le HTML5.

Easy WebContent Presenter

Enfin, saluons l’initiative de Hippo Studios qui diffuse gratuitement la version 1.8 de leur logiciel Hippo Animator (Windows uniquement). Le programme est sans fioritures mais permet de réaliser des animations simplement avant éventuellement de passer à la version 2 (dont j’avais parlé auparavant), payante mais aux fonctionnalités beaucoup plus étendues. Des logiciels évoqués dans ce billet, c’est sans conteste le plus homogène et facile à prendre en main.

Hippo Animator 1.8

 

Voir aussi :


10 Commentaires

L’animation HTML5 avec Flash Professional

Les solutions pour la création d’animations en HTML5 peuvent être classées en deux catégories :

  • Le recours à un logiciel spécifique pour la réalisation d’animations directement au format HTML.
  • L’utilisation de Flash Professional pour la création du contenu, lequel  sera ensuite exporté en HTML en lieu et place du traditionnel SWF.

J’ai couvert la plupart des solutions disponibles dans la première catégorie (Adobe Edge, Tumult Hype, Hippo Animator…) lors de précédents billets ici et ici.

Dans la deuxième catégorie on trouve entre autres Swiffy de Google et Toolkit for CreateJS, la solution officielle d’Adobe. Swiffy (plus de détails ici) est une extension gratuite qui après installation est accessible dans le menu Commands de Flash. Toolkit for CreateJS  (plus de détails ici) , gratuit également, dispose lui de sa propre fenêtre, située dans Windows > Other > Toolkit for CreateJS.

J’ai testé les deux extensions avec une petite animation constituée d’éléments du défunt Country Story (© Playfish/EA) que j’avais réalisés il y a quelques années. Cliquez sur les images ci-dessous pour voir l’animation d’origine en SWF, celle en HTML convertie par Swiffy (Commands > Export as HTML5 (Swiffy)), et celle en HTML convertie par Toolkit for CreateJS (Windows > Other > Toolkit for CreateJS > Publish).

Animation SWF

Animation HTML5 par Swiffy

Animation HTML5 par Swiffy

Animation HTML5 par Toolkit for CreateJS

Animation HTML5 par Toolkit for CreateJS

La conversion semble fonctionner de manière satisfaisante dans les deux cas puisque le résultat est très proche de l’animation d’origine. On note juste l’absence d’anti-aliasing sur le masque sur l’image d’en haut et peut-être une vitesse un peu inférieure à celle du SWF.

Un des gros travers d’HTML5 est les soucis de compatibilité, et c’est malheureusement confirmé par ce petit test. L’animation créée par Toolkit for CreateJS s’affiche de manière incorrecte et extrêmement lente sur l’un des deux PC, pourtant avec la même version de Chrome, sur lesquels je l’ai testée. Sur iPad, les deux animations passent correctement avec Chrome et Safari, même si le framerate est poussif dans tous les cas (léger avantage pour Toolkit néanmoins).  À noter également que Toolkit semble convertir les objets vectoriels en bitmaps, quand Swiffy les laisse tel quels.

La taille des fichiers est aussi largement supérieure à la solution Flash, puisque les animations HTML5 pèsent entre 100 et 120 ko contre 24 ko pour le SWF.

Malgré les petits soucis de compatibilité et l’inflation de la taille des fichiers, la création d’animation HTML5 avec Flash reste une solution très prometteuse puisqu’elle présente le gros avantage de pouvoir conserver un outil et une pipeline qui ont fait leurs preuves et qui sont maîtrisés par de nombreux infographistes et animateurs.


11 Commentaires

Quels logiciels pour l’animation HTML5 ? (2)

J’avais l’an dernier recensé les solutions disponibles pour l’animation HTML5 plutôt orientée jeu et dans un esprit assez proche de ce que propose Flash (timeline, clés, tweening…).

HTML5 a depuis continué son développement et 2012 a vu l’apparition de nouveaux outils conçus spécifiquement pour l’animation HTML5. Premier constat, la plupart des solutions nouvelles sont le fruit de petites structures qui voient une opportunité à saisir dans le décollage d’un nouveau standard et la redistribution des cartes à venir si Adobe n’arrive pas cette fois à s’imposer. Deuxième constat, si la première vague d’outils ciblait le marché MacOS en priorité voire en exclusivité, tous les nouveaux entrants de cette année proposent une version Windows de leur logiciel. La preuve peut-être que la technologie devient réellement grand public et n’est plus principalement motivée par une réaction plus ou moins épidermique de l’écosystème Mac vis à vis de Flash.

  • A5 HTML5 Animator (Windows uniquement, version d’évaluation gratuite pour 10 jours, puis licence à 120 euros) : A5 HTML5 Animator est une nouveauté développée par les allemands de Soft Evolution et éditée par Data Becker (version francaise ici), distributeur du célèbre (et controversé)  DemoMaker au début des années 90. Le logiciel fait bonne impression pour une première version. L’interface est claire et d’apparence très professionnelle, mais un peu lente par moment. Les fonctionnalités de base sont là et permettent de réaliser des animations rapidement. Malheureusement on regrette quelques absences importantes, comme le contrôle précis des pivots ou de l’easing. L’impossibilité de copier/coller des clés est également pénalisante, tout comme le nombre d’images par seconde bloqué à 10 qui rend difficile la création d’animations précises. Plus d’informations et tutoriels ici.

A5 HTML5 Animator

  • Hippo Animator 2 (Windows et bêta pour Mac, version d’évaluation gratuite pour 30 jours, puis licence aux alentours de 40 euros) : Les développeurs britanniques de Hippo Studios proposent une solution abordable, compacte et tout en un pour l’animation HTML5. L’interface est facile d’accès mais manque un peu de fignolage comparée aux poids lourds du genre, comme Edge. Par contre, les outils d’animation sont complets et les animations s’affichent très fidèlement dans la plupart des navigateurs, IE6 y compris ! Surtout, Hippo Animator est à ma connaissance le seul outil qui permette d’importer des dessins vectoriels (ici au format SVG) et de les animer librement (redimensionnement avec ratio longueur/largeur variable) comme dans Flash. On trouve même aussi des outils de dessin vectoriel, mais encore très basiques comparés à Illustrator ou Inkscape. On appréciera les mises à jour très fréquentes, un peu moins le contrôle basique de l’easing (pas de ease in et ease out combiné pour l’instant) et la traduction française plus que bancale.

Hippo Animator

  • Mugeda (en ligne, preview gratuite pour l’instant) : Mugeda est quant à lui proposé par une start-up chinoise et se distingue par le fait qu’il s’agit d’une application purement en ligne. L’interface est très inspirée par celle de Flash (dont des raccourcis clavier identiques !) ce qui permet de trouver ses marques immédiatement. Mugeda se présente comme un logiciel purement d’animation et cette spécialisation lui permet d’offrir des fonctionnalités poussées dans ce domaine, avec une bonne gestion des clés et des pivots. Néanmoins, autant l’aspect « cloud » de Google Docs offre des avantages évidents, autant pour un logiciel de graphisme, le manque de réactivité et de flexibilité par rapport à un outil natif peut être un handicap. Le risque d’interruption ou de cessation du service n’est pas à négliger non plus, surtout si celui-ci provient d’une start-up, sans parler du danger en matière de propriété intellectuelle. De plus, dans sa version preview actuelle, Mugeda ne semble pas permettre d’exporter en HTML5 et les animations restent donc « prisonnières » du site web de la société. Difficile donc de le conseiller pour une utilisation intensive pour l’instant. Plus d’information et exemples ici.

Mugeda

  • MotionComposer (Windows et Mac, version de d’évaluation gratuite mais limitée, et licence à 109 euros) : Les Montpelliérains d’Aquafadas proposent une alternative un peu à part puisqu’il s’agit plutôt d’un éditeur de diaporama très complet plutôt que d’un logiciel d’animation classique. En rusant un peu, on peut réaliser des animations relativement riches mais l’utilisation du concept de diapo (comme dans Powerpoint) plutôt que de timeline pour représenter les différentes étapes de l’animation rend les choses rapidement compliquées (impossibilité d’observer chaque image de l’animation ou de copier des clés, par exemple), même si quelques fonctionnalités permettent de contourner certaines limitations. On note néanmoins un large choix d’easings et un bon contrôle des paramètres de chaque élément (alignement, dimensions, pivot). L’interface est aussi de bonne aloi, même s’il est un peu étrange qu’elle tourne en partie sous Flash. La version de démonstration ne permet pas l’export vers l’HTML, il n’est donc pas possible de juger du résultat final.

MotionComposer

  • Adobe Edge (Windows et Mac, gratuit), testé l’an dernier, a bien évolué, ce qui justifie de s’y pencher une nouvelle fois. Il est en effet passé en version 1.0 et a été séparé en deux (la partie animation se nomme maintenant Edge Animate). Les outils d’animation offrent à présent  les fonctionnalités de loin les plus complètes, en particulier le choix d’easings est sans concurrence pour l’instant. L’interface est bien pensée et très réactive mais reste complexe, ce qui fait qu’à l’usage le logiciel paraît beaucoup plus technique que Flash, par exemple. La bonne surprise, c’est qu’il est toujours disponible gratuitement et nécessite uniquement de s’inscrire au service Adobe Creative Cloud.

Edge Animate

Enfin, une alternative radicale pour la réalisation d’animations HTML5 est de conserver Flash comme outil de création et d’utiliser HTML5 uniquement pour la lecture des animations SWF. Plusieurs solutions existent, comme CreateJS (supporté par Adobe), LWF (Lightweight SWF) par GREE, ou Shumway. Le sujet est assez complexe et justifierait un article dédié, donc je ne m’attarderai pas dessus aujourd’hui.

Voir aussi :


4 Commentaires

Les meilleurs jeux HTML5

Avec l’attention grandissante qui se porte sur le standard, la qualité des jeux HTML5 évolue extrêmement rapidement et laisse augurer du meilleur pour le reste de cette année. Voici un petit tour d’horizon des jeux récents les plus impressionnants.

  • Bejeweled

On ne présente plus le titre phare de PopCap, et cette version HTML5 à la jouabilité parfaite est à la hauteur de sa réputation. On remarque même des effets type demoscene lors des changements de niveaux !

Jouer à Bejewled


  • Cut The Rope

Version HTML5 du hit de ZeptoLab sur iOS et Android. Réalisé initiallement pour démontrer les capacités HTML5 de la nouvelle version d’Internet Explorer, le jeu marche également parfaitement avec Chrome.

Jouer à Cut The Rope

 

  • Fieldrunners

Version d’essai du hit mobile. Les performances sont au rendez-vous malgré l’affichage de dizaines d’unités parfois et le jeu toujours aussi fun !

Jouer à Fieldrunners

 

  • Emberwind

Jeu de plateforme avec des visuels de haut niveau même si on note quelques incohérences par endroits et un rendu un peu flou. Le jeu utilise WebGL pour accélerer les performances et est soutenu par les norvégiens d’Opera Software (mais fonctionne également avec d’autres navigateurs récents).

Jouer à Emberwind

 

  • Command and Conquer

Une petite curiosité pour finir : un début de portage officieux du célèbre RTS d’EA. Seulement un niveau très simple est jouable pour l’instant, mais le résultat est déjà intéressant.

Jouer à Command and Conquer

 

À la lumière des ces dernières sorties, on arrive de toute évidence à un point où HTML5 devient un support crédible pour le jeu casual en ligne. Les performances sont là, du moins sur PC (la situation est peut-être moins claire sur mobile ou tablette). Le problème reste le rendu aléatoire des jeux sur des navigateurs un tant soit peu anciens, mais ceci devrait naturellement se résorber avec le temps.


21 Commentaires

Quels logiciels pour l’animation HTML5 ? (1)

Avec Google, Microsoft, Facebook, Amazon et évidemment Apple en partisans affichés, tout indique qu’HTML5 va jouer à l’avenir un rôle prépondérant pour le web (thanks, Captain Obvious). Même si son impact sur le secteur du jeu vidéo dépendra de ses performances et surtout de la minimisation des problèmes de compatibilité entre navigateurs, certains titres démontrent déjà les capacités ludiques d’HTML5, comme Warimals, BioLab Disaster ou Pirates Love Daisies.

La promesse d’HTML5 est à la fois très simple et très ambitieuse : permettre la création d’applications en ligne réellement universelles, compatibles aussi bien avec un iPhone qu’une tablette Android, un netbook Linux ou un PC Windows. En pratique, les choses s’avèrent complexes à mettre en œuvre, mais on peut espérer des progrès à mesure que la technologie gagnera en maturité. À terme je pense que Flash sera privilégié pour les jeux plus complexes, en 3D notamment, et HTML5 pour les titres visuellement plus simples mais qui pourront toucher un public plus large.

En matière de création graphique, même si la suprématie actuelle de Flash pour le contenu « riche » sur le web sera de plus en plus contestée, la flexibilité et l’étendue des ses outils d’animation ne sera pas facile à remplacer. En attendant un hypothétique export de Flash vers HTML5, quels outils sont disponibles aujourd’hui pour réaliser des animations HTML5 ? Je n’ai pris en compte que les logiciels au concept proche de celui de Flash (keyframes placées sur une timebar, avec interpolation pour les frames intermédiaires). Voici une liste non exhaustive de l’offre proposée aujourd’hui sur le marché :

  • Adobe Edge (Mac/Windows, preview gratuite) : Adobe a été long à réagir, probablement tiraillé entre la crainte de faire du tort à Flash et celle de rater le coche de l’HTML5. Edge est néanmoins en train d’être finalisé (la preview 3 est sortie en septembre) et devrait être le pendant HTML5 de Flash.

    Adobe Edge

  • Sencha Animator (Mac/Windows, 140 €) : Sencha est une société dédiée aux applications web et elle propose une solution pour l’animation HTML5 et au delà, la création d’applications complètes.

    Sencha Animator

  • Purple (Mac, 16 €) : La petite société allemande Purple propose un logiciel qui semble intuitif et doté de bonnes idées comme l’import natif d’images au format PSD.

    Purple (source image : purpleanimator.com)

  • Hype (Mac, 21 €) : Hype fut l’un des premiers entrants sur le marché, et il paraît logiquement être l’un des plus aboutis à l’heure actuelle.

    Hype (source image : tumultco.com)

  • Radi (Mac, bêta gratuite) : En plus de l’aspect animation, Radi se présente également comme une solution complète pour la création de graphisme vectoriel.

    Radi (source image : radiapp.com)

A voir aussi :