De la pédagogie des mini-jeux

Vous souhaitez faire passer un message dans un contexte ludique ? Vous voulez vulgariser sans vous lancer dans des explications jargonneuses ou trop simplistes ? Alors les tutogames sont pour vous. Bon en fait j’avoue avoir inventé ce nom en contractant “tutoriel” et “advergames“. Parce que c’est bien de cela dont nous sommes en train de parler : des petits jeux très simples d’accès dont le but n’est pas de faire de la publicité mais d’expliquer.

Illustration avec le mini-site M2M de chez Orange. L’objectif de ce site est d’expliquer de façon ludique les concepts de communication “Machine-to-Machine” au travers de petits dossiers animés sur des applications concrètes (environnement, transport, logistique…).

Le mini-site M2M de chez Orange

Le mini-site M2M de chez Orange

Différents contenus et mini-jeux sont ainsi proposés pour illustrer des domaines d’application. Ici la gestion de flotte “intelligente” avec une simulation de taxis (il faut gérer les priorités et minimiser les A/R) :

La simulation de taxis chez Orange M2M

La simulation de taxis chez Orange M2M

Là un mini-jeux qui concerne les systèmes de prévention des pannes avec ce réparateur de chaudières :

Le mini-jeux de réparation de chaudières chez Orange M2M

Le mini-jeux de réparation de chaudières chez Orange M2M

La prise en main des jeux est immédiate, la réalisation soignée (qui tourne autour de la couleur orange), les transitions impeccables… bref, c’est du bon boulot.

Si vous avez d’autres exemples, n’hésitez pas à les signaler dans les commentaires.

Et on reparle des univers virtuels en 3D avec Flash

J’ai comme l’impression que les projets d’univers virtuels 3D en Flash sont les candidats idéals pour un sujet “pommier” (qui revient régulièrement, comme les feuilles des pommiers). Bref, tout ça pour dire que j’ai récemment découvert deux expérimentations très intéressantes d’univers vrituels en 3D qui e jouent dans le browser (donc sans nouveau plug-in).

Il y a tout d’abord Yogurt3D, un framework de jeu en ligne dont le rendu 3D est assuré par SwiftGL (un moteur 3D compatible avec OpenGL). La démo est très impressionnante et mérite le long temps de chargement. Pour la démo, c’est ici : Yogurt3D Demo.

Le moteur 3D de Yogurt3D

Le moteur 3D de Yogurt3D

Il y a ensuite Massiva3D, un MMORPG qui vient de rentrer en phase beta et qui repose sur la très efficace librairie Away3D. Pas de démo disponible pour le moment mais l’accent est visiblement mit sur les fonctions de communication in-game. La démo est ici : Massiva3D Demo.

Le moteur 3D de Massiva3D

Le moteur 3D de Massiva3D

Il y a enfin des tentatives de FPS comme les très bon Andagel réalisé avec Sandy 3D : Andagel an amazing 3D sci-fi game developed with Sandy3D.

Andagel, un FPS en Flash

Andagel, un FPS en Flash

Sinon nous sommes toujours en attente de projets en gestation comme Coobico ou IdentiFiction :

Premiers écrans de Coobico

Premiers écrans de Coobico

Le très attendu IdentiFiction

Le très attendu IdentiFiction

Tout ceci est vraiment très encourageant mais j’anticipe une nette évolution avec PapervisionX, la prochaine version de Papervision3D qui est en cours de réécriture pour mieux exploiter les fonctions 3D natives de Flash 10. Vivement la suite…

(via Hebiflux et Hebiflux)

Est-ce la mode du Cover Flow ?

Connaissez-vous le Cover Flow ? Mais si enfin, c’est ce mode de visualisation et de navigation de pochettes d’albums dans iTunes (originellement inventé par l’artiste Andrew Coulter Enrightpuis adpaté par un développeur indépendant et finalement racheté par Apple en 2006). Bref, Voilà maintenant plus de deux ans qu’Apple a sorti son iPhone et son fameux mode de visualisation Coverflow. Une représentation qui visiblement plaît beaucoup puisqu’on le retrouve également dans le Finder du Mac OS X.

Le cover flow dans iTunes

Le cover flow dans iTunes

Vous devinez la suite : comme à chaque fois Apple est copié et l’on retrouve donc tout une série de composants permettant de faire de la navigation en mode Cover Flow.

Avec Flash (Flash iTunes Cover Flow – Version 2) :

Le Cover Flow avec Flash

Le Cover Flow avec Flash

Avec Flex (CoverFlow Flex Component) :

Le Cover Flow avec Flex

Le Cover Flow avec Flex

avec Silverlight (CoverFlow built using Silverlight 3’s Projection feature) :

Le Cover Flow avec Silverlight

Le Cover Flow avec Silverlight

Avec Ajax (AJAX Image Gallery powered by Slideflow – like Cover Flow) :

Le Cover Flow avec Ajax

Le Cover Flow avec Ajax

Il ne manque plus qu’une version JavaFX pour que le tableau soit complet (ha non mince il manquera toujours une version Curl).

Autant je suis séduis par cette modalité d’interaction sur mon iPhone car c’est ludique de faire défiler les pochettes d’albums avec son doigt, autant transposé sur le web (ou à l’écran) ce mode de visualisation ne rime plus à rien. Le problème vient de la manipulation : avec un écran tactile c’est intuitif mais avec une souris ou un clavier ça n’a plus aucun intérêt.

N’est pas Apple qui veut, je préfère ainsi un carrousel bien réalisé plutôt qu’un Cover Flow pas inspiré. Et vous ?

La navigation Web façon Iphone, une nouvelle tendance ?

Je viens tout juste de prendre connaissance que la marque danoise de vêtements Red Issue vient de remporter un Webby award pour avoir pensée à un mode de navigation qui s’inspire de l’Iphone.

Pour naviguer sur l’interface en Flash, il faut dessiner une flèche, un rond ou encore un M.

Flèche = Image suivante ou précédente.
Rond = Zoom.
M = Menu.

Sur le plan de l’expérience utilisateur, je trouve cette exploration très intéressante. Ce type de navigation qui déclenche des actions grâce à la reconnaissance des dessins a aussi été utilisé ailleurs. Prenons par exemple l’interface du jeu  Straw Hat Samourai et  Toshiba .

Straw Hat Samourai

Grâce à la reconnaissance de forme, nous évitons les clics de souris et le clavier.

Toshiba

Pour déclencher des actions, il faut dessiner des formes. L’interface reste toutefois très lourde à charger ce qui ralentit le tracé de la souris.

Rencontrerons-nous de nouvelles interfaces Web qui détecteront la reconnaissance de forme dans les prochains mois ?

Qu’en pensez-vous ?

Source : Arnaudmeunier et Herbiflux

P.S. Je vous invite aussi à consulter l’article Immersion tactile pour Metal Gear Solid Touch sur Richcommerce.fr

Vidéo, Papervision et moteur physique pour le NASCAR sur ESPN

J’ai déjà eu l’occasion de vous parler de Papervision3D, de même que des moteurs physiques Flash, ainsi que de différentes techniques de manipulation vidéo… mais jamais des trois en même temps !

C’est ESPN, la chaîne US dédiée au sport, qui m’en donne l’occasion avec le NASCAR Results Simulator. Il s’agit d’une application en ligne permettant de simuler les résultats de la prochaine course et de participer à un concours du meilleur pronostiqueur :

Le NASCAR Results Simulator de ESPN

Le NASCAR Results Simulator de ESPN

En bon fans de RAI que vous êtes vous apprécierez cette grille en 3D temps réel (animée par la librairie Papervision3D) où il est possible de positionner les pilotes. Là où ça devient intéressant, c’est que les pilotes sont animés grâce à de la vidéo (ils bougent, font des signes de la main, parlent et s’étirent) et ils répondent aux lois de la physiques (lorsque vous les déplacez, leurs jambes et bras pendent dans le vide).

Plus impressionnant, il y a un très bel effet de profondeur de champ car les pilotes déposés en fond de grille sont plus petits :

La profondeur de champ en action sur le NASCAR Results Simulator

La profondeur de champ en action sur le NASCAR Results Simulator

Rajoutez à cela une sonorisation soignée (on entend les commentaires et les bruits de voitures en fond sonore) et vous avez une interface riche très ludique et surtout parfaitement réalisée.

(via Blitz)

L’immersion, élément clé dans l’expérience de jeu en ligne

Dans le milieu des portails de casual gaming, il y a les acteurs historiques (Pogo, Cafe, PopGames, BigFish…) qui proposent des interfaces très classiques (façon portail en fait) et il y a les nouveaux entrants qui tentent de changer la donne en proposant une expérience différenciante au travers de leur interface.

Il y a tout d’abord Doof (dont j’ai déjà parlé ici : Social Networks + Casual Games = Social Games) qui propose une interface Flex très proche d’un Web OS avec des fenêtres, un menu sur le côté et un fond d’écran personnalisable (ils en sont à la V.3 mais je trouvais la tout première version nettement plus intéressante) :

La page d'accueil "Classic" de Doof

La page d'accueil "Classic" de Doof

Et il y a surtout OMGPOP (anciennement ImInLikeWithYou). La particularité de ce service est qu’il propose un nombre très restreint de jeux en ligne mais qui sont exclusivement multi-joueurs. Ce parti-pris est traduit au niveau de l’interface par une expérience très immersive :

La page d'accueil d'OMGPOP

La page d'accueil d'OMGPOP

Dans le détail l’interface est composée d’une barre de navigation en haut de l’écran, d’une social bar en bas de l’écran et de fenêtres réparties en deux colonnes. A priori rien de révolutionnaire et pourtant l’attention toute particulière portée aux événements et aux sons procure une étonnante sensation d’immersion :

Les alertes de bas de page d'OMGPOP

Les alertes de bas de page d'OMGPOP

Des alertes apparaissent ainsi en bas de l’écran en émettant un petit ‘bling’, de nombreux feedbacks visuels s’animent au survol de la souris sur les différents éléments de l’écran… Bref, il y a une vie dans cette interface qui participe à focaliser l’attention de l’internaute (du joueur ?) ou plutôt qui l’empêche de se disperser (en écoutant de la musique ou en surveillant la télé du coin de l’oeil).

Il y a aussi l’expérience unique que l’on ressent lors d’une partie de ‘Draw My Thing‘ (dessiner c’est gagné) lorsque plusieurs joueurs s’affrontent où jouent ensemble : une fenêtre à droite de l’écran permet de tchater, des info-bulles apparaissent un peu partout avec de petits sons (en plus des sons du jeu en lui-même) et il y a bien sûr le chronomètre qui est là pour donner du rythme aux parties :

L'interface du jeu Draw My Thing

L'interface du jeu Draw My Thing

Ici un jeu plus ‘arcade’ avec Ball Racer :

L'interface du jeu Ball Racer

L'interface du jeu Ball Racer

Il y a également une couche sociale très développée avec des profils, groupes et tchats qui respectent la même philosophie au niveau de la mise en page :

Une page profil dans OMGPOP

Une page profil dans OMGPOP

Bref, si vous ne connaissez pas, je vous recommande fortement d’essayer OMGPOP pou vivre une expérience unique (je n’ai pas trouvé d’équivalent sur le web… peut-être chez CasualCollective mais ça se limite aux jeux).
-

Et puisque l’on parle de casual games, connaissez-vous SilverArcade ? Il s’agit du premier portail de casual gaming réalisé en Silverlight. L’expérience est assez similaire à ce que l’on peut trouver chez les homologues en Flash mais c’est suffisamment rare pour le signaler. Mention spéciale à Construction, un jeu de… construction avec un moteur physique très performant :

Le jeu Construction sur SilverArcade

Le jeu Construction sur SilverArcade

(via Clauer)