Le contexte
MyDragonEggs est un jeu d'élevage et de combat de dragons, en développement. Un jeu se vend d'abord sur son ambiance et ensuite seulement sur ses mécaniques. Une page de présentation classique avec quelques captures et un paragraphe de description ne transmet aucune ambiance.
Le problème
Un jeu en développement avait besoin d'une vitrine capable de faire entrer le visiteur dans son univers avant même d'y jouer. Une simple page de présentation avec quelques captures n'aurait rien transmis de l'ambiance.
Un second problème, moins visible : les actualités du jeu devaient exister à deux endroits, dans le client et sur le site. Publier deux fois la même chose finit toujours par produire deux versions différentes, l'une des deux étant oubliée en chemin.
La solution
Page unique construite autour du défilement : l'ecran reste fige pendant qu'une découpe en forme d'œuf s'ouvre pour reveler chaque étape du récit. Effets 3D en Three.js pour les oiseaux et la brume, le tout en PHP sans framework. Les actualités affichées viennent de la même API que celle lue par le client du jeu, publiées une seule fois.
Le défilement comme fil narratif
L'écran reste figé pendant qu'une découpe en forme d'œuf s'ouvre pour révéler l'étape suivante du récit. Le visiteur avance dans l'histoire au rythme de sa molette, sans jamais changer de page. La difficulté était de rendre ce mouvement lisible à toutes les vitesses de défilement.
De la 3D volontairement légère
Les oiseaux et la brume sont rendus en Three.js. Ces éléments ont été gardés simples à dessein : ils servent l'atmosphère et ne doivent pas peser sur le chargement d'une page destinée à être partagée sur les réseaux, souvent ouverte depuis un téléphone en connexion moyenne.
Une seule source pour les actualités
Le site lit la même API que le client du jeu. Une actualité publiée une fois apparaît aux deux endroits, avec le même texte et la même date. C'est le genre de raccordement qui ne se voit pas mais qui économise des heures de recopie et supprime une source d'erreurs.
Technologies
Le résultat
Une vitrine qui raconte l'univers au lieu de le décrire, et une seule source pour les actualités du site et du jeu.
- Un univers présenté par l'expérience plutôt que par la description
- Actualités publiées une seule fois pour le site et pour le jeu
- Aucun framework, le tout en PHP et JavaScript
Questions fréquentes
Une animation au défilement pénalise-t-elle le référencement ?
Pas si le texte existe dans la page dès son chargement. Ici les contenus sont produits en PHP côté serveur et l'animation ne fait que gérer leur apparition. Le problème vient des sites où le texte n'existe qu'une fois le JavaScript exécuté.
Peut-on brancher un site sur une application existante ?
Oui, dès lors que l'application expose une API ou une base accessible. C'est ce qui a été fait ici avec les actualités du jeu, et le même principe s'applique à un logiciel de gestion, un stock ou un agenda de réservation.