- 1. Introduction
- 2. Outils utilisés
- 3. Séance 1 : introduction à JavaScript, structure d'un projet, etc.
- 4. 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)
- 5. Séance 3 et 4 : classes, cloning models, physics engine, actions, triggers, collisions
- 6. Séance 5 : particules, asset manager, effets sonores
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
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 :
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...)
- Jeu de char en 3D avec Babylon JS + tourelle + canon animés séparéments. Lancer avec la commande "node server.js" puis ouvrir l'URL qui s'affiche. C'est multi joueurs...
- 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 : particules, asset manager, effets sonores
Vous n'êtes pas connecté. Connexion 