Auteur
Karim Maaloul
Date
05.03.2024
Temps de lecture
6 min
Catégories

Récompensez vos futurs clients avec un jeu

Lorsqu’un client potentiel vous envoie une demande par e-mail, c’est toujours une bonne pratique de lui remettre un feedback (fondamentalement, un message de confirmation) qui l’informe des prochaines étapes : quand peut-il s’attendre à une réponse de votre part, avec qui sera-t-il être en contact, que peut-il faire pour préparer sa rencontre avec vous ?

En faisant cela, vous lui faites savoir que vous êtes une entreprise préoccupée et attentive à sa demande ! Vous pouvez anticiper ses questions et lui donner un plan des prochaines étapes.

Mais… que faire s’il n’y a pas plus d’infos à lui donner qu’un « merci, nous vous répondrons bientôt » ?

Eh bien, nous avons réfléchi… Qui n’aime pas les lapins (Réponse: les sociopathes) ? Et qui n’aime pas le patin à glace (Réponse: En fait, pas mal de gens… mais soyez solidaires avec nous).

Voici notre idée : pourquoi ne pas récompenser nos visiteurs avec le plus mignon des jeux de patin à glace lapin qu’ils n’aient jamais vu ?
De la sorte, juste après nous avoir envoyé un formulaire de contact, ils passeront des heures (voir des jours, ou des semaines,…) à essayer de nourrir un lapin affamé et à le faire sauter sur la page.

C’est précisément ce que nous avons fait sur notre page « merci de nous avoir contacté ».

Less is more

Le jeu devait être léger, rapide, addictif et amusant. Nous voulions donc que le design du personnage soit très simple :

Des formes basiques empilées les unes sur les autres, ressemblant plus ou moins à un lapin (mignon) que vous voudriez caresser.
Des couleurs aussi simples que la glace sur laquelle le lapin patinerait (bleu, blanc, rouge).

Le gameplay devait être aussi simple que le design.
Nous avons donc conclu que bouger la souris et cliquer étaient le maximum d’actions que nous pouvions espérer d’un utilisateur lambda qui n’avait pas demandé à jouer à un jeu (initialement).

La mécanique du jeu

Donc, vous êtes un dompteur de lapins renommé (un peu comme Crocodile Dundee et les alligators… ou comme Chris Pratt et les vélociraptors… mais juste avec des lapins tout doux), utilisant votre souris ou votre doigt pour agir sur la vitesse radiale, la direction et l’amplitude de votre lapin.

Votre lapin est un fervent patineur sur glace. C’est tout ce qu’il aime et c’est tout ce qu’il fait.

De temps en temps, un événement incroyable se produit : une carotte juteuse, orange et croquante surgit de la glace ! En tant que gardien d’animaux attentionné, vous souhaitez récompenser votre lapin pour ses compétences en patinage, et l’aidez à trouver le chemin le plus facile vers son déjeuner.

Pour l’aider à attraper la carotte, vous devrez également le faire sauter en cliquant ou en tapant sur l’écran.

On ne va pas vous mentir : c’est la fin du concept !

Mais nous vous assurons que vous apprécierez regarder votre ami faire des figures de patinage spectaculaires dans les airs juste pour attraper une autre carotte (il n’en a jamais assez).

Défis techniques

Bien que le jeu soit probablement l’un des plus simples au monde, il s’est rapidement révélé très addictif grâce à ses contrôles surprenants pour le joueur, sa capacité à dessiner des rayures sur le sol et son esthétique extrêmement simple.

L’effet « élastique »

C’est la fonctionnalité centrale du jeu et ce qui le rend si satisfaisant à jouer.

En déplaçant la souris, l’utilisateur donne de l’élan, de la vitesse et une direction au lapin. Presque comme si le lapin était lié à votre pointeur de souris par un élastique. Voici une démonstration très simple de l’effet :

See the Pen
Elastic player control by Karim Maaloul (@Yakudoo)
on CodePen.

Cela se produit grâce à une formule magique très complexe qui, en termes humains, se traduirait comme suit :

Calculer la distance qui sépare le lapin de votre doigt (ou du curseur de la souris) ;
Définir l’accélération du lapin comme une fraction de cette distance ;
Ajouter cette accélération à la vitesse actuelle du lapin ;
Appliquer une petite résistance à la vitesse ;
Ajouter la nouvelle vitesse à la position actuelle du lapin ;

// Calculate the distance to the mouse
let distanceX = this.targetHeroAbsMousePos.x - this.hero.position.x;
let distanceY = this.targetHeroAbsMousePos.y - this.hero.position.z;

// Set the acceleration to a fraction of that distance
let accelerationX = distanceX * this.deltaTime * 0.5;
let accelerationY = distanceY * this.deltaTime * 0.5;

// Increase the speed by that acceleration
speed.x += accelerationX;
speed.y += accelerationY;

// Apply a small resistance
speed.x *= Math.pow(this.deltaTime, 0.005);
speed.y *= Math.pow(this.deltaTime, 0.005);

// Update the position of the character
this.hero.position.x += speed.x;
this.hero.position.z += speed.y;

C’est tout… maintenant, à tout moment, le lapin accélère vers votre doigt, ce qui lui fait parfois dépasser la position cible et progressivement inverser sa direction. Il finit alors par dessiner des cercles sur le sol jusqu’à ce qu’il atteigne la position de votre doigt, réclamant alors des câlins et des gratouilles.

En parlant de dessiner des cercles

Le jeu est réalisé en utilisant Three.js, une bibliothèque WebGL qui facilite la création de jeux et d’expériences en 3D. Mais pour quelques effets visuels spécifiques, nous devons parfois plonger dans les shaders, qui sont des programmes extrêmement rapides et efficaces. Malheureusement, aussi impressionnants qu’ils soient pour calculer des effets graphiques, ces programmes sont totalement imprévisibles lorsqu’il s’agit de suivre le progrès d’un dessin qu’ils viennent de réaliser. Les shaders n’ont littéralement aucune mémoire.

Cela est devenu un problème car nous voulions absolument afficher les traces de patinage sur le sol où évoluait le lapin. Ainsi, pour dessiner progressivement des cercles sur le sol, nous avons utilisé une astuce : une technique appelée Frame Buffer (FBO) qui consiste à utiliser 2 textures qui sont continuellement et tour à tour mises à jour :

Une texture est utilisée pour alimenter le shader avec la dernière version du dessin (entrée) ;
L’autre pour dessiner le nouveau résultat (sortie).

À chaque étape, les deux textures échangent de rôles : la texture contenant le dernier résultat devient les données d’entrée, et celle précédemment utilisée comme entrée est effacée pour devenir un canevas de sortie « propre ».

L’échange des textures de cette manière permet de suivre le dessin en cours.

Vous êtes-vous perdus dans notre explication de cette formule magique ? Nous ne sommes peut-être pas les meilleurs enseignants, alors voici une démo cliquable montrant comment il se comporte. Voyez-vous comment le dessin s’estompe et s’efface progressivement ?

See the Pen
Ink and Water simulation by Karim Maaloul (@Yakudoo)
on CodePen.

Sol réfléchissant

Three.js avait déjà un exemple clair d’un objet réflecteur, donc nous avons décidé d’être malins (qui a dit « paresseux » ?) et de l’utiliser. Cela nous a donné plus de temps pour le rendu des carottes !

Voici une démo rapide du réflecteur :

See the Pen
Simple Reflector by Karim Maaloul (@Yakudoo)
on CodePen.

Il agit simplement (bien que ce ne soit pas si simple en réalité) comme un miroir. Il utilise une caméra virtuelle qui capture la scène et la reproduit symétriquement en miroir sur la surface.

Mais disons que nous devons déplacer, estomper et ajouter des ombres au sol. Nous devons modifier le matériau créé par le réflecteur tout en conservant toutes les fonctionnalités sophistiquées (dans ce cas, la texture réfléchie) qu’il nous a apportées initialement.

Le codepen suivant montre le réflecteur modifié, combinant la texture originale avec un certain flou, un déplacement et des ombres.
(Jetez un œil à la façon dont nous avons modifié le réflecteur dans l’onglet js, et les shaders modifiés dans l’onglet html).

See the Pen
Blurred reflector by Karim Maaloul (@Yakudoo)
on CodePen.

Emballer le tout

Une fois que tout était prêt, nous appliqué tous les effets avec quelques variations supplémentaires pour obtenir le look et la sensation désirés. Voici une démo complète du jeu :

See the Pen
Skating bunny by Karim Maaloul (@Yakudoo)
on CodePen.

Nous avons fini par obtenir un jeu visuellement agréable et simple à jouer. Il est addictif mais relaxant et surtout, nous récompensons nos visiteurs avec un moment de plaisir avant de quitter notre site web.

ET… vous n’avez pas besoin de nous envoyer un message pour jouer au jeu, il vous suffit d’aller ici et de nourrir ce lapin avec un peu de vitamine B.
Cela peut sembler être une fonctionnalité inutile de notre site web, ou une perte de temps et de ressources…mais croyez-nous, ce n’est pas le cas! C’est devenu un solide atout de conversion, attirant les prospects à la recherche du « petit plus » directement vers nos commerciaux… tout cela grâce à un lapin mignon 🙂

Article suivant

Airdrop