MBDS ESTIA 2021-2022

Introduction

Je vous propose de pratiquer le langage JavaScript à travers l'apprentissage de la 3d au travers de la librairie BabylonJS. On écrira ensemble un petit jeu vidéo qui tournera à 60 images/seconde dans vos navigateurs.

Outils utilisés

• La librairie BabylonJS⁸ 
• Visual Studio Code⁹ un puissant éditeur de code source gratuit,
• Git¹⁰ pour la gestion de versions, pour récupérer les exemples du cours, pour rendre votre projet à la fin etc.

 Séance 1 : introduction à JavaScript, structure d'un projet, etc.

Supports de cours

• Mooc "Introduction à JavaScript"¹¹
   
• Slides BabylonJS (de 1 à 18)
  
  ¹²
• Video from this course (9h-12h)
  • Partie 1 (intro à JavaScript) : https://youtu.be/2yP_OD2sN-0¹³ 
  • Partie 2 (intro à BabylonJS, bases, materials, éclairages etc.) : https://youtu.be/wNFh0PGoB2s¹⁴
     
• Compléments en français
  • Détails sur les couleurs, lumières, matérials¹⁵ 
  • Rappels sur les transformations géométriques 2D et 3D¹⁶ 

•  Github repository du cours que l'on utilisera dans toutes les séances¹⁷

Exemples fait en live coding:

• Eléments de base JavaScript : https://jsbin.com/visivuk/edit?js,console,output¹⁸
• Petit exemple de gestion d'un click : https://jsbin.com/laleyon/edit?html,js,console,output¹⁹
• Pour le reste, voir le MOOC, ou bien chercher "MDN array", "MDN classes", "MDN object basics", "MDN events", "MDN DOM" etc.
  
   
• Exemple canvas 2D : https://jsbin.com/lijecet/edit?html,css,js,output²⁰

Séance 2 : on va plus loin avec Babylon (terrains/height maps, contrôler un objet, gravité, collisions, mesh avec squelette et animations, cloner des meshs)

Support de cours :

• Slides BabylonJS (de 19 à 37)
  
  ²¹
• Github repository du cours que l'on utilisera dans toutes les séances²²
   
• Vidéos du cours (14h-18h)
  • Partie 1 (follow caméra, déplacer un objet avec le clavier, front-vector etc.) : https://youtu.be/twwrhDx0X10²³ 
  • Partie 2 : charger un modèle articulé (le Dude), le faire suivre le tank, avec changement de l'orientation: https://youtu.be/3XT6Bl5UpeM²⁴ 

 Séance 3 et 4 : classes, cloning models, physics engine, actions, triggers, collisions

• Slides BabylonJS, partie 1 leçons 1-6 (de 37 à 40)²⁵
• Slides BabylonJS partie 2, (de 1 à XXX) (moteur physique)
  
  ²⁶
• Modèles 3D partagés depuis mon Google drive (char, zombie, fille avec épée etc.)²⁷
  • Ici le projet d'un de mes élèves²⁸, utilisant le char 3D (il faut nodeJS installé. Faire "npm i" puis "node server.js", puis ouvrir le lien affiché. C'est multi joueurs. Plusieurs joueurs peuvent ouvrir le même lien dans plusieurs onglets du navigateur. Testable en ligne ici !²⁹
     
• Projet zip avec un char en 2D qui tire et suit la souris³⁰. Montre l'utilisation des modules JavaScript (imports et exports). Dezipper, ouvrir le folder avec Visual Studio Code, ouvrir le fichier index.html et le lancer avec click droit/Open With Live Server (si vous n'avez pas cette option, installez l'extension VSCode "Live Server"). C'est un bon exemple de squelette de jeu minimal pour faire un jeu de chars. Montre les classes, les événements, le dessin et l'animation dans un canvas HTML5. 
   
•  MOOC HTML5 Apps and Games³¹ (voir collisions dans chapitre 2 sur la programmation de jeux...)
   
• Github repository du cours que l'on utilisera dans toutes les séances
  
  ³²
• Vidéos du cours (8h30-12h30) : 
  
  
  • Vidéo séance 3 (matin)³³, fin du jeu de transparents de la veille (37-40): charger un modèe 3D, utiliser une classe pour le Dude, etc.
  • Vidéo séance 4 (après-midi)³⁴ : moteur physique, calcul d'une bounding box pour le dude, tirer des boulets de canon, utiliser un laser. Vous trouverez ici la vidéo du cours que j'ai donné l'année dernière sur ce chapitre. Argl, hier mon ordinateur a eu des soucis en fin de sessions, et Zoom n'a enregistré que des fichiers corrompus, je pense que c'est quand j'ai débranché mon second écran. Du coup je vous ai mis une vidéo du cours de l'an dernier sur ce chapitre.

 Séance 5 et 6  : particules, asset manager, effets sonores

• Slides BabylonJS partie 3³⁵ 
• Facultatif : Slides partie 4³⁶ (caméra FPS sur le Dude, tir à la FPS avec crosshair, gun etc.)

Videos du cours:

• Matin (suivre le terrain, caméra qui suit le dude et déplacements du dude, asset loader etc.)
  • Partie 1 : https://youtu.be/7Y13J4agwng³⁷
  • Partie 2: https://youtu.be/bjeWDtqJqeE³⁸ 
• Après-midi : aide aux projets étudiants, pas de vidéo.

Mini projet à rendre 

• Date de rendu : 13 Avril.
• A faire seul ou en binome
   
• Rémi Mengelle va m'envoyer un google spreadsheet avec l'ensemble des projets. Les colonnes suivante seront renseignées
  
  • nom1, nom2, emails, URL du repository github (vérifier qu'il est public)
  • Le github doit avoir un README qui explique ce que vous avez fait (en particulier, les ressources utilisées, autres projets, playgrounds, tutos, etc.), en insistant sur ce dont vous êtes le plus fier....
  • Facultatif : URL du jeu hébergé (facile à héberger sur "github pages")
  • Facultatif : URL de la video de 30s à 1mn sur YT, sympa car après si c'est bien je peux partager facilement...
     
• Rémi m'enverra le lien vers cette google spreadsheet avec tous les projets....