- 1. Introduction1
- 2. Outils utilisés2
- 3. Séance 1 : introduction, bases de l'utilisation de la 3D, animation, etc.3
- 4. Séance 2 et 3: modèles 3D, moteurs physique, collisions4
- 5. Séance 4 : particules, asset manager, son et musique, rays, multiple caméras5
- 6. Séance 8 : FPS camera, crosshair, gun shots, hosting on heroku, etc.6
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, et qui pourra être un bon point de départ pour le concours Games on Web 2022.
Outils utilisés
- La librairie BabylonJS7
- Visual Studio Code8 un puissant éditeur de code source gratuit (mais vous pouvez en prendre un autre si vous préférez)
- Git9 pour la gestion de versions, pour récupérer les exemples du cours, pour rendre votre projet à la fin etc.
Séance 1 : introduction, bases de l'utilisation de la 3D, animation, etc.
Supports de cours :
Séance 2 et 3: modèles 3D, moteurs physique, collisions
Supports de cours :
Séance 4 : particules, asset manager, son et musique, rays, multiple caméras
Support de cours
Séance 8 : FPS camera, crosshair, gun shots, hosting on heroku, etc.
Support de cours :
- Game folder ready to be deployed to Heroku (includes index.js, a minimal NodeJS server) : GitHub repository24 of a prokect ready to go)
cd
into the game folder npm install
npm run start
to run the server, the game should be available on http://localhost:300025
- If you push this to a github repo, then link this repo to a Heroku application, it should work. See the section in the slides with screenshots, on how to do this...
Notes de bas de page
1 http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/SD4H_Minor_Programming_3D_Games_on_the_Web_2021-2022#Introduction
2 http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/SD4H_Minor_Programming_3D_Games_on_the_Web_2021-2022#Outils_utilis.c3.a9s
3 http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/SD4H_Minor_Programming_3D_Games_on_the_Web_2021-2022#S.c3.a9ance_1_.3a_introduction.2c_bases_de_l'utilisation_de_la_3D.2c_animation.2c_etc.
4 http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/SD4H_Minor_Programming_3D_Games_on_the_Web_2021-2022#S.c3.a9ance_2_et_3.3a_mod.c3.a8les_3D.2c_moteurs_physique.2c_collisions
5 http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/SD4H_Minor_Programming_3D_Games_on_the_Web_2021-2022#S.c3.a9ance_4_.3a_particules.2c_asset_manager.2c_son_et_musique.2c_rays.2c_multiple_cam.c3.a9ras
6 http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/SD4H_Minor_Programming_3D_Games_on_the_Web_2021-2022#S.c3.a9ance_8_.3a_FPS_camera.2c_crosshair.2c_gun_shots.2c_hosting_on_heroku.2c_etc.
7 https://www.babylonjs.com/
8 https://code.visualstudio.com/
9 https://git-scm.com/
10 https://docs.google.com/presentation/d/1rhYnQDSMArQPB_byawMKAv5LNe6WgEvllr_ABXBc0sk/edit?usp=sharing
11 https://docs.google.com/presentation/d/1rhYnQDSMArQPB_byawMKAv5LNe6WgEvllr_ABXBc0sk/edit?usp=sharing
12 http://miageprojet2.unice.fr/@api/deki/files/3020/=3_-_ModelesEclairement.pdf
13 http://miageprojet2.unice.fr/@api/deki/files/3019/=1_-_TransformationsGeometriques.pdf
14 https://github.com/micbuffa/BabylonJS_course
15 https://docs.google.com/presentation/d/1rhYnQDSMArQPB_byawMKAv5LNe6WgEvllr_ABXBc0sk/edit?usp=sharing
16 https://docs.google.com/presentation/d/1-UUWuyDyVP7HHXb0YBJw40PhiuSK1WTo6qLBa02QuSk/edit?usp=sharing
17 https://docs.google.com/presentation/d/1rhYnQDSMArQPB_byawMKAv5LNe6WgEvllr_ABXBc0sk/edit?usp=sharing
18 https://docs.google.com/document/d/1np4DHV1fz2T7mpHPAMOGI-IecWCVPX2p-iX1DQqp7yA/edit?usp=sharing
19 https://github.com/micbuffa/BabylonJS_course
20 https://docs.google.com/presentation/d/1Dd2MZ59nZ-PJX4r_KoR45RUooY0df-4tn2436i6Q4IA/edit?usp=sharing
21 https://github.com/micbuffa/BabylonJS_course
22 https://docs.google.com/presentation/d/1cPy_u_yNp9tGkFu0h00ZlCmIk3FTboMUr8C_TyaKITI/edit?usp=sharing
23 https://github.com/micbuffa/BabylonJS_course
24 https://github.com/micbuffa/gameHerokuBabylon.git
25 http://localhost:3000