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: classes, cloning models, physics engine, actions, triggers, collisions

• Slides BabylonJS, leçons 1-6 (de 37 à 40)
• Slides BabylonJS jeu No 2, leçons 7 à XXX, (de 1 à XXX)
• Projet zip avec un char qui tire et suit la souris. 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) :