Accueil > Intranet Michel Buffa > DS4H Mineure 3D Game Programming on the Web

DS4H Mineure 3D Game Programming on the Web

De $1

Introduction

Je vous propose de pratiquer le(s) langage(s) JavaScript ou TypeScript à travers l'apprentissage de la 3D avec la librairie open source 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 2024 dont le thème est "Olympic Edition".

Outils utilisés

  • La librairie BabylonJS 
  • Visual Studio Code puissant éditeur de code source gratuit (mais vous pouvez en prendre un autre si vous préférez), que je vous conseille d'utiliser avec l'IA d'aide au codage Copilot , qui connait très bien BabylonJS.
  • Git pour la gestion de versions, pour récupérer les exemples du cours, pour rendre votre projet à la fin etc.
  • La doc de BabylonJS
  • La page de ressources que j'ai préparée, en particulier les vidéos d'Olivier Arguimbau qui sont très à jour et réalisées pour le concours Games on Web 2024 (il enseigne cette matière aux élèves de la Miage d'Aix-en-provence.
    • Voir aussi son site GitHub qui contient les codes sources présentés dans ses vidéos.

Séance 1 : introduction, bases de l'utilisation de la 3D, animation, etc.

Supports de cours :

Projet "moderne" en TypeScript, avec la dernière version de BabylonJS + Webpack :

  • Voir le projet "FromScratch" d'Olivier Arguimbaud + la vidéo "Bonus 1" qui explique l'environnement de travail. Voir aussi la vidéo "Running Granny" qui explique le jeu qui est à l'intérieur.

Séance 2: étude d'un projet avec environnement de build, animation de personnages, moteur physique, collisions

 

Séance 3 : Début de votre projet pour préparer la venue du développeur BabylonJS le 29 Mars de 12H à 14H

AUjourd'hui nous n'avancerons pas le cours, vous travaillerez sur votre projet de jeu afin d'avoir quelque chose à montrer à Sébastien Vandenbergue, l'architecte principal de BabylonJS, qui vient rencontrer les étudiants pour le regroupement du vendredi 29 Mars de 12h à 14h dans l'amphi A2.

Normalement un premier devoir noté est à rendre pour le 25 Mars, nous le repoussons de 10 jours, la nouvelle deadline est le 31 Mars au soir. 

  • Travail à faire : rendre l'état d'avancement de votre projet, sur GitHub, travail individuel !
    • Attendu au minimum: du gameplay, l'utilisation de plusieurs techniques vues en cours, un prototype / preuve de concept de ce que vous rendrez à la fin du cours.
  • Rappel du thème: "Olympic Edition".
  • Vous m'inviterez comme collaborateur à votre repository.
  • N'oubliez pas de décrire votre travail et d'indiquer votre vrai nom dans le README.
  • Décrivez aussi le jeu que vous comptez développer pour le concours.
  • Une petite vidéo sur YT (même "non répertoriée") est un plus, l'hébergement de votre jeu également.

 Séance 4: particules, asset loaders, sons et musiques, multiple caméras...

 Séance 5: projet

Exemple de material facilement réutilisables (créés avec le Node Material Editor de BabylonJS) :

  • Ici un playground qui montre comment réutiliser juste avec un ID sous forme de chaîne de caractère des "materials" créés par d'autres personnes. Material = la texture qui va être appliquée sur vos meshes. On peut faire des material utilisant des "shaders" WebGL qui peuvent à la fois modifier la couleur des pixels sur les faces des meshes (fragment shaders) mais aussi leur position (vertex shaders) : https://playground.babylonjs.com/#1QIWRQ 
    La ligne de code intéressante est la ligne 41, changez juste l'id du material et vous aurez un résultat différent.
  • Ici quelques threads dans le forum BabylonJS avec des exemples de materials partagés par les développeurs de la communauté : https://forum.babylonjs.com/t/node-m...-examples/6048 mais aussi 
  • Ici un exemple de material qui donne un effet de "disparition/dissolve", montre aussi comment utiliser les "animations" de BabylonJS (à ne pas confondre avec les animations de squelettes de personnages articulés, là on parle d'animations simples : un objet qui bouge tout seul etc.) : https://forum.babylonjs.com/t/node-m...effect/11895/8

Exemple de génération procédurale de terrain/décorshttps://www.youtube.com/watch?v=C3V-Xbj9cCE

 

 

Mots clés:
 
Images (0)
 
Commentaires (0)
Vous devez être connecté pour poster un commentaire.