Comment concevoir un bon tutoriel avec un exemple concret : Threes!

Comment concevoir un bon tutoriel avec un exemple concret : Threes!

Faire un bon tutoriel est indispensable lorsqu’on développe un jeu vidéo. Un jeu incompréhensible ou mal expliqué sera frustrant et gâchera l’expérience de jeu. Si le gameplay du jeu est original ou peu répandu, il va falloir être encore plus minutieux dans l’élaboration de celui-ci.

Un joueur sur smartphone est encore moins patient qu’un joueur PC ou console

Pour des jeux gratuits, le rythme du tutoriel est encore plus crucial étant donné que le joueur n’a pas d’implication forte. Il n’a rien déboursé à part son précieux « temps ». Les premières minutes de jeux sont donc cruciales.

Je me présente, je suis Benoît du blog VideoGameCreation.fr. Nous allons voir dans cet article de game design comment réaliser un bon tutoriel en analysant Threes!, un jeu mobile de réflexion crée par Asher Vollmer en 2014. FYI : le créateur de 2048, s’est beaucoup inspiré du gameplay de Threes! en simplifiant quelques mécaniques.

Si vous souhaitez télécharger l’application gratuitement, il existe une version lite disponible sur le Google Play store et sur l’AppStore.

Tutoriel : définition

Guide d’apprentissage, qui permet d’aider un utilisateur novice à former de manière autonome à l’utilisation d’un jeu.

Donc dans un jeu vidéo, le principe est d’expliquer correctement au joueur toutes les mécaniques de jeux, les contrôles et les objectifs à court, moyen et long terme en très peu de temps.

On emploie souvent le mot « tutorial » (anglais) ou « tuto ». Tout le monde connaît les fameux « tutos beauté », mais ce n’est pas le sujet ici.

Le meilleur tutoriel

Le tuto le plus efficace et le moins frustrant pour les joueurs reste le « tutoriel joué ».

En étant actif, le joueur se sent plus impliqué et s’impatientent beaucoup moins que si le tutoriel était une simple vidéo ou un pavé de texte à lire.

D’ailleurs, on sait très bien que personne ne lit les textes à l’écran. 😉

Le joueur expérimente pas à pas toutes les mécaniques de jeux, il apprend, il est récompensé instantanément pour chaque action effectuée. De plus, il reste maître du rythme. Quoi de plus frustrant pour un « gamer » qu’un tuto qui l’oblige à regarder plusieurs fois d’affilié une vidéo pour expliquer les bases des contrôles.

Ahsley Vollmer, avait confié qu’il avait dut redésigné son tutoriel plus de 40 fois avant de trouver la bonne formule.

Les clés pour réussir un bon tutoriel

  • Minimalisme ;
  • Compréhension ;
  • Simplicité ;
  • Efficacité ;
  • Progression ;
  • Affordance ;
  • Expérimentation ;
  • Rythme ;
  • Récompense ;
  • Application immédiate et continue ;
  • Introduction des codes ;
  • Fun !!!

Passons à l’exemple concret avec Threes! en le découpant en plusieurs phases de micro-objectifs. On découvre alors que rien n’est laissé au hasard. C’est parti pour du rétro-engineering !

Tutoriel – Phase 1

Titre du jeu : Threes!

  • Nom du jeu mémorisé par le joueur 
  • Principe de la mécanique de base : Faire des « 3 »
  • Codes couleur des 3 tuiles différentes : bleu, rouge, gris

Grille :

  • Présentation de l’espace de jeu : Grille
  • Vide (Minimalisme)
  • Couleur grise = brique et immobilité (Affordance)

Message : « Faîtes glisser pour commencer »

  • Maîtrise donnée au joueur (Rythme)
  • Mode de contrôle du jeu 
  • Le joueur va slider de droite à gauche intuitivement

Tutoriel – Phase 2

Lorsque le joueur slide :

  • Arrivée des briques (Compréhension) ;
  • 2 nouveaux éléments de gameplay ;

Message : « Faîtes glisser pour déplacer » (habitue le joueur aux contrôles)

Mécanique + objectif : « Faites glisser ; déplace-les tous »

Tutoriel – Phase 3

  • Mécanique : Le mur bloque les tuiles
  • Mécanique + objectif : « Faites glisser 1 et 2 contre un mur pour les additionner. »

Tutoriel – Phase 4

  • Résultat de l’addition
  • Nouveau personnage
  • Message pour congratuler le joueur : « Bien ! »
  • Demande au joueur de faire glisser pour continuer (insister sur cette interaction)

Tutoriel – Phase 5

  • Mécanique + objectif : « Un autre nombre apparaît lorsque vous déplaces les tuiles ! »
  • Chaque « personnage » est différent par son visage et le son qu’il produit lorsqu’il apparaît
  • Demande au joueur de faire glisser pour continuer (insister encore sur cette interaction)

Tutoriel – Phase 6

  • Apparition d’un autre « 3 »
  • Mécanique + objectif : « 3 +3 = 6 » explication de la nouvelle fusion différente de la précédente. Le joueur les fusionne instinctivement les « 3 » (il n’y a rien d’autre à faire)

Tutoriel – Phase 7

  • Nouveau personnage
  • Congratuler le joueur : « Vous avez compris ! »

Tutoriel – Phase 8

  • Mécanique + objectif : « Fusionnez les 3 et plus en faisant des paires ». Les paires fonctionnent uniquement avec les chiffres supérieurs ou égale à « 3 ».
  • Si le joueur essaie de fusionner le « 3 » et le « 6 » pendant plusieurs déplacements, il comprendra qu’il ne peut pas. Ensuite, plusieurs « 3 » arrivent sur la grille.

Tutoriel – Phase 9

  • Objectif : créer un « 12 » pour continuer (plus besoin de réexpliquer le principe de l’addition)

Tutoriel – Phase 10

  • Nouveau nombre : « 12 »
  • Congratuler le joueur : « Fantastique ! »

Tutoriel – Phase 11

  • Mécanique + Objectif : « Le 1 s’additionne au 2 seulement » et inversement
  • Ces 2 seuls chiffres sont tout en couleur et sans visage, car leur mécanique de fusion est différente des autres.
  • Beaucoup de « 1 » et « 2 » apparaissent pour obliger le joueur à les fusionner

Tutoriel – Phase 12

  • Objectif : « Créer un 24 ! »

Tutoriel – Phase 13

  • Fin du tutoriel
  • La partie se poursuit
  • Le principe du jeu est rappelé : « Faites glisser et grandissez ! »

Tutoriel – Phase 14

  • Condition de victoire et but ultime du jeu : « Créez le plus grand nombre possible ! »

Tutoriel – Phase 15

  • Introduction de la prochaine tuile via le HUD

Tutoriel – Phase 17

  • Condition de défaite : « C’est la fin si le tableau est plein »
  • Apparition de l’interface
  • Phrases d’aides qui défilent (pas indispensable, mais utile)
    • « Faite glisser lentement pour voir » (le déplacement lent permet de tester avant de valider une action)
    • « Additionnez vos 1 et vos 2 » (rappel de la mécanique de base)
    • « Prêtez attention à la suivante » (la tuile suivante apparaît en haut)

Fin du tuto.

Quand concevoir un tutoriel ?

En général, le game designer se chargera de cette tâche à la fin du développement, une fois que toutes les mécaniques de jeux sont bien en places et que les développeurs ont identifié toutes les notions les plus importantes à transmettre aux joueurs. Cela dit, on peut aussi d’avoir besoin d’un tutoriel « temporaire » pendant la phase de produire dans le but présenter une version non définitive du jeu lors d’un salon par exemple.

En savoir plus

Voilà, j’espère que cette analyse vous a permis de comprendre l’importance du tutoriel. Si vous voulez avoir d’avantages d’astuces de pros sur le game design consultez mon blog :

👉 https://videogamecreation.fr

Il vous aidera à créer votre jeu vidéo de A à Z : de la conception jusqu’à la publication en passant par la monétisation et la communication.

Bon dev et à bientôt !

-Benoît

>