• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Jeux

Concevoir le web comme les jeux vidéos : les 3C –> Design the web with video games methods: the 3C

Les 3C

Derrière l’acronyme des 3C se cachent 3 éléments indispensables à la conception des jeux vidéos: Camera, Controls, Character. Soit: la caméra, les contrôles, et le personnage.

Définir les 3C dans un jeu, c’est une des première étape de sa conception, puisqu’il conditionne la façon dont le joueur va vivre le jeu.

Pour le web d’aujourd’hui, il faut comprendre ces notions pour ben concevoir ses animations et savoir à quoi il faut penser pour qu’elles soient bien conçues.

Dans les jeux vidéos

La caméra, c’est le point du vue du joueur. Dans les jeux on distingue principalement: 

  • La 1ère personne: on est dans la peau du personnage. On retrouve ça principalement dans les FPS (First Person Shooter), jusque là c’est logique; ou dans les survival horror, pour que le joueur ressente au mieux ce que vit le personnage.
  • La 3ème personne ou vue subjective: On voit le personnage, la caméra est autour de lui. suivant le type de jeu la position de la caméra sera différente: Pour un jeu d’horreur si la caméra est proche du personnage on réduit son champ de vision, ce qui renforce la pression sur le joueur; pour un jeu d’exploration il faut mieux élargir le champ de vision; pour les jeux rapide (Sonic par exemple), on l’élargit encore et on déplace la caméra devant le personnage pour que le joueur puisse anticiper ses actions
  • La « god view », qu’on retrouve beaucoup dans les jeux de Peter Molyneux, c’est quand on voit l’univers du dessus, tel un dieu, et qu’on le dirige vu du dessus. On retrouve ça dans les jeux de construction aussi, tel que Sim city.

Les contrôles, c’est la manière dont le joueur interagit avec le jeu. Les choix ne sont qu’une question d’ergonomie et d’accessibilité:

  • Sur un ordinateur on utilise surtout les flèches pour se déplacer dans un jeu de plateforme,
  • Pour les FPS, « ZQSD » pour se déplacer facilite l’accès à Espace pour sauter, Ctrl pour s’accroupir, Shift pour sprinter ou marcher… qu’on pourrait moins facilement faire depuis les flèches.
  • Sur un écran tactile on utilise ses doigts pour déplacer des éléments, donner une impulsion…

Si un jeu venait à sortir avec des contrôles différents de ceux qu’on trouve depuis de nombreuses années, il aurait sans doute du mal à trouver des adeptes.

Le personnage, c’est l’ensemble des actions que peut faire le joueur avec son personnage ou sur l’environnement. Si on peut sauter, sprinter, marcher, saisir des objets…

Les 3C, c’est un cumul de tout ça. Il n’y a pas d’ordre dans lequel les concevoir, ils interagissent trop pour les penser séparément. Il faut le faire en même temps, et affiner suivant le résultat. Par exemple en vue subjective on distingue:

  • le déplacement relatif caméra: quand on va vers la gauche ou la droite le personnage se déplace dans la direction de la caméra;
  • le déplacement relatif personnage: quand on va vers la gauche ou la droite la caméra tourne autour du personnage, puis on avancera pour aller dans la direction voulue.

Tout n’est qu’affaire de choix de conception.

Sur le web

Et bien ces problématiques commencent à arriver, dès qu’on souhaite réaliser une animation. Si on veut animer un élément sur sa page, il faut préciser comment il apparaît, comment il se déplacer et comment on le suit. On a donc besoin de parler de caméra, de travelling et autres notions.

On dispose aussi de nombreuses manières d’interagir sur une page web (les contrôles si vous avez bien tout suivi)

  • La souris, classique. Certains sites remplacent même le menu contextuel du clic droit afin de proposer des actions spécifiques au site.
  • Le clavier, qui permet d’utiliser des raccourcis sur des applications web comme on le ferait sur des logiciels (Ctrl + S pour enregistrer ses modifications par exemple).
  • Le doigt pour les écrans tactiles, voire le multi-touch, géré par les dernières versions d’Internet Explorer nativement ou sur les mobiles.
  • L’accéléromètre pour interagir en penchant son téléphone ou sa tablette…

Pour la partie « character » des 3C on n’y est pas encore, mais d’ici quelques temps quand on fera nos courses en ligne on se baladera peut-être dans les rayons du magasin depuis le site, il faudra alors penser à ce qu’on pourra faire (marcher, se déplacer à fond d’un rayon à un autre, ramasser des objets pour les placer soi même dans son panier…)

30/06/2015 25 MIN READ BY: Jonathan VALLET 0 COMMENT
SHARE
LIRE LA SUITE

Jonathan VALLET

Passionné de jeux vidéos, j'ai d'abord suivi un cursus de développeur avant de me spécialiser avec une année de Game Design. Après 2 ans et demi chez Ubisoft sur le développement de leur premier MMO par navigateur, puis quelques autres expériences, j'ai rejoint AdFab en 2013. Je m'occupe désormais du développement d'applis mobile et de sites généralement très graphiques.

Tip : Enlever jQuery

Magento - Faire une jointure sur les tables eav

VOUS POURRIEZ AIMER

Design Frontend Jeux Concevoir le web comme les jeux vidéos : Etude de cas

Frontend Jeux Le cycle de vie d’un jeu

Frontend Jeux J13K : développer un jeu de moins de 13KB

Jeux JS13K – Post Mortem – EN

Jeux Concevoir le web comme les jeux vidéos : Signs & Feedbacks

Jeux JS13K 2018 – Post mortem – FR

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect